안녕하세요? 식스샵입니다. 오늘은 웹사이트를 디자인할 때 알아두면 좋은 '히어로 이미지'라 불리는 개념에 대해 알아보도록 하겠습니다.
히어로 이미지(Hero Image)란?
히어로 이미지는 웹 디자인에 사용되는 용어 중 하나입니다. 웹 페이지 상단에 위치한 큰 배너 이미지를 뜻하는데요, 시각적으로 매우 두드러지는 특징이 있어 디자인을 구성하는 요소들 중에서도 매우 중요한 역할을 맡습니다.
좌, 우, 하 순서로 식스샵 템플릿 SURFBOARD, BARBERSHOP, EDI GALLIA
히어로 이미지는 방문자에게 사이트의 인상을 강렬하게 남길 수 있는 수단으로 활용되기 때문에 이미지를 매우 신중하게 선택해야 합니다.
좌, 우 순서로 식스샵 템플릿 Isaly Kitchen, SYLT
슬라이드형으로 설정하여 여러 장의 이미지를 보여주거나 단 하나의 이미지로 배치할 수 있습니다. 다양한 링크를 삽입할 수도 있어, 특히 전자 상거래 목적으로 웹 사이트를 운영할 때 전략적으로 사용하면 운영에 큰 도움이 됩니다.
히어로 이미지가 최적의 상태로 보이게 하려면?
이미지는 PC / 모바일 순서입니다.
간혹 PC에서 멋지게 보였던 히어로 이미지가 모바일 버전에서는 엉뚱하게 보일 수 있습니다. 이 경우 이미지 피사체의 구도를 바꿔가며 가장 최적의 상태로 수정할 필요가 있는데요, 되도록 화면의 중심에서 지나치게 멀어지지 않는 구도로 선택하는 편이 좋습니다.
위쪽 히어로 이미지는 피사체가 지나치게 오른쪽에 배치된 이미지입니다. 왼쪽 PC 브라우저에서는 적당해 보이지만 오른쪽의 모바일 버전에서는 피사체 일부만 보입니다. 예시를 참고하여 디바이스별로 어떻게 보이는지 자주 테스트하여 가장 최적의 이미지로 사용해보세요.
근접 촬영된 이미지는 보는 이에게 매우 강렬한 인상을 남깁니다. 쇼핑몰을 운영할 경우, 강조하고 싶은 상품이 있을 때 고화질의 근접 촬영 이미지를 활용해보세요.
히어로 이미지가 들어가는 배너 부분은 사이트에서 매우 넓은 영역을 차지합니다. 작은 해상도의 이미지를 사용하면 미완성된 인상을 남길 수 있습니다. 지나치게 큰 이미지는 이미지의 용량이 커서 사이트를 불러오는 시간이 느려질 수 있으므로, 너비 2000px정도의 이미지를 사용하는 것을 권장합니다.
공백이 많은 이미지를 잘 활용하면 매우 현대적인 인상을 남길 수 있습니다. 직접 촬영하거나 이미지를 수정하여 만들어보는 것도 좋은 방법입니다.
식스샵에서는 '메인 배너 섹션'이라는 요소를 추가하여 히어로 이미지를 만들 수 있습니다.
이미지 메인 배너
동영상 메인 배너
식스샵의 메인 배너 섹션은 이미지가 아니더라도 동영상 또한 추가하여 더욱 다양하게 표현할 수 있습니다.
