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