Void: Vite 네이티브 배포 플랫폼

Vite+가 로컬 개발 도구를 하나로 통합했다면, 이번에는 배포까지 먹으러 왔습니다. VoidZero가 내놓은 Void는 Vite 앱에 플러그인 하나를 추가하고 void deploy 한 방이면 데이터베이스, 인증, KV 스토리지, 큐까지 갖춘 풀스택 애플리케이션이 Cloudflare Workers 위에 올라가는 배포 플랫폼입니다.

“자바스크립트에 드디어 Rails 순간이 온 건가, 아니면 그냥 Cloudflare 종속에 리본을 달아놓은 건가?” 궁금해서 Void가 뭘 하는 건지 직접 파헤쳐봤습니다.

Vite+와 Void의 관계

먼저 용어 정리부터 해야겠습니다. VoidZero(2026년 6월 Cloudflare에 인수)는 Vue를 만든 Evan You가 세운 회사로 Vite, Rolldown, Oxc, Vitest를 관리하고 있는데요. 이 회사에서 두 가지 제품을 내놓았습니다.

Vite+는 로컬 개발 도구를 통합한 툴체인입니다. vp라는 CLI 하나로 개발 서버, 빌드, 테스트, 린팅, 포맷팅을 전부 처리하죠. 이전 글에서 자세히 다뤘으니 여기서는 넘어가겠습니다.

Void는 배포 플랫폼이자 풀스택 프레임워크입니다. Vite 앱을 Cloudflare Workers 위에 풀스택으로 올려주는 게 핵심 역할이에요. 로컬 개발은 Vite+로, 배포는 Void로 — 이렇게 짝을 이루는 구조입니다.

Void가 제공하는 것

Void는 단순한 배포 도구가 아닙니다. 풀스택 앱을 만드는 데 필요한 백엔드 인프라를 통째로 제공해요.

• 데이터베이스 — 로컬에서는 SQLite, 프로덕션에서는 Cloudflare D1으로 매핑 (자세히는 Void 데이터베이스)
• KV 스토리지 — Cloudflare Workers KV 기반의 키-값 저장소
• 오브젝트 스토리지 — 파일 업로드, 이미지 저장 등
• 인증 — 내장 auth 시스템
• 큐 — 비동기 작업 처리
• 크론 잡 — 예약 작업
• AI 추론 — Cloudflare Workers AI 연동

이 모든 걸 SDK에서 import하기만 하면 됩니다. Void 프로젝트의 전체 구조를 한눈에 보면 이렇습니다.

