Vite 처음 시작하기

Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로 웹 프로젝트를 시작하는 아주 기초적인 방법을 알려드리겠습니다.

Vite란?

Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험을 향상시키기 위해서 등장한 차세대 번들러입니다. 브라우저에서 지원하는 ESM(ES Modules)를 적극적으로 활용하고, Rust로 작성된 Rolldown 번들러와 Oxc 컴파일러를 내부적으로 사용하여 네이티브에 가까운 속도를 내는 자바스크립트 개발 도구이죠.

Vite는 예전부터 널리 사용되던 번들러인 Webpack보다 설정이 훨씬 쉽고 간단하며, 설정이 필요 없기로 유명하던 번들러인 Parcel보다도 훨씬 빠릅니다. 이로 인해서 기존 번들러보다 뛰어난 개발자 경험을 제공하여 npm 주간 다운로드 6,500만 회를 돌파하며 사실상 표준 빌드 도구로 자리 잡았습니다.

아래 2023년 State of JavaScript 설문 결과를 보시면, 빌드 도구 부분에서 Vite(73%)가 Parcel(30%)을 아득히 넘고 Webpack(90%)에 이어서 사용률 2위를 기록했습니다. 2021년에 20% 사용률로 처음 등장한 이래 무서운 성장세를 보여주었죠.

Vite를 써본 응답자의 만족도는 더욱 인상적이었는데요. 88%로 압도적인 1위를 차지하고 있으며, Webpack의 만족도는 45%까지 곤두박질 친 것을 볼 수 있습니다.

그 이후 성장세는 더욱 가속화되어, State of JS 2025 설문 결과에서는 Vite가 S등급을 차지하며 빌드 도구의 절대 강자로 자리매김했습니다.

참고로 많은 분들이 영문 철자만 보시고 Vite를 “바이트”라고 발음해야 하는 걸로 오해하시는데요. 사실 Vite라는 이름은 “빠름”을 의미하는 프랑스어에서 유래되었고 그래서 정확한 발음은 “비트”라고 합니다. 한국 개발자들 사이에서는 우스갯소리로 빛처럼 빠르다고 “빛”이라고도 많이 부르는 것 같습니다. 😄

Vite 8에서 달라진 점

2026년 3월에 출시된 Vite 8은 Vite 역사상 가장 큰 아키텍처 변화를 가져왔습니다.

이전 버전까지 Vite는 개발 서버에서는 Go로 작성된 esbuild를, 프로덕션 빌드에서는 Rollup을 사용하는 이중 구조였는데요. 두 도구 사이에서 미묘한 동작 차이가 발생하는 경우가 종종 있었습니다. Vite 8에서는 이를 Rust 기반의 단일 번들러인 Rolldown으로 통합하여 개발과 프로덕션 환경 간의 일관성이 훨씬 좋아졌습니다.

자바스크립트/타입스크립트 변환과 코드 압축도 Rust 기반의 Oxc가 담당하게 되었고, CSS 압축에는 Lightning CSS가 기본으로 사용됩니다. 이 모든 것이 Rust로 통일되면서 빌드 속도가 Rollup 대비 10~30배까지 빨라졌는데요. Linear는 프로덕션 빌드가 46초에서 6초로, Beehiiv는 64%까지 단축되었다고 하니 대단하죠. 🚀

참고로 Vite 8은 Node.js 20.19 이상 또는 22.12 이상을 요구합니다.

Vite 프로젝트 생성

Vite는 누구나 손쉽게 프로젝트를 시작할 수 있도록 명령줄 도구(CLI)를 제공하고 있는데요. 이 명령줄 도구는 npm 패키지 저장소에 vite라는 이름으로 등록되어 있습니다.

Node.js를 사용하신다면 터미널에서 npm 명령어를 사용하여 Vite 프로젝트를 시작할 수 있습니다.

$ npm create vite@latest

차세대 자바스크립트 런타임인 Bun을 사용하신다면 bun 명령어를 사용하시면 됩니다.

$ bun create vite

위 명령어를 실행하면 어떤 유형의 프로젝트를 만들건지 다양한 질문이 나올 겁니다. 답변을 선택하시면 이를 토대로 별다른 추가 설정 없이 바로 개발을 시작할 수 있는 프로젝트 하나가 뚝딱 만들어지죠.

본 포스팅에서는 최대한 간단한 실습을 위해서 TypeScript를 사용하는 Vanilla(아무 프레임워크도 안 쓰는) 프로젝트를 만들어 보겠습니다. vite-project 폴더에 만들겠습니다.

✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /Users/daleseo/Temp/vite-project...

Done. Now run:

  cd vite-project
  bun install
  bun run dev

다양한 자바스크립트 프로젝트 생성법에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

개발 서버 구동

개발자 입장에서 Vite가 가장 매력적인 이유는 무엇보다 말도 안 되게 빠르고 올라가고 실시간으로 코드 변경을 반영해주는 개발 서버입니다.

위에서 프로젝트를 생성하면 나오는 대로 프로젝트 폴더에 들어가서 패키지만 설치하면 바로 개발 서버를 구동해볼 수 있습니다.

$ cd vite-project
$ bun install
bun install v1.3.9 (cf6cdbbb)

+ typescript@5.9.3
+ vite@8.0.0

