v0 랜딩 페이지 빌더

개요

v0 by Vercel은 프로덕션 품질의 랜딩 페이지를 구축하는 가장 빠른 방법입니다. 자연어로 페이지를 설명하면 v0가 React/Next.js/Tailwind 코드를 생성합니다. 대화형으로 반복 개선하고, 내보내고, 배포하기만 하면 됩니다. 디자이너와 개발자가 1-2주 걸리던 작업이 이제 창업자나 마케터에게는 2-4시간이면 끝납니다. 이 스킬은 v0를 사용하여 모든 유형의 GTM 랜딩 페이지를 구축하기 위한 단계별 플레이북입니다.

권위 있는 기반

v0 by Vercel — 생성형 UI 플랫폼 (Guillermo Rauch)
shadcn/ui — v0를 구동하는 컴포넌트 라이브러리
Tailwind CSS — 유틸리티 우선 CSS 프레임워크
Next.js — 프로덕션용 React 프레임워크

사용 시기

트리거 구문: "v0로 랜딩 페이지 구축", "v0 튜토리얼", "v0 랜딩 페이지 프롬프트", "마케팅용 v0 by Vercel", "AI 랜딩 페이지 빌더", "v0로 랜딩 페이지 생성", "v0 가격 페이지", "v0 대기자 명단"

v0 기본 사항

정의: v0.dev — Vercel의 생성형 UI 플랫폼. 입력하면 shadcn/ui + Tailwind CSS를 사용하는 React 컴포넌트를 생성합니다.

단일 프롬프트로 전체 페이지 생성
특정 섹션 반복 개선 ("히어로 제목 변경")
개별 컴포넌트 생성 ("아바타가 있는 추천사 카드")
Next.js 프로젝트로 코드 내보내기
Vercel에 직접 배포

가격: 무료 티어 (월 200회 생성). Pro ($20/월)는 무제한.

단계별 프로세스

1단계: 준비 (v0를 열기 전)

첫 번째 프롬프트 전에 5가지를 정의하세요:

페이지 유형: 랜딩 페이지, 가격 페이지, 대기자 명단 페이지, 이벤트 페이지, 기능 발표, 마이크로사이트?
대상: 누구인가요? 그들에게 중요한 것은 무엇인가요?
행동: 사용자가 하길 원하는 한 가지는 무엇인가요? (무료 체험 시작, 데모 예약, 대기자 명단 가입, 지금 구매)
브랜드: 색상(기본/보조/중립), 폰트(Inter가 무난함), 톤(전문적, 유쾌함, 기술적, 고급스러움)
참고 자료: 어떤 기존 사이트와 비슷해야 하나요? "Stripe처럼 깔끔하게" 또는 "Vercel처럼 기술적으로" 또는 "Linear처럼 대담하게"

브랜드 컨텍스트 문서 (첫 번째 v0 프롬프트에 붙여넣기):

브랜드 컨텍스트:
- 회사: [이름]
- 제품: [한 줄 설명]
- 기본 색상: #0066FF
- 보조 색상: #FF6600
- 폰트: Inter
- 톤: 직접적이고, 데이터 기반이며, 자신감 있음
- 참고: Stripe (깔끔함, 미니멀) + Linear (어두움, 기술적)
- 사용 금지: 그라디언트, 이모지, 스톡 사진, 일반적인 SaaS 클리셰

2단계: 페이지 생성 (프롬프트 엔지니어링)

마스터 프롬프트 템플릿:

[회사/제품]을 위한 [페이지 유형]을 구축해주세요.

대상: [ICP]. 그들은 [상위 3가지 관심사]에 관심이 있습니다.

섹션 (순서대로):
1. 네비게이션: [회사 로고 왼쪽, 링크 중앙, CTA 오른쪽 — "무료 체험 시작"]
2. 히어로: 제목 [혜택 중심, 10단어 미만]. 부제목 [한 문장으로 설명].
   기본 CTA ["무료 체험 시작"]. 보조 CTA ["작동 방식 알아보기"].
   히어로 이미지/비디오 플레이스홀더.
