v0.dev: AI로 UI 생성

[특징]
- React + Tailwind + shadcn 자동
- TypeScript 기본
- 프롬프트 → UI 30초
- 반응형 자동


[가격]
- Free — 50 messages/mo
- Premium $20/mo — 무제한
- Team $30/user

[기본]
"Pricing card with 3 tiers"

[더 구체적]
"Pricing section for SaaS:
- 3 tiers: Free, Pro $19, Business $49
- Featured Pro tier (highlighted)
- Each: title, price, 5 features list, CTA button
- Mobile responsive
- Use shadcn Card component"


→ 명세 = 더 정확한 결과

1. 큰 구조부터
"Landing page layout: header, hero, features, pricing, footer"

2. 한 섹션씩 다듬기
"Now design the hero section more impactful — bigger text, gradient background"

3. 인터랙션 추가
"Add a sticky header that becomes solid on scroll"

4. 모바일 최적화
"Make the navigation collapsible on mobile with hamburger menu"

[옵션 1] Copy code
- v0 → Code 탭
- Copy → Cursor에 paste


[옵션 2] CLI Install
npx shadcn-ui@latest add "https://v0.dev/r/xxx"


→ 프로젝트에 직접 추가
→ shadcn 컴포넌트 자동 설치
→ Tailwind 설정 호환

[흐름]
1. v0에서 UI 빠르게
2. 코드 Cursor에 붙여넣기
3. Cursor가 비즈니스 로직 추가
   "Connect this to Supabase"
   "Add form validation with Zod"
4. 테스트 작성
   "Write tests for this component"


→ UI: v0 (30초)
→ 로직: Cursor (몇 분)
→ 테스트: Cursor (몇 분)
→ 1시간 만에 production-ready

v0가 매번 다른 스타일?

[해결] 첫 컴포넌트 후:
"Use the same design language for next components:
- Same color palette
- Same border radius
- Same spacing
- Same typography"


또는 처음부터:
"Following our design system: indigo primary, gray neutral,
shadcn defaults"


→ 일관성 유지
→ 디자인 시스템 자연스럽게 형성

[Iteration 1]
"Pricing card"
→ 평이한 카드

[Iteration 2]
"Make it more modern, with subtle gradients and shadows"

[Iteration 3]
"Highlight the featured tier with a glow effect"

[Iteration 4]
"Add hover animations"

[Iteration 5]
"Make sure all CTAs are clearly visible"


→ 5번 정도 다듬으면 production 수준

v0가 정적 데이터로 UI 만들면 →
"Replace the hardcoded data with a fetch from /api/products
- Use TanStack Query
- Add loading and error states
- Handle empty state"


→ 실제 API 연결
→ 완성된 컴포넌트

[프롬프트]
"Pricing section in Korean for Korean SaaS:
- 무료, Pro 월 $19, 비즈니스 월 $49
- Pretendard font (Korean)
- All Korean copy"


[Pretendard 추가]
// next.config.js
import { Inter } from 'next/font/google';
// + Pretendard from Google Fonts


→ 한국 시장 자연스러운 UI

v0는 자동으로 lucide-react 사용
- 1000+ 아이콘
- 가벼움 (tree-shake)
- 일관된 스타일

[설치]
pnpm add lucide-react


// 사용
import { Check, ArrowRight, Star } from 'lucide-react';