v0에서 재사용 컴포넌트 블록으로 멀티페이지 SaaS 랜딩 사이트 만들기 완벽 가이드

v0으로 멀티페이지 SaaS 랜딩 사이트 구축하기

v0(v0.dev)는 Vercel이 만든 AI 기반 UI 생성 도구로, 프롬프트 하나로 프로덕션 수준의 React 컴포넌트를 만들 수 있습니다. 이 가이드에서는 v0를 활용해 재사용 가능한 컴포넌트 블록 기반의 멀티페이지 SaaS 랜딩 사이트를 설계하고, 반응형 브레이크포인트를 적용한 뒤, Next.js 프로젝트로 내보내는 전체 워크플로우를 다룹니다.

사전 준비

• v0.dev 계정 (무료 플랜 또는 Pro 플랜)
• Node.js 18 이상 설치
• npm 또는 pnpm 패키지 매니저
• 기본적인 React/Tailwind CSS 이해

Step 1: v0 프로젝트 생성 및 사이트 구조 설계

v0.dev에 접속하여 새 프로젝트를 시작합니다. 핵심은 전체 사이트를 한 번에 만들지 않고, 컴포넌트 블록 단위로 나누어 생성하는 것입니다.

먼저 프로젝트의 페이지 구조를 정의합니다:

사이트 구조:
├── / (홈 — Hero, Features, Pricing, CTA)
├── /about (소개 — Team, Mission, Values)
├── /pricing (요금제 — 상세 비교표)
├── /blog (블로그 — 게시물 리스트)
└── /contact (문의 — 폼, 지도)

Step 2: 재사용 컴포넌트 블록 생성

v0 채팅 인터페이스에서 각 블록을 개별 프롬프트로 생성합니다. 아래는 핵심 컴포넌트별 프롬프트 예시입니다.

2-1. 공유 Header 컴포넌트

v0 프롬프트 입력창에 다음을 입력합니다:

Create a SaaS header navigation component with:
- Logo on the left
- Nav links: Home, Features, Pricing, Blog, Contact
- Mobile hamburger menu with slide-in drawer
- CTA button "Start Free Trial" on the right
- Sticky on scroll with backdrop blur
- Use shadcn/ui components

v0가 생성한 코드는 다음과 유사한 구조를 가집니다:

// components/shared/site-header.tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet"
import { Menu } from "lucide-react"
const navItems = [
{ label: “Features”, href: “/features” },
{ label: “Pricing”, href: “/pricing” },
{ label: “Blog”, href: “/blog” },
{ label: “Contact”, href: “/contact” },
]
export function SiteHeader() {
return (
<header className=“sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60”>
<div className=“container flex h-16 items-center justify-between”>
<Link href=”/” className=“text-xl font-bold”>SaaSName</Link>
<nav className=“hidden md:flex gap-6”>
{navItems.map((item) => (
<Link key={item.href} href={item.href} className=“text-sm font-medium text-muted-foreground hover:text-primary”>
{item.label}
</Link>
))}
</nav>
<Button className=“hidden md:inline-flex”>Start Free Trial</Button>
<Sheet>
<SheetTrigger className=“md:hidden”><Menu /></SheetTrigger>
<SheetContent side=“right”>
{navItems.map((item) => (
<Link key={item.href} href={item.href} className=“block py-2”>{item.label}</Link>
))}
</SheetContent>
</Sheet>
</div>
</header>
)
}

2-2. Hero 섹션 블록

// v0 프롬프트:
Create a SaaS hero section with headline, subheadline,
two CTA buttons (primary + secondary), and a product
screenshot mockup. Responsive: stack vertically on mobile,
side-by-side on desktop. Use gradient background accent.

2-3. Pricing 블록

// v0 프롬프트:
Create a pricing section with 3 tiers (Free, Pro, Enterprise)
using shadcn Card components. Include feature comparison
checkmarks, monthly/yearly toggle switch, and highlighted
“Most Popular” badge on the Pro tier.

Step 3: 반응형 브레이크포인트 적용

v0는 Tailwind CSS 기반이므로 표준 브레이크포인트를 자동 적용합니다. 프롬프트에 반응형 요구사항을 명시하면 더 정확한 결과를 얻을 수 있습니다.

v0 미리보기 패널 상단의 디바이스 전환 버튼(모바일/태블릿/데스크톱 아이콘)을 클릭하여 각 브레이크포인트에서의 렌더링을 실시간 확인합니다. 레이아웃이 깨지는 부분이 있다면 후속 프롬프트로 수정을 요청하세요:

// 후속 프롬프트 예시:
Make the features grid 1 column on mobile, 2 columns on
tablet (md:), and 3 columns on desktop (lg:). Add proper
spacing between cards.

Step 4: 멀티페이지 조합 및 라우팅 설정

각 블록이 완성되면 v0 에디터에서 페이지별로 블록을 조합합니다. v0의 “Add to Project” 기능을 활용하면 생성한 컴포넌트를 하나의 프로젝트 내에서 관리할 수 있습니다.

