Hero section, 영화 포스터 hero shot에서

한 줄로

웹 페이지 맨 위의 큰 영역입니다. 영화 포스터에서 주인공이 가운데 크게 잡힌 "hero shot"이 이름의 어원입니다.

어디서 왔나

영화, 광고 산업의 "hero shot"은 영웅이나 주인공이 가장 화려하게 잡힌 한 컷입니다. 광고 포스터의 메인 이미지입니다.

웹 디자인에서 2010년경 "hero"라는 용어가 자리잡았습니다. 페이지 최상단의 가장 큰 비주얼 영역이며, 헤더(navigation) 바로 아래에 위치합니다.

구성

좋은 hero section은 다음 요소로 구성됩니다.

메인 헤드라인: 1줄, 5~10단어.
서브 헤드라인: 2~3줄, 가치 설명.
CTA 버튼: 1~2개.
시각 요소: 이미지, 일러스트, 영상.

위치의 가치

Above the fold 영역의 핵심입니다. 사용자가 페이지에 도착해서 처음 보는 것이며, 첫 5초가 페이지 전체의 인상을 결정합니다.

패턴

좌측 텍스트 + 우측 이미지: 가장 흔합니다.
가운데 정렬: 미니멀합니다.
풀스크린 배경 이미지: 영화 같은 임팩트를 줍니다.
인터랙티브 데모: Stripe, Linear 스타일입니다.

바이브 메이커가 챙길 한 가지

hero section에서 가장 중요한 건 첫 줄 헤드라인 한 문장입니다. (1) 누구를 위한 (2) 무엇인지가 한 줄에 담겨야 합니다. 모호하면 사용자가 5초 안에 떠납니다.

관련

Above the fold · CTA · 5-second test