기술 학습 노트

테마

v0로 초기 화면 설계 ​

학습 목표 ​

  1. v0가 무엇이고 왜 사용하는지 설명할 수 있다.
  2. AI 빌더로 초기 화면 구조를 먼저 잡는 전략의 장점을 이해한다.
  3. 효과적인 프롬프트 작성법을 익힌다.
  4. v0 결과물을 ZIP 다운로드하여 프로젝트에 활용할 수 있다.

v0란? ​

v0 = Next.js + Tailwind 기반으로 프로덕션 코드를 자동 생성해주는 AI 빌더

v0는 Vercel이 만든 AI 기반 웹 빌더이다. 텍스트로 원하는 화면을 설명하면, 실제로 동작하는 코드(React + Tailwind CSS)를 자동으로 생성해준다. 단순한 목업이 아니라 바로 사용 가능한 프로덕션 코드를 만들어주기 때문에, 디자인 도구와 코딩 도구의 중간 역할을 한다.

항목내용
접속 주소v0.dev
기반 기술Next.js, React, Tailwind CSS
요금무료 한도 내에서 초기 디자인 충분
출력 형태실제 동작하는 코드 (ZIP 다운로드 가능)

왜 v0부터 시작하는가? ​

Cursor에 바로 "사이트 만들어줘"라고 요청하는 것보다, v0에서 화면 구조를 먼저 잡고 Cursor로 이식하는 것이 훨씬 효율적이다.

이유 정리 ​

방식소요 시간결과 품질수정 횟수
Cursor에 바로 요청오래 걸림낮음많음
v0 → Cursor빠름높음적음

핵심: v0는 화면 설계 전문가 역할, Cursor는 기능 구현 전문가 역할로 분업하는 것이 가장 효율적이다.

다른 AI 빌더 비교 ​

v0 외에도 여러 AI 빌더가 있다. 하지만 코드 품질 면에서 v0가 가장 뛰어나다.

도구장점단점
v0코드 품질 높음, Next.js 기반Vercel 생태계 중심
Lovable인터페이스 직관적코드 커스텀 어려움
Bolt빠른 생성 속도품질 편차 큼

결론: 우리는 코드를 직접 다룰 예정이므로, 코드 품질이 가장 높은 v0를 사용한다.

v0 사용 방법 ​

1단계: 접속 및 프롬프트 입력 ​

  1. v0.dev 접속
  2. 구글 또는 Github 계정으로 로그인
  3. 채팅창에 프롬프트 입력

2단계: 결과 확인 및 수정 ​

첫 결과물이 바로 완벽할 수는 없다. 수정 요청을 반복하면서 완성도를 높인다.

3단계: ZIP 다운로드 ​

만족스러운 결과물이 나왔다면 Download ZIP 버튼을 클릭하여 코드를 다운로드한다.

프롬프팅 예시: 날씨 기반 옷차림 추천 사이트 ​

효과적인 프롬프트에는 3가지 요소가 필요하다.

프롬프트 구성 요소 ​

요소설명예시
타겟 유저누가 사용하는 사이트인지내일 날씨, 기온별 옷차림 검색 유저
인상/분위기사이트의 느낌트렌디, 편안, 자주 방문하고 싶은
화면 요소구체적인 UI 구성날씨 정보 영역, 활동지수, 캐릭터

실제 프롬프트 예시 ​

날씨 기반 옷차림 추천 웹사이트를 만들어줘.

[타겟 유저]
- "내일 날씨" "이번주 날씨" "기온별 옷차림" 키워드로 검색하는 사람

[사이트 인상]
- 트렌디하면서도 편안한 느낌
- 자주 들어오고 싶은 사이트

[화면 구성]
- 메인 영역(65-70%): 오늘의 날씨 정보 (온도, 체감온도, 날씨 상태)
- 사이드 영역: 활동지수 (빨래, 운동, 자외선 등)
- 하단: 졸라맨 캐릭터가 오늘 날씨에 맞는 옷차림을 추천
- 반응형 디자인 (모바일 우선)

수정 요청 팁 ​

첫 결과물에서 마음에 들지 않는 부분이 있다면 구체적으로 수정을 요청한다.

나쁜 수정 요청좋은 수정 요청
"좀 더 예쁘게 해줘""헤더 배경을 그라데이션으로 바꿔줘"
"레이아웃 바꿔줘""날씨 카드를 2열 그리드로 변경해줘"
"색상 바꿔줘""메인 색상을 #3B82F6으로 통일해줘"

핵심: 수정 요청은 위치 + 변경 내용을 구체적으로 명시해야 AI가 정확하게 반영한다.

핵심 정리 ​

단계할 일결과물
1v0.dev 접속 및 로그인계정 준비 완료
2프롬프트 작성 및 입력첫 결과물 생성
3수정 요청 반복만족스러운 디자인 확보
4ZIP 다운로드코드 파일 확보
5Cursor로 이식 (다음 챕터)실제 프로젝트에 적용

다음 단계: v0에서 다운로드한 ZIP 파일을 Cursor 프로젝트에 이식하는 방법을 알아본다.