랜딩 페이지 빌더은(는) 무엇을 하나요?
간단한 브리핑을 빠르고 반응형이며 자체 포함된 랜딩 페이지로 바꿔 GitHub Pages, Netlify 또는 모든 정적 호스트에 배포할 수 있게 합니다.
1. 브리핑 수집
코드를 작성하기 전에, 다음 항목이 있는지 확인하세요. 누락된 항목만 한 번의 메시지로 물어보세요.
| 항목 | 예시 |
|---|---|
| 제품 / 제안 | "LearnMizo – 미조어를 온라인으로 배우기" |
| 대상 고객 | "자녀가 미조어를 말하길 원하는 디아스포라 부모" |
| 방문자에게 제공하는 주요 결과 | "30일 만에 간단한 대화를 할 수 있습니다" |
| 주요 클릭 유도 문구(CTA) | "무료 레슨 시작" + 대상 URL |
| 실제 보유한 증거 | 실제 숫자, 실제 인용문, 로고 (또는 "아직 없음") |
| 브랜드 | 색상, 글꼴, 톤 (또는 "알아서 골라 주세요") |
사용자가 "그냥 만들어 줘"라고 말하면 합리적인 가정을 하고 답변 상단에 이를 나열하세요.
2. 먼저 복사본 작성 (HTML 전에)
references/page-structure.md의 구조를 따르세요. 규칙:
- 헤드라인 = 결과, 기능이 아님. 최대 약 10단어. 테스트: 대상 고객이 "네, 바로 그거예요"라고 말할까요?
- 부제목은 방법을 한 문장으로 설명합니다.
- 하나의 주요 CTA를 반복합니다 (히어로, 페이지 중간, 바닥글). 매번 동일한 문구를 사용합니다.
- 혜택은 기능 목록이 아닌 "여러분은…할 수 있습니다" 또는 "더 이상…없습니다" 형식으로 작성합니다.
- 증거를 절대 조작하지 마세요. 가짜 사용 후기, 사용자 수, 평점 또는 로고를 만들지 마세요. 증거가 없는 경우 명확하게 표시된 플레이스홀더를 사용하세요:
<!-- TODO: 실제 고객 인용문 추가 -->그리고 초안에만 보이는 "사용 후기 작성 공간"을 표시합니다. - 읽기 수준을 간단하게 유지하세요 (초등학교 6~8학년 수준 목표).
3. 페이지 빌드
assets/template.html에서 시작하여 {{플레이스홀더}}를 교체하세요.
기술 요구 사항:
- 단일 파일, 모든 CSS는
<style>에 인라인; 프레임워크 없음. JavaScript는 필요한 경우에만 사용 (예: FAQ 토글). - 모바일 우선; 360px, 768px, 1280px 너비로 테스트.
- 의미론적 HTML: 하나의
<h1>,<h2>가 있는 섹션,<main>,<footer>. <title>(≤60자),meta description(≤155자), Open Graph 태그를 채웁니다.- 색상 대비는 최소 WCAG AA 기준 (본문 텍스트 4.5:1).
- 버튼 높이 ≥ 44px; 모바일에서 스크롤 없이 CTA가 보여야 함.
- 이미지:
loading="lazy"사용, width/height 설정, 설명적인alt.
4. 제공 전 품질 확인
references/checklist.md를 실행하고 실패하는 항목을 수정하세요. 그런 다음 제공:
- HTML 파일.
- 3줄 요약: 선택한 헤드라인, CTA, 가정한 사항.
- A/B 테스트를 위한 두 가지 대체 헤드라인.