v0 핵심 요약
- v0.dev는 Vercel의 AI 앱 빌더입니다. 일상 언어로 설명하거나(스크린샷·Figma 파일 첨부 가능) 동작하는 Next.js 앱을 생성해 미리보기와 코드를 나란히 보여줍니다.
- 아이디어가 얇으면 Enhanced Prompt, 컴포넌트 하나를 고칠 땐 요소 셀렉터, 마음에 안 드는 반복은 버전 목록으로 롤백하세요.
- 배포는 Vercel 원클릭이고 GitHub 동기화는 프롬프트 변경마다 저장소로 푸시합니다. 코드가 v0 안에 갇힐 일은 없습니다.
- 실제 데이터는 Supabase 통합으로. v0 설정에서 DB를 만들고, SQL 스크립트는 JWT 줄을 지운 뒤 실행하면 이메일 로그인과 사용자별 데이터가 붙습니다.
How to use v0.dev by Vercel For Beginners
원본 영상:Code with Nathan12:28
스크린샷은 원본 영상에서 가져왔으며 타임스탬프 출처 링크를 함께 표시합니다. 본문은 전체 자막을 기반으로 우리가 직접 작성한 해설로, 사실 관계는 영상과 일치합니다.
이 튜토리얼은 글로 배우고 싶은 독자를 위한 독립적인 그림 해설서입니다. 창작자를 응원하려면 위에 링크된 Code with Nathan 채널의 원본 영상을 시청해 주세요.
v0로 앱 만들기, 단계별 가이드
- 1
v0.dev에서 시작
v0.dev에서 무료 계정을 만드세요. 사이드바에 채팅과 프로젝트, 가운데 큰 프롬프트 박스가 출발점입니다. 주위에 스크린샷 복제, Figma 가져오기, 랜딩 페이지 같은 빠른 작업이 있고 첨부 버튼은 이미지와 Figma 파일을 디자인 입력으로 받습니다.
빠른 작업과 모델 칩이 있는 v0.dev 컴포저.2:00 지점 보기 - 2
Enhanced Prompt로 아이디어 확장
"노트 앱" 하나로는 v0에게 정보가 부족합니다. Enhanced Prompt 버튼이 핵심 기능, 사용자 인증, 반응형 디자인을 더한 형태로 다시 써줍니다. 이미 상세한 프롬프트가 있다면 쓰지 마세요 — 상상과 다른 방향으로 흐를 수 있습니다. 일상 UI는 medium 모델이 가성비 기본값이고, 복잡한 빌드에만 large를 쓰세요.
Enhanced Prompt가 한 줄을 진짜 명세로 바꿉니다.2:15 지점 보기 - 3
커뮤니티 프로젝트 둘러보기
컴포저 아래 커뮤니티 갤러리에는 다른 사람들이 만든 것들이 있습니다. 포트폴리오, 랜딩 페이지, 장난스러운 실험까지. Open in v0를 누르면 내 계정으로 복사되어 코드도 살펴보고 마음대로 바꿀 수 있습니다. 비슷한 게 이미 있다면 제로부터 시작하는 것보다 빠릅니다.
커뮤니티 갤러리: Open in v0로 프로젝트를 복사합니다.3:00 지점 보기 - 4
앱 생성하기
데모 프롬프트: "폴더, 태그, 검색, 구문 강조가 있는 markdown 기반 노트 앱." Enter를 누르면 v0가 계획을 세운 뒤 Code 뷰에 파일을 실시간으로 흘려 넣습니다. 1분쯤 지나면 완성된 앱이 미리보기 창에 앉아 있습니다.
생성 중 app/page.tsx가 스트리밍되는 모습.4:00 지점 보기 - 5
미리보기에서 테스트
뭘 바꾸기 전에 실제 사용자처럼 써보세요. 노트 제목과 본문 편집, 폴더에 생성, 삭제, 목록 검색까지. 지금 동작의 빈틈을 찾으면 나중의 모호한 프롬프트 다섯 번 대신 정확한 한 번으로 끝납니다.
미리보기 창에서 노트 제목 편집.4:30 지점 보기 - 6
요소 셀렉터로 한 요소만 고치기
삭제 버튼이 툴바에 묻힙니다 — 셀렉터 아이콘을 누르고 요소를 고른 뒤 그것에 대해서만 프롬프트하세요. "이 삭제 버튼 배경을 빨간색으로." v0는 페이지 전체를 다시 만들지 않고 그 컴포넌트에만 변경을 적용합니다.
요소 셀렉터가 프롬프트를 한 컴포넌트로 한정합니다.9:00 지점 보기 - 7
버전으로 롤백
생성마다 버전이 보관됩니다. 버전 드롭다운으로 비교하고 Restore로 이전 상태를 복구하세요. 과감한 프롬프팅을 싸게 만들어 주는 안전망입니다.
Version 2 복원 카드 — 이전 상태가 클릭 한 번입니다.5:25 지점 보기 - 8
Vercel에 배포
Deploy 버튼이 앱을 바로 Vercel로 밀어 넣습니다. 빌드 로그가 흐르고, 커스텀 도메인이 할당되고, 1분쯤 뒤 공개 URL이 생깁니다. 이후 변경은 같은 메뉴에서 원클릭 재배포입니다.
미리보기에서 라이브 URL까지 클릭 한 번.6:00 지점 보기 - 9
GitHub에 동기화
GitHub 아이콘을 누르고 v0를 승인한 뒤 저장소 이름을 정해 만듭니다. 이후 모든 프롬프트 변경이 저장소 브랜치로 푸시되고, zip으로 내려받거나 npx로 기존 코드베이스에 넣을 수도 있습니다. 프로젝트가 v0 안에 갇히는 일은 없습니다.
v0가 푸시할 GitHub 저장소 만들기.7:00 지점 보기 - 10
Supabase 연결
브라우저 속 데이터는 브라우저와 함께 사라집니다. Settings → Integrations → Supabase를 열고, 약관에 동의하고, 리전과 무료 플랜을 골라 데이터베이스를 만드세요. v0가 자동으로 Vercel 프로젝트에 연결합니다.
v0 안의 Supabase Create Database 대화상자.8:30 지점 보기 - 11
이메일 로그인 추가
프롬프트: "이메일과 비밀번호 인증 시스템을 만들고 모든 데이터를 Supabase에 저장해줘." v0가 로그인·가입 페이지와 테이블·보안 정책을 만드는 SQL 스크립트를 생성합니다. 지금 앱 데이터는 localStorage에 있는데, 이 단계부터 진짜 데이터베이스로 옮겨갑니다.
v0가 인증 시스템을 계획하고 SQL 스크립트를 준비합니다.9:10 지점 보기 - 12
SQL 스크립트 실행 — JWT 줄은 먼저 삭제
영상이 짚는 함정 하나: 스크립트에 app.jwt_secret을 설정하는 줄이 있으면 실행 전에 지우세요. 시크릿은 Supabase 생성 때 이미 설정돼 있어 이 줄이 있으면 에러가 납니다. 그다음 v0에서 Apply로 스크립트를 실행해 folders, notes 테이블과 정책을 만듭니다.
JWT 줄을 뺀 테이블 생성 스크립트가 실행을 기다립니다.9:30 지점 보기 - 13
데이터가 살아있는지 확인
미리보기에서 가입하고 폴더에 노트를 만든 뒤 다른 브라우저로 다시 열어보세요. 전부 남아 있습니다. 데이터는 사용자별로 Supabase 테이블에 저장되고, 앱은 프롬프트로 만든 프런트엔드, 통합으로 얻은 데이터베이스, Vercel 배포를 갖춘 진짜 풀스택 제품이 됩니다.
로그인 후 노트가 Supabase에 저장됩니다.10:10 지점 보기