v0로 UI 빠르게 만드는 꿀팁

v0란?

Vercel에서 만든 UI 생성 AI입니다. 프롬프트를 입력하면 shadcn/ui 기반의 React 컴포넌트를 즉시 생성해줍니다.

잘 되는 프롬프트 패턴

패턴 1: 구체적인 컴포넌트 명시

"다크모드를 지원하는 대시보드 사이드바를 만들어줘.
메뉴: 홈, 분석, 설정. 현재 선택된 메뉴는 강조 표시."

패턴 2: 유사 서비스 참고

"Notion 스타일의 문서 카드 목록 컴포넌트.
카드마다 아이콘, 제목, 수정일, 태그 뱃지 포함."

패턴 3: 기능 명세 포함

"상품 목록 카드 그리드.
- 이미지 (16:9)
- 상품명 (최대 2줄)
- 가격 (빨간 할인가)
- 찜하기 버튼 (하트 아이콘)
- hover 시 그림자 효과"

팁

• 생성 후 Chat 기능으로 수정 요청 가능
• "더 모던하게", "간결하게" 등 스타일 지시 유효
• Code 탭에서 직접 복사해서 Next.js에 붙여넣기