vite.config.ts        → voidPlugin() — 어떤 Vite 앱이든 동작
import { db }         → D1 데이터베이스
import { kv }         → KV 네임스페이스
import { storage }    → R2 버킷
import { ai }         → Workers AI 또는 BYOK
import { auth }       → 인증 (Better Auth 기반)
db/schema.ts          → Drizzle 스키마 — DB 타입의 단일 진실 공급원
db/migrations/*.sql   → 배포 시 D1에 자동 적용
crons/*.ts            → 크론 잡
queues/*.ts           → 큐
void deploy           → https://<slug>.void.app에 배포 완료

Cloudflare 계정조차 필요 없습니다. vite.config.ts에 voidPlugin()만 추가하면 나머지는 Void가 알아서 처리해요. Drizzle ORM이 스키마 정의부터 마이그레이션, 타입 생성까지 담당하니까 데이터베이스 레이어의 타입 안전성도 자동으로 확보됩니다.

코드에서 인프라로

Void에서 가장 인상적인 부분은 자동 프로비저닝입니다. 소스 코드를 스캔해서 어떤 리소스를 사용하는지 감지하고 알아서 인프라를 구성해줘요.

void/db를 import하면 D1 데이터베이스가 프로비저닝되고, void/kv를 import하면 KV 네임스페이스가 생깁니다. 바인딩을 일일이 선언할 필요도, 대시보드에서 클릭할 것도 없습니다. Infrastructure-as-Code라기보다는 Infrastructure-from-Code라고 부르는 게 맞을 것 같아요.

Cloudflare Workers를 직접 써보신 분이라면 아시겠지만 wrangler.toml에서 바인딩을 설정하고 대시보드에서 D1 데이터베이스를 만들고 KV 네임스페이스를 연결하는 과정이 꽤 번거롭거든요. Void는 이 과정을 전부 추상화합니다.

직접 시작해보기

말로만 들으면 감이 안 오니 시작 흐름을 짚어볼게요. 빈 디렉토리에서 패키지를 설치하고 초기화 명령만 돌리면 됩니다.

npm install -D void
npx void init

참고로 bun을 쓴다면 bun add -D void와 bunx void init으로, 개발 서버도 bun run dev로 돌리면 됩니다. Void는 npm·pnpm·yarn·bun을 모두 지원하거든요.

void init은 대화형으로 진행돼요. 툴체인(Vite+가 기본)과 프레임워크(React·Vue·Svelte·Solid), 스타터 종류(D1 데이터베이스·PostgreSQL·정적 페이지)를 고르면 프로젝트 뼈대가 잡힙니다. 이미 쓰던 Vite 앱이라면 voidPlugin()만 추가하고 같은 명령을 돌리면 되고요.

실제로 빈 디렉토리에서 npx void init(bun이면 bunx void init)을 돌리면 이렇게 흘러가요.

❯ npx void init

┌  void init
│
●  Empty project detected. Scaffolding a Pages starter...
│
◇  Choose a Pages scaffold toolchain:
│  Vite+
│
◇  Choose a Pages framework to scaffold:
│  React
│
◇  Choose a Pages starter:
│  D1 (SQLite)
│
◆  Updated package.json with starter scripts and dependencies
◆  Created vite.config.ts
◆  Created pages/index.tsx
◆  Created pages/index.server.ts
◆  Created routes/api/hello.ts
◆  Created db/schema.ts
◆  Created db/seed.ts
◆  Created .gitignore
◆  Created tsconfig.json
◆  Pinned worker compatibility_date in void.json
│
◇  Could not detect your coding agent. Which one are you using?
│  Claude Code
│
◆  Created CLAUDE.md with Void instructions
●  Claude Code → .claude/skills
◆    migrate-cloudflare-to-void — linked
◆    void — linked
◆  Added void MCP server to .claude/settings.json
│
◇  Create .github/workflows/deploy.yml to deploy on pushes to main?
│  Yes
│
◆  Created .github/workflows/deploy.yml
◆  Installed dependencies with bun
◆  Generated initial Drizzle migration
│
◇  Link your Void project now?
│  Yes
│
◆  Linked project: my-app
│
└  Run `vp dev` to start developing

스캐폴딩 도구(Vite+)와 프레임워크(React), 스타터(D1)를 고르면 페이지·API 라우트·DB 스키마·시드 파일까지 한 번에 깔립니다. 여기서 눈여겨볼 건 중간 단계예요. 코딩 에이전트를 감지해서 CLAUDE.md와 .claude/skills, MCP 설정까지 자동으로 만들어줍니다. Claude Code를 고르면 CLAUDE.md에 Void 사용법이 박히고 스킬과 MCP 서버가 .claude/에 연결돼서, 에이전트가 곧바로 Void 규약대로 코드를 짤 수 있게 되죠. 마지막엔 GitHub Actions 배포 워크플로우를 만들지, Void 프로젝트를 연결할지까지 물어보고 끝납니다.

초기화가 끝나면 이런 구조가 생깁니다.

my-app/
├─ pages/              # 파일 기반 페이지 (index.tsx + index.server.ts)
├─ routes/api/         # API 엔드포인트 (hello.ts)
├─ db/                 # Drizzle 스키마·시드·마이그레이션
├─ CLAUDE.md           # 에이전트용 Void 사용법 (에이전트 감지 시)
├─ .claude/            # 에이전트 스킬·MCP 설정
├─ vite.config.ts      # voidPlugin()을 끼운 Vite 설정
├─ void.json           # Void 앱 설정 (배포 타겟·인증·라우팅)
└─ package.json

pages는 UI 컴포넌트(.tsx)와 서버 로직(.server.ts)을 짝지어 두는 곳이고, routes/api는 API 엔드포인트인데, 이 둘이 어떻게 URL과 데이터로 이어지는지는 Void 라우팅에서 따로 깊이 다룹니다. 눈여겨볼 건 void.json인데, 배포 타겟이나 인증 프로바이더, 페이지별 재검증 주기 같은 설정을 여기서 선언합니다. 크론이나 큐를 쓰는 스타터를 골랐다면 crons/, queues/ 디렉토리도 함께 생겨요. 그리고 앞 출력에서 봤듯 코딩 에이전트를 고르면 CLAUDE.md와 .claude/(스킬·MCP 설정)까지 함께 만들어집니다. 이 에이전트 연동은 뒤에서 더 자세히 다룰게요.

이제 로컬 개발 서버를 띄워봅니다.

npm run dev

❯ npm run dev

> vp dev

[void] Applied 1 migration(s)

  VITE+ v0.1.24

  ➜  Local:  http://localhost:5173/
  ➜  Debug:  http://localhost:5173/__debug
  ➜  press b + enter to list configured Cloudflare bindings
  ➜  press e + enter to open local explorer
  ➜  press t + enter to start tunnel
  ➜  press h + enter to show help

npm run dev는 내부적으로 vp dev를 띄우고, 마이그레이션도 자동으로 적용해줍니다. 그러면 http://localhost:5173에서 앱이 뜨고 /api/hello 같은 API 라우트도 바로 동작합니다. 개발 서버에서 t를 누르면 Cloudflare 터널로 로컬 서버를 잠깐 외부에 공개할 수도 있고요. 여기까지가 Cloudflare 계정 없이 가능한 부분이에요. 다음 한 줄이면 이게 그대로 인터넷에 올라갑니다.

배포는 한 줄

배포도 간단합니다.

npx void deploy

이 명령어 하나가 빌드, 마이그레이션 실행, 리소스 프로비저닝, Cloudflare Workers 배포를 순서대로 처리합니다. Vercel에서 vercel deploy를 쓰는 것과 비슷한데 데이터베이스나 스토리지 같은 백엔드 인프라까지 한꺼번에 다뤄준다는 점이 다릅니다.

처음 배포하기 전에 한 번은 로그인을 해줘야 하는데요. npx void auth login을 돌리면 GitHub이나 Google 계정으로 인증할 수 있어요.

npx void auth login

그다음 npx void deploy를 실행하면 빌드부터 배포까지 쭉 진행되고, 끝나면 공개 URL이 나옵니다.

❯ npx void deploy

┌  void deploy
│
◇  Building (vp build)...
│  ✓ built
│
●  Found 1 migration(s)
◇  Deployed!
│
◇  https://my-app.void.app ──────────────╮
│                                         │
│  9 worker module(s), 5 static asset(s)  │
│  1 migration(s) applied                 │
│  SSR enabled                            │
│                                         │
├─────────────────────────────────────────╯
│
└  Done!

빌드 로그(모듈 변환·gzip 크기)는 줄였지만, 핵심은 마이그레이션 적용·정적 자산·SSR까지 한 번에 처리하고 https://<slug>.void.app 주소를 내준다는 점이에요.

로컬 개발 환경에서는 Miniflare를 사용해 Workers 런타임을 시뮬레이션합니다. 프로덕션과 동일한 런타임에서 개발하니까 “내 컴퓨터에서는 되는데” 하는 문제가 줄어들죠.

main에 푸시하면 자동 배포

매번 손으로 npx void deploy를 치는 대신, main에 푸시하면 알아서 배포되게 만들 수도 있어요. 앞서 npx void init이 물어봤던 .github/workflows/deploy.yml이 바로 그 워크플로우인데, 따로 만들려면 이 명령을 쓰면 됩니다.

npx void init --github

생성된 워크플로우는 main 브랜치에 푸시될 때 vp exec void deploy를 실행하는 단순한 구조예요.

name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: "22"
          cache: true
      - run: vp exec void deploy
        env:
          VOID_TOKEN: ${{ secrets.VOID_TOKEN }}
          VOID_PROJECT: my-app

딱 하나, 배포 권한을 넘겨줄 토큰만 채워주면 됩니다.

npx void auth token

이 명령이 배포 토큰을 클립보드에 복사해줘요. 이걸 GitHub 저장소의 Settings → Secrets and variables → Actions에서 VOID_TOKEN이라는 이름의 시크릿으로 등록하면 끝입니다. 이제 main에 푸시할 때마다 GitHub Actions가 알아서 빌드하고 배포해줍니다.

프레임워크 지원

Void는 특정 프레임워크에 종속되지 않습니다. Vite 기반이라면 React, Vue, Svelte, Solid 뭐든 됩니다. Evan You의 회사답게 Vue는 당연히 지원하고 SvelteKit이나 Nuxt, TanStack Start 같은 메타 프레임워크와도 호환돼요.

렌더링 방식도 폭넓습니다. SSR, SSG, ISR은 기본이고 아일랜드 아키텍처와 부분 하이드레이션, 마크다운 기반 콘텐츠까지 지원하죠. 기존에 쓰던 Vite 앱에 플러그인만 추가하면 되니까 마이그레이션 비용이 낮습니다.

코딩 에이전트와 함께

앞서 봤듯이 void init은 처음부터 코딩 에이전트를 감지해서 연동을 깔아줍니다. 이미 만든 프로젝트에 나중에 더하거나 설정을 다시 맞추고 싶을 땐, 이 에이전트 셋업 단계만 따로 실행할 수도 있어요.

npx void init --agents

이 명령은 먼저 어떤 코딩 에이전트를 쓰는지 감지합니다. Claude Code, Cursor, Codex, Gemini CLI 같은 주요 도구를 자동으로 알아내고, 못 찾으면 목록에서 직접 고르게 해줘요. 그러고 나서 세 가지를 한꺼번에 처리합니다.

• 스킬 링크 — Void가 제공하는 스킬을 에이전트가 가져다 쓰도록 심볼릭 링크로 연결 (Claude Code라면 .claude/skills/에 링크돼요)
• MCP 설정 — Void MCP 서버를 에이전트에 등록 (프로젝트 단위 설정을 지원하는 에이전트면 파일을 직접 써주고, 아니면 등록 명령을 출력해줍니다)
• 지침 주입 — CLAUDE.md나 AGENTS.md 같은 에이전트 지침 파일에 Void 프레임워크 참조 블록을 삽입

왜 굳이 이런 단계를 거치냐면, 에이전트가 Void의 import 규약(void/db, void/kv 같은)이나 배포 흐름을 모른 채로 코드를 짜면 십중팔구 어긋나기 때문이에요. 이 한 줄이 에이전트에게 “이 프로젝트는 Void 방식으로 짜야 한다”는 맥락을 미리 깔아주는 셈입니다.

사실 이 기능은 요즘 흐름에서 점점 더 중요해지고 있어요. 코드를 짜는 주체가 사람에서 AI 에이전트로 옮겨가면서, 프레임워크의 경쟁력도 “에이전트가 이걸로 코드를 얼마나 잘 짜느냐”에 갈리기 시작했거든요. Cloudflare가 VoidZero를 인수하며 내건 슬로건이 “AI 네이티브 웹의 미래”였던 걸 떠올리면, void init --agents는 단순한 편의 기능이 아니라 그 비전을 가장 구체적으로 보여주는 지점인 셈입니다.

다만 얼리 액세스답게 잔잔한 함정도 있는데요. MCP 설정이 엉뚱한 파일에 써지는 문제처럼 직접 밟아본 것들은 실제 마이그레이션 기록에 따로 정리해뒀습니다.

자바스크립트의 Rails가 될 수 있을까

솔직히 Void를 처음 봤을 때 Ruby on Rails가 떠올랐습니다. 라우팅, 데이터베이스, 인증, 배포까지 프레임워크 하나로 해결하는 그 올인원 철학이요. 자바스크립트 생태계에서 이 정도로 통합된 경험을 제대로 제공한 적이 있었나 싶을 만큼 범위가 넓어요.

하지만 걸리는 점도 있습니다.

가장 큰 건 Cloudflare 종속입니다. void/db는 Cloudflare D1이고, void/kv는 Workers KV고, 배포 타겟은 Cloudflare Workers뿐이에요. Vercel과 Next.js의 관계에서 봤던 벤더 락인(vendor lock-in) 논쟁이 여기서도 고스란히 반복될 수 있습니다.

다만 한 가지는 짚고 넘어가야 공평할 것 같은데요. 정작 ‘Void라는 플랫폼’에 묶이는 락인은 생각보다 약합니다. 빌드 결과물이 특별한 형식이 아니라 표준 Cloudflare Worker거든요. 그래서 시작할 때는 Cloudflare 계정도, Cloudflare 관련 지식도 없이 편하게 쓰다가, 나중에 완전한 제어권이 필요해지면 Void의 관리형 배포(void deploy) 대신 직접 wrangler.json을 두고 본인 Cloudflare 계정에 wrangler deploy로 self-host할 수 있습니다. 표준 Worker째로 들고 나올 수 있는 셈이죠. 물론 D1·KV·R2 같은 Cloudflare 인프라 자체에서 벗어나는 건 아니지만, 적어도 Void 회사에 발이 묶이는 구조는 아닙니다.

성숙도도 신경 쓰입니다. Void는 아직 얼리 액세스 단계예요. 새벽 2시에 프로덕션이 터졌을 때 Stack Overflow에서 답을 찾을 수 있는 환경이 아니라 GitHub 이슈에 댓글이 세 개 달려있는 수준이죠. 실무에 바로 투입하기엔 리스크가 있습니다. 실제로 실서비스를 Void로 옮겨본 기록을 보면 문서에 없는 지뢰가 한 번의 마이그레이션에서 다섯 개나 튀어나오기도 했고요.

그래도 방향성 자체는 매력적입니다. 도구 파편화에 지친 자바스크립트 개발자들에게 “Vite+ 하나로 개발하고 Void 하나로 배포하라”는 메시지는 설득력이 있거든요. Cloudflare의 글로벌 엣지 네트워크 위에서 돌아간다는 성능상 이점도 무시하기 어렵고요.

Next.js/Vercel과의 차이

Void의 포지셔닝을 이해하려면 Next.js와 Vercel의 관계를 떠올리면 됩니다. “Void is to Cloudflare as Next.js is to Vercel”이라는 비유가 딱 맞아요.

다만 접근 방식에 차이가 있습니다. Next.js는 React 전용이지만 Void는 React, Vue, Svelte, Solid 어떤 프레임워크든 Vite 기반이면 다 받아줍니다. Next.js는 프레임워크가 먼저고 배포가 따라오는 구조인 반면 Void는 기존 Vite 앱에 배포 레이어를 얹는 방식이죠.

또 Next.js는 Vercel 외 플랫폼에서도 돌릴 수 있지만 최적화는 Vercel에서만 제대로 됩니다. Void는 아예 처음부터 Cloudflare 전용으로 설계했기 때문에 다른 플랫폼에서 돌릴 생각 자체를 안 합니다. 이걸 단점으로 볼 수도 있고 오히려 최적화에 집중할 수 있다는 장점으로 볼 수도 있습니다.

마치며

Void가 자바스크립트의 Rails가 될지는 아직 모릅니다. 하지만 VoidZero가 Vite+로 로컬 개발을, Void로 배포를, 그리고 그 사이를 Cloudflare 인프라로 채우는 그림은 꽤 야심찬 비전이에요.

그리고 2026년 6월, 그 그림은 한층 선명해졌습니다. Cloudflare가 VoidZero를 인수하면서 로컬 개발(Vite+)부터 배포(Void), 그 아래 인프라(Cloudflare Workers)까지 전부 한 회사 안으로 들어왔거든요. 도입부에서 던졌던 “Cloudflare 종속에 리본을 단 것 아니냐”는 질문이 더 묵직해진 셈인데요. 다만 Vite, Vitest, Rolldown, Oxc는 MIT 라이선스 오픈소스로 남고 벤더 중립을 유지한다고 못 박았고, Cloudflare가 Vite 생태계 펀드에 100만 달러를 별도로 약속한 만큼, 한쪽으로 완전히 기우는 그림은 아닙니다.

얼리 액세스 단계라 지금 당장 프로덕션에 올리기엔 이르지만 Vite 생태계에서 풀스택 개발이 어떤 모습이 될지 엿볼 수 있는 프로젝트인 건 확실합니다. Cloudflare를 이미 쓰고 계시거나 새 프로젝트를 시작하려는 분이라면 void.cloud에서 얼리 액세스를 신청해보셔도 좋을 것 같습니다.

Void의 기반이 되는 로컬 개발 툴체인이 궁금하다면 Vite+로 웹 개발 도구 통합하기를, Cloudflare Workers 자체에 대해 더 알고 싶다면 Cloudflare Workers 가이드를 참고하세요. 메타 프레임워크라는 개념이 익숙하지 않다면 메타 프레임워크 소개부터 읽어보시는 것도 좋습니다.