디자인 감각이 전혀 없어도 SaaS 스타일의 랜딩 페이지 한 장을 1시간 안에 완성하는 방법을 다섯 단계로 안내합니다. 메인 도구는 Vercel의 v0.dev이고, 같은 결과를 낼 수 있는 Claude Design·Claude Code 대안까지 짧게 비교해뒀어요. 가상의 AI 메모 앱 “Notely”를 예시로 Hero·기능·사용 예시·FAQ·CTA까지 붙이는 프롬프트를 그대로 가져다 쓸 수 있게 정리했습니다. 소요 시간 1시간, 난이도 ★★☆, 준비물은 v0.dev 계정 하나. 각 단계 끝에 “이 신호가 보이면 다음으로” 기준이 붙어 있어 중간에 막혀도 되짚기가 쉬워요.
📑 목차
🎨 디자인 감각 없이도 랜딩 페이지를 만들 수 있을까
제품을 만들고 난 뒤 가장 먼저 부딪히는 벽이 바로 이거예요. “좋은 기능을 만들었는데, 그걸 한 페이지로 정리해서 보여주는 게 너무 어렵다.” 색 조합, 여백, 폰트 크기, 헤드라인 문구까지 결정해야 할 것이 의외로 많습니다. 디자이너 없이 혼자 만드는 1인 개발자일수록 이 부분에서 반나절을 통째로 태우는 일이 흔해요.
다행인 건 지금은 AI가 이 영역을 대신해줄 수 있다는 점입니다. 프롬프트 한 줄로 Hero 섹션 디자인이 여러 개 후보로 나오고, 기능 카드 레이아웃을 세 가지 버전으로 비교해볼 수도 있거든요. 결정을 내리는 건 여전히 사람이지만, “처음부터 백지에서 만드는 작업”이 “후보 중에서 고르고 조금씩 다듬는 작업”으로 바뀝니다. 체감 피로도가 완전히 달라요.
이 글에서는 그 느낌을 확실히 잡을 수 있도록, 가상의 AI 메모 앱 “Notely”를 위한 SaaS 랜딩 페이지를 1시간 안에 만들어봅니다. 메인으로 쓸 도구는 v0.dev이고, 비슷한 결과를 낼 수 있는 Claude Design·Claude Code도 함께 비교해드려요. 완성 시점에는 실제로 돌아가는 React 기반 랜딩 페이지 코드 한 벌이 손에 남습니다.
👀 1시간 뒤 완성될 랜딩 페이지 모습
완성본은 여섯 개의 섹션이 위에서 아래로 쌓인 정석 SaaS 랜딩 페이지예요. 상단 네비게이션에 로고와 메뉴, 우측에는 CTA 버튼이 붙고, 그 아래 Hero 섹션에 “AI가 내 필기를 이해합니다” 같은 한 줄짜리 강력한 헤드라인이 큼직하게 놓입니다. 이어서 기능 카드 세 장, 실제 사용자 후기 블록, FAQ 아코디언, 그리고 마지막 푸터 CTA 순서로 흐르게 됩니다.
결과물은 v0.dev 미리보기에서 바로 확인할 수 있고, “Download Code”로 Next.js 프로젝트 형태로 내려받을 수도 있어요. 즉 이 한 시간의 끝에는 브라우저에서 동작하는 페이지뿐 아니라, 필요하면 Vercel에 그대로 배포할 수 있는 코드까지 손에 들어온다는 뜻입니다.
🛠 v0·Claude Design·Claude Code·Lovable 간단 비교
최근 몇 달 사이 “프롬프트 → UI 생성” 쪽 도구가 한꺼번에 많이 쏟아졌습니다. 처음 보시는 분들이 어느 것부터 시작할지 고민되실 수 있어서, 이 글에서 다루는 랜딩 페이지 제작 목적 기준으로 네 가지 도구를 간단히 비교해뒀어요.
| 도구 | 강점 | 랜딩 페이지 적합도 | 비전공자 친화도 | 출력 형태 |
|---|---|---|---|---|
| v0.dev (Vercel) | React·Tailwind 기반 UI 생성에 특화. 미리보기·수정·변형이 매끄러움 | ★★★ | ★★★ | Next.js 코드 내려받기 |
| Claude Design (Anthropic) | Claude 기반 디자인 특화. 30분 수준 프로토타입 속도 빠름 | ★★★ | ★★★ | 공유 가능한 프로토타입 |
| Claude Code (Anthropic) | 코드 생성 범용. HTML·CSS 한 파일 버전으로 만들고 싶을 때 | ★★☆ | ★★☆ | 임의의 코드 파일 |
| Lovable | 풀스택 앱 전체 생성. 로그인·DB 붙은 제품 만들기에 강점 | ★★☆ (랜딩만엔 과함) | ★★☆ | 전체 웹앱 스택 |
이 글에서는 v0.dev를 메인으로 진행합니다. UI 수정 루프가 가장 매끄럽고, 결과를 Next.js 프로젝트로 그대로 내려받을 수 있어 Vercel 배포까지 끊김 없이 이어지거든요. Claude Design을 써보고 싶으시다면 Claude Design 사용법 완전 정복에 30분 프로토타입 시나리오가 정리돼 있으니 같은 주제를 그쪽으로 한 번 더 돌려보셔도 좋습니다.
📦 시작 전 체크할 세 가지
본격적으로 들어가기 전에 아래 세 가지가 준비돼 있으면 “1시간”이라는 시간이 현실적으로 맞아 떨어집니다. 이미 다 돼 있다면 다음 섹션으로 바로 내려가셔도 돼요.
🔑 v0.dev 계정
v0.dev에 가입해서 로그인된 상태여야 해요. GitHub나 이메일 둘 다 가능합니다. 무료 플랜에서도 하루에 한 장 분량의 랜딩 페이지는 충분히 만들 수 있으니 이 글 진행에는 결제 없이 따라오실 수 있어요.
🧠 제품 설명 한 줄
“무엇을, 누구에게, 왜”를 한 문장으로 요약해둔 설명이 있으면 진행이 훨씬 매끄럽습니다. 예를 들어 “학생·직장인을 위한 AI 메모 앱. 흩어진 필기를 의미로 검색하고 태그를 자동으로 붙여줘요” 같은 한 줄이면 충분해요. v0가 이 설명을 기반으로 헤드라인 후보까지 알아서 뽑아주거든요.
💻 웹 브라우저 한 개
v0는 브라우저 안에서 전부 동작해요. Chrome, Edge, Firefox, Safari 어느 것이어도 무방합니다. 로컬 개발 환경은 당장 필요 없지만, 나중에 코드를 내려받아 수정하실 계획이라면 VS Code 설정 가이드를 같이 끝내두시면 좋아요.
🧑💻 AI 랜딩 페이지 만들기 — 1시간 5단계
지금부터는 순서대로 따라오시면 됩니다. 각 단계 끝에 “이 신호가 보이면 다음으로” 기준이 있으니, 신호가 맞지 않는 채로 진도를 빼는 건 피해주세요. 뒤에서 원인을 찾기가 훨씬 번거로워집니다.
참고로 아래 해부도는 우리가 만들 랜딩 페이지가 어떤 블록들로 구성되는지 한눈에 보여줍니다. 블록 순서와 시간 배분을 머릿속에 먼저 넣어두면 중간에 길을 잃지 않아요.
🚀 단계 1. v0 프로젝트 생성하기 (5분)
먼저 v0.dev에 로그인한 뒤 상단의 새 프롬프트 입력창에 제품 설명을 그대로 붙여넣어 주세요. 이 단계에서 구체적인 디자인까지 지시할 필요는 없습니다. 제품이 뭔지, 누구를 위한 건지만 또렷이 전달하면 v0가 초기 구조를 알아서 잡아주거든요.
AI 메모 앱 “Notely”의 SaaS 랜딩 페이지를 만들어주세요. 타겟은 노트 정리에 시간을 많이 쓰는 대학원생과 직장인입니다. 핵심 가치는 “AI가 메모를 의미로 검색하고 태그를 자동으로 붙여준다”는 점이에요. 상단 네비게이션, Hero 섹션(헤드라인·서브카피·CTA 버튼), 핵심 기능 3개 카드, 사용자 후기 블록, FAQ, 푸터 CTA까지 순서대로 배치된 한 페이지로 만들어주세요. 디자인은 심플하고 모던하게 부탁합니다.
v0가 잠시 생각한 뒤 오른쪽에 첫 버전 미리보기가 뜹니다. 전체적인 구조가 위에서 말한 여섯 블록 순서로 잡혀 있으면 첫 단계는 끝난 거예요. 디자인이 조금 아쉬워도 괜찮습니다. 다음 단계부터 하나씩 다듬거든요.
🎨 단계 2. Hero 섹션 완성시키기 (10분)
경험상 랜딩 페이지 제작 시간의 거의 30%는 Hero 한 섹션에 쓰입니다. 이 자리가 방문자의 체류 여부를 가장 크게 좌우하거든요. v0에 추가 요청을 보내면서 헤드라인·서브카피·CTA 문구를 차례로 다듬어주세요.
Hero 섹션을 다음 기준으로 수정해주세요. 헤드라인은 “AI가 내 필기를 이해합니다” 같이 짧고 확신 있는 한 문장으로, 서브카피는 “흩어진 메모를 한 번에 검색하고, 태그는 AI가 알아서 붙여줍니다” 정도 길이로 부탁합니다. CTA 버튼은 메인 “무료로 시작”, 보조 “데모 보기 ▸” 두 개로 구성하고 메인 버튼은 보라색 계열로 해주세요.
미리보기에서 헤드라인 한 문장이 화면에 꽉 차게 보이고, 그 밑에 설명·CTA 버튼 두 개까지 또렷이 정렬돼 있으면 여기까지 잘 온 겁니다. 이 블록 하나만 제대로 만들어두면 이후 작업 속도가 눈에 띄게 빨라져요.
🧩 단계 3. 기능 3개와 사용 예시 섹션 채우기 (20분)
기능 섹션은 제품의 “왜”를 구체적으로 보여주는 자리예요. 카드를 너무 많이 넣으면 페이지가 산만해지니, 처음에는 정확히 세 개만 뽑는 걸 권합니다. Notely의 경우 “똑똑한 검색 · 자동 태그 · 기기 간 동기화” 정도로 잡으면 충분해요.
기능 섹션에 카드 3개를 배치해주세요. 각 카드는 아이콘, 짧은 제목, 두 줄 설명으로 구성합니다. 첫 번째는 “똑똑한 검색 — 지난주 회의만 쳐도 의미로 메모를 찾습니다”, 두 번째는 “자동 태그 — 메모 저장 순간 AI가 태그를 붙여줍니다”, 세 번째는 “기기 간 동기화 — 맥·아이폰·웹에서 항상 같은 메모를 봅니다”로 해주세요. 바로 아래에는 실제 사용자 한 명의 별 다섯 개 후기 블록을 추가합니다.
미리보기에서 세 카드가 가로로 나란히 놓이고 각자 아이콘·제목·설명을 갖고 있으며, 아래에 후기 한 줄까지 깔끔하게 붙어 있으면 이 단계는 마무리입니다. 모바일에서 카드가 세로로 쌓이는지도 같이 확인해두시면 좋아요.
❓ 단계 4. FAQ와 푸터 CTA 붙이기 (15분)
FAQ는 SEO에도 도움이 되고, 방문자가 계약 직전에 망설이는 이유를 미리 해소해주는 역할을 합니다. 푸터의 마지막 CTA는 “여기까지 읽은 분께 한 번 더” 기회를 주는 자리고요.
페이지 하단에 아코디언 형태의 FAQ 섹션을 6개 질문으로 추가해주세요. 질문 예시: “무료 플랜에서 어디까지 쓸 수 있나요”, “내 메모는 AI 학습에 사용되나요”, “아이폰에서도 되나요” 등 실제 사용자가 궁금해할 법한 것으로 부탁합니다. 그 아래에 푸터 CTA 블록을 추가해 “지금 바로 무료로 시작 →” 같은 마감 버튼을 크게 배치해주세요.
FAQ 질문을 눌렀을 때 답변이 부드럽게 펼쳐지고, 페이지 맨 아래에 큼직한 CTA 버튼 하나가 자리 잡으면 네 번째 단계는 끝난 상태입니다. 이 시점에서 전체 페이지를 위에서 아래로 한 번 죽 훑어보세요. 각 섹션이 자연스럽게 다음으로 이어지는지, 끊기는 부분이 있다면 v0에 “섹션 3과 4 사이에 여백을 더 주세요” 같은 추가 요청을 넣어 조정합니다.
💾 단계 5. 로컬 코드 내려받기 (10분)
마지막은 결과물을 손에 쥐는 단계입니다. v0 프로젝트 상단의 “Download Code” 또는 “Export” 메뉴에서 Next.js 프로젝트 형태로 코드를 내려받을 수 있어요. 압축 파일을 풀면 평범한 Next.js 프로젝트 구조가 나옵니다.
VS Code로 폴더를 열고 터미널에서 npm install을 한 번 돌린 뒤 npm run dev를 실행하면 http://localhost:3000에서 방금 만든 랜딩 페이지가 뜹니다. v0 미리보기에서 보던 디자인이 로컬에서도 그대로 열리면 다섯 번째 단계까지 끝난 겁니다. 축하드려요. 이제 당신의 제품을 위한 진짜 랜딩 페이지 한 장이 손에 들어왔습니다.
✅ 제대로 만들어졌는지 확인하는 다섯 가지
완성된 랜딩 페이지가 의도대로 동작하는지 아래 다섯 가지를 차례로 훑어봐 주세요. 하나라도 어긋나면 다음 섹션의 진단 가이드를 참고하시면 됩니다.
- 상단 Hero의 헤드라인이 한 문장으로 또렷하게 보인다.
- 기능 카드 3개가 데스크톱에서 가로로, 모바일에서 세로로 자연스럽게 재배치된다.
- 사용자 후기 블록이 별점과 함께 기능 섹션 아래에 붙어 있다.
- FAQ 아코디언의 질문을 클릭하면 답변이 부드럽게 펼쳐진다.
- 페이지 맨 아래에 마감 CTA 버튼 하나가 크게 배치되어 있다.
🧩 자주 막히는 세 가지 상황과 해결법
같은 흐름으로 랜딩을 만들어본 분들이 가장 자주 멈춰 선 지점만 추려봤습니다. 증상이 비슷하다면 해당 해결법부터 먼저 시도해보세요.
| 증상 | 가장 흔한 원인 | 해결 |
|---|---|---|
| 원하는 디자인이 나오지 않고 계속 비슷한 결과만 반복 | 프롬프트가 너무 추상적(“예쁘게”, “모던하게”) | 색상 팔레트, 참고 사이트, 분위기 단어를 구체적으로 포함해 재요청 |
| 헤드라인이 어색하거나 영어·한국어가 섞여서 나옴 | 기본 언어 컨텍스트가 고정돼 있지 않음 | “모든 카피는 자연스러운 한국어로 작성해주세요” 한 줄 고정 지시 |
| 모바일에서 레이아웃이 깨짐 | 반응형 디자인을 따로 요청하지 않았음 | “모바일(375px 기준)에서도 카드가 세로로 쌓이게 해주세요” 명시 |
🎭 원하는 느낌이 안 나와요
“예쁘게”, “모던하게” 같은 표현만으로는 AI가 방향을 잡지 못해요. 경험상 “Linear 웹사이트 같은 미니멀 다크톤”, “Stripe 홈페이지의 부드러운 그라데이션 느낌” 처럼 레퍼런스 사이트 이름을 함께 주면 결과가 눈에 띄게 달라집니다. 색상은 주요 색 두 개(예: 보라 #4f46e5, 회색 #64748b)를 직접 지정해 주시면 훨씬 일관된 결과가 나와요.
📝 헤드라인이 자꾸 어색한 번역체로 나와요
기본 훈련 데이터가 영어 중심이라 번역체가 섞이는 경우가 있습니다. 프롬프트 맨 앞에 “모든 카피는 자연스러운 한국어로 작성해주세요. 영어는 브랜드명·기술 용어에만 예외로 사용합니다”를 넣어두면 대체로 해결돼요. 그래도 어색하면 헤드라인 후보 다섯 개를 요청해 고르는 방식이 빠릅니다.
📱 모바일에서 디자인이 깨져요
생각보다 자주 벌어지는 상황이에요. v0의 미리보기는 기본이 데스크톱이라, 처음부터 반응형을 명시적으로 요청하지 않으면 모바일 배치가 엉성할 수 있습니다. “모바일 세로 화면(375px 기준)에서도 카드가 세로로 쌓이고, CTA 버튼은 화면 너비의 90%를 차지하도록 해주세요”처럼 구체적인 숫자까지 포함해 요청하면 깔끔하게 잡힙니다.
🪜 여기서 어디로 더 갈 수 있나
랜딩 페이지 코드가 손에 들어왔으니, 이제 세 갈래 방향이 열립니다. 지금 상황에 맞게 원하는 쪽부터 이어가시면 돼요.
🚀 Vercel에 무료로 배포하기
로컬 프로젝트를 GitHub에 올리고 Vercel에 연결하면 URL 하나로 누구에게나 공유할 수 있어요. 무료 플랜만으로도 트래픽이 어지간히 튀지 않는 한 충분합니다. 절차는 바이브코딩 Vercel 무료 배포 가이드에서 이어집니다.
🔗 커스텀 도메인 연결하기
Vercel 배포가 끝나면 기본 URL이 xxx.vercel.app 형태예요. 제품처럼 보이려면 notely.com 같은 도메인을 연결해야 합니다. 가비아·Namecheap 등에서 도메인을 구입한 뒤 Vercel의 Domains 탭에서 DNS 레코드만 맞춰주면 몇 분 안에 연결됩니다.
🧪 A/B 테스트로 헤드라인 비교하기
Hero 헤드라인 문구 하나만 바꿔도 전환율이 두 배 가까이 달라지는 일이 드물지 않아요. Vercel의 Feature Flags나 Google Optimize 대체 도구를 쓰면 두 가지 버전의 헤드라인을 동시에 운영하면서 어떤 쪽이 CTA 클릭을 더 많이 받는지 비교할 수 있습니다. 트래픽이 어느 정도 쌓였을 때 시도해보시면 좋아요.
💡 v0에게 더 잘 시키는 세 가지 습관
같은 도구라도 프롬프트 한 줄 차이로 결과가 눈에 띄게 달라져요. 이번 프로젝트에서 쓸모가 컸던 세 가지 습관만 추려봤습니다.
| 덜 좋은 요청 | 더 나은 요청 |
|---|---|
| “Hero 섹션을 더 예쁘게 해주세요” | “Hero 헤드라인 폰트 크기를 48px → 64px로 키우고, 배경은 연보라에서 흰색으로 자연스러운 그라데이션을 넣어주세요” |
| “기능 카드를 수정해주세요” | “기능 카드 아이콘을 각각 🔍 📊 🔁 이모지로 교체하고, 카드 배경에 아주 옅은 그라데이션을 추가해주세요” |
| “모바일도 고려해주세요” | “모바일 세로 화면(375px 기준)에서 Hero 헤드라인은 28px, 서브카피는 14px로 줄이고, CTA 버튼은 화면 너비의 90%로 키워주세요” |
🎯 참고 사이트 이름을 포함하기
“Linear 같은 미니멀 스타일”, “Notion 홈페이지의 따뜻한 분위기”, “Stripe의 프로페셔널한 느낌”처럼 실존하는 랜딩 페이지 이름을 섞어 주면 AI가 방향을 훨씬 빠르게 잡습니다. 레퍼런스 두 곳을 조합하는 것도 효과가 좋아요. “Linear의 다크톤 + Stripe의 여백 감각”처럼 두 가지를 섞는 식이에요.
📐 숫자로 지시하기
디자인 요청을 추상적으로 하면 AI가 어느 정도 바꿔야 할지 감을 못 잡아요. “더 크게”보다 “48px에서 64px로”, “간격을 넉넉하게”보다 “섹션 사이 여백을 120px로”처럼 구체적인 숫자까지 얹어야 의도대로 움직입니다. 정확한 숫자를 모르시면 처음엔 두 배·절반 단위로 지시한 뒤 조정하셔도 돼요.
🗂 한 번에 한 섹션씩 다듬기
“Hero, 기능, FAQ 전부 다시 만들어주세요”처럼 한 번에 여러 섹션을 손대면 이전에 괜찮았던 부분까지 흔들리는 일이 자주 있어요. 섹션을 하나씩 지정해서 다듬고, 그 결과가 마음에 들면 다음 섹션으로 넘어가는 방식이 가장 빠른 길입니다. 한 섹션이 완성될 때마다 작은 성취감도 따라오거든요.
랜딩 페이지 다음 단계로 만들 만한 것들은 프로젝트 아이디어 10가지에 모아뒀어요.
🪧 면책 조항
여기까지 따라오시느라 고생 많으셨어요. 첫 랜딩 페이지가 완성됐다면, 같은 뼈대를 유지한 채 텍스트와 색만 바꿔 두 번째 제품의 랜딩 페이지에도 한 번 더 도전해보시면 감각이 빠르게 손에 붙습니다.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 시작하기 전 궁금한 것들
Q. 디자인 감각이 전혀 없는데 정말 가능한가요?
Q. v0.dev 무료 플랜으로 어디까지 할 수 있나요?
Q. v0·Claude Design·Claude Code 중 뭘 써야 하나요?
🛠 작업 중 자주 마주치는 상황
Q. 원하는 디자인이 안 나오면 어떻게 고치나요?
Q. 헤드라인을 AI가 계속 어색하게 씁니다
Q. 모바일 반응형은 자동으로 되나요?
Q. 이미지나 사진은 어떻게 넣나요?
🚀 확장과 운영
Q. 이 랜딩 페이지로 실제 고객을 받을 수 있나요?
Q. 커스텀 도메인 연결은 어떻게 하나요?
Q. A/B 테스트는 어떻게 시작하나요?
🔗 관련 글
- 바이브코딩 투두앱 만들기 — 30분이면 비전공자도 완성 (2026)
- 바이브코딩 게임 만들기 5단계 — 비전공자 첫 게임 + 수익화 경로 (2026)
- Claude Design 사용법 완전 정복 — 30분 프로토타입
- Claude Code 설치부터 첫 코딩까지 — 비전공자 가이드
- 바이브코딩 Vercel 무료 배포 가이드
📑 참고 자료
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
