결론부터 말하면, v0는 Next.js·Tailwind·shadcn/ui 기반의 UI 초안을 빠르게 뽑아 검증할 때 가장 편했습니다. 완성된 제품을 한 번에 만들어주는 도구라기보다, “이 화면이 말이 되는가?”를 개발자가 빠르게 확인하게 해주는 프로토타이핑 파트너에 가깝습니다.
만들 화면 1개를 정하고 v0에 목적·사용자·필수 UI를 넣어 첫 초안을 생성해보세요.
이번 글은 v0로 ui 프로토타입 빠르게 만든 개발기를 빌더 관점에서 정리한 기록입니다. 예시는 가상의 SaaS 관리자 대시보드 화면이며, 실제 프로젝트에서는 요구사항·컴포넌트 구조·디자인 기준에 따라 결과가 달라질 수 있습니다.
만들고 싶은 화면 1개를 정하고, 아래 프롬프트 구조를 v0에 그대로 넣어 첫 버전을 받아보세요.
제가 잡은 셋업: v0에서 만들고 Cursor에서 다듬기
도구 조합은 단순하게 잡았습니다. v0 by Vercel에서 화면 초안을 만들고, 생성된 코드를 Cursor로 가져와 컴포넌트 이름과 상태 처리를 정리하는 방식입니다. 디자인 시스템은 v0가 잘 다루는 shadcn/ui와 Tailwind 기준으로 맞췄습니다.
처음부터 전체 서비스를 만들려고 하지 않았습니다. “팀원이 결제 상태, 사용량, 최근 활동을 한눈에 보는 관리자 홈”처럼 한 화면의 역할을 좁혔습니다. 이게 중요합니다. v0는 요구가 넓을수록 그럴듯하지만 애매한 화면을 만들고, 요구가 좁을수록 바로 쓸 만한 구조를 냅니다.
처음 넣은 프롬프트 예시
아래처럼 화면 목적, 사용자, 포함할 요소, 스타일 기준을 한 번에 적었습니다.
Next.js와 shadcn/ui로 SaaS 관리자 대시보드 첫 화면을 만들어줘.
사용자는 B2B SaaS 운영자이고, 결제 상태와 사용량을 빠르게 확인해야 해.
포함 요소:
- 상단 요약 카드 4개: MRR, 활성 고객, 사용량, 결제 실패
- 최근 이벤트 테이블
- 플랜별 사용량 막대 차트 영역
- 오른쪽에는 해야 할 작업 리스트
스타일은 깔끔한 B2B SaaS, 흰 배경, 회색 경계선, 모바일 반응형으로.
더미 데이터는 코드 안에 포함해줘.이 프롬프트의 장점은 “예쁜 화면”이 아니라 “무엇을 판단할 화면인지”가 들어 있다는 점입니다. v0는 이 정도만 줘도 카드, 테이블, 리스트 배치를 빠르게 제안합니다.
좋았던 점과 바로 막힌 지점
장점: 빈 화면 공포를 없애준다
가장 큰 장점은 첫 화면을 보는 속도입니다. Figma에서 와이어프레임을 그리고, 다시 코드로 옮기는 시간을 줄일 수 있습니다. 특히 개발자가 혼자 SaaS, 어드민, 랜딩 페이지를 만들 때는 “일단 화면이 떠 있다”는 것만으로 다음 의사결정이 쉬워집니다.
또 하나는 컴포넌트 단위 사고를 강제로 하게 만든다는 점입니다. v0 결과물을 그대로 쓰지 않더라도, 카드·테이블·필터·빈 상태 같은 UI 블록을 나눠서 생각하게 됩니다.
한계: 제품 맥락과 데이터 흐름은 직접 잡아야 한다
막힌 지점도 분명했습니다. v0는 인터페이스를 빠르게 그려주지만, 실제 서비스의 권한 정책, API 호출 구조, 로딩·에러 상태, 접근성 세부 기준까지 완성해주지는 않습니다.
예를 들어 결제 실패 카드가 있다고 해도 “Stripe에서 어떤 이벤트를 받아 어떤 상태로 표시할지”는 별도 설계가 필요합니다. 이 부분은 Cursor나 Claude Code에서 코드 리팩터링을 하며 직접 붙이는 편이 안전합니다.
v0, Figma, Cursor를 언제 써야 할까?
세 도구는 경쟁 관계라기보다 쓰임새가 다릅니다. 빠른 UI 코드 초안은 v0, 디자인 합의는 Figma, 실제 코드베이스 통합은 Cursor가 더 적합했습니다.
| 도구 | 잘하는 일 | 주의할 점 | 추천 상황 |
|---|---|---|---|
| v0 by Vercel | React UI 초안, shadcn/ui 컴포넌트 생성 | 비즈니스 로직과 데이터 연결은 별도 작업 필요 | 빠르게 화면을 보고 개발 방향을 정할 때 |
| Figma | 디자인 리뷰, 브랜드 시스템, 협업 코멘트 | 코드 반영에는 추가 변환 과정이 필요 | 디자이너와 시각 기준을 맞춰야 할 때 |
| Cursor | 기존 코드베이스 반영, 리팩터링, 상태 관리 | 초기 UI 감각은 프롬프트에 크게 좌우됨 | v0 결과물을 실제 앱 구조에 붙일 때 |
구체적 예시: 대시보드 초안에서 실제 코드로 옮기는 순서
가상의 B2B SaaS 관리자 홈을 만든다고 가정하면, 저는 다음 순서가 가장 덜 헤맵니다.
- v0에 화면 목적과 필수 UI 블록을 넣어 첫 버전을 생성합니다.
- 마음에 드는 결과에서 코드 복사 또는 프로젝트 반영 방식을 확인합니다.
- Cursor에서
DashboardPage,MetricCard,RecentEventsTable처럼 컴포넌트를 분리합니다. - 더미 데이터를
mockDashboardData로 빼고, 나중에 API로 교체할 자리를 만듭니다. - 모바일에서 카드가 너무 길어지는지, 테이블이 깨지는지 먼저 확인합니다.
여기서 흔한 실수는 v0가 만든 화면을 “완성품”으로 착각하는 것입니다. 초안이 좋아 보여도 실제 제품에는 빈 상태, 권한 없음, 결제 실패, 느린 네트워크 같은 장면이 반드시 들어갑니다. 이 상태들을 프롬프트에 추가로 요청하면 결과물이 훨씬 실무적으로 바뀝니다.
이런 사람에게 추천합니다
추천 대상
혼자 MVP를 만드는 개발자, 어드민 화면을 빨리 뽑아야 하는 빌더, Figma 없이도 코드 기반 UI를 먼저 확인하고 싶은 사람에게 잘 맞습니다. 특히 Next.js와 Tailwind에 익숙하다면 결과물을 이해하고 수정하기가 쉽습니다.
다른 선택이 나은 경우
반대로 브랜드 비주얼이 중요한 소비자 앱, 복잡한 인터랙션이 핵심인 제품, 디자이너와 픽셀 단위 리뷰가 필요한 팀이라면 Figma를 먼저 쓰는 편이 낫습니다. v0는 시각적 방향을 빠르게 제안하지만, 최종 디자인 의사결정 도구로만 쓰기에는 부족할 수 있습니다.
FAQ
v0 결과물을 상용 프로젝트에 바로 써도 되나요?
기술적으로는 가능하지만, 라이선스와 패키지 의존성, 접근성, 보안 검토는 직접 확인해야 합니다. 특히 인증·결제·고객 데이터가 들어가는 화면은 생성 코드 그대로 배포하지 않는 편이 안전합니다.
프롬프트를 한국어로 써도 괜찮나요?
가능합니다. 다만 컴포넌트명, 상태명, UI 용어는 영어를 섞으면 결과가 더 정돈되는 경우가 많습니다. 예를 들어 “최근 활동 테이블”보다 “Recent activity table with empty state”처럼 적으면 코드 구조가 명확해집니다.
v0와 Claude Code 중 무엇을 먼저 써야 하나요?
화면 모양이 아직 없다면 v0를 먼저 쓰고, 기존 코드에 붙이거나 로직을 정리해야 한다면 Claude Code나 Cursor를 먼저 쓰는 흐름이 좋습니다. 저는 UI 초안은 v0, 통합과 리팩터링은 코드 에이전트로 나누는 방식을 추천합니다.
마무리: 오늘 할 일은 화면 하나만 정하는 것
v0로 ui 프로토타입 빠르게 만든 개발기의 핵심은 도구 자랑이 아니라 범위를 작게 잡는 데 있습니다. “대시보드 전체”가 아니라 “결제 상태를 확인하는 첫 화면”처럼 좁히면 v0의 장점이 훨씬 잘 살아납니다.
오늘 바로 해본다면 만들 화면 1개, 사용자 1명, 반드시 들어갈 UI 4개만 적어보세요. 그다음 v0에서 초안을 받고, Cursor에서 컴포넌트만 정리해도 다음 빌드 방향이 꽤 선명해집니다.
관련 링크
- ai 코딩 구독 요금 비교: Claude Code·Cursor·Copilot, 빌드용으로 돈값 하는 조합
- claude code artifacts, 웹 미리보기 대신 파일로 남기는 실전 작업법
- claude code 모델 추천: 실제 빌드 작업에서 Sonnet과 Opus를 나눠 쓰는 기준
- 관련 태그 더 보기
- 카테고리 더 보기
- 검색 결과 더 보기
- 참고 링크