// app/page.tsx (홈페이지)
import { SiteHeader } from ”@/components/shared/site-header”
import { HeroSection } from ”@/components/blocks/hero-section”
import { FeaturesGrid } from ”@/components/blocks/features-grid”
import { PricingSection } from ”@/components/blocks/pricing-section”
import { SiteFooter } from ”@/components/shared/site-footer”

export default function HomePage() {
return (
<>
<SiteHeader />
<main>
<HeroSection />
<FeaturesGrid />
<PricingSection />
</main>
<SiteFooter />
</>
)
}

Step 5: Next.js로 원클릭 내보내기

v0 에디터 상단의 “Export to Next.js” 버튼을 클릭하거나 CLI를 사용합니다:

# 방법 1: npx로 직접 내보내기
npx v0@latest init my-saas-landing
cd my-saas-landing

방법 2: 기존 Next.js 프로젝트에 컴포넌트 추가
npx v0@latest add [component-url]
의존성 설치 및 실행
npm install
npm run dev

내보내기 후 프로젝트 구조:

my-saas-landing/
├── app/
│   ├── layout.tsx          # 공유 레이아웃 (Header + Footer)
│   ├── page.tsx            # 홈
│   ├── about/page.tsx
│   ├── pricing/page.tsx
│   ├── blog/page.tsx
│   └── contact/page.tsx
├── components/
│   ├── shared/             # 재사용 컴포넌트
│   │   ├── site-header.tsx
│   │   └── site-footer.tsx
│   ├── blocks/             # 페이지 블록
│   │   ├── hero-section.tsx
│   │   ├── features-grid.tsx
│   │   └── pricing-section.tsx
│   └── ui/                 # shadcn/ui 컴포넌트
├── tailwind.config.ts
├── next.config.js
└── package.json

환경 변수 설정

외부 서비스 연동이 필요한 경우 .env.local 파일을 생성합니다:

# .env.local
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_ANALYTICS_ID=YOUR_API_KEY
RESEND_API_KEY=YOUR_API_KEY

Vercel 배포

# Vercel CLI로 배포
npm i -g vercel
vercel —prod

Pro Tips — 파워 유저를 위한 고급 팁

• 프롬프트 체이닝: “이전 컴포넌트와 동일한 디자인 시스템을 유지하면서”라는 문구를 프롬프트에 추가하면 일관된 스타일을 유지할 수 있습니다.
• shadcn/ui 테마 커스터마이징: 내보내기 후 globals.css의 CSS 변수를 수정하여 브랜드 컬러를 일괄 변경하세요. v0가 생성한 모든 컴포넌트가 자동으로 업데이트됩니다.
• 블록 라이브러리 구축: 자주 사용하는 블록(CTA, Testimonials, FAQ)을 v0에서 미리 만들어두고 URL을 저장해두면 npx v0@latest add [url]로 즉시 재사용할 수 있습니다.
• 다크 모드: v0 프롬프트에 “with dark mode support using next-themes”를 추가하면 다크모드 토글이 포함된 컴포넌트를 생성합니다.
• 성능 최적화: 내보내기 후 next/image와 next/font를 적용하고, 각 페이지에 적절한 메타데이터를 추가하세요.

Troubleshooting — 자주 발생하는 문제 해결

자주 묻는 질문 (FAQ)

Q1: v0 무료 플랜으로도 멀티페이지 사이트를 만들 수 있나요?

네, 무료 플랜으로도 개별 컴포넌트 블록을 생성하고 내보낼 수 있습니다. 다만 무료 플랜은 월별 생성 횟수에 제한이 있으므로, 페이지가 많은 경우 Pro 플랜(월 $20)을 권장합니다. Pro 플랜에서는 프로젝트 단위 관리, 무제한 생성, 우선 큐 등 추가 기능을 사용할 수 있습니다.

Q2: v0에서 내보낸 코드를 기존 Next.js 프로젝트에 통합하려면 어떻게 하나요?

npx v0@latest add [component-url] 명령어를 사용하면 기존 프로젝트의 components 폴더에 해당 컴포넌트가 자동으로 추가됩니다. 이때 shadcn/ui가 이미 설정되어 있어야 하며, 그렇지 않은 경우 npx shadcn@latest init을 먼저 실행하세요. 컴포넌트 간 의존성 충돌이 발생하면 기존 프로젝트의 Tailwind 설정과 v0 내보내기 설정을 비교하여 일치시키면 됩니다.

Q3: 재사용 컴포넌트의 디자인 일관성을 유지하려면 어떤 전략이 좋을까요?

가장 효과적인 방법은 첫 번째 컴포넌트(예: Header)를 만든 뒤, 후속 프롬프트에서 “이전에 만든 Header와 동일한 색상 팔레트, 폰트 크기, 간격을 사용해서”라고 명시하는 것입니다. 내보내기 후에는 globals.css의 CSS 변수(HSL 기반)를 수정하면 전체 사이트의 테마를 한 번에 변경할 수 있으므로, v0 단계에서는 구조와 레이아웃에 집중하고 세부 스타일 튜닝은 코드 단계에서 하는 것을 추천합니다.