랜딩 페이지 하나 만드는 데 프리랜서 개발자를 찾고 견적을 받고 2주를 기다렸다. v0.dev에서 “이메일 수집 랜딩 페이지, 다크 테마, 히어로 섹션과 특징 소개 3개”라고 입력했더니 5분 만에 실제로 동작하는 페이지 코드가 나왔다.
1. v0.dev vs Bolt.new — 어떤 걸 써야 하나
| 항목 | v0.dev | Bolt.new |
|---|---|---|
| 주요 용도 | UI 컴포넌트·화면 | 풀스택 웹 앱 |
| 브라우저 실행 | 코드 미리보기 | 바로 실행 |
| 무료 한도 | 월 200크레딧 | 제한적 무료 |
| 배포 연결 | Vercel 연동 | Netlify·Vercel |
2. v0.dev로 UI 만들기
v0.dev에 접속해 로그인 후 대화창에 원하는 UI를 설명한다. “다크 테마의 SaaS 랜딩 페이지, 네비게이션·히어로·특징 3개·가격 테이블·푸터로 구성”처럼 구체적으로 쓸수록 좋다. 미리보기에서 실제 UI를 확인하고 “헤딩 색상을 파란색으로 바꿔줘”처럼 수정 요청을 이어간다.
마음에 드는 결과가 나오면 React 코드를 복사해서 Vercel에 배포하거나, Cursor AI에 붙여넣어 추가 개발할 수 있다. Cursor AI와 함께 쓰면 v0.dev에서 UI를 만들고 Cursor에서 기능을 추가하는 완결된 워크플로우가 된다.
자주 묻는 질문
만든 웹사이트를 실제 도메인에 올릴 수 있나요?
v0.dev에서 생성된 코드를 Vercel에 배포하면 무료 vercel.app 서브도메인이 제공됩니다. 커스텀 도메인을 연결하려면 별도 도메인 구매 후 Vercel에서 설정하면 됩니다.
React를 모르면 코드를 이해할 수 없나요?
코드를 이해하지 못해도 됩니다. v0.dev에서 계속 수정 요청을 하거나, Bolt.new처럼 브라우저에서 바로 실행되는 도구를 쓰면 코드 이해 없이도 원하는 결과를 얻을 수 있습니다.
간단한 랜딩 페이지나 소개 페이지가 필요하다면 v0.dev에서 먼저 만들어보자. 5분 안에 실제 화면이 나온다. 더 발전시키고 싶다면 Cursor AI 가이드로 기능을 추가하자.