AI로 랜딩페이지 만들기
비개발자 실전 제작기
기획 → UI 생성 → 텍스트 → 배포까지, 코딩 없이 완성하는 전 과정
📋 이 글에서 알 수 있는 것
- 랜딩페이지 기획을 AI와 함께 빠르게 정리하는 법
- v0로 UI를 프롬프트 하나로 생성하는 실전 예시
- AI가 만들어준 UI 텍스트를 내 서비스에 맞게 다듬는 법
- Vercel로 완성된 페이지를 인터넷에 공개하는 과정
- 비개발자가 자주 막히는 포인트와 해결법
랜딩페이지란 무엇인가
랜딩페이지는 방문자가 처음 도착하는 단일 웹페이지입니다. 일반 웹사이트처럼 여러 메뉴와 페이지가 있는 게 아니라, 하나의 목적(서비스 소개, 이메일 수집, 구매 유도 등)에 집중한 페이지입니다.
스타트업 소개 사이트, 신제품 출시 알림 페이지, 이벤트 안내 페이지, 개인 포트폴리오 사이트 — 이 모든 것이 랜딩페이지의 형태입니다. 구조가 단순한 만큼 AI로 만들기에도 가장 좋은 첫 번째 프로젝트입니다.
⚡ 랜딩페이지의 기본 구성 요소
- 히어로 섹션: 페이지 최상단. 제목(슬로건) + 부제목 + CTA 버튼
- 특징/기능 소개: 서비스의 핵심 가치 3~5가지를 카드나 아이콘으로 표현
- 사용 방법 또는 후기: 신뢰를 높이는 섹션
- CTA (Call to Action): "지금 시작하기", "무료로 체험" 등 행동 유도 버튼
- 푸터: 연락처, 저작권, 소셜 링크 등
v0로 UI 만드는 법: 바이브코딩 UI 자동화 입문을 먼저 읽어보세요.
기획: 무엇을 담을지 정하기
바로 AI 툴을 켜기 전에 5분만 투자해서 기획을 정리하세요. 기획이 명확할수록 AI에게 더 좋은 결과를 받을 수 있습니다.
아래 네 가지 질문에 답하면 기획이 완성됩니다. ChatGPT나 Claude에게 "이 질문에 답해가며 랜딩페이지 기획을 도와줘"라고 요청해도 좋습니다.
📋 랜딩페이지 기획 4문 4답
- ① 무엇을 소개하는 페이지인가? (예: AI 글쓰기 도구 WriteAI)
- ② 누구를 위한 서비스인가? (예: 블로그를 운영하는 1인 사업자)
- ③ 핵심 가치 3가지는? (예: 시간 절약 / 퀄리티 유지 / 한국어 특화)
- ④ 방문자에게 기대하는 행동은? (예: 무료 체험 신청 버튼 클릭)
Claude나 ChatGPT에게 "내 서비스는 [설명]이야. 랜딩페이지에 들어갈 헤드라인, 서브카피, 특징 3가지를 써줘"라고 하면 텍스트 초안을 빠르게 받을 수 있습니다. v0에 넣기 전에 이 텍스트를 먼저 준비하면 훨씬 완성도 높은 결과가 나옵니다.
UI 생성: v0로 화면 만들기
기획이 정해졌다면 이제 v0(v0.dev)에서 실제 화면을 만들 차례입니다. v0는 텍스트 프롬프트로 React 기반 UI를 생성해주는 Vercel의 AI 도구입니다.
v0.dev 접속 및 로그인
v0.dev에 접속해 Vercel 계정으로 로그인합니다. 계정이 없다면 이메일로 가입합니다. 무료 플랜은 월 200 크레딧으로 랜딩페이지 기본 구조를 만드는 데 충분합니다.
상세한 프롬프트 입력
아래 예시처럼 구체적인 정보를 담은 프롬프트를 작성합니다. 막연하게 "랜딩페이지 만들어줘"보다 훨씬 좋은 결과가 나옵니다.
결과 확인 및 수정 요청
우측 미리보기에서 결과를 확인합니다. 마음에 들지 않는 부분은 "버튼 색을 파란색으로 바꿔줘", "히어로 섹션 배경을 어둡게 해줘" 식으로 추가 요청을 이어갑니다.
📝 v0 프롬프트 예시 (AI 글쓰기 도구 서비스)
"AI 글쓰기 도구 WriteAI의 랜딩페이지를 만들어줘.
- 타깃: 블로그를 운영하는 1인 사업자
- 헤드라인: '블로그 글, 이제 10분이면 충분합니다'
- 서브카피: '퀄리티는 그대로, 시간만 줄어듭니다. 지금 무료로 체험해보세요.'
- 특징 3가지: 시간 절약 / 한국어 최적화 / SEO 자동 적용
- CTA 버튼: '무료로 시작하기'
- 디자인: 미니멀, 화이트 배경, 포인트 컬러 #2563eb
- 구성: 네비게이션 + 히어로 섹션 + 특징 3개 카드 + CTA + 푸터
- 텍스트 전체 한국어"
프롬프트가 구체적일수록 수정 횟수가 줄어듭니다. 특히 컬러 코드, 버튼 문구, 섹션 구성을 명시하는 게 핵심입니다.
❌ 막연한 프롬프트
"멋진 AI 서비스 랜딩페이지 만들어줘. 깔끔하고 모던하게."
✅ 구체적인 프롬프트
"WriteAI 랜딩페이지. 헤드라인: '블로그 글, 10분이면 충분합니다'. 화이트 배경, 파란 포인트 컬러, 특징 카드 3개, CTA 버튼 '무료로 시작하기'."
v0로 UI 만드는 법: 바이브코딩 UI 자동화 입문을 읽어보세요.
텍스트 다듬기
v0가 만든 UI의 레이아웃은 훌륭하지만, 텍스트는 내 서비스와 맞지 않는 예시 문구로 채워져 있을 수 있습니다. 이 단계에서는 실제 서비스 내용에 맞게 텍스트를 교체합니다.
두 가지 방법 중 하나를 쓸 수 있습니다.
v0에서 직접 수정 요청
v0 입력창에 "특징 카드 첫 번째 제목을 '시간 절약'으로, 설명을 '10분 안에 블로그 초안 완성'으로 바꿔줘"라고 요청합니다. 코드를 볼 필요 없이 자연어로 수정할 수 있어 비개발자에게 적합합니다.
코드를 복사해 Cursor로 수정
v0에서 코드를 복사해 Cursor에 붙여넣고, Composer로 "이 코드에서 헤드라인을 [내용]으로 바꿔줘"라고 요청합니다. 더 정밀한 수정이 필요할 때 유용합니다.
"내 서비스는 [설명]야. 랜딩페이지 히어로 섹션에 들어갈 임팩트 있는 헤드라인 5개를 만들어줘"라고 ChatGPT나 Claude에 요청하면 선택지를 여러 개 받을 수 있습니다. 그 중 가장 마음에 드는 걸 골라 v0에 반영하면 됩니다.
배포: Vercel로 공개하기
UI와 텍스트가 완성됐다면 이제 실제 인터넷에 올릴 차례입니다. v0에서 만든 결과물은 Vercel로 원클릭 배포가 가능합니다.
v0에서 Deploy 버튼 클릭
v0 미리보기 화면 우측 상단의 "Deploy" 버튼을 클릭합니다. Vercel 계정이 연결되어 있으면 자동으로 프로젝트가 생성됩니다.
배포 완료 — URL 확인
1~2분 내에 배포가 완료되고 프로젝트명.vercel.app 형태의 URL이 생성됩니다. 이 URL을 공유하면 누구나 내 랜딩페이지를 볼 수 있습니다.
(선택) 커스텀 도메인 연결
구매한 도메인이 있다면 Vercel 대시보드 → Settings → Domains에서 연결할 수 있습니다. myservice.com 같은 주소로 바꾸면 훨씬 전문적으로 보입니다.
v0 무료 플랜으로 배포한 앱은 일정 기간 후 비활성화될 수 있습니다. 장기적으로 유지하려면 v0 Premium 플랜($20/월)이나 직접 코드를 내보내 GitHub → Vercel로 배포하는 방식을 권장합니다.
자주 막히는 포인트
"v0 결과물이 너무 영어로 나와요"
→ 프롬프트 끝에 "모든 텍스트는 한국어로"를 명시하세요. 또는 생성 후 "모든 영어 텍스트를 한국어로 번역해줘"라고 추가 요청하면 됩니다.
"원하는 디자인이 안 나와요"
→ 한 번에 완벽한 결과를 기대하지 마세요. "배경을 더 밝게", "폰트를 더 크게", "카드에 그림자 추가" 식으로 수정을 이어가는 대화 방식이 더 효과적입니다. 또한 참고하고 싶은 사이트 URL을 "이 사이트 디자인과 비슷하게 만들어줘"와 함께 제공하면 도움이 됩니다.
"배포 후 모바일에서 깨져 보여요"
→ v0 미리보기 화면에서 모바일 뷰로 전환해 먼저 확인하세요. 문제가 있다면 "모바일 반응형으로 고쳐줘"라고 요청합니다. 대부분의 경우 추가 프롬프트 1~2회로 해결됩니다.
"이미지를 내 사진으로 바꾸고 싶어요"
→ v0가 생성한 코드에는 placeholder 이미지가 들어 있습니다. Cursor의 Composer에서 "img src를 내 이미지 URL로 바꿔줘"라고 요청하거나, 코드에서 이미지 URL 부분을 직접 찾아 바꾸면 됩니다.
자주 묻는 질문
코딩을 전혀 몰라도 랜딩페이지를 만들 수 있나요?
네, 가능합니다. v0의 UI 생성과 Vercel 배포 모두 코딩 지식 없이도 할 수 있습니다. 다만 세밀한 커스터마이징(색상 코드 변경, 특정 요소 위치 조정 등)은 AI에게 자연어로 요청하거나, 생성된 코드를 조금씩 살펴보면서 익히면 범위가 점점 넓어집니다.
v0 말고 다른 툴로도 랜딩페이지를 만들 수 있나요?
네. Framer는 노코드 웹빌더로 AI 카피라이팅과 레이아웃 기능을 제공하며, 디자인 자유도가 높습니다. Replit Agent도 백엔드 기능이 포함된 랜딩페이지를 만들 수 있습니다. 비개발자에게는 v0로 빠르게 UI를 만들고 Vercel로 배포하는 흐름이 가장 접근하기 쉽습니다.
만든 랜딩페이지에 폼(신청서)을 달 수 있나요?
가능합니다. Tally, Google Forms, Typeform 등 무료 폼 서비스를 이용해 embed 코드를 받아 랜딩페이지에 삽입하는 방식이 가장 쉽습니다. v0에 "이메일 입력 폼과 신청 버튼을 추가해줘"라고 요청하면 기본 구조를 만들어주기도 합니다.
완성된 랜딩페이지를 수정하고 싶으면 어떻게 하나요?
v0로 돌아가 수정 사항을 추가 요청하거나, 배포된 프로젝트의 GitHub 저장소에서 파일을 수정하면 자동으로 재배포됩니다. 처음부터 GitHub와 Vercel을 연결해두면 수정 → 자동 배포 흐름이 훨씬 편해집니다.
비용이 얼마나 드나요?
v0 무료 플랜(월 200 크레딧)과 Vercel 무료 플랜을 조합하면 비용 없이 시작할 수 있습니다. 본격적으로 운영하려면 v0 Premium($20/월)을 고려하세요. 커스텀 도메인은 연간 $10~$20 수준으로 구매할 수 있습니다.
랜딩페이지는 AI 앱 만들기의 가장 좋은 첫 번째 프로젝트입니다.
기획 5분, v0 프롬프트 작성 10분, 수정 10분, 배포 5분.
30분이면 실제로 공개된 나만의 페이지가 만들어집니다.
VibeLab이었습니다.