3. 사회적 증거: 고객 로고 6개를 한 줄로. "2,000개 이상의 팀이 신뢰함"
4. 가치 제안: 3열. 각각: 아이콘, 제목, 한 문장. 기능이 아닌 **결과**에 집중.
5. 작동 방식: 3단계. 각각: 단계 번호, 제목, 한 문장. 시각 자료: 스크린샷/GIF 플레이스홀더.
6. 기능: 2열 그리드. 6가지 기능. 각각: 기능 이름 + 한 문장.
7. 추천사: 3개의 인용 카드. 각각: 인용문 (1-2문장), 이름, 직함, 회사, 헤드샷 플레이스홀더.
8. 가격 (가격 페이지인 경우): 3개 티어. 월간/연간 토글. 추천 티어 강조 표시.
   각 티어: 가격, 설명, 기능 5개, CTA.
9. FAQ: 6개 질문과 펼쳐지는 답변. 가격, 설정, 보안, 지원, 취소, 비교 다루기.
10. 최종 CTA: 히어로 CTA와 동일. "무료 체험 시작." 신용카드 필요 없음.
11. 푸터: 로고, 링크, 저작권, 소셜 아이콘.

스타일:
- 다크 테마 (또는 라이트 — 하나 선택)
- 색상 팔레트: 기본 #0066FF, 보조 #FF6600, 배경 #0A0A0A, 텍스트 #FFFFFF, 흐릿함 #9CA3AF
- 타이포그래피: Inter, 제목 볼드, 본문 일반
- 간격: 넉넉하게. 섹션 간 80-120px
- 카드: 미묘한 테두리, 8px 둥근 모서리, 호버 시 살짝 떠오르는 효과
- 버튼: 기본 (채워짐, 흰색 텍스트), 보조 (테두리, 기본 색상)
- 최대 너비: 1200px, 가운데 정렬

기술:
- 모바일 반응형: 모바일에서는 섹션을 세로로 쌓기
- 터치 대상: 모바일에서 44px+
- 애니메이션: 스크롤 시 미묘한 페이드인 (Intersection Observer)
- 무거운 애니메이션 없음. prefers-reduced-motion 준수.

이 프롬프트가 효과적인 이유:

모든 섹션을 순서대로 지정 (v0는 위에서 아래로 구축)
시각적 스타일 포함 (색상, 타이포그래피, 간격)
기술적 요구 사항 포함 (반응형, 접근성)
구체적인 예시 제공 ("여기에 CTA" 대신 "무료 체험 시작")

3단계: 섹션별로 반복 개선

한 번에 모든 것을 고치려 하지 마세요. 섹션별로 반복 개선하세요:

반복 순서 (15-30분):

1. "히어로 제목이 너무 일반적입니다. 구체적으로 바꿔주세요: '[회사]는 [ICP]가 [시간] 안에 [일]을 할 수 있도록 도와줍니다'"
2. "가치 제안이 기능 중심입니다. 결과로 다시 작성해주세요: 'AI 기반 캠페인 빌더' 대신 '2주가 아닌 2시간 안에 캠페인 출시'"
3. "추천사가 너무 깁니다. 각 인용문은 최대 1-2문장으로"
4. "FAQ 위에 비교 테이블을 추가해주세요. 5행: [기능], 당사, 경쟁사 A, 경쟁사 B. 당사는 체크 표시. 경쟁사가 부족한 부분은 '—' 사용"
5. "가격 카드에 호버 상태가 필요합니다. 추천 티어에 호버 시 미묘한 scale(1.02) + 그림자 효과 추가"
6. "히어로 이미지 플레이스홀더를 스크린샷 컴포넌트로 교체해주세요. 어두운 배경, 둥근 모서리, 미묘한 테두리"
7. "CTA 버튼이 작아 보입니다. 패딩 16px, 폰트 16px로 늘려주세요"
8. "모바일에서 네비게이션이 햄버거 메뉴로 접혀야 합니다. 모바일 버전을 보여주세요"
9. "히어로를 지나 스크롤한 후 나타나는 고정 CTA 바를 추가해주세요. '무료 체험 시작' 버튼, 흰색 배경, 미묘한 그림자"
10. "전체 페이지를 반응형으로 만드세요. 375px, 768px, 1024px, 1440px에서 테스트"

4단계: 개별 컴포넌트 생성

전체 페이지는 괜찮지만 한 섹션에 더 많은 작업이 필요할 때:

"추천사 섹션만 생성해주세요. 한 줄에 3개 카드. 각 카드:
- 배경: 페이지 배경보다 약간 밝게
- 테두리: 1px, 미묘하게
- 패딩: 32px
- 상단 인용문: 크게, 기울임꼴
- 작성자 아래: 아바타 (원형, 48px) + 이름 + 직함 + 회사 로고
- 호버: 미묘한 테두리 악센트, 떠오르지 않음"

