v0으로 SaaS 랜딩 페이지 만들기: Shadcn/UI 컴포넌트와 Vercel 원클릭 배포 완벽 가이드
v0으로 SaaS 랜딩 페이지를 빠르게 구축하고 배포하는 방법
v0는 Vercel이 만든 AI 기반 UI 생성 도구로, 프롬프트만으로 프로덕션 수준의 React 컴포넌트를 생성합니다. 이 가이드에서는 v0를 활용해 Shadcn/UI 기반의 SaaS 랜딩 페이지를 처음부터 배포까지 단계별로 진행합니다.
사전 준비
- Node.js 18 이상 설치- Vercel 계정 (
vercel.com에서 무료 가입)- v0 접근 권한 (v0.dev에서 로그인)- Git 설치 및 GitHub 계정
단계별 구축 가이드
1단계: v0에서 랜딩 페이지 생성
v0.dev에 접속하여 다음과 같은 프롬프트를 입력합니다:
SaaS 랜딩 페이지를 만들어줘. Hero 섹션에 그라데이션 배경, CTA 버튼 2개,
특징 소개 3열 카드 그리드, 가격표 섹션(Free/Pro/Enterprise),
고객 후기 캐러셀, 그리고 푸터를 포함해줘.
Shadcn/UI 컴포넌트를 사용하고 다크모드를 지원해줘.
v0가 생성한 코드를 검토한 후, 추가 프롬프트로 세부 수정이 가능합니다:
Hero 섹션의 CTA 버튼을 더 크게 만들고, 가격표에 연간/월간 토글 스위치를 추가해줘.
2단계: 프로젝트 로컬 설정
v0에서 생성된 코드를 로컬 프로젝트로 가져옵니다:
npx create-next-app@latest my-saas-landing --typescript --tailwind --eslint --app
cd my-saas-landing
Shadcn/UI를 초기화합니다:
npx shadcn@latest init
초기화 과정에서 다음 옵션을 선택합니다:
- Style: Default- Base color: Slate- CSS variables: Yes (커스텀 디자인 토큰에 필수)필요한 Shadcn/UI 컴포넌트를 설치합니다:
npx shadcn@latest add button card badge tabs switch navigation-menu
### 3단계: 커스텀 디자인 토큰 설정
브랜드 아이덴티티에 맞는 디자인 토큰을 app/globals.css에 정의합니다:
@layer base {
:root {
--brand-primary: 220 90% 56%;
--brand-secondary: 262 83% 58%;
--brand-accent: 173 80% 40%;
--radius-card: 12px;
--spacing-section: 5rem;
--font-heading: 'Inter', sans-serif;
--gradient-hero: linear-gradient(
135deg,
hsl(var(--brand-primary)) 0%,
hsl(var(--brand-secondary)) 100%
);
}
.dark {
—brand-primary: 220 90% 66%;
—brand-secondary: 262 83% 68%;
—brand-accent: 173 80% 50%;
}
}
tailwind.config.ts에서 토큰을 Tailwind 클래스로 연결합니다:
import type { Config } from “tailwindcss”;
const config: Config = {
theme: {
extend: {
colors: {
brand: {
primary: “hsl(var(—brand-primary))”,
secondary: “hsl(var(—brand-secondary))”,
accent: “hsl(var(—brand-accent))”,
},
},
borderRadius: {
card: “var(—radius-card)”,
},
spacing: {
section: “var(—spacing-section)”,
},
},
},
};
export default config;
4단계: v0 생성 코드 통합
v0에서 생성된 컴포넌트를 프로젝트에 복사합니다. v0 인터페이스에서 **"Add to Codebase"** 버튼을 클릭하거나, CLI로 직접 추가합니다:
npx v0@latest add [생성된-컴포넌트-URL]
메인 페이지 파일 app/page.tsx에서 컴포넌트를 조합합니다:
import { HeroSection } from "@/components/hero-section";
import { FeaturesGrid } from "@/components/features-grid";
import { PricingTable } from "@/components/pricing-table";
import { Testimonials } from "@/components/testimonials";
import { Footer } from "@/components/footer";
export default function LandingPage() {
return (
);
}
### 5단계: 환경 변수 및 분석 설정
프로젝트 루트에 .env.local 파일을 생성합니다:
NEXT_PUBLIC_SITE_URL=https://your-saas.vercel.app
NEXT_PUBLIC_GA_ID=YOUR_GA_MEASUREMENT_ID
STRIPE_SECRET_KEY=YOUR_API_KEY
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=YOUR_API_KEY
### 6단계: Vercel 원클릭 배포
GitHub에 코드를 푸시한 후 Vercel에서 배포합니다:
git init
git add .
git commit -m "Initial SaaS landing page"
git remote add origin https://github.com/your-username/my-saas-landing.git
git push -u origin main
Vercel CLI로 즉시 배포할 수도 있습니다:
npm i -g vercel
vercel --prod
또는 Vercel 대시보드에서 **"Import Project"**를 클릭하고 GitHub 저장소를 연결하면 자동으로 빌드 및 배포됩니다. 이후 커밋마다 자동 배포가 실행됩니다.
Pro Tips: 파워 유저를 위한 고급 팁
- 반복적 프롬프팅: v0에서 한 번에 완벽한 결과를 기대하지 마세요. 초기 생성 후 “가격표 카드에 호버 애니메이션 추가”, “모바일에서 네비게이션을 햄버거 메뉴로 변경” 등 세부 프롬프트를 반복하세요.- 디자인 토큰 일관성:
globals.css에 정의한 CSS 변수를 v0 프롬프트에도 명시하면 생성 코드가 토큰 시스템을 따릅니다. 예: “색상은 —brand-primary CSS 변수를 사용해줘”- 컴포넌트 분리: v0가 하나의 큰 파일로 생성하면, 섹션별로 분리하여 재사용성을 높이세요.- Vercel Analytics 연동:@vercel/analytics패키지를 추가하면 Core Web Vitals를 자동으로 추적합니다:npm install @vercel/analytics- Edge Config 활용: 가격 정보나 기능 플래그를 Vercel Edge Config에 저장하면 재배포 없이 실시간 업데이트가 가능합니다.
Troubleshooting: 자주 발생하는 오류와 해결법
| 오류 | 원인 | 해결 방법 |
|---|---|---|
Module not found: shadcn/ui | 컴포넌트 미설치 | npx shadcn@latest add [컴포넌트명]으로 누락된 컴포넌트 설치 |
Hydration mismatch | 다크모드 초기 렌더링 불일치 | next-themes의 suppressHydrationWarning 속성을 |
| Tailwind 커스텀 클래스 미적용 | tailwind.config.ts 설정 누락 | content 경로에 컴포넌트 디렉토리가 포함되어 있는지 확인 |
| Vercel 배포 시 빌드 실패 | 환경 변수 미설정 | Vercel 대시보드 → Settings → Environment Variables에서 필요한 변수 추가 |
v0 add 명령어 실패 | 인증 만료 | npx v0@latest login으로 재인증 후 재시도 |
Q1: v0 무료 플랜으로도 SaaS 랜딩 페이지를 만들 수 있나요?
네, v0의 무료 플랜으로도 기본적인 랜딩 페이지를 생성할 수 있습니다. 다만 무료 플랜에서는 월간 생성 횟수에 제한이 있으므로, 프롬프트를 신중하게 작성하여 효율적으로 사용하는 것이 좋습니다. 복잡한 멀티 섹션 페이지나 반복적인 수정이 필요한 경우 Pro 플랜을 고려해 보세요.
Q2: v0에서 생성된 코드를 상업적 프로젝트에 사용해도 되나요?
네, v0에서 생성된 코드는 상업적 프로젝트에 자유롭게 사용할 수 있습니다. 생성된 코드의 소유권은 사용자에게 있으며, Shadcn/UI 컴포넌트 역시 MIT 라이선스로 제공되므로 상업적 사용에 제한이 없습니다. 단, 사용하는 외부 라이브러리의 개별 라이선스는 별도로 확인하세요.
Q3: 커스텀 디자인 토큰을 변경하면 이미 배포된 사이트에 바로 반영되나요?
CSS 변수 기반 디자인 토큰은 코드 변경에 해당하므로, 수정 후 GitHub에 커밋하면 Vercel의 자동 배포를 통해 반영됩니다. 일반적으로 커밋 후 1~2분 내에 프로덕션에 적용됩니다. 재배포 없이 실시간으로 값을 변경하고 싶다면 Vercel Edge Config를 활용하여 토큰 값을 외부에서 관리하는 방법도 있습니다.