Vite란? 앱 빌더를 위한 쉬운 가이드

Vite(‘비트’로 발음하며, 프랑스어로 “빠르다”라는 뜻)는 웹사이트와 웹 앱을 위한 빌드 도구입니다. 만드는 동안에는 변경 사항을 브라우저에서 거의 즉시 보여주는 개발 서버를 실행합니다. 출시 준비가 되면 코드를 어떤 웹 호스트에서도 제공할 수 있는 작고 최적화된 파일로 패키징합니다. 무료이고 오픈소스이며, 많은 React, Vue, Svelte 프로젝트 뒤에서 기본으로 쓰이는 도구입니다.

AI로 만들 때 Vite가 중요한 이유

Vite 명령어를 직접 입력할 일은 없을지 모르지만, AI 앱 빌더로 앱을 만들었다면 Vite가 아마 그 앱을 실행하고 있을 것입니다. Mythex는 다른 요청이 없으면 새 프로젝트를 Vite + React + TypeScript + Tailwind로 시작합니다(기술 스택이 선택되는 방식).

Vite가 무엇을 하는지 알면 다음에 도움이 됩니다:

• 미리보기를 이해하기. AI가 파일을 편집할 때 업데이트되는 실시간 미리보기는 보통 Vite 개발 서버입니다.
• 배포를 이해하기. Vite 앱은 HTML, JavaScript, CSS, 이미지로 이루어진 정적 파일 폴더가 되며, 이는 호스팅하기 저렴하고 간단합니다.
• 오류 메시지 읽기. 미리보기에 빨간 오류 화면이나 빈 페이지가 보이면, 파일 하나를 컴파일하지 못했다고 Vite가 알려주는 경우가 많습니다.
• 한계 알기. Vite는 프런트엔드를 빌드합니다. 앱에 백엔드가 필요하다면, 예를 들어 데이터베이스, 비밀 API 키, 결제가 필요하다면, 그것은 다른 곳에서 실행됩니다. 프런트엔드와 백엔드를 참고하세요.

일상 속 비유

레스토랑 주방을 생각해보세요.

• **서비스 준비 중(개발)**에는 셰프가 요리를 맛보며 하나씩 조정합니다. 양념을 바꾸고 1초 뒤에 다시 맛을 봅니다. 이것이 Vite의 개발 서버입니다. 파일을 바꾸면 페이지가 바로 업데이트되고, 종종 양식에 입력한 내용을 잃지도 않습니다.
• **단체 주문(프로덕션)**에서는 모든 것이 조리되고, 나뉘어 담기고, 포장되어 어디로든 잘 운반되고 제공될 수 있도록 라벨이 붙습니다. 이것이 vite build입니다. 코드가 묶이고, 줄어들고, 고유한 파일 이름이 붙어 어떤 호스트에도 올릴 준비가 됩니다.

레시피는 같지만, 다루는 방식은 아주 다릅니다. 그리고 Vite는 둘 다 합니다.

Vite가 실제로 하는 일

현대 웹 앱은 컴포넌트, 스타일, 이미지, 서드파티 라이브러리 등 많은 파일로 이루어져 있습니다. 브라우저는 이 모든 것을 그대로 쓸 수 없습니다. TypeScript는 JavaScript로 바뀌어야 하고, React의 JSX도 변환되어야 하며, Tailwind 클래스는 CSS로 바뀌어야 합니다.

Vite는 이를 두 가지 모드로 처리합니다:

예전 도구들은 무언가를 보여주기 전에 앱 전체를 묶었기 때문에, 큰 프로젝트를 시작하고 업데이트하는 데 오래 걸렸습니다. Vite의 방식은 개발 중에는 그 과정을 건너뛰고, 브라우저가 필요할 때 파일을 불러오도록 하는 것입니다. 프로덕션에서는 여전히 묶습니다. Vite 8부터는 Rolldown이라는 번들러를 쓰는데, 작은 파일이 많으면 방문자에게는 잘 최적화된 소수의 파일보다 느리기 때문입니다.

실제 예시: Vite 프로젝트 안의 구성

작은 Vite + React 앱은 대략 다음과 같습니다:

