# 랜딩페이지 제작 레시피 AI 코딩 도구를 사용해 랜딩페이지를 처음부터 배포까지 만드는 단계별 프롬프트 가이드입니다. `[대괄호]` 안의 내용을 자신의 서비스에 맞게 채워 넣고, 각 단계의 프롬프트를 AI에 입력하세요. **추천 스택**: HTML + Tailwind CDN (간단) 또는 Next.js + Tailwind CSS (확장) --- ## 1단계. 요구사항 정의 > Expected output: 페이지 전략 요약 문서 (전략, 섹션 구조, 카피 방향, 비주얼 방향) ``` I want to build a landing page MVP for a service called [서비스명]. Target users: - [타겟 사용자 1] - [타겟 사용자 2] Primary goal: - [문의 유도 / 데모 신청 / 이메일 수집 / 결제 전환] Core value proposition: 1. [가치 1] 2. [가치 2] 3. [가치 3] Tone and style: - [minimal / premium / modern / friendly / developer-focused] Required sections: - hero - problem - solution - features - trust - CTA - footer Before writing code, summarize: 1. page strategy 2. section structure 3. copy direction 4. visual direction ``` --- ## 2단계. 카피 초안 생성 > Expected output: 한국어 카피 초안 (헤드라인, 서브카피, CTA, 섹션별 문구) ``` Based on the strategy above, write a landing page copy draft in Korean. Generate: - 5 hero headline options - 5 hero subheadline options - 5 CTA button text options - problem section copy - solution section copy - 4~6 feature card titles and descriptions - trust section copy - final CTA section copy Rules: - concise - specific - conversion-focused - avoid generic startup wording ``` > 잘 안될 때: `This looks too generic. Rewrite the page so it feels more specific, credible, and differentiated.` --- ## 3단계. 화면 구조 설계 > Expected output: 섹션별 레이아웃, 컴포넌트 목록, 모바일 대응 가이드 ``` Create a wireframe plan and component structure for this landing page. Requirements: - responsive layout - mobile-first - clear visual hierarchy - strong CTA placement - editable section structure Return: 1. section-by-section layout 2. component list 3. spacing and hierarchy guidance 4. mobile notes ``` --- ## 4단계. 디자인 방향 > Expected output: 디자인 컨셉, 컬러 코드, 폰트 크기, 카드/버튼 스타일 가이드 ``` Create a visual direction and design system for this landing page. Requirements: - modern and clean - strong typography hierarchy - clear CTA emphasis - balanced whitespace - minimal but polished Return: 1. design concept summary 2. color palette with hex codes 3. typography scale (heading sizes, body size, line height) 4. card/button style specifications 5. reference mood keywords ``` --- ## 5단계. 코드 생성 > Expected output: 완성된 페이지 코드 (HTML 단일 파일 또는 컴포넌트 파일들) ``` Build this landing page using [HTML + Tailwind CDN / Next.js + Tailwind CSS]. Requirements: - semantic HTML - responsive design - accessible headings and buttons - clean Tailwind classes - easy-to-replace text content - placeholder image areas Apply the design system from step 4 (colors, typography, spacing). Deliver as a single complete file [or separate section components]. ``` > 모바일이 깨질 때: `Fix the mobile layout issues. Check spacing, font sizes, button widths, and card stacking.` --- ## 6단계. 코드 리뷰 및 디자인 개선 > Expected output: 개선된 코드 (시각적 완성도 향상) ``` Review the generated landing page code and refine the visual quality. Check and improve: - typography hierarchy consistency - spacing rhythm between sections - CTA visibility and contrast - card layout consistency - hero section impact - overall premium feel Keep the design clean. Do not add decorative effects. ``` > 디자인이 산만할 때: `Simplify the visual design. Reduce decorative effects and make it cleaner and more professional.` --- ## 7단계. 전환 폼 추가 > Expected output: 폼 UI + 유효성 검사 + 성공 상태 ``` Add a conversion form section to this landing page. Requirements: - fields: name, email, company(optional), message(optional) - validation messages - success state - simple and trustworthy UI - mobile-friendly layout If backend is not ready, create a frontend-ready form with mock submit handling. ``` --- ## 8단계. 배포 전 점검 > Expected output: 이슈 목록 + 수정 사항 + 배포 체크리스트 ``` Review this landing page before deployment. Check for: - SEO basics (title, meta description, OG tags) - accessibility issues - mobile responsiveness - performance issues - weak copy - unclear CTA placement Return: 1. issues found 2. fixes needed 3. deployment checklist ``` --- ## 트러블슈팅 ### CTA가 약할 때 ``` Strengthen the CTA strategy. Make the main CTA clearer, more visible, and more compelling. ``` ### 카피가 너무 길 때 ``` Tighten the copy. Reduce word count by 30 to 40 percent while keeping the meaning. ``` --- ## 최종 체크리스트 - [ ] Hero에서 서비스 가치가 바로 보이는가 - [ ] CTA가 첫 화면과 마지막에 모두 있는가 - [ ] 핵심 기능 설명이 3~6개로 정리되어 있는가 - [ ] 모바일에서 버튼과 폼이 잘 보이는가 - [ ] 신뢰 요소가 최소 1개 이상 있는가 - [ ] 문구가 추상적이지 않은가 - [ ] 배포 가능한 구조로 정리되어 있는가