v0가 해당 컴포넌트만 다시 생성합니다. 기존 섹션을 개선된 버전으로 교체하세요.

5단계: 프로덕션을 위한 폴리싱

배포 전에 다음을 반복 개선하세요:

카피: 모든 lorem ipsum을 실제 카피로 교체하세요. "v0는 플레이스홀더 텍스트를 생성합니다 — 반드시 교체해야 합니다." 실제 제목, 실제 가치 제안, 실제 추천사를 작성하세요.
이미지: 플레이스홀더를 실제 이미지로 교체:
- 히어로: 제품 스크린샷 (Cmd+Shift+4, v0에 업로드)
- 고객 로고: 실제 고객 로고 (업로드)
- 추천사 헤드샷: 실제 고객 사진
링크: 모든 버튼과 링크 연결:
- "무료 체험 시작" → 가입 URL
- "데모 예약" → Calendly 링크
- "가격 보기" → 가격 섹션 앵커
- 푸터 링크 → 실제 페이지
폼: 페이지에 폼이 있는 경우 (대기자 명단, 문의, 데모 요청):
- 폼 백엔드에 연결 (ConvertKit, HubSpot, Google Forms 또는 API)
- 유효성 검사 추가 (이메일 형식, 필수 필드)
- 성공 메시지 추가 ("감사합니다! 곧 연락드리겠습니다.")
- 오류 처리 추가

분석 도구: 배포 전에 추가:

<!-- head에 추가 -->
<script defer data-domain="yourdomain.com"
 src="https://plausible.io/js/script.js"></script>

또는 Google Analytics, PostHog 등.

6단계: 내보내기 및 배포

옵션 A: v0에서 직접 배포 (가장 빠름)

v0에서 "배포" 클릭
Vercel 계정 연결
Vercel 설정에서 사용자 정의 도메인 추가
완료 — 5분 안에 라이브

옵션 B: Next.js 프로젝트로 내보내기 (더 많은 제어)

npx shadcn@latest add [component-url] — 기존 Next.js 프로젝트에 v0 컴포넌트 추가
또는: v0에서 코드 수동 복사 → 프로젝트에 붙여넣기
git push → 푸시 시 Vercel 자동 배포

옵션 C: 정적 HTML로 내보내기 (가장 간단)

생성된 HTML/CSS 복사
새 파일에 붙여넣기
모든 정적 호스트에 배포 (Netlify, Cloudflare Pages, GitHub Pages)

7단계: 출시 후 반복

출시 후 데이터 기반으로 반복 개선:

분석 기반 프롬프트:

1. "히어로 CTA의 클릭률이 2.1%입니다. A/B 테스트를 위해 다른 제목과 CTA를 가진 히어로 변형 3개를 생성해주세요"
2. "모바일 이탈률이 68%입니다. 모바일 버전을 감사하고 레이아웃 문제를 수정하세요. 모든 섹션을 세로로 쌓으세요. 터치 대상 44px+ 보장"
3. "가격 페이지의 전환율이 1.2%입니다. 가격 페이지 변형 3개를 생성하세요: 하나는 연간 기본값, 하나는 월간 기본값, 하나는 중간 티어에 '가장 인기' 배지 포함"
4. "페이지 로드 시간이 4.2초입니다. 최적화: 접힌 부분 아래 이미지 지연 로드, 사용하지 않는 CSS 제거, 중요하지 않은 스크립트 지연"

특정 페이지 유형을 위한 v0 프롬프트

SaaS 랜딩 페이지

"[제품]을 위한 SaaS 랜딩 페이지를 구축해주세요. 다크 테마. 섹션: 히어로, 사회적 증거 (로고), 가치 제안 3개 (결과), 작동 방식 (3단계), 추천사 (3개), 가격 (3개 티어, 연간 기본값, Growth 추천), FAQ (6개), 최종 CTA, 푸터. 스타일: Stripe처럼 깔끔하게, Linear처럼 어둡게. 기본 색상: #0066FF. 폰트: Inter."

가격 페이지

"[제품]을 위한 가격 페이지를 구축해주세요. 3개 티어: Starter $49/월, Growth $199/월 (추천), Enterprise (문의). 월간/연간 토글, 연간 기본값. 티어 아래 기능 비교 테이블. 8개 질문 FAQ 섹션. Enterprise는 가격 대신 '통화 예약' CTA 포함."

대기자 명단 페이지