my-app/
  index.html          ← 앱이 시작되는 단 하나의 HTML 페이지
  package.json        ← 라이브러리와 스크립트(dev, build) 목록
  vite.config.ts      ← Vite 설정과 플러그인
  src/
    main.tsx          ← React를 시작하고 index.html에 마운트
    App.tsx           ← 앱의 최상위 컴포넌트
    index.css         ← 스타일, 예: @import "tailwindcss";
  public/             ← 그대로 복사되는 파일(파비콘, robots.txt)

그리고 package.json의 스크립트는 다음과 같습니다:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

이제 하나의 변경을 따라가 봅시다:

1. AI에게 “제목을 파란색으로 해줘”라고 요청합니다.
2. AI가 App.tsx의 클래스를 편집합니다.
3. Vite가 파일이 바뀐 것을 알아채고, 그 파일만 변환해서 브라우저에 업데이트를 보냅니다.
4. 미리보기에서 제목이 보통 1초 안에 파란색으로 바뀝니다.

배포할 때 vite build는 dist/index.html과 dist/assets/index-a1b2c3.js 같은 파일을 만듭니다. 무작위로 보이는 부분은 내용이 바뀔 때마다 함께 바뀌므로, 브라우저와 CDN은 오래된 코드를 제공하지 않고도 파일을 오랫동안 캐시할 수 있습니다.

Vite의 환경 변수

Vite는 VITE_로 시작하는 이름의 변수만 브라우저 코드에 노출합니다. 예를 들어 VITE_PUBLIC_MAP_ID입니다. 이는 안전 장치입니다. 브라우저 코드에 있는 것은 모든 방문자가 볼 수 있으므로, 비밀 키에는 절대 이 접두사를 붙이면 안 되며 백엔드에 머물러야 합니다. 환경 변수와 비밀 값을 참고하세요.

주요 용어 설명

흔한 오해

• “Vite는 프레임워크다.” 빌드 도구입니다. React, Vue, Svelte가 프레임워크이며, Vite는 그것을 실행하고 패키징합니다.
• “Vite 앱에는 백엔드가 포함된다.” 일반적인 Vite 앱은 프런트엔드만 있습니다. 데이터베이스, 로그인, 비밀 키에는 옆에 서버나 API가 필요합니다.
• “개발 서버를 온라인에 올려도 괜찮다.” 실제 트래픽을 위한 것이 아닙니다. 항상 프로덕션 빌드의 결과물을 배포하세요.
• “.env에 있는 것은 모두 비밀이다.” Vite 앱에서 VITE_ 변수는 모든 방문자가 내려받는 파일에 그대로 들어갑니다.
• “페이지를 새로고침했을 때 404가 뜨면 앱이 고장 난 것이다.” 싱글 페이지 앱에서는 호스트가 모든 경로를 index.html로 돌려보내야 합니다. 이는 호스팅 설정입니다. 배포 후 404 오류를 고치는 방법을 참고하세요.

AI 빌더에 요청할 내용

• “이 앱은 Vite만 쓰는 프런트엔드인가, 백엔드도 있는가? 각 부분은 어디에서 실행되는가?”
• “프로덕션 빌드를 실행하고, 게시하기 전에 모든 오류와 경고를 고쳐줘.”
• “VITE_ 변수나 프런트엔드 코드 어디에도 비밀 키가 없는지 확인해줘.”
• “미리보기가 빈 페이지를 보여주면, Vite와 브라우저 콘솔 오류를 확인하고 원인을 고쳐줘.” 빈 흰색 페이지를 고치는 방법을 참고하세요.
• “게시 후 홈페이지뿐 아니라 모든 페이지 URL을 새로고침해도 작동하도록 해줘.”

Mythex에서의 Vite

Mythex에서 만드는 모든 새 프로젝트는 Next.js, 정적 HTML, 또는 다른 백엔드를 요청하지 않는 한 Vite로 시작합니다. 비공개 샌드박스의 라이브 미리보기는 에이전트가 파일을 편집하면서 업데이트되고, 게시 버튼은 앱을 빌드해서 배포합니다. 직접 호스팅을 설정할 필요가 없습니다. 나중에 API나 데이터베이스가 필요하면 채팅에서 요청할 수 있으며, Mythex는 Vite 프런트엔드와 함께 백엔드 서비스를 추가할 수 있습니다(멀티 서비스 앱).

자주 묻는 질문