v0으로 UI 컴포넌트 즉시 생성하기
Vercel의 v0는 프롬프트 한 줄로 React 컴포넌트 코드를 바로 만들어줘요. 디자이너 없이도 Next.js에 붙일 수 있는 UI를 5분 안에.
따라 하기
1단계
v0.app 접속 및 첫 프롬프트
- 1v0.app에 접속해 Vercel 계정으로 로그인합니다.
- 채팅창에 만들고 싶은 UI를 설명합니다.
- 2로그인 폼, 이메일+비밀번호+소셜 로그인 버튼, shadcn/ui 스타일 또는 상품 목록 그리드, 이미지+이름+가격+장바구니 버튼, 반응형처럼 구체적으로 입력하세요.
v0.dev
실제 화면
팁 shadcn/ui 기반으로 생성하면 인기 디자인 시스템과 바로 호환됩니다. 다크 모드 지원, 모바일 우선 같은 키워드도 추가하면 반영됩니다.
처음이라 잘 모르겠다면
v0.dev에서 모바일 친화적인 할 일 목록 앱 UI처럼 원하는 UI를 프롬프트로 입력하세요.
막히면 볼 것
자주 하는 실수 3가지
- 생성된 코드 검토 없이 바로 사용 → 의존성 누락 에러 — import 경로·패키지 확인 필수
- 너무 복잡한 UI를 한 번에 요청 → 불완전한 결과 — 컴포넌트 단위로 나눠서 요청
- shadcn/ui 미설치 상태에서 사용 → 스타일 깨짐 — 먼저 npx shadcn init 실행
AI 없이 할 때와 뭐가 다른가요?
UI 컴포넌트 작업 → 프롬프트 입력 → React 코드 즉시 완성
대시보드 카드 컴포넌트 코드 처음부터 짜는 거 너무 오래 걸려...
나
반복되는 UI 보일러플레이트 코딩은 시간이 낭비됩니다.