랜딩 페이지 (퍼스웨이드 모드)은(는) 무엇을 하나요?
페이지의 임무는 하나입니다: 올바른 방문자가 하나의 행동을 하도록 유도하는 것. 모든 요소는 그 임무를 위해 자리를 차지합니다.
히어로: 가장 특징적인 것부터 시작하라
히어로 유형은 습관이 아닌 제품에서 골라야 합니다.
| 히어로 유형 | 사용 시기 | 제작 방법 |
|---|---|---|
| 제품 중심 | 소프트웨어, CRM, 앱 | 실제 제품이 주요 작업을 수행하는 화면(흐릿한 이미지가 아닌 실제 HTML UI)을 믿을 수 있는 데이터와 함께 표시 |
| 증거 중심 | 지역 서비스, 기술자, 에이전시 | 실제 작업 사진 + 결과를 설명하는 텍스트 + 평점/리뷰 개수(실제인 경우) |
| 약속 중심 | 신규 카테고리, 브랜드 중심 | 하나의 큰 타이포그래피 문장; 타이포 자체가 시각적 요소 |
| 데모 중심 | 도구, 게임, 인터랙티브 | 제품 자체를 페이지 상단에서 플레이하거나 상호작용 가능하게 배치 |
| 제안 중심 | 이커머스, 이벤트 | 제품 사진/가격/날짜를 전면 중앙에 배치 |
"큰 헤드라인 + 그라데이션 블롭 + 두 개의 버튼 + 가짜 통계 행" 히어로는 기본값입니다. 위 유형 중 어느 것도 맞지 않을 때만 사용하세요.
히어로 체크리스트: 헤드라인은 무엇을 위한 것인지와 대상을 10단어 이내로 명시; 서브라인은 결과를 25단어 이내로 명시; 하나의 기본 CTA는 행동을 구체적으로 명명("무료 견적 예약하기", "14일 무료 체험 시작"); 망설이는 사용자를 위한 보조 CTA는 선택 사항("가격 보기"); 시각적 요소는 히어로의 40-60%를 차지.
섹션 메뉴 (5~8개 선택, 형태를 다양화)
- 문제 → 결과 스트립 (고객의 언어로 된 전/후 비교)
- 작동 방식 (정말 단계별로 진행되는 경우에만; 번호 매기기 사용 가능)
- 기능 쇼케이스: 넓은 이미지와 텍스트 행을 번갈아 배치하거나, 타일 내부에 실제 UI가 있는 벤토 그리드를 사용. 동일한 아이콘 카드 3개는 피할 것.
- 사회적 증거: 이름, 역할/지역, 가능하면 사진이 포함된 실제 사용 후기; 로고는 실제 고객인 경우에만 사용
- 가격: 2-3개의 요금제, 추천 요금제는 단순한 배지가 아닌 레이아웃으로 표시; 포함 사항을 일반 목록으로 제시; 연간 요금제 전환 토글이 있으면 포함
- 서비스 지역/운영 시간/지도 (지역 비즈니스용)
- FAQ: 실제적인 반대 의견(가격, 계약, 일정, 만약에)에 답변
- 최종 CTA 밴드: 기본 행동을 반복
리듬을 다양화하세요: 번갈아 가며 전체 폭과 제한된 폭 사용, 밝은 표면과 색조 표면 사용, 텍스트 중심과 이미지 중심 사용. 인접한 두 섹션이 동일한 레이아웃을 가지지 않도록 하세요.
카피
- 시스템의 언어가 아닌 고객의 언어로 작성하세요. "모든 작업을 한눈에"가 "통합된 운영 가시성"보다 낫습니다.
- 구체적인 것이 귀여운 것보다 낫습니다. 숫자는 진짜인 경우에만 사용하세요.
- 헤드라인과 버튼에는 문장형 대소문자를 사용하세요. UI에서 느낌표를 사용하지 마세요.
- 동일한 행동에는 모든 곳에서 동일한 이름을 사용하세요.
전환 세부 사항
- 스티키 헤더: 히어로가 스크롤되어 사라진 후에도 기본 CTA를 유지합니다.
- 지역 비즈니스의 경우 모바일에서 전화번호를 누르면 바로 전화가 연결됩니다.
- 폼: 비즈니스에 필요한 만큼만 최소 필드로 구성; 레이블은 필드 위에 배치; 제출 후 어떤 일이 일어나는지 명시.
- CTA 근처에 신뢰 요소 표시: 보장, 응답 시간, 면허/보험 (실제인 경우에만).
- 페이지 로딩 속도: 히어로 이미지는 200KB 미만 (AVIF/WebP), 글꼴은 미리 로드, 첫 페인트를 차단하는 요소 없음.
모션 예산
- 하나의 시그니처 모션(히어로 진입 또는 제품 UI가 주요 동작을 애니메이션으로 보여주는 것)만 사용. 그 외의 모든 것은 정적이거나 사용자 상호작용에 반응합니다.
motion스킬을 참조하세요.