v0는 어느 회사가 만든 도구인가요?

Next.js를 만든 Vercel의 자체 제품입니다. 2023년 9월 비공개 알파로 처음 공개된 뒤 베타로 전환됐고, v0.app에서 만든 결과물은 Vercel 인프라에 원클릭으로 배포할 수 있습니다.

v0 무료 플랜으로 어디까지 쓸 수 있나요?

2026-09-23 기준 Free 플랜은 월 $5어치 크레딧이 포함되고 하루 7메시지 제한이 있습니다. 메시지 한도가 있으니 수정 요청은 여러 건을 한 메시지에 묶어 보내는 편이 유리합니다. 요금은 바뀔 수 있으니 v0.app/pricing에서 확인하세요.

v0로 만든 화면을 기존 Next.js 프로젝트에 넣을 수 있나요?

넣을 수 있습니다. v0 결과물의 공유 URL을 npx shadcn@latest add 명령에 넘기면 필요한 패키지와 컴포넌트 파일이 프로젝트에 추가됩니다. 이미 고쳐 둔 같은 이름의 파일과 겹칠 수 있으니 --dry-run으로 변경 사항부터 확인하고, --overwrite는 습관적으로 붙이지 마세요.

v0는 React/Next.js 말고 다른 스택도 지원하나요?

기본 스택은 Next.js, Tailwind CSS, shadcn/ui입니다. 공식 문서에는 데이터 작업용으로 Python, SQL, Matplotlib, Pandas도 지원한다고 나와 있습니다.

v0 과금은 메시지 단위인가요?

현재는 입력/출력 토큰을 크레딧으로 환산해 차감하는 종량 방식입니다. 2025년 5월 Vercel 공식 블로그에서 고정 메시지 수 방식에서 바뀌었다고 발표했고, 하루 메시지 상한은 Free 플랜에만 남아 있습니다.

Vercel v0로 웹사이트 만들기

요즘 사내에서 "간단한 관리 화면 하나만 빨리 띄워달라"는 요청을 자주 받습니다. 예전 같으면 Next.js 프로젝트부터 만들고 컴포넌트를 하나씩 붙였을 텐데, 이번에는 Vercel의 v0를 처음부터 끝까지 써보면서 순서를 정리해봤습니다. API 테스트와 백엔드는 익숙한데 프론트엔드는 손이 덜 가는 분들께 도움이 될 것 같아 글로 남깁니다.

v0는 원하는 화면을 자연어로 설명하면 실제로 동작하는 React/Next.js 코드와 미리보기를 만들어주는 도구입니다. 프롬프트를 쓰고, 채팅으로 다듬고, 필요하면 백엔드를 붙인 뒤 원클릭 배포나 PR로 내보내는 순서로 씁니다. 만든 결과물은 npx shadcn@latest add <v0 공유 URL> 한 줄로 로컬 프로젝트에 가져올 수도 있습니다.

v0는 Vercel의 자체 제품입니다

v0는 Next.js를 만든 프론트엔드 클라우드 회사 Vercel이 2023년 9월에 비공개 알파(이후 베타로 전환)로 처음 공개한 도구입니다. 내세운 개념은 '생성형 UI(generative UI)'입니다. 자연어 프롬프트를 받아 화면 코드를 바로 만들어낸다는 뜻입니다.

배포도 Vercel 인프라와 묶여 있습니다. v0.app 공식 사이트는 배포 기능을 "Deploy with one click to secure, scalable infrastructure powered by Vercel"이라고 소개합니다.

Vercel CEO 기예르모 라우흐(Guillermo Rauch)는 여러 인터뷰에서 v0를 회사 안의 또 다른 스타트업 같은 존재라고 표현했습니다. 거대언어모델이 코드를 잘 짜게 된 것을 보고 웹 앱을 만드는 방식 자체를 바꿀 기회로 봤다는 취지의 설명도 했습니다. 공식 문서는 v0를 "Ship features, refine designs, update copy, and create live prototypes, all with a prompt."라고 요약합니다.

v0가 만들어내는 코드는 아래 스택을 기본으로 합니다.

