빌드(build)가 뭐야 — 개발용 코드를 배포용 완제품으로 굽기

빌드(build)는 개발 중인 코드를 사람들이 실제로 쓸 수 있는 형태로 바꾸고 다듬어 포장하는 과정입니다. 2026년 7월 기준으로 AI에게 코드를 받아 웹을 만들어 본 사람이라면, "다 됐는데 왜 인터넷에 안 올라가지?" 하는 순간 이 단어를 만나게 됩니다.

이 글을 읽으면 npm run build가 뭘 하는지, 왜 배포 전에 꼭 한 번 거쳐야 하는지 감이 잡힙니다.

빌드는 개발자가 편하게 쓰던 코드(반죽)를, 브라우저가 빠르게 읽을 완제품(빵)으로 굽는 단계입니다. 이 과정을 거쳐야 비로소 인터넷에 올릴 수 있는 파일이 나옵니다.

왜 빌드가 필요할까

개발 중에 쓰는 코드는 사람이 읽고 고치기 편하게 되어 있습니다.

줄바꿈도 많고, 주석도 붙어 있고, 최신 문법도 자유롭게 씁니다.

문제는 이 상태 그대로는 브라우저가 잘 못 읽거나, 읽어도 느리다는 점입니다.

최신 문법은 옛 브라우저가 못 알아듣고, 파일이 수십 개로 흩어져 있으면 하나씩 불러오느라 로딩이 느려집니다.

그래서 사람이 편한 코드를 브라우저가 편한 코드로 한 번 바꿔줘야 합니다.

이 변환 작업을 자동으로 처리하는 게 바로 빌드입니다.

빌드가 정확히 뭔가

빌드는 요리로 치면 굽기 단계에 가깝습니다.

밀가루·계란·설탕은 재료일 뿐, 그대로 손님에게 낼 수 없습니다.

오븐에 넣어 구워야 손님이 먹을 수 있는 빵이 됩니다.

개발용 코드가 반죽이라면, 빌드는 오븐에 넣는 과정이고, 나온 결과물이 배포할 완제품입니다.

이 굽기를 시작하는 명령이 대부분 아래 한 줄입니다.

npm run build

이 명령을 치면 도구가 알아서 코드를 훑고, 변환하고, 압축해서 결과물 폴더를 만들어 줍니다.

빌드 안에서는 무슨 일이 일어날까

굽기라는 한 단어 안에는 사실 여러 작업이 한꺼번에 들어 있습니다.

크게 세 가지로 나눠 볼 수 있습니다.

첫째, 변환입니다.

최신 문법이나 타입스크립트를 옛 브라우저도 읽는 자바스크립트로 번역합니다. 이걸 트랜스파일이라고 부릅니다.

둘째, 묶기입니다.

흩어진 여러 파일을 몇 개로 합쳐 로딩을 빠르게 만듭니다. 이 역할을 하는 도구가 번들러입니다.

셋째, 압축입니다.

공백·주석·긴 이름을 걷어내 파일 크기를 줄입니다.

이 세 가지는 각각 따로 다룰 만큼 이야깃거리가 많아서, 트랜스파일과 번들러는 다음 편에서 하나씩 풀어 보겠습니다.

빌드 결과물은 어디에 생길까

빌드가 끝나면 보통 dist나 build라는 이름의 새 폴더가 생깁니다.

이 안에 브라우저가 바로 읽는 완성된 파일들이 들어 있습니다.

개발용 코드와 빌드 결과물이 어떻게 다른지 표로 정리하면 이렇습니다.

구분	개발용 코드	빌드 결과물
읽는 대상	사람(개발자)	브라우저
파일 상태	읽기 쉽게 풀어 씀, 주석 많음	압축·최적화됨
위치	src 등 작업 폴더	dist·build 폴더
쓰임	고치고 다듬는 용도	인터넷에 올리는 용도

이 dist 폴더를 서버나 호스팅에 올리는 단계가 바로 배포입니다.

배포가 무엇인지는 다음 편에서 따로 다루겠습니다.

---

그런데 AI랑 무슨 상관일까

요즘은 코드를 직접 짜지 않고 AI에게 받아 쓰는 경우가 많습니다.

그런데 AI가 준 코드를 내 컴퓨터에서 잘 돌려 놓고도, 막상 남에게 보여주려면 한 단계가 더 필요합니다.

바로 이 빌드입니다.

AI가 만든 코드도 개발용 상태라서, 인터넷에 올리기 전에 완제품으로 한 번 구워야 합니다.

개인적으로는 이 빌드 단계가 "내 컴퓨터에서만 되던 것"과 "남도 쓰는 진짜 서비스" 사이의 문턱이라고 봅니다.

AI가 코드를 대신 짜주는 시대일수록, 그 코드를 실제 서비스로 올리는 이 중간 단계를 아는 사람이 결국 결과물을 완성합니다.

자주 묻는 질문

빌드는 코드를 짤 때마다 매번 해야 하나요?

아닙니다. 개발 중에는 빌드를 따로 하지 않아도 됩니다.

빌드는 남에게 보여줄 완제품을 만들 때, 즉 배포 직전에 한 번 하는 작업입니다.

개발 중에는 저장하면 화면이 바로 바뀌는 개발 서버를 대신 씁니다.

빌드하면 원래 코드가 사라지나요?

아닙니다. 원래 작업하던 코드는 그대로 남습니다.

빌드는 그 코드를 재료 삼아 별도의 결과물 폴더(dist·build)를 새로 만드는 것입니다.

원본은 계속 고치면서, 필요할 때마다 다시 구우면 됩니다.

정리

빌드는 개발용 코드를 배포용 완제품으로 굽는 과정입니다.

npm run build 한 줄이 변환·묶기·압축을 한꺼번에 처리해 dist 폴더를 만들어 줍니다.

이 완제품 폴더를 인터넷에 올리는 게 배포이고, 그 안에서 벌어지는 변환·묶기는 다음 편에서 이어 풀어 보겠습니다.

 

 

참고한 자료

npm 공식 문서의 스크립트 설명과 MDN 웹 문서의 개발·배포 개념 설명을 참고했습니다. 도구별 빌드 명령과 결과물 폴더 이름은 프로젝트 설정에 따라 달라질 수 있어, 실제 사용 시 각 도구 공식 문서 확인을 권합니다.