Vite+로 웹 개발 도구 통합하기

웹 프론트엔드 프로젝트 하나를 제대로 셋업하려면 도구가 정말 많이 필요하죠. 번들러는 Vite, 테스트 러너는 Vitest, 린터는 ESLint, 포맷터는 Prettier… 거기에 Node.js 버전 관리자랑 패키지 매니저까지 더하면 package.json의 devDependencies가 금세 길어지고 설정 파일도 여기저기 흩어집니다.

2026년 3월, Vite의 창시자 Evan You가 이끄는 VoidZero가 이 문제에 대한 답을 내놓았는데요. Vite+ — Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown을 하나로 묶은 통합 툴체인입니다. vp라는 단일 CLI만 설치하면 개발 서버부터 빌드, 테스트, 린팅, 포맷팅까지 전부 처리할 수 있습니다. 이번 글에서는 Vite+가 어떤 문제를 풀려는 건지, 실제로 어떻게 쓰는지 같이 살펴보겠습니다.

왜 Vite+인가

기존 자바스크립트 개발 환경에서 가장 불편했던 건 도구마다 설정 파일이 따로 있다는 점이었습니다. vite.config.ts, vitest.config.ts, .eslintrc.js, .prettierrc — 프로젝트 루트에 점(dot) 파일들이 우후죽순 늘어나는 경험, 다들 한 번쯤 해보셨을 겁니다.

도구 간 버전 호환성도 골칫거리였죠. ESLint 플러그인이 새 버전에서 깨지거나 Prettier와 ESLint가 서로 충돌하거나 Node.js 버전을 올렸더니 빌드가 안 되거나. 이런 문제를 해결하느라 실제 코드 작성보다 환경 설정에 더 많은 시간을 쓰는 경우가 적지 않았습니다. 😅

Vite+는 이 도구 파편화 문제를 정면으로 해결합니다. 하나의 바이너리(vp)가 런타임, 패키지 매니저, 개발 서버, 테스트, 린팅, 포맷팅, 빌드를 전부 담당합니다. 설정도 vite.config.ts 한 파일이면 끝이에요.

설치

Vite+는 macOS나 Linux에서 한 줄로 설치할 수 있습니다.

curl -fsSL https://vite.plus | bash

Windows를 사용하신다면 PowerShell에서 설치하면 됩니다.

irm https://vite.plus/ps1 | iex

설치가 끝나면 vp 명령어를 쓸 수 있습니다. 이게 Vite+의 모든 기능으로 통하는 유일한 입구예요.

프로젝트 생성

vp create 명령어로 새 프로젝트를 만들 수 있습니다.

vp create my-app

기존 Vite 프로젝트를 마이그레이션하고 싶다면 vp migrate 명령어를 쓰면 됩니다. 기존의 ESLint, Prettier, Vitest 설정 파일들을 분석해서 vite.config.ts로 자동 통합해줍니다.

vp migrate

핵심 명령어

Vite+의 CLI는 웹 개발의 전체 라이프사이클을 커버합니다. 자주 쓰는 명령어를 하나씩 살펴볼게요.

개발 서버

vp dev를 실행하면 기존 Vite 개발 서버와 동일한 네이티브 ESM 기반의 즉각적인 HMR을 제공합니다.

vp dev

내부적으로 Vite 8의 Rolldown 엔진을 쓰기 때문에 npx vite나 bun run dev와 동일한 개발 경험을 그대로 누릴 수 있습니다.

코드 검사

vp check 한 방이면 타입 검사, 린팅, 포맷팅 검사가 동시에 돌아갑니다.

vp check

타입 검사에는 tsgo, 린팅에는 Oxlint, 포맷팅 검사에는 Oxfmt가 사용됩니다. Oxlint는 ESLint 호환 린터인데 50~100배 빠르고, Oxfmt는 Prettier 호환 포맷터로 30배까지 빠릅니다. Rust로 작성되어서 수천 개 파일이 있는 대규모 프로젝트에서도 체감 속도가 확 다릅니다.

자동 수정까지 하고 싶으면 --fix 플래그를 붙이면 돼요.

vp check --fix

테스트

vp test는 Vitest를 내장하고 있어서 별도 설치 없이 바로 테스트를 돌릴 수 있습니다.

vp test

기존에 Vitest를 사용하고 계셨다면 테스트 코드를 그대로 가져올 수 있죠.

프로덕션 빌드

vp build로 Rolldown 기반의 프로덕션 빌드를 실행합니다.

vp build

Vite 7 대비 1.6~7.7배 빠른 빌드 속도를 보여주는데요. Linear는 프로덕션 빌드가 46초에서 6초로 줄었고 Ramp는 57%나 단축되었다고 합니다. 🚀

통합 설정 파일

Vite+의 가장 매력적인 부분은 아마 설정 통합일 겁니다. 프로젝트 루트에 vite.config.ts 하나만 두면 모든 도구의 설정을 한 곳에서 관리할 수 있습니다.

