v0로 랜딩 페이지 만들기: 프롬프트 입력부터 Next.js 배포까지 완벽 가이드
v0로 랜딩 페이지 만들기: 프롬프트부터 배포까지 단계별 튜토리얼
Vercel의 AI 기반 UI 생성 도구 v0를 사용하면 프롬프트 한 줄로 프로덕션 수준의 랜딩 페이지를 만들 수 있습니다. 이 가이드에서는 v0에서 디자인을 생성하고, Next.js 프로젝트로 변환한 뒤, Vercel에 배포하는 전체 워크플로를 단계별로 안내합니다.
사전 준비 사항
- Node.js 18 이상 설치- Vercel 계정 (무료 플랜 가능)- v0 접근 권한 (v0.dev)- Git 설치 및 GitHub 계정
Step 1: v0에서 랜딩 페이지 프롬프트 작성
v0.dev에 접속한 후, 프롬프트 입력창에 원하는 랜딩 페이지를 상세히 설명합니다. 구체적일수록 결과가 좋습니다.
효과적인 프롬프트 예시
SaaS 제품의 랜딩 페이지를 만들어줘.
- 히어로 섹션: 큰 제목, 부제목, CTA 버튼 2개 (시작하기, 데모 보기)
- 기능 소개 섹션: 3개의 카드 레이아웃 (아이콘, 제목, 설명)
- 가격 섹션: 3단 요금제 테이블 (Free, Pro, Enterprise)
- 고객 후기 섹션: 3개의 testimonial 카드
- 푸터: 회사 정보, 링크, 소셜 미디어
- 스타일: 모던하고 미니멀, 다크 모드 지원
- shadcn/ui 컴포넌트 사용
반응형 디자인 필수v0가 코드를 생성하면 미리보기에서 결과를 확인합니다. 마음에 들지 않으면 추가 프롬프트로 수정을 요청하세요.
프롬프트 수정 예시
히어로 섹션의 배경을 그라디언트로 변경하고,
CTA 버튼에 호버 애니메이션을 추가해줘.
가격 섹션에서 Pro 플랜을 강조 표시해줘.
Step 2: 생성된 코드를 Next.js 프로젝트로 가져오기
v0 결과가 만족스러우면 **"Add to Codebase"** 버튼을 클릭합니다. 아래 CLI 명령어가 표시됩니다.
방법 A: npx로 직접 추가 (권장)
# 새 Next.js 프로젝트 생성
npx create-next-app@latest my-landing-page —typescript —tailwind —eslint —app —src-dir
cd my-landing-page
v0에서 생성한 컴포넌트 추가
npx v0@latest add [생성된-컴포넌트-URL]
방법 B: 수동 복사
v0 화면에서 **"Code"** 탭을 클릭하여 코드를 복사한 뒤, 프로젝트에 직접 붙여넣습니다.
# shadcn/ui 초기화 (아직 설정하지 않은 경우)
npx shadcn@latest init
필요한 컴포넌트 설치
npx shadcn@latest add button card badge
Step 3: 프로젝트 구조 정리 및 커스터마이징
v0가 생성한 코드를 프로젝트에 통합합니다.
my-landing-page/
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx ← 메인 랜딩 페이지
│ │ └── globals.css
│ ├── components/
│ │ ├── ui/ ← shadcn/ui 컴포넌트
│ │ ├── hero-section.tsx
│ │ ├── features.tsx
│ │ ├── pricing.tsx
│ │ └── testimonials.tsx
│ └── lib/
│ └── utils.ts
├── tailwind.config.ts
└── package.json
### page.tsx 구성 예시
import { HeroSection } from "@/components/hero-section"
import { Features } from "@/components/features"
import { Pricing } from "@/components/pricing"
import { Testimonials } from "@/components/testimonials"
export default function Home() {
return (
)
}// src/app/layout.tsx import type { Metadata } from "next"
export const metadata: Metadata = { title: “내 SaaS 제품 | 더 빠르고 스마트한 솔루션”, description: “AI 기반 SaaS 솔루션으로 업무 효율을 극대화하세요.”, openGraph: { title: “내 SaaS 제품”, description: “AI 기반 SaaS 솔루션”, url: “https://my-landing-page.vercel.app”, }, }
Step 4: 로컬에서 테스트
# 개발 서버 실행
npm run dev
# 브라우저에서 http://localhost:3000 확인
# 프로덕션 빌드 테스트
npm run build
npm run startStep 5: Vercel에 배포
# Git 저장소 초기화 및 푸시
git init
git add .
git commit -m "Initial landing page from v0"
git remote add origin https://github.com/YOUR_USERNAME/my-landing-page.git
git push -u origin main
# Vercel CLI로 배포
npm i -g vercel
vercel
# 프로덕션 배포
vercel --prod또는 [Vercel 대시보드](https://vercel.com/new)에서 GitHub 저장소를 연결하면 푸시할 때마다 자동 배포됩니다.
환경 변수 설정 (필요 시)
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GA_ID=YOUR_GA_TRACKING_ID
Step 6: 커스텀 도메인 연결
Vercel 대시보드에서 **Settings → Domains**로 이동하여 커스텀 도메인을 추가합니다. DNS 설정에서 CNAME 레코드를 cname.vercel-dns.com으로 지정하면 SSL 인증서가 자동 발급됩니다.
Pro Tips: 파워 유저를 위한 팁
- 반복 프롬프트 활용: v0 채팅에서 이전 결과를 기반으로 계속 수정 요청이 가능합니다. “이전 버전에서 헤더를 sticky로 변경해줘”처럼 대화형으로 개선하세요.- v0 + shadcn/ui 조합: v0는 shadcn/ui를 기본으로 사용합니다. 프롬프트에 구체적인 컴포넌트명(Card, Badge, Sheet 등)을 언급하면 더 정확한 결과를 얻을 수 있습니다.- 디자인 시스템 재활용: 한 번 생성한 컴포넌트를 다른 페이지에서도 재사용하세요. v0에서 “이전에 만든 pricing 컴포넌트와 같은 스타일로 FAQ 섹션 만들어줘”라고 요청할 수 있습니다.- 다크 모드 전환:
next-themes패키지를 설치하고 프롬프트에 “다크 모드 토글 포함”을 명시하면 자동으로 테마 전환 기능이 포함됩니다.- 성능 최적화: v0가 생성한 코드에next/font와 동적 임포트를 적용하면 Lighthouse 점수를 크게 높일 수 있습니다.
Troubleshooting: 자주 발생하는 오류와 해결법
| 오류 | 원인 | 해결 방법 |
|---|---|---|
Module not found: @/components/ui/button | shadcn/ui 컴포넌트가 설치되지 않음 | npx shadcn@latest add button 실행 |
Hydration mismatch | 서버/클라이언트 렌더링 불일치 | 클라이언트 전용 코드에 "use client" 지시문 추가 |
tailwind classes not applied | Tailwind content 경로 미설정 | tailwind.config.ts의 content 배열에 "./src/**/*.{ts,tsx}" 확인 |
npx v0 add 실패 | v0 인증 만료 또는 URL 오류 | npx v0@latest으로 최신 버전 사용, URL 재확인 |
| 빌드 시 타입 에러 | v0 생성 코드의 타입 미정의 | 누락된 타입 정의 추가 또는 as any로 임시 처리 후 수정 |
Q1: v0는 무료로 사용할 수 있나요?
v0는 무료 플랜을 제공하며, 매월 제한된 횟수의 생성이 가능합니다. 더 많은 생성 횟수와 고급 기능이 필요하면 v0 Premium 구독을 고려하세요. 무료 플랜으로도 랜딩 페이지 1~2개를 충분히 만들 수 있습니다.
Q2: v0로 생성한 코드를 상업적 프로젝트에 사용해도 되나요?
네, v0로 생성된 코드는 상업적 용도로 자유롭게 사용할 수 있습니다. 생성된 코드의 소유권은 사용자에게 있으며, 별도의 라이선스 비용 없이 클라이언트 프로젝트나 자체 제품에 활용할 수 있습니다.
Q3: v0가 생성한 코드를 React가 아닌 다른 프레임워크에서 사용할 수 있나요?
v0는 기본적으로 React와 Next.js 기반 코드를 생성합니다. 다른 프레임워크(Vue, Svelte 등)에서 직접 사용하기는 어렵지만, 생성된 Tailwind CSS 스타일과 디자인 구조는 참고하여 다른 프레임워크에 맞게 변환할 수 있습니다. 프롬프트에서 HTML만 요청하면 범용적인 코드를 얻을 수도 있습니다.