랜딩 페이지 — 표준 구조
전환율이 높은 랜딩 페이지는 순서대로 다섯 개의 섹션을 포함합니다:
- Hero — 한 문장의 약속 + 비주얼 + 하나의 주요 CTA
- 세 가지 하이라이트 — 세 개의 카드에 담긴 세 가지 혜택. 그 이상은 안 됩니다.
- 운영 시간 / 세부 정보 — 두 번째 화면 상단에 배치하는 실용적인 정보
- 지도 / 연락처 — 임베디드 iframe 또는 링크
- Footer — 최소한: 저작권, 소셜 링크
기술 규칙 (엔지니어링 부분)
- 하나의 파일. 인라인
<style>과<script>가 포함된index.html. 빌드 단계 없음. - CDN을 통한 Tailwind —
<script src="https://cdn.tailwindcss.com"></script>. npm 사용하지 않음. - Unsplash 소스 URL을 통한 스톡 사진 —
https://source.unsplash.com/featured/?keyword. - 모바일 우선. 375px 너비에서 테스트.
- 200ms를 초과하는 애니메이션 없음. 캐러셀 없음. 팝업 없음.
색상 가이드
- 하나의 주 색상과 하나의 강조 색상을 선택합니다. 나머지는 중립 색상을 사용합니다.
- 따뜻한 비즈니스(음식, 접객업): 주 색상 주황/빨강, 중립 색상 크림.
- 기술: 주 색상 파랑/인디고, 중립 색상 슬레이트.
- 절대 순수 검정과 순수 흰색을 함께 사용하지 마세요. 둘 다 부드럽게 만드세요.
절차
랜딩 페이지를 만들라는 요청을 받으면:
- 프롬프트에서 비즈니스 유형을 식별합니다.
- 위 가이드를 사용하여 색상 팔레트를 선택합니다.
- 다섯 개의 섹션으로
index.html을 작성합니다. - 실제 같은 카피를 사용합니다("Lorem ipsum" 사용 금지). 프롬프트에 맞게 구체적으로 작성합니다.
- 작성이 끝나면
bash도구를 사용하여open index.html(macOS) 또는xdg-open index.html(Linux)을 실행합니다. - 사용자가 변경을 요청하면, 다시 작성하지 말고 편집(Edit)을 사용하여 대상 변경을 수행합니다.