정의
Hero Section(히어로 섹션) 은 랜딩페이지 최상단, 사용자가 스크롤을 내리기 전에 처음 마주하는 풀와이드(full-width) 비주얼 블록입니다. 국내 DTC 업계에서는 흔히 "메인 비주얼", "상단 배너", "KV(Key Visual)" 라고도 부릅니다. 핵심 구성 요소는 다음 4가지입니다.
1. 헤드라인(메인 카피) — 3초 안에 "무엇을 파는지" 전달
2. 서브카피 — 타깃 고객과 핵심 베네핏 명시
3. 히어로 이미지/영상 — 제품 또는 라이프스타일 컷
4. 프라이머리 CTA — "구매하기", "혜택 받기", "자세히 보기"
모바일 기준 첫 화면(Above the Fold) 안에 이 4요소가 모두 들어와야 합니다. 국내 커머스 트래픽의 70~80%가 모바일이기 때문에, PC 기준으로 디자인한 히어로 섹션은 사실상 반쪽짜리입니다.
비유로 이해하기
히어로 섹션은 오프라인 매장의 쇼윈도우와 같습니다.
- 지나가는 사람이 3초 안에 "여긴 뭘 파는 가게인가"를 판단합니다.
- 쇼윈도에 마네킹만 덩그러니 있으면 들어오지 않습니다. 가격표, 시즌 컨셉, "오픈 기념 30% 할인" 팻말이 함께 있어야 발길이 이어집니다.
- 즉 히어로 섹션은 예쁜 그림이 아니라 "들어올 이유"를 파는 설득 장치입니다.
공식
히어로 섹션의 성과는 다음 3개 지표로 측정합니다.
① 히어로 CTR = (CTA 클릭 수 ÷ 히어로 노출 수) × 100 ② 이탈률(Bounce) = (스크롤 없이 이탈한 세션 ÷ 전체 세션) × 100 ③ 스크롤 도달률 = (히어로를 지나 스크롤한 세션 ÷ 전체 세션) × 100
벤치마크 (국내 DTC 평균, 2024 기준)
| 지표 | 미달 | 평균 | 우수 |
|---|---|---|---|
| 히어로 CTA CTR | < 2% | 3~5% | > 7% |
| 이탈률 | > 65% | 45~55% | < 35% |
| 스크롤 도달률 | < 40% | 55~65% | > 75% |
예시: 일 방문 10,000명, CTA CTR 4% → 히어로만으로 **일 400 클릭** 확보. 여기서 CVR 3%면 **일 12건 결제**가 히어로에서 시작됩니다.
비교표: 좋은 히어로 vs 나쁜 히어로
| 항목 | ❌ 나쁜 예 | ✅ 좋은 예 |
|---|---|---|
| 헤드라인 | "저희 브랜드에 오신 것을 환영합니다" | "하루 5분, 3주 만에 허리 통증 -80%" |
| 서브카피 | "최고의 품질을 자랑합니다" | "누적 판매 12만 개, 재구매율 68%" |
| 비주얼 | 감성 브랜드 로고만 크게 | 실제 사용 컷 + 제품 클로즈업 |
| CTA 문구 | "더 알아보기" | "오늘만 30% 할인 받기" |
| CTA 개수 | 4개 나열 | 1개 메인 + 1개 서브 |
| 모바일 최적화 | PC 이미지 그대로 축소 | 9:16 세로 비주얼 별도 제작 |
| 로딩 속도 | 4.2초 | 1.5초 이내 |
적용 시나리오
1) 신규 브랜드 런칭
- 헤드라인: "이제 한국에서도 만나는 [카테고리 1위 브랜드]"
- 서브: "출시 기념 첫 구매 20% + 무료배송"
- CTA: "런칭 혜택 받기"
2) 퍼포먼스 광고 랜딩(메타/구글)
- 광고 소재와 헤드라인 카피를 1:1로 일치시켜야 광고 관련성 점수가 올라갑니다.
- 예: 광고 "다이어트 보조제 30% 할인" → 히어로도 반드시 "다이어트 보조제 30% 할인"
3) 리타게팅 랜딩
- "장바구니에 담아두셨나요? 오늘 자정까지 무료배송"
- 개인화된 히어로는 일반 히어로 대비 CVR 1.5~2배 상승 사례가 흔합니다.
4) 시즌 프로모션 (블프, 빼빼로데이, 어버이날)
- 상단에 카운트다운 타이머 삽입 시 CTR 평균 +18% (국내 커머스 A/B 테스트 다수 결과)
흔한 실수 (Common Mistakes)
1. "예쁜 배너" 만들기에 집중하고 카피를 놓침 — 이미지가 90%, 카피가 10%면 전환은 안 나옵니다.
2. CTA 버튼을 접히는 위치에 배치 — 모바일 첫 화면(약 640px) 안에 CTA가 안 보이면 클릭률이 절반 이하로 떨어집니다.
3. 헤드라인에 브랜드명만 크게 — 고객은 브랜드가 아니라 "나에게 주는 이득"에 반응합니다.
4. 자동 슬라이드 캐러셀 남용 — 3초마다 넘어가는 배너는 사용자가 읽기 전에 사라집니다. CTR이 정적 배너 대비 평균 30% 낮습니다.
5. LCP(Largest Contentful Paint) 4초 이상 — 히어로 이미지 용량이 크면 이탈률이 급증합니다. WebP 변환 + lazy loading 필수.
6. A/B 테스트 없이 감으로 결정 — 헤드라인 1줄만 바꿔도 CTR이 2배 차이 나는 것이 히어로 영역입니다.
관련 용어
- Above the Fold — 스크롤 없이 보이는 첫 화면 영역
- CTA (Call To Action) — 구매·가입 등 전환을 유도하는 버튼/문구
- KV (Key Visual) — 캠페인을 대표하는 핵심 비주얼
- LCP (Largest Contentful Paint) — 히어로 이미지 로딩 성능 지표
- CVR (Conversion Rate) — 전환율
- A/B 테스트 — 두 버전을 나눠 성과를 비교하는 실험
- Funnel (퍼널) — 인지→관심→구매로 이어지는 전환 경로
히어로 섹션은 "3초의 승부" 입니다. 이 3초를 잡으면 이후 퍼널 전체가 살아나고, 놓치면 아무리 좋은 제품도 스크롤 한 번에 사라집니다.