Next.js: Vercel이 만든 React 기반 웹 프레임워크입니다.
Tailwind CSS: p-4, text-sm처럼 클래스 이름으로 스타일을 입히는 CSS 프레임워크입니다.
shadcn/ui: 버튼, 카드, 다이얼로그 같은 재사용 가능한 React UI 컴포넌트 모음입니다. 라이브러리로 설치하지 않고 컴포넌트 소스 파일을 프로젝트에 직접 복사해 쓰기 때문에 마음대로 고칠 수 있습니다.

문서에는 데이터 작업용으로 Python, SQL, Matplotlib, Pandas도 지원한다고 나와 있습니다.

시작 전에 요금제부터 확인합니다

v0는 현재 입력/출력 토큰을 크레딧으로 환산해 쓴 만큼 차감합니다. Vercel 공식 블로그(2025-05-13, "Updated v0 pricing")에 따르면 예전에는 고정 메시지 수로 과금했고, 지금은 "Usage is now metered on input and output tokens which convert to credits" 방식입니다. 하루 메시지 수 상한은 Free 플랜에만 남아 있습니다.

아래는 2026-09-23에 v0.app/pricing에서 확인한 내용입니다. 가격 정책은 바뀔 수 있으니 결제 전에 한 번 더 확인하세요.

Free: $0/월, 월 $5어치 크레딧 포함, 하루 7메시지 제한
Plus: $30/사용자/월(정가 $90에서 할인 표시), 월 $30어치 크레딧 + 로그인 시 매일 $2 크레딧
Business: $100/사용자/월, 월 $30어치 크레딧 + 로그인 시 매일 $2 크레딧
Enterprise: 별도 협의

Free 플랜은 메시지 한도가 있으니 요청을 여러 건 묶어서 한 번에 보내는 편이 유리합니다. 첫 프롬프트도 최대한 구체적으로 써서 되묻고 고치는 횟수를 줄이세요.

1. 첫 프롬프트를 구체적으로 씁니다

공식 문서의 첫 단계는 "Describe your idea in your preferred language."입니다. 한국어로 써도 됩니다.

"서버 모니터링 대시보드 만들어줘"처럼 막연하게 요청하면 그럴듯하지만 용도와 동떨어진 화면이 나오기 쉽습니다. 페이지 구성, 들어갈 데이터, 동작을 나눠 적어주면 원하는 결과에 훨씬 가까워집니다. 제가 쓰는 프롬프트 틀은 이렇습니다.

사내 API 헬스체크 대시보드를 만들어줘.

[페이지 구성]
- 상단: 서비스 이름과 마지막 갱신 시각
- 본문: 엔드포인트 목록 테이블 (이름, URL, 상태코드, 응답시간ms)
- 상태코드가 2xx면 초록 배지, 4xx면 노랑, 5xx면 빨강

[동작]
- 우측 상단 "새로고침" 버튼을 누르면 목록을 다시 불러온다
- 행을 클릭하면 응답 헤더와 본문을 보여주는 다이얼로그를 연다

[데이터]
- 일단 목업 데이터 5건으로 채워줘

[스타일]
- 다크 모드, 모바일에서는 테이블 대신 카드 목록

프롬프트를 보내면 v0가 코드와 함께 실시간 미리보기를 만들어줍니다.

처음부터 실제 API를 붙이지 말고 목업 데이터로 화면부터 확정하세요. 화면과 데이터 연결을 한 번에 요청하면 나중에 고칠 때 문제가 화면 쪽인지 데이터 쪽인지 가리기 어려워집니다.

2. 목업 이미지나 Figma 파일로 시작할 수도 있습니다

글로 설명하기 어려운 레이아웃은 그림으로 주면 빠릅니다. 공식 문서에 따르면 와이어프레임이나 목업 이미지를 올리면 그대로 UI로 만들어줍니다("Create high-fidelity UIs from your wireframes or mockups"). 기존 페이지의 스크린샷이나 Figma 파일로 화면을 복제할 수도 있습니다("Clone pages with screenshots or Figma files").

현장에서는 기획자가 손으로 그린 화면을 사진으로 찍어 올리고, 이미지에 안 드러나는 동작만 프롬프트에 텍스트로 덧붙이는 방식이 잘 통합니다.

