V VibeCoding 365
사전 목록 tooling

VIBECODING 365 / DICTIONARY

빌드

Build

기초 난이도: 기초태그: 빌드 · 배포준비 · 검증

DEFINITION

빌드는 소스 코드를 실제로 배포·실행할 수 있는 결과물로 바꾸는 과정이다. 웹 프론트 바이브 코딩에서 가장 자주 만나는 예는 Vite 같은 빌드 도구의 프로덕션 빌드다. Vite 문서는 자신을 모던 웹 프로젝트를 위한 빌드 도구라고 소개하며, 개발용 서버와 별도로 “코드를 묶어 프로덕션용으로 최적화된 정적 자산으로 내보내는 빌드 명령”이 핵심 축이라고 설명한다.

개발 중에는 브라우저가 모듈을 바로 받아 빠르게 고치는 흐름이 편하지만, 그대로 프로덕션에 올리면 요청이 잘게 쪼개져 네트워크 왕복이 늘어난다. Vite가 Why Vite에서 강조하듯, 그래서 배포 전에는 번들로 묶는 빌드가 여전히 필요하다. 타입스크립트를 자바스크립트로 바꾸고, 여러 파일을 합치며, CSS·이미지를 정리하고, 브라우저가 이해할 형태로 낮추는 일이 이 단계에 모인다.

개발 서버와 빌드는 다른 버튼이다

Vite 기본 스크립트는 보통 세 갈래다. 개발 서버를 켜는 명령, 프로덕션용으로 빌드하는 명령, 그 결과물을 로컬에서 미리 보는 명령이다. 화면에서 “된다”고 느껴도 빌드가 깨지면 배포본은 안 나올 수 있다. AI가 고친 코드가 개발 모드에서만 통과하고, 빌드 단계에서 import 오류나 타입 오류를 드러내는 경우가 바로 그 차이다.

프로덕션 결과물이 향하는 곳

Vite 프로덕션 빌드는 기본적으로 널리 쓰이는 모던 브라우저 범위를 목표로 정적 파일을 만든다. 필요하면 타깃을 낮추거나 레거시 플러그인으로 더 오래된 환경을 지원할 수 있다. 결과물은 보통 배포 플랫폼이 그대로 서빙하는 HTML·JS·CSS 묶음이다. 라이브러리로 배포할 때는 별도 라이브러리 모드 설정을 쓰라는 안내도 같은 문서 계열에 있다.

바이브 코딩에서의 위치

빌드는 “예쁘게 쓰기”가 아니라 배포 직전 관문이다. 포매터·린트가 스타일과 패턴을 보고, 빌드는 실행 가능한 산출물로 통과시키는지를 본다. 기능 브랜치를 머지하기 전에 빌드 한 번을 돌리면, AI가 남긴 깨진 경로나 환경 변수 누락을 사람이 눈으로 찾기 전에 잡을 수 있다.

ENGLISH

Build

EXAMPLE

npm run build # Vite 기본: vite build

REFERENCE

vitejs.dev/guide/