v0로 UI 만드는 법
바이브코딩 UI 자동화 입문
텍스트 한 줄로 랜딩페이지 UI 완성 — Vercel v0 처음 써보는 분을 위한 단계별 안내
📋 이 글에서 알 수 있는 것
- v0가 뭔지, Cursor·Claude와 어떻게 다른지
- 회원가입부터 첫 UI 생성까지 전 과정
- 랜딩페이지 UI를 실제로 만들어보는 프롬프트 실전 예시
- 만든 코드를 꺼내 쓰는 방법 (복사 / Vercel 배포)
- 무료 플랜 크레딧 한도와 유료 플랜 차이
v0란 무엇인가
v0는 Vercel이 만든 AI UI 생성 도구입니다. 텍스트로 원하는 화면을 설명하면, AI가 React 기반의 UI 코드를 즉시 생성해줍니다. 별도로 코드 에디터를 설치할 필요도 없고, 웹 브라우저에서 바로 씁니다.
Vercel은 Next.js를 만든 회사로, 프론트엔드 개발자 사이에서는 이미 잘 알려진 곳입니다. v0는 그 Vercel이 비개발자도 쓸 수 있도록 내놓은 서비스로, 2023년 말 공개 이후 바이브코딩 씬에서 빠르게 주목받았습니다.
⚡ v0가 다른 바이브코딩 툴과 다른 점
- UI 특화: 버튼, 카드, 폼, 히어로 섹션 등 시각적 컴포넌트 생성에 특화
- 브라우저 기반: 설치 불필요. v0.dev 접속만으로 바로 시작
- 실시간 미리보기: 코드와 결과 화면을 나란히 보면서 수정 가능
- shadcn/ui 기반: 업계 표준 UI 라이브러리를 기반으로 완성도 높은 컴포넌트 생성
- Vercel 원클릭 배포: 만든 UI를 Vercel로 즉시 배포 연결 가능
바이브코딩 완전 입문 가이드: Cursor vs Claude vs v0 vs Replit도 함께 읽어보세요.
가입하고 화면 파악하기
v0 시작은 매우 간단합니다. 설치 과정이 없고 계정 하나면 바로 쓸 수 있습니다.
v0.dev 접속 및 가입
v0.dev에 접속합니다. GitHub 계정이나 이메일로 가입할 수 있습니다. GitHub 계정이 없다면 이메일로 가입해도 무방합니다.
메인 화면 구성 파악
로그인하면 중앙에 큰 입력창이 나타납니다. 여기에 만들고 싶은 UI를 말로 설명하면 됩니다. 왼쪽에는 이전에 생성한 프로젝트 목록, 우측에는 생성 결과 미리보기가 표시됩니다.
언어 설정 확인
v0는 영어·한국어 모두 잘 이해합니다. 프롬프트를 한국어로 입력해도 UI를 잘 만들어줍니다. 다만 생성된 코드 안의 텍스트(버튼 문구, 제목 등)까지 한국어로 나오게 하려면 프롬프트에 명시해야 합니다.
이미 Vercel 계정이 있다면 별도 가입 없이 바로 로그인할 수 있습니다. Vercel 배포까지 연결하려면 같은 계정을 쓰는 게 편합니다.
첫 UI 만들기 — 랜딩페이지 실전
가입을 마쳤다면 바로 만들어봅시다. 예제는 간단한 SaaS 서비스 랜딩페이지 상단(히어로 섹션)입니다. 실제로 써볼 수 있는 프롬프트를 두 가지 수준으로 준비했습니다.
📝 프롬프트 예시 — 기초 버전
"AI 글쓰기 도구 서비스의 랜딩페이지 히어로 섹션을 만들어줘.
서비스 이름은 'WriteAI', 슬로건은 '10분 만에 완성하는 블로그 글'이야.
배경은 흰색, 버튼은 파란색, 전체적으로 깔끔한 느낌으로 해줘.
텍스트는 한국어로."
📝 프롬프트 예시 — 상세 버전
"AI 글쓰기 도구 서비스의 랜딩페이지를 만들어줘.
- 서비스명: WriteAI
- 슬로건: 10분 만에 완성하는 블로그 글
- 구성: 상단 네비게이션 + 히어로 섹션 + 기능 소개 3개 카드
- 디자인: 미니멀, 화이트 배경, 포인트 컬러 #2563eb (파란색)
- CTA 버튼 문구: '무료로 시작하기'
- 텍스트 전체 한국어"
입력 후 생성 버튼을 누르면 오른쪽 미리보기 화면에 UI가 실시간으로 나타납니다. 결과가 마음에 들지 않으면 아래 입력창에 "버튼을 더 크게 해줘", "카드에 아이콘 추가해줘" 식으로 수정 요청을 이어가면 됩니다.
컬러 코드(#2563eb), 구성 요소 목록, 버튼 문구처럼 구체적인 값을 넣을수록 원하는 디자인에 가까운 결과가 나옵니다. "예쁘게 해줘"보다 "미니멀, 화이트 배경, 파란 포인트 컬러"처럼 표현하세요.
>AI로 랜딩페이지 만들기: 비개발자 실전 제작기도 함께 읽어보세요.
결과물 꺼내 쓰는 방법
v0에서 UI를 만들고 나면 세 가지 방법으로 결과물을 활용할 수 있습니다.
코드 복사
미리보기 화면 우측 상단의 "Code" 탭을 클릭하면 생성된 전체 코드를 볼 수 있습니다. 복사 버튼으로 코드를 가져와 Cursor나 다른 에디터에 붙여넣어 사용할 수 있습니다. React / Next.js 프로젝트에 바로 붙여넣기 가능한 형태로 나옵니다.
Vercel 원클릭 배포
"Deploy" 버튼을 클릭하면 Vercel 계정에 자동으로 프로젝트가 생성되고 배포까지 완료됩니다. 별도 서버 설정 없이 xxx.vercel.app 형태의 URL이 즉시 발급됩니다. 결과물을 바로 링크로 공유해야 할 때 유용합니다.
CLI로 로컬에 다운로드
터미널이 익숙한 분이라면 v0가 안내하는 npx shadcn add [컴포넌트 URL] 명령어로 기존 프로젝트에 컴포넌트를 바로 추가할 수 있습니다. 비개발자라면 코드 복사 또는 Vercel 배포 방식을 권장합니다.
v0가 생성하는 코드는 React(Next.js) 컴포넌트입니다. 순수 HTML/CSS 파일이 필요하다면 Cursor나 ChatGPT에 "이 코드를 순수 HTML로 변환해줘"라고 요청해 변환하는 방법을 씁니다.
무료 플랜 한도와 유료 플랜
v0는 무료로 시작할 수 있지만 크레딧 제도가 있습니다. 생성 요청 1회마다 크레딧이 소모되는 구조입니다.
| 구분 | 무료 플랜 | 유료 플랜 (Premium) |
|---|---|---|
| 월 크레딧 | 200 크레딧 | 무제한 (일부 제한 있음) |
| 생성 횟수 기준 | 요청당 약 10~30 크레딧 소모 | - |
| 모델 품질 | 기본 모델 | 고급 모델 우선 |
| 크레딧 소진 시 | 다음 달 갱신까지 사용 불가 | - |
* 2026년 4월 기준. 플랜 및 크레딧 정책은 변동될 수 있으므로 v0.dev 공식 페이지에서 확인하세요.
한 번에 너무 짧은 프롬프트를 여러 번 보내면 크레딧이 빠르게 소모됩니다. 처음부터 원하는 구성을 최대한 상세하게 담은 프롬프트 하나로 시작하고, 이후 수정 요청을 최소화하는 방식이 효율적입니다.
v0가 잘 맞는 사람 vs 아닌 사람
v0는 강력하지만 모든 상황에 최적인 건 아닙니다. 내 상황에 맞는지 확인해보세요.
빠르게 UI 시안이 필요한 기획자·디자이너
→ 코드 몰라도 아이디어를 즉시 시각화할 수 있습니다. 클라이언트나 팀에게 보여줄 목업을 빠르게 만들 때 특히 유용합니다.
랜딩페이지·포트폴리오 사이트를 만드는 사이드프로젝터
→ Vercel 배포까지 연결되어 있어 만들고 → 배포까지 한 흐름으로 처리할 수 있습니다.
백엔드 로직이나 DB 연동이 필요한 서비스
→ v0는 UI(프론트엔드) 특화입니다. 로그인, 결제, 데이터 저장 같은 기능은 별도 작업이 필요합니다. 이런 경우엔 Cursor + Agent 모드가 더 적합합니다.
순수 HTML 결과물이 필요한 경우
→ v0 출력물은 React 기반입니다. 블로그 플랫폼(티스토리, 워드프레스 등)에 HTML로 붙여야 하는 상황이라면 변환 과정이 추가로 필요합니다.
Cursor 사용법 초보 가이드 A to Z도 함께 읽어보세요.
자주 묻는 질문
v0는 완전 무료인가요?
무료 플랜이 있어 월 200 크레딧 내에서 무료로 사용할 수 있습니다. 다만 크레딧이 소진되면 다음 달 갱신까지 생성이 제한됩니다. 자주 쓸 계획이라면 유료 플랜을 고려해볼 수 있습니다. 정확한 플랜 정보는 v0.dev 공식 페이지에서 확인하세요.
v0로 만든 코드를 Cursor에서 수정할 수 있나요?
네, 가능합니다. v0에서 코드를 복사해 Cursor에 붙여넣은 뒤 Composer 모드로 추가 수정을 요청하는 방식으로 두 툴을 함께 쓸 수 있습니다. v0로 초안을 빠르게 잡고, Cursor로 세부 조정하는 워크플로우가 잘 맞습니다.
코딩을 전혀 몰라도 v0를 쓸 수 있나요?
UI 생성 자체는 코딩 지식 없이도 할 수 있습니다. 다만 결과물을 실제 서비스에 붙이거나, React 프로젝트에 통합하려면 기본적인 파일 구조 이해가 도움이 됩니다. 처음엔 Vercel 배포 기능을 이용해 "만들기 → 링크 공유"까지만 해보는 것을 추천합니다.
v0가 생성하는 UI는 실제로 써도 될 만큼 완성도가 높나요?
shadcn/ui를 기반으로 하기 때문에 기본 완성도는 높은 편입니다. 다만 세세한 브랜드 컬러나 타이포그래피는 프롬프트를 구체적으로 주거나 이후 직접 수정하는 과정이 필요합니다. 프로토타입·MVP 수준으로는 충분히 사용할 수 있습니다.
Next.js를 모르면 v0 결과물을 쓸 수 없나요?
Vercel 배포 기능을 쓰면 Next.js를 몰라도 됩니다. 배포 버튼 클릭 → Vercel 계정 연결만 하면 자동으로 URL이 생성됩니다. 단, 코드를 직접 다운받아 다른 환경에 붙이려면 React 기초 지식이 필요합니다.
v0는 아이디어를 UI로 바꾸는 속도를 극적으로 줄여주는 툴입니다.
처음엔 랜딩페이지 히어로 섹션 하나부터 만들어보세요.
"텍스트 → UI 완성"의 사이클을 한 번만 경험하면 활용 방법이 바로 보입니다.
VibeLab이었습니다.