topic★★★★★난이도
Hero
영화/무대의 주인공 이미지에서 유래한 UI.
#hero#히어로#배너#랜딩
Hero(히어로)는 그리스어 'heros'(영웅)에서 왔다. 인쇄 광고에서 제품을 가장 크고 인상적으로 보여주는 메인 이미지를 'hero image'라 불렀다. 영화 포스터의 주인공처럼 한 장의 이미지가 전체 메시지를 전달한다. 웹에서는 랜딩 페이지 상단의 대형 배너 영역을 Hero Section이라 부른다.
| 실제 사물 | UI 패턴 |
|---|---|
| 영화 포스터의 주인공 | 랜딩 페이지의 대형 배너 |
| 한 장으로 영화를 설명 | 한 화면으로 서비스를 설명 |
| 극장 입구에서 가장 먼저 보임 | 페이지 진입 시 가장 먼저 보임 |
사용 가이드라인: 랜딩 페이지, 마케팅 페이지의 첫 인상을 결정한다. 핵심 메시지(헤드라인) + 보조 설명 + CTA 버튼의 3요소가 기본 구성이다. 히어로 이미지가 너무 무거우면 LCP(Largest Contentful Paint)가 느려져 SEO에 불리하다. 이미지 최적화와 lazy loading을 반드시 적용한다.