다만 남의 서비스 화면을 복제하면 디자인과 로고의 저작권 문제가 생길 수 있습니다. 사내 화면이나 직접 만든 시안에만 쓰시길 권합니다.

3. 채팅으로 계속 다듬습니다

첫 결과가 나오면 대화를 이어가며 고칩니다. 디자인과 문구뿐 아니라 코드 에러도 대화로 고칠 수 있습니다. 문서에서는 이 기능을 "Automatically fix errors in your code with intelligent diagnostics"라고 설명합니다.

수정 요청은 막연한 표현 대신 대상과 결과를 콕 집어 쓰세요. 아래처럼 한 메시지에 여러 건을 묶으면 메시지 한도도 아낄 수 있습니다.

# 막연한 요청 (결과가 매번 달라짐)
좀 더 깔끔하게 해줘

# 구체적인 요청 (한 메시지에 묶어서)
1. 테이블의 응답시간 컬럼을 오른쪽 정렬로 바꿔줘
2. 500ms 이상이면 숫자를 빨간색으로 표시해줘
3. 헤더의 "새로고침" 문구를 "다시 확인"으로 바꿔줘
4. 다이얼로그의 본문 영역은 JSON을 들여쓰기해서 고정폭 글꼴로 보여줘

막상 수정을 거듭하다 보면 앞에서 고쳐놓은 부분이 원래대로 돌아오는 일이 생길 수 있습니다. 이럴 때는 "이전 요청에서 바꾼 X는 유지하고 Y만 바꿔줘"처럼 유지할 부분을 명시하면 덜 흔들립니다.

4. 백엔드에 연결해 데이터 앱으로 확장합니다

화면이 확정되면 목업 데이터를 실제 데이터로 바꿀 차례입니다. 공식 문서는 이 단계를 "Connect to backend to build rich, data driven applications"라고 표현합니다. 저는 이렇게 요청합니다.

목업 데이터를 걷어내고 Next.js API 라우트로 바꿔줘.
- GET /api/health 가 엔드포인트 목록과 상태를 JSON 배열로 반환
- 호출 실패 시 status 필드에 에러 메시지를 담아 200이 아닌 적절한 상태코드로 응답
- 프론트는 이 API를 호출해 테이블을 채운다

이 단계에서 흔히 걸리는 함정은 비밀값입니다. API 키나 DB 접속 정보를 프롬프트에 그대로 붙여 넣으면 생성된 코드에 하드코딩될 수 있습니다.

프롬프트에는 "환경 변수 DATABASE_URL에서 읽도록 해줘"처럼 변수 이름만 알려주세요. 실제 값은 배포 환경의 환경 변수 설정에 따로 넣습니다.

5. 원클릭 배포 또는 PR로 반영합니다

완성된 결과물은 용도에 따라 원클릭 배포나 풀 리퀘스트로 내보냅니다.

원클릭 배포

Vercel 인프라에 바로 올리는 방법입니다("Deploy with one click to secure, scalable infrastructure powered by Vercel"). 배포하면 *.vercel.app 주소가 생기므로 프로토타입을 공유하거나 사내 도구를 빠르게 띄울 때 적합합니다.

풀 리퀘스트

이미 운영 중인 저장소가 있다면 v0에서 바로 배포하지 말고 풀 리퀘스트로 반영하세요("open a pull request for review"). AI가 만든 코드도 사람이 리뷰하고 CI를 통과한 뒤 들어가야 합니다. 저는 운영 코드에는 무조건 이 방식을 씁니다.

6. shadcn CLI로 로컬 프로젝트에 가져옵니다

v0에서 만든 화면을 이미 있는 Next.js 프로젝트에 붙이고 싶을 때가 많습니다. v0 결과물에는 공유 URL이 생기는데, 이 URL을 shadcn CLI의 add 명령에 넘기면 로컬로 받아올 수 있습니다. shadcn 공식 문서는 add가 "name, url or local path to component"를 인자로 받는다고 설명합니다.

새 프로젝트라면 Next.js 프로젝트를 만들고 shadcn을 초기화합니다.

$ npx create-next-app@latest health-dashboard
$ cd health-dashboard
$ npx shadcn@latest init

