← 도구 목록으로
🎨
v0 by Vercel
AI로 UI 만들기
v0 by Vercel 시작하기 →
무료로 시작 가능
⚡
바로 시작하기
복붙 OK1. https://v0.dev 접속 (로그인 불필요)
2. 원하는 UI 설명 입력 (예: '로그인 폼')
3. 코드 복사 또는 npx 명령어로 프로젝트에 추가
소개
프롬프트만 입력하면 React 컴포넌트를 생성해주는 AI입니다. 디자인 아이디어를 바로 코드로 만들어주고, shadcn/ui 기반이라 바로 프로젝트에 사용할 수 있어요.
주요 기능
- ✓텍스트 → React 컴포넌트
- ✓실시간 미리보기
- ✓shadcn/ui 기반
📖 상세 가이드
⏱️ 1분📋 GitHub 계정 (선택), React/Next.js 프로젝트 (코드 적용 시)
- 1
v0.dev 접속
v0.dev 사이트 접속 → 로그인 없이도 바로 사용 가능
- 2
UI 설명 입력
입력창에 원하는 UI를 자연어로 설명 (예: '모던한 로그인 폼 만들어줘')
- 3
결과 확인 및 수정
생성된 UI 미리보기 확인 → 마음에 안 들면 '이 부분 바꿔줘' 요청
- 4
코드 복사/적용
'Add to Codebase' 클릭 → npx 명령어 복사 → 터미널에서 실행하면 프로젝트에 자동 추가
💡 더 잘 쓰는 팁
- 💡참고 이미지를 첨부하면 더 정확한 결과가 나와요
- 💡"shadcn 스타일로"라고 명시하면 일관된 디자인이 적용돼요
- 💡반복 수정으로 점점 원하는 디자인에 가까워질 수 있어요
- 💡npx 명령어로 프로젝트에 바로 추가할 수 있어요
🎯 이렇게 활용해보세요
랜딩 페이지
SaaS 랜딩 페이지 히어로 섹션 생성
예시 프롬프트:
"모던한 SaaS 랜딩 페이지 히어로 섹션 만들어줘"
대시보드
관리자 대시보드 UI 빠르게 프로토타이핑
예시 프롬프트:
"매출 차트가 있는 관리자 대시보드 만들어줘"
폼 컴포넌트
로그인, 회원가입 등 폼 UI 생성
예시 프롬프트:
"이메일/비밀번호 로그인 폼 만들어줘"
카드 레이아웃
상품 목록, 블로그 카드 등 생성
예시 프롬프트:
"이커머스 상품 카드 그리드 만들어줘"
⚠️ 알아두세요
- •React/Next.js 프로젝트에서만 바로 사용 가능해요
- •복잡한 인터랙션은 추가 코딩이 필요해요
- •무료 버전은 생성 횟수가 제한돼요
가격
Free
무료
Premium
$20/월