import { defineConfig } from "vite-plus";

export default defineConfig({
  // Vite 플러그인
  plugins: [],

  // Vitest 설정
  test: {
    include: ["src/**/*.test.ts"],
  },

  // Oxlint 설정
  lint: {
    ignorePatterns: ["dist/**"],
  },

  // Oxfmt 설정
  fmt: {
    semi: true,
    singleQuote: true,
  },

  // 커스텀 태스크
  run: {
    tasks: {
      "generate:icons": {
        command: "node scripts/generate-icons.js",
        cache: true,
        envs: ["ICON_THEME"],
      },
    },
  },

  // Git staged 파일에 대한 검사
  staged: {
    "*": "vp check --fix",
  },
});

기존에 .eslintrc.js, .prettierrc, vitest.config.ts 등으로 흩어져 있던 설정이 한 파일로 모입니다. 프로젝트 루트가 깔끔해지는 건 덤이고 도구 간 설정 충돌이 애초에 발생할 수가 없죠.

태스크 러너

모노레포나 복잡한 빌드 파이프라인을 운영하는 팀이라면 Vite+의 태스크 러너인 Vite Task가 유용합니다.

vp run generate:icons

Vite Task는 package.json의 의존성 그래프를 분석해서 태스크를 올바른 순서로 실행합니다. 입력 파일의 핑거프린트를 자동으로 추적하기 때문에 변경이 없으면 캐시된 결과를 그대로 가져다 씁니다. 캐시 설정을 따로 잡아줄 필요가 없다는 게 Turborepo 같은 기존 도구와 다른 점이죠.

Node.js 버전 관리

vp env 명령어로 Node.js 버전도 관리할 수 있습니다.

vp env install 22
vp env use 22

nvm이나 mise 같은 별도 버전 관리자 없이도 프로젝트별로 Node.js 버전을 지정할 수 있어서 팀 내 환경 통일이 훨씬 쉬워집니다.

패키지 관리

의존성 설치와 관리도 vp 하나로 됩니다.

vp install              # 의존성 설치
vp add react            # 패키지 추가
vp remove lodash        # 패키지 제거
vp outdated             # 업데이트 가능한 패키지 확인

기존에 사용하던 패키지 매니저가 무엇이든 vp install이 알아서 감지하고 올바른 패키지 매니저로 설치를 진행합니다.

성능 비교

Vite+를 구성하는 각 도구의 성능을 기존 도구와 비교하면 이렇습니다.

이유는 단순합니다. 기존 도구들은 자바스크립트로 작성된 반면 Vite+의 도구들은 전부 Rust로 만들어졌거든요. CI 환경에서 린팅과 포맷팅이 수십 배 빨라지면 피드백 루프가 눈에 띄게 짧아집니다.

기존 도구와의 호환성

Vite+가 기존 도구를 대체한다고 해서 생태계와 단절되는 건 아닙니다.

Oxlint는 ESLint 규칙과 호환되고 Oxfmt는 Prettier의 포맷팅 스타일을 그대로 따릅니다. Vitest도 이미 Jest 호환 API를 제공하고 있으므로 기존 테스트 코드를 거의 수정 없이 가져올 수 있습니다. Rolldown 역시 Rollup 플러그인 API와 호환되기 때문에 기존 Vite 플러그인 생태계를 그대로 활용할 수 있죠.

vp migrate 명령어가 기존 설정 파일들을 분석해서 vite.config.ts로 변환해주기 때문에 마이그레이션도 비교적 수월합니다.

CI에서 사용하기

GitHub Actions에서 Vite+를 사용하려면 공식 setup-vp 액션을 쓰면 됩니다.

steps:
  - uses: actions/checkout@v4
  - uses: voidzero-dev/setup-vp@v1
  - run: vp install
  - run: vp check
  - run: vp test
  - run: vp build

개발 환경과 동일한 명령어를 CI에서도 그대로 사용할 수 있다는 게 통합 툴체인의 장점입니다. 로컬에서 vp check가 통과했다면 CI에서도 통과할 거라는 확신을 가질 수 있죠.

마치며

Vite+는 자바스크립트 생태계에서 각자 잘하던 도구들을 하나의 인터페이스로 묶어낸 프로젝트입니다. 번들러, 테스트 러너, 린터, 포맷터를 따로 설치하고 설정 맞추던 번거로움이 vp 하나로 사라지는 셈이죠. 아직 알파 단계이긴 하지만 MIT 라이선스로 완전 오픈소스인 만큼 앞으로가 기대됩니다. Vite+로 개발한 앱을 Cloudflare에 풀스택으로 배포하는 Void 플랫폼도 함께 공개되었으니 관심 있으시면 살펴보세요.

기존에 Vite를 쓰고 계셨다면 vp migrate로 한번 시도해보세요. 설정 파일이 정리되고 빌드가 빨라지는 걸 직접 느낄 수 있을 겁니다.

더 자세한 내용은 Vite+ 공식 문서를 참고하세요.