그다음 v0 공유 URL로 컴포넌트를 추가합니다. 실행하면 필요한 패키지 설치 로그가 뜨고 컴포넌트 파일이 프로젝트에 추가됩니다. 구체적인 로그와 파일 위치는 프로젝트 설정에 따라 달라집니다.

# npm
$ npx shadcn@latest add <v0 공유 URL>

# pnpm
$ pnpm dlx shadcn@latest add <v0 공유 URL>

기존 프로젝트에 넣을 때는 파일 충돌을 조심해야 합니다. v0 결과물에 button 같은 shadcn 기본 컴포넌트가 들어 있으면, 내 프로젝트에서 이미 고쳐 둔 같은 이름의 파일과 겹칠 수 있습니다.

이때 --overwrite를 습관적으로 붙이면 직접 고쳐둔 부분이 사라집니다. 공식 문서에 나온 --dry-run 옵션으로 무엇이 바뀌는지 먼저 확인하세요.

# 파일을 쓰지 않고 변경 사항만 미리 확인
$ npx shadcn@latest add <v0 공유 URL> --dry-run

# 특정 파일의 diff 확인
$ npx shadcn@latest add <v0 공유 URL> --diff components/ui/button.tsx

# 확인 후 실제 적용
$ npx shadcn@latest add <v0 공유 URL>

가져온 뒤에는 로컬에서 빌드가 되는지 꼭 확인합니다. v0 미리보기에서 잘 돌던 코드도 로컬의 Next.js 버전이나 TypeScript 설정에 따라 타입 에러가 날 수 있습니다.

$ npm run build

배포 후에는 curl로 API 응답을 직접 찍어봅니다

v0가 만든 화면은 그럴듯하게 보입니다. 그런데 화면이 멀쩡하다고 API까지 제대로 동작한다는 보장은 없습니다. 에러가 나도 프론트엔드가 빈 목록이나 기본값을 그려버리면 브라우저에서는 정상처럼 보일 수 있습니다.

그래서 백엔드에 연결한 앱을 배포하면 브라우저로 클릭해보기 전에 curl로 응답 코드와 헤더, 본문부터 확인합니다. 아래 도메인과 경로는 예시이니 본인 프로젝트에 맞게 바꾸세요.

# 예시: 상태코드와 응답 헤더까지 함께 출력
$ curl -i https://내프로젝트.vercel.app/api/health

HTTP/2 200
content-type: application/json
server: Vercel
x-vercel-id: [요청마다 다른 값]
...

[{"name":"...","url":"...","status":200,"latencyMs":120}]

응답을 받으면 상태코드, Content-Type, 본문 순서로 봅니다.

상태코드: 실패 상황인데 200이 나온다면 에러 처리가 빠진 것입니다. 존재하지 않는 경로나 잘못된 파라미터로도 한 번씩 호출해보세요.
Content-Type: JSON을 기대했는데 text/html이 온다면 에러 페이지가 응답으로 나가고 있을 수 있습니다.
본문: 목업 데이터가 그대로 남아 있지 않은지 확인합니다. 채팅 중에 목업을 걷어내라고 요청했어도 일부가 남는 경우가 있습니다.

# 예시: 없는 경로를 호출했을 때 404가 오는지 확인
$ curl -s -o /dev/null -w "%{http_code}\n" https://내프로젝트.vercel.app/api/없는경로
404

# 예시: 본문 JSON을 보기 좋게 출력 (jq 설치 필요)
$ curl -s https://내프로젝트.vercel.app/api/health | jq .

Postman을 쓰신다면 이 호출들을 컬렉션으로 저장해두고, v0에서 수정할 때마다 한 번에 돌려보는 것도 좋습니다.

정리

v0는 화면을 빨리 만드는 데 강한 도구입니다. 제 경우에는 구체적인 프롬프트로 시작해 목업 데이터로 화면을 먼저 확정하고, 백엔드는 그다음에 따로 연결하는 순서가 덜 헤매는 편이었습니다.

프로토타입은 원클릭 배포로, 운영 코드는 PR이나 shadcn CLI로 가져와 리뷰를 거쳐 반영하세요. AI가 만든 앱일수록 API 응답은 curl로 직접 확인하는 습관을 들이시길 권합니다.