v0.dev로 랜딩 페이지 만들기 — 디자이너 없이 7단계

현실 점검

우리 팀에 새로운 프로모션이 시작됩니다. 마케팅팀이 보도자료를 돌리고, CX팀이 고객 응대를 준비하고, 사업개발팀은 파트너사에 연락합니다. 이제 랜딩 페이지만 있으면 됩니다.

디자이너한테 문의하니 "이번 주는 다른 프로젝트 때문에, 다음 주 중반 이후 가능합니다" 라고 답이 옵니다. 개발자는 "디자인 나오면 1주일 작업"이라고 합니다. 총 2.5주. 프로모션 1주 전에 랜딩이 나옵니다.

이 패턴이 연 10번 반복되면 마케팅 속도 자체가 2.5주에 묶입니다.

v0.dev가 바꾸는 것

v0.dev는 Vercel이 만든 AI 기반 UI 생성 도구입니다. 프롬프트를 입력하면 React + Tailwind 코드가 나옵니다.

핵심은 이 말입니다:

"마케터도 이제 디자인을 한다"가 아닙니다
"랜딩 페이지 초안을 디자이너 없이 오늘 저녁에 만들고, 검토 단계로 넘긴다" 는 의미입니다

최종 제품을 혼자 만들라는 게 아닙니다. 2.5주 리드타임을 30분으로 줄여서, 의사결정과 검토를 먼저 하자는 겁니다.

왜 영상 강의로는 v0를 익히지 못하는가

v0 공식 튜토리얼과 유튜브 영상이 많습니다. 저희도 다 봤습니다. 그런데 팀원 10명 중에 실제로 랜딩을 완성한 사람은 0명이었습니다. 이유:

강사는 "AI 회사 홈페이지 만들어줘" 같은 가상 프롬프트를 씀
내 회사 브랜드 컬러·폰트·실제 제품 정보는 그 예시와 다름
영상에 나온 단계를 내 상황에 적용하는 프롬프트 전환 능력을 안 배움

여기서 소개할 7단계는 영상에서 보여주지 않는 프롬프트 전환 을 포함합니다.

7단계 — 오늘 저녁에 끝내는 랜딩

준비물 (3분)

v0.dev 계정 (무료 · GitHub 로그인)
회사 로고 이미지 1장 (SVG 권장, PNG OK)
브랜드 컬러 HEX 2-3개 (primary / accent / neutral)
이번 프로모션 한 문장 소개 (예: "중견 이커머스를 위한 AI 워크샵, 50% 할인")

Step 1 — 기본 구조 프롬프트 (5분)

v0.dev 첫 프롬프트. 구조를 먼저 잡습니다.

아래 구조의 랜딩 페이지를 만들어줘.

