📌 이 글에서 배울 내용
고객이 상세페이지에 들어와서 스크롤을 내릴지, 뒤로 가기를 누를지는 첫 화면에서 결정됩니다. 이 영역을 "히어로 영역"이라고 부릅니다. 한 줄 헤드 카피, 대표 이미지, 핵심 혜택 — 이 세 가지를 어떻게 배치해야 하는지 실전 예시와 함께 알려드립니다.
왜 첫 3초가 중요한가?
웹 사용자는 페이지를 열고 약 3초 이내에 "이 페이지가 내가 원하는 정보를 가지고 있는지"를 판단합니다. 첫 화면에서 상품의 핵심 가치가 전달되지 않으면, 고객은 아래로 스크롤하기도 전에 이탈합니다.
특히 모바일 환경에서는 화면이 작기 때문에 첫 화면에 보이는 정보가 더 제한적입니다. 스크롤 없이 보이는 영역(Above the Fold)에 헤드 카피, 대표 이미지, 핵심 혜택 세 가지가 갖춰져야 고객의 스크롤을 유도할 수 있습니다.
1. 헤드 카피 — 한 줄로 고객을 멈추게 하라
❌ 약한 헤드 카피
• "고급 원단 사용 니트 가디건"
• "3중 구조 텀블러 500ml"
→ 스펙만 나열
✅ 강한 헤드 카피
• "사무실 냉방에도 따뜻한, 가벼운 니트 가디건"
• "8시간 지나도 얼음이 남아있는 텀블러"
→ 고객의 상황·결과를 먼저 제시
2. 대표 이미지 — 상품의 첫인상을 결정하는 한 장
히어로 이미지는 썸네일 다음으로 고객이 보는 두 번째 이미지입니다. 상품이 실제 사용되는 장면(라이프스타일 컷)이 가장 효과적입니다. 모바일 가로폭 100%로 꽉 채우고, 텍스트 오버레이는 최소화하며, 최소 가로 860px 이상의 고해상도를 유지하세요.
3. 핵심 혜택 배치 — 스크롤 전에 이유를 보여줘라
히어로 영역 하단에 3가지 이내의 핵심 혜택을 짧게 배치하세요. 숫자로 증명하고, 아이콘 + 한 줄 텍스트로 구성하며, 경쟁 상품과의 차별점을 넣으면 스크롤 유도 효과가 큽니다.
4. Before/After로 보는 히어로 영역
❌ Before
브랜드 로고 + 누끼컷 + 스펙 나열
→ 고객: 뒤로 가기
✅ After
헤드 카피 + 사용 장면 + 핵심 혜택 3개
→ 고객: 스크롤
| 구성 요소 | 역할 | 권장 비중 |
| 헤드 카피 | 고객의 관심을 잡는 첫 문장 | 1줄 (15자 내외) |
| 대표 이미지 | 상품의 시각적 첫인상 | 화면의 60~70% |
| 핵심 혜택 | 스크롤 유도를 위한 신뢰 요소 | 3가지 이내 |
✅ 히어로 영역 체크리스트
□ 헤드 카피가 고객이 얻을 결과를 말하고 있는가?
□ 대표 이미지가 실제 사용 장면을 보여주는가?
□ 이미지가 모바일에서 가로폭 100%로 표시되는가?
□ 핵심 혜택이 3가지 이내로 정리되어 있는가?
□ 모바일에서 스크롤 없이 모두 보이는가?
💡 히어로 이미지부터 만들어보세요
SellPage의 AI 스튜디오에서 상품 사진을 업로드하면, 배경을 자동으로 바꿔 라이프스타일 컷을 생성할 수 있습니다. 히어로 영역에 어울리는 대표 이미지를 직접 만들어보세요.
