히어로 이미지(hero image)라고
들어봤니?
디자인이야기
웹 트렌드 중에 Hero image (히어로 이미지) 하는 게 있습니다. 굳이 한 그리 말로 억지로 번역하자면 ''이미지 한 장으로 쿨해 보이고, 있어 보이고, 모든 것이 다 커버되어 보이는 대단한 이미지'라고 번역할 수 있겠습니다. 디자인 용어는 보면 Feel이 오는데 이렇게 말로 설명하자니 참 어렵습니다. 웹사이트 중에 예시를 한번 보면서 차근차근 뜯어보겠습니다.
1. Hero image, 히어로 이미지가 뭘까?
아래의 예를 한번 볼까요?
패션 브랜드 자라 (zara.com)길죽 길쭉한 모델들의 이미지 한 장으로 자라 브랜드의 힘을 보여주고 있습니다.
자라를 홍보하기 위한 사이트라기 보다, 한편의 예술영화의 포스터 같지 않나요?
(vimeo.com)동영상 스트리밍 사이트 비메오는 사이트 성격을 그대로 보여주는 퀄리티 높은 동영상을 아예 백그라운드 이미지로 활용하고 있습니다. 움직이는 동영 상위에 고정되어 떠있는 UI는 신비로움까지 느끼게 해줍니다.
https://www.fwx.co.uk/위의 사이트는 요즘 생성되는 대부분의 웹사이트들의 트렌드의 전형적인 예라고 볼 수 있습니다.
시원시원한 이미지와 동영상을 전면에 배치하여 시선을 사로잡고 있습니다.
Large, Beautiful Background Images & Video
대표적인 Hero image의 사례들을 나열해 보았습니다. 어떠신가요? 감이 좀 오시나요? 이미지 퀄리티가 좋은 큰 그림, 아름다운 백그라운드를 위한 이미지와 비디오 등도 Hero image의 범주에 속한다고 볼 수 있겠습니다.
느낌이 오셨겠지만, 글보다 이미 지나 영상 중심으로 콘텐츠를 구성하는 디자인 방식이 요즘 트렌드라고 할 수 있습니다. 디바이스의 해상도가 날로 좋아지고, 화질이 강조되면서 이미지에 대한 선택이 중요해지는 것도 바로 이것 때문입니다.
히어로 이미지의 조건 1 - 퀄리티 (이미지의 질)
그렇다면 히어로 이미지가 되기 위한 조건은 무엇이 있을까요? 위의 예시들만 살펴보아도 바로 눈치채시겠지만, 바로 이미지 퀄리티입니다. 어떤 해상도의 디바이스에서도 최상의 상태로 보여야 하기 때문이기도 하고, 레이아웃에서 가장 큰 영역을 차지하게 되기 때문에 이미지의 퀄리티가 매우 중요합니다. 이미지 자체 해상도도 매우 좋아야 한다는 뜻이기도 합니다만, 그냥 이미지가 싸게 보이지 않은... 그런 이미지여야 합니다. 그렇다면 사진 전공도 하지 않았고, 사진이라고는 핸드폰으로 찍은 게 다이고, 어떤 게 좋은 이미지인지 구별도 제대로 못하는 우리는 어떻게 그런 이미지를 구할 수 있을까요? 제가 며칠 전에 찾은 히어로 이미지 사이트를 대 방출합니다.
강추 사이트 1 - https://unsplash.com/
감성적이고 필터가 제대로 먹혀있는 다양한 이미지를 고해상도로 무료로 다운로드할 수 있습니다.
상단의 collections 메뉴를 활용하면, 분류된 이미지를 볼 수 있고, 다양한 용도에서 활용할 수 있습니다.
강추 사이트 2 - http://www.gratisography.com/
여기도 감성적인 느낌에 히어로 이미지로 활용할만한 이미지들이 참 많으니 참고하시기 바랍니다.
실제로 다운로드한 고퀄리티 사진들
히어로 이미지의 조건 2- 타이포그래피
자 이제 이미지도 무료로 구할 수 있는 방법을 알려드렸습니다. 그렇다면 좋은 이미지 한 장으로 모든 것이 끝날 수 있을까요? (물론 끝날 수도.. 띠로리...) 위의 예시 또는 아래의 사례로 둔 히어로 이미지 사이트들을 잘 본 사람들이라면 아시겠지만, 이미지에 적합한 타이포가 얹혔을 때 그 빛을 더 발한다고 볼 수 있습니다.
애플이미지 위에 투명도를 준 블랙 마스크 씌우고, 흰색 텍스트로 타이포를 사용하여 텍스트만 나열되어있어도 강렬한 이미지를 줍니다.,
애플오브젝트들 사이에 타이포그래피를 활용하여 제품의 느낌을 잘 살려내고 있습니다.
무인양품군더더기 없이 정갈한 이미지 위에 MUJI to Go라는 텍스트만 얹혔는데도 무인양품의 느낌이 팍팍 살아납니다.
그 밖의 다양한 예시들
히어로 이미지를 썼는데 왜 태가 안 나지?라고 생각되시는 분들은 자신이 사용한 서체를 한번 곰곰이 살펴보시기 바랍니다.
히어로 이미지 위에 잘 배치된 텍스트들은 마치 잘 만들어진 포스터를 보는 느낌이라고 할까요?
자 그렇다면, 타이포는 어떻게 잘 만질 수 있을까요? 이런 고민들을 해결하기 위해 이미 저는 블로그에 타이포그래피에 관련된 강좌를 진행한 바 있습니다 ㅋ 추억의 포스팅들을 한번 소환해볼까요?
https://brunch.co.kr/@forchoon/18
위 강좌에서 소개된 기본 타이포 그래피 노하우를 히어로 이미지에 녹인다면 충분히 좋은 히어로 이미지들을 만들 수 있을 것이라고 장담합니다.
라고 말씀드렸는데 의문을 가지는 분들을 위해 제작 과정 영상을 공유합니다 : )
마우스가 없어서 트랙 패드로 작업한 점 양해 부탁드립니다!!
실전 예제 - 퀵하게 히어로 이미지 만들기
오늘 알려드린 히어로 이미지는 프레젠테이션 디자인, 리포트 표지 디자인 등 다양한 방법으로 활용할 수 있겠죠?!
여러분도 도전!!
더 많은 정보를 얻고 싶다면?
페이스북 프레젠테이션 디자인 팬 페이지 좋아요 : )
http://www.facebook.com/ppt.keynote