1. Hero (중앙 정렬, Primary 컬러 #1e4dd8)
   - 제목 2줄
   - 부제목 1줄
   - 메인 CTA 버튼
   - 우측 상단에 로고
2. 사회적 증거 (로고 5개 가로 배치)
3. 3개 피처 (각 아이콘 + 제목 + 2줄 설명)
4. FAQ 아코디언 (3개 질문)
5. Footer (회사명, 저작권, 링크 3개)

디자인: 흰 배경, 큰 여백, 산세리프, 둥근 버튼, 테두리 최소화
반응형 필수

30초 안에 초안 나옵니다. 이 단계에서는 구조만 보세요. 문구는 다음 단계.

Step 2 — 본문 복제 (3분)

v0가 준 페이지를 그대로 쓰면 "AI 홈페이지 템플릿" 처럼 보입니다. 콘텐츠를 내 것으로 바꿔야 합니다.

이 단계에서 Claude를 붙여쓰세요. 따로 쓰지 말고 붙여쓰세요.

(Claude에) 다음 제품 소개를 v0 랜딩 페이지의 각 섹션에 맞는 문구로 써줘.

제품: {한 문장 소개}
타겟 고객: {대상자}
핵심 차별점: {차별점 1-2개}

섹션별 문구 요청:
- Hero 제목 (임팩트, 2줄, 각 15자 이내)
- Hero 부제목 (1줄, 40자 이내, 독자 입장)
- CTA 버튼 (행동 유도, 8자 이내)
- 피처 3개 (각 제목 10자 + 설명 30자)
- FAQ 3개 (질문 + 2-3문장 답변)

톤: 경어 "~합니다", 수식어 최소

Claude가 준 문구를 v0 에디터에 붙여넣기만 하면 됩니다.

Step 3 — 컬러·폰트 맞춤화 (2분)

v0 에디터 오른쪽에서 CSS 변수 수정합니다. 프롬프트로도 됩니다:

이 페이지의 주요 컬러를 다음으로 교체해줘.
Primary: #1e4dd8 (버튼 · 강조 텍스트)
Accent: #dcfce7 (배지 배경)
Neutral 텍스트: #111827
폰트: Pretendard (한국어), Inter (영문)

한국어 랜딩은 Pretendard 지정이 핵심입니다. 기본 폰트로 두면 글자 폭이 어색해집니다.

Step 4 — 로고 · 이미지 교체 (3분)

v0 에디터의 "Add Asset" 버튼에 회사 로고 업로드. 프롬프트로 위치 조정:

Hero 우측 상단에 방금 업로드한 로고를 28px 높이로 배치해줘.
모바일에서는 중앙 정렬.

제품 이미지가 있다면 같은 방식으로.

Step 5 — FAQ 내용 보강 (2분)

FAQ는 실제 고객 질문을 써야 진짜입니다. Step 2 에서 Claude 에게 받은 3개는 초안. 추가로 물어보세요:

(Claude에) {프로모션명}을 검토하는 고객이 실제로 물어볼 만한 질문 5개를 뽑아줘.

기준:
- 결제 전에 확인하고 싶은 것
- 다른 서비스와 비교 가능한 것
- 기간·환불·자격에 대한 것

받은 5개 중 랜딩에 3개만 골라 넣으세요.

Step 6 — 모바일 점검 (2분)

v0 에디터 상단의 "Mobile" 토글로 확인. 많은 경우 Hero 제목이 모바일에서 너무 큽니다.

모바일(375px)에서 Hero 제목을 48px → 32px로 줄이고, 좌우 패딩 16px로 조정해줘.

Step 7 — 코드 내보내기 (1분)

우측 상단 "Code" 탭에서 package.json, app/page.tsx 등 전체 프로젝트 복사.

두 가지 경로:

A. Vercel에 즉시 배포: v0 에디터에서 "Deploy to Vercel" 클릭 (가장 빠름, 2분)
B. 기존 Next.js 프로젝트에 병합: app/landing/{slug}/page.tsx 로 파일 복사 후 커밋

30분 후 손에 남은 것

배포된 랜딩 페이지 (vercel.app 서브도메인, 커스텀 도메인 연결 5분)
v0 프롬프트 히스토리 (다음 랜딩 만들 때 그대로 재사용)
Claude가 만든 섹션별 문구 라이브러리 (Notion에 저장)

다음 프로모션 때는 1단계부터 시작하지 않습니다. Step 2 프롬프트에 {제품} 만 교체하면 됩니다.

복사 가능한 자산

📋 v0 랜딩 구조 프롬프트

아래 구조의 랜딩 페이지를 만들어줘.
1. Hero (중앙 정렬, Primary #HEX)
2. 사회적 증거 (로고 5개)
3. 3 피처 (아이콘+제목+2줄)
4. FAQ (3개)
5. Footer

디자인: 흰 배경, 큰 여백, 산세리프, 둥근 버튼, 반응형

📋 Claude 문구 생성 프롬프트

제품: [한 문장]
타겟: [대상자]
차별점: [1-2개]

Hero 제목 2줄(15자), 부제목(40자), CTA(8자)
피처 3개(제목 10자, 설명 30자)
FAQ 3개

톤: 경어, 수식어 최소

✅ 7단계 체크리스트

v0 계정 + 로고 + 컬러 HEX + 한 문장 소개 준비
Step 1: 구조 프롬프트 (문구 신경 X)
Step 2: Claude에서 섹션 문구 생성 → v0에 붙여넣기
Step 3: 컬러·폰트 맞춤화
Step 4: 로고 업로드 + 위치
Step 5: FAQ 실제 질문 5개 → 3개 선정
Step 6: 모바일 반응형 점검
Step 7: Vercel 배포 또는 기존 프로젝트 병합

영상 강의 vs AXPERT Extension 방식

v0 강의를 5개 봤다면, 강사의 예시 페이지 5개를 본 겁니다. 내 회사 랜딩을 만든 적은 없습니다.

AXPERT Extension은 v0.dev 위에 가이드를 띄웁니다. 당신 회사 정보로 Step 1부터 Step 7까지 직접 따라 만듭니다. 끝나면 랜딩 페이지가 이미 배포되어 있고, 프롬프트는 Notion에 저장돼 있습니다.

다음 프로모션 때도 같은 방식. 디자이너 일정 기다림 없음.

→ v0 마스터 퀵가이드 무료로 시작하기

읽는 시간 10분. 실습 30분. 다음 프로모션부터 2.5주 리드타임 → 30분.

디자이너가 필요 없는 게 아닙니다. 디자이너는 "시간을 들여야 하는 프로젝트" 에 집중하고, 30분 랜딩은 마케터가 직접 만드는 구조로 바뀝니다.