18 packages installed [1.92s]
$ bun run dev
$ vite

  VITE v8.0.0  ready in 703 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

(Node.js를 쓰신다면 bun install 대신에 npm install, bun run dev 대신에 npm run dev를 실행하시면 됩니다.)

이제 브라우저에서 http://localhost:5173/을 접속해보시면 카운터 버튼이 있는 웹사이트 하나가 열릴 것입니다.

Vite의 개발 서버는 프로젝트 내의 소스 코드를 감시하다가 코드가 변경되면 눈 깜짝할 사이에 브라우저에 반영을 해주는데요. 이러한 HMR(Hot Module Replacement) 기능은 Webpack이나 Parcel과 같은 기존 번들러도 지원했지만, Vite는 내부적으로 Rust로 작성된 Rolldown과 Oxc를 사용하기 때문에 체감 속도가 크게 차이 납니다.

간단한 실습을 위해서 src/counter.ts 파일을 아래와 같이 수정한 후 저장해보세요. Cmd + S 버튼을 누르자마자 수정분이 웹사이트에 반영이 되는 것을 볼 수 있으실 것입니다. 🏎️

export function setupCounter(element: HTMLButtonElement) {
  let counter = 0;
  const setCounter = (count: number) => {
    counter = count;
    // element.innerHTML = `count is ${counter}`;
    element.innerHTML = `카운트는 ${counter} 입니다.`;
  };
  element.addEventListener("click", () => setCounter(counter + 1));
  setCounter(0);
}

프로젝트 빌드

Vite는 프로덕션(production) 빌드(build) 시에도 Rolldown을 사용하여 상용 환경에 최적화된 번들을 생성해주는데요. Rolldown은 Rollup과 호환되는 플러그인 API를 제공하므로, 기존 Rollup 생태계의 풍부한 플러그인을 그대로 활용할 수 있다는 장점이 있습니다.

프로젝트를 빌드하면 우선 타입스크립트로 작성된 코드가 자바스크립트로 컴파일(compile)되고, 프로젝트의 최상위 경로에 dist 폴더가 생기고 그 안에 HTML, CSS, JS 파일이 생기는데요.

Bun을 사용하신다면 터미널에서 bun run build 명령어를 실행하면 됩니다.

$ bun run build
$ tsc && vite build
vite v8.0.0 building client environment for production...
✓ 9 modules transformed.
dist/index.html                  0.46 kB │ gzip: 0.29 kB
dist/assets/vite-BF8QNONU.svg    8.70 kB │ gzip: 1.60 kB
dist/assets/hero-5sT3BiRD.png   44.91 kB
dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
dist/assets/index-BZHxPfsZ.js    4.52 kB │ gzip: 2.02 kB
✓ built in 55ms

Node.js를 쓰신다면 터미널에서 npm run build 명령어를 실행하면 됩니다.

$ npm run build

> vite-project@0.0.0 build
> tsc && vite build

vite v8.0.0 building client environment for production...
✓ 9 modules transformed.
dist/index.html                  0.46 kB │ gzip: 0.29 kB
dist/assets/vite-BF8QNONU.svg    8.70 kB │ gzip: 1.60 kB
dist/assets/hero-5sT3BiRD.png   44.91 kB
dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
dist/assets/index-BZHxPfsZ.js    4.52 kB │ gzip: 2.02 kB
✓ built in 56ms

dist 폴더에 생성된 번들 파일들을 그대로 상용 서버에 올리면 웹사이트가 배포가 완료되게 됩니다. 물론 실제 프로젝트에서는 직접 올리지 않고 CI/CD 도구를 통해서 배포를 자동화하겠죠?

프로덕션 프리뷰

Vite를 통해서 최종 빌드 결과물을 기준으로 웹 애플리케이션을 돌려볼 수도 있는데요. 상용 환경에 애플리케이션을 배포하기 전에 로컬 환경에서 미리 확인해보고 싶을 때 유용합니다.

터미널에서 bun run preview 또는 npm run preview 명령어를 실행하면 프로덕션 프리뷰를 할 수 있습니다.

$ bun run preview
$ vite preview
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

이제 브라우저에서 http://localhost:4173/을 열어보면 상용 환경에서 웹사이트가 어떻게 보일지 확인할 수 있을 것입니다. 🎉

참고로 아까 전에 개발 서버로 웹사이트를 띄울 때는 5173 포트를 사용했었는데요. 프로덕션 프리뷰를 할 때는 포트 충돌이 나지 않도록 4173을 기본 포트로 사용합니다. 참 세심한 배려죠?

마치며

이상으로 Vite 8로 간단한 타입스크립트 프로젝트를 어떻게 시작할 수 있는지 알아보았습니다. Vite의 개발 서버를 사용해보고, 프로젝트 빌드와 프리뷰도 해보았는데요. Rolldown 기반으로 통합된 Vite 8의 빠른 속도를 직접 체감해보세요.

Vite 연관된 포스팅은 Vite 태그를 통해서 쉽게 만나보세요!

Vite의 활용 범위가 궁금하시다면, Next.js API를 Vite 위에서 재구현한 Cloudflare Vinext도 흥미로운 사례입니다. Vite에 Vitest, Oxlint, Oxfmt까지 하나로 묶어주는 Vite+ 통합 툴체인도 살펴보세요.