[번외 노하우] Hero Image (히어로 이미지) 활용하여 디자인 하기

웹 트렌드 중에 Hero image (히어로 이미지) 라는게 있습니다.  굳이 한글말로 억지로 번역하자면 ''이미지 한장으로 쿨해보이고, 있어보이고, 모든것이 다 커버되어 보이는 대단한  이미지'라고 번역할수 있겠습니다. 디자인 용어는 보면 삘이 오는데 이렇게 말로 설명하자니 참 어렵습니다. 웹사이트중에 예시를 한번 보면서 차근차근 뜯어보겠습니다.

1. Hero image, 히어로 이미지가 뭘까?

아래의 예를 한번 볼까요?

패션브랜드 자라 (zara.com)
길죽 길죽한 모델들의 이미지 한장으로 자라 브랜드의 힘을 보여주고 있습니다.

비메오 (vimeo.com)
동영상 스트리밍 사이트 비메오는 사이트 성격을 그대로 보여주는 퀄리티 높은 동영상을 아예 백그라운드 이미지로 활용하고 있습니다.

https://www.fwx.co.uk/
위의 사이트는 요즘 생성되는 대부분의 웹사이트들의 트렌드의 전형적인 예라고 볼 수 있습니다.
시원시원한 이미지와 동영상을 전면에 배치하여 시선을 사로잡고 있습니다.

2. 히어로 이미지의 조건1 - 퀄리티(이미지의 질)

그렇다면 히어로 이미지가 되기 위한 조건은 무엇이 있을까요? 위의 예시들만 살펴보아도 바로 눈치채시겠지만, 바로 이미지 퀄리티입니다. 어떤 해상도의 디바이스에서도 최상의 상태로 보여야하기 때문이기도 하고, 레이아웃에서 가장 큰 영역을 차지하게 되기때문에 이미지의 퀄리티가 매우 중요합니다. 이미지 자체 해상도도 매우 좋아야 한다는 뜻이기도 합니다만, 그냥 이미지가 싸게 보이지 않은... 그런 이미지여야합니다. 
그렇다면 사진 전공도 하지 않았고, 사진이라고는 핸드폰으로 찍은게 다이고, 어떤게 좋은 이미지인지 구별도 제대로 못하는 우리는 어떻게 그런 이미지를 구할 수 있을까요? 제가 몇일전에 찾은 히어로 이미지 사이트를 대 방출합니다.

히어로이미지 강추사이트 1 - https://unsplash.com/

감성적이고 필터가 제대로 먹혀있는 다양한 이미지를 고해상도로 무료로 다운로드 받을 수 있습니다.
상단의 collections 메뉴를 활용하면, 분류된 이미지를 볼 수 있어, 다양한 용도에서 활용할 수 있답니다!

히어로이미지 강추사이트 2 - http://www.gratisography.com/

여기도 감성적인 느낌에 히어로 이미지로 활용할만한 이미지들이 참 많으니 참고하시기 바랍니다.

4. 히어로 이미지의 조건2- 타이포그래피

자 이제 이미지도 무료로 구할 수 있는 방법을 알려드렸습니다. 그렇다면 좋은 이미지 한장으로 모든 것이 끝날수 있을까요? (물론 끝날수도.. 띠로리...)  위의 예시 또는 아래의 사례로 둔 히어로 이미지 사이트들을 잘 본 사람들이라면 아시겠지만, 이미지에 적합한 타이포가 얹혀졌을때 그 빛을 더 발한다고 볼 수 있습니다. 

오브젝트 사이 공간에 텍스트를 넣는 애플의 디자인 센스!

히어로 이미지를 썼는데 왜 태가 안나지? 라고 생각되시는 분들은 자신이 사용한 서체를 한번 곰곰히 살펴보시기 바랍니다.

히어로 이미지 위에  잘 배치된 텍스트들은 마치 잘 만들어진 포스터를 보는 느낌이라고 할까요? 
자 그렇다면, 타이포는 어떻게 잘 만질 수 있을까요? 이런 고민들을 해결하기 위해 이미 저는 블로그에 타이포그래피에 관련된 강좌를 진행한바 있습니다 ㅋ 추억의 포스팅들을 한번 소환해볼까요?

타이포그래피 강좌 1 - http://forchoon.net/826
타이포그래피 강좌 2- http://www.forchoon.net/827

타이포그래피 노하우

- 01 잘못 사용한 서체는 프레젠테이션 디자인을 망친다.

- 02 서체의 분류를 알고 이해하자

- 03 서체 선택의 어려움이 있을 때 대처방법

- 04 생각보다 글자는 크게보인다.

- 05 서체의 종류는 최대한 3가지만 사용한다.

- 06 자간이 줄어들면 가독성이 커진다.

- 07 명조와 고딕을 적절하게 섞어 특정 텍스트 강조하기 

- 08 고 스티브잡스의 서체사랑

타이포그래피 강좌 1 - http://forchoon.net/826
타이포그래피 강좌 2- http://www.forchoon.net/827

위 강좌에서 소개된  기본 타이포 그래피 노하우를 히어로 이미지에 녹인다면 충분히 좋은 히어로 이미지들을 만들 수 있을 것이라고 장담합니다. 
라고 말씀드렸는데 의문을 가지는 분들을 위해 제작과정 영상을 공유합니다 : ) 
마우스가 없어서 트랙패드로 작업한 점 양해 부탁드립니다!!

완성된 이미지
참 쉽죠?

오늘 알려드린 히어로이미지는 프레젠테이션 디자인, 레포트 표지 디자인등 다양한 방법으로 활용할 수 있겠죠?!
여러분도 도전!!

-

이 곳의 모든 저작권은 윤춘근에게 있으며 이곳의 모든 글과 이미지들은 허가없이 절대 복제, 재배포를 금지합니다.

Copyright ⓒ 2016 by 윤춘근 All Pictures cannot be copied without permission

www.facebook.com/ppt.keynote

www.facebook.com/forchoon