"[월]에 출시하는 [제품]을 위한 대기자 명단 페이지를 구축해주세요. 히어로: 제품명, 한 줄 가치 제안, 이메일 입력 + '대기자 명단 가입' 버튼. 아래: 얻을 수 있는 3가지 (조기 액세스, 창립 가격, 우선 지원). 사회적 증거: '2,000명 이상이 대기자 명단에 있습니다.' 가입 수를 보여주는 카운터."

이벤트/웨비나 페이지

"[날짜]에 열리는 [이벤트 이름] 등록 페이지를 구축해주세요. 히어로: 이벤트명, 날짜/시간, 한 줄 설명. 아래: 참석해야 하는 3가지 이유. 헤드샷, 이름, 직함, 발표 제목이 있는 발표자 섹션. 일정/타임라인. 등록 폼: 이름, 이메일, 회사. '내 자리 예약' CTA."

출력 형식

v0 랜딩 페이지 빌드 — [페이지 이름]

v0 프로젝트 URL: [v0.dev 링크]
배포 URL: [프로덕션 URL]

사용된 프롬프트:
[마스터 프롬프트 텍스트]

반복 로그:
1. v1 생성 — [작동한 부분, 변경이 필요했던 부분]
2. ["히어로 변경"] — [결과]
3. ["추천사 섹션 추가"] — [결과]
...

내보내기 방법: [직접 배포 / shadcn add / 수동 복사]

출시 후:
- 분석 도구: [Plausible / GA / PostHog 연결됨]
- 전환율: X% (목표: Y%)
- 다음 반복: [날짜 / 트리거]

구현 체크리스트

품질 검사

전달하기 전에 확인:

출력이 사용자의 명시된 요청과 일치하는가?
명명된 프레임워크나 출처가 권장 사항에 반영되었는가?
결과물이 에이전트가 실행하기에 충분히 구체적인가?
가정, 위험 또는 종속성이 명시적으로 기술되었는가?
지원되지 않는 주장, 허위 사실 또는 개인/내부 참조가 포함되지 않았는가?

일반적인 함정

원샷 프롬프팅. 한 번에 "SaaS 웹사이트 구축" = 일반적이고, 브랜드가 없으며, 무난한 출력. 해결 방법: 섹션별로 구축하세요. 히어로를 먼저. 반복 개선. 그다음 가격. 반복 개선.
브랜드 컨텍스트 없이 일반적인 출력. 브랜드 색상, 폰트 및 참조 없이 v0는 일반적인 Tailwind를 생성합니다. 해결 방법: 첫 번째 프롬프트에 브랜드 컨텍스트를 붙여넣으세요. 스타일을 위해 알려진 사이트를 참조하세요.
플레이스홀더 콘텐츠를 프로덕션에 배포. v0는 "Lorem ipsum"과 플레이스홀더 이미지를 생성합니다. 이걸 그대로 라이브에 배포하면 아마추어처럼 보입니다. 해결 방법: 배포 전에 모든 플레이스홀더 콘텐츠를 교체하세요.
모바일에서 반복하지 않음. v0는 기본적으로 데스크톱 우선으로 생성합니다. 모바일 레이아웃이 자주 깨집니다. 해결 방법: 전용 반복 단계로 "모바일 버전 보여주세요"를 사용하세요.
폼 연결 없음. "#"로 연결된 "무료 체험 시작" 버튼은 깨진 약속입니다. 해결 방법: 배포 전에 폼과 CTA를 연결하세요.
너무 많은 섹션. v0는 요청하면 기꺼이 15개 섹션을 생성합니다. 더 많은 섹션 = 더 많은 인지 부하 = 더 낮은 전환율. 해결 방법: 최대 6-8개 섹션. 전환 목표를 직접적으로 지원하지 않는 것은 모두 제거하세요.

전문가 참조

Guillermo Rauch (@rauchg) — v0 창시자, Vercel CEO. v0 업데이트, 프롬프트 기술 및 생성형 UI 철학을 팔로우하세요.
v0 문서: v0.dev/docs — 프롬프트 가이드, 컴포넌트 라이브러리, 내보내기/배포 지침
shadcn/ui: ui.shadcn.com — v0가 생성하는 컴포넌트 라이브러리. v0가 무엇을 구축하는지 이해하려면 이것을 배우세요.

실행 산출물

references/framework-notes.md — 명명된 프레임워크 및 참조 테이블
templates/output-template.md — 에이전트 출력을 위한 결과물 셸
scripts/check-output.py — 간단한 결과물 유효성 검사기

LeadMagic/gtm-skills

gtm-skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서