매력적인 히어로 페이지를 위한 7가지 방법(4)

53
0

어쩌면 글은 방해가 될 수도 있습니다.

목차

1. 글과 이미지를 균등하게 배치해 보기

2. 딤드(Dimmed) 이미지와 글 레이어드

3. 이미지만으로 구성해 보기

4. 이미지 중심의 글 결합해 보기

5. 글만으로 표현해 보기

6. 글의 흐름에 이미지 결합하기

7. 이미지를 글로 마스킹하기


Macworld San Francisco 2008-The MacBook Air Intro

2008년 샌프란시스코 맥월드에서 스티브잡스는 세상에서 가장 얇은 랩탑을 선보입니다. 바로 맥북에어인데요. 이때 하나의 이미지가 등장합니다. 얇은 서류 봉투에 들어갈 정도의 두께를 가진 이 제품은 어떠한 미사여구를 동원한 설명보다 강렬한 임팩트로 회자되고 있습니다. 이렇듯 때때로 글 없이 이미지 만으로 더 강력한 메시지를 전달할 경우가 있습니다. 이러한 비주얼 스토리텔링 기법은 주로 광고디자인 분야에서 많이 사용되고 있습니다. 사례를 몇 개 더 보도록 하겠습니다.

광고 사례 1. 

니베아 나이트크림 광고, 글 없이 초승달 모양만으로 어필한 이미지 사례입니다. 이 이미지에 글을 쓴다면 방해가 될 뿐입니다.

니베아 나이트크림 광고

광고 사례 2. 

글 없이 100% 토마토로 만든 케첩을 표현한 이미지, 더 이상의 추가 표현은 필요 없습니다.

하인즈 토마토케첩 광고

위의 이미지들은 광고 디자인 히어로 이미지 사례로써, 이미지를 보정 및 편집, 합성을 통해 글 없이 메시지를 전달하고 있습니다. 이 원리는 광고 디자인뿐 아니라 UI 디자인에서도 적용되며 위와 같이 극적인 합성기술이 없더라도 동일하게 적용됩니다. 특히 다음과 같은 2가지 경우에 효과적으로 사용할 수 있습니다. 

1. 전하고자 하는 메시지가 이미지에 내포되어 있을 경우

2. 의도적으로 호기심을 유발하고자 하는 경우

그럼 위의 2가지 경우에 맞는 적용사례를 제작 사례를 통해 조금 더 깊이 알아보도록 하겠습니다.


제작 사례 1.

먼저 전하고자 하는 메시지가 이미지에 내포되어 있을 경우입니다. 

넓고 깨끗한 수영장을 제공합니다.는 필요 없습니다. 아래 호텔은 히어로 이미지를 글 대신 넓고 깨끗한 수영장 이미지로만 자신감 있게 표현합니다. 당연히 미사여구는 필요 없습니다.

글 없이 호텔 수영장으로 아이덴티티를 표현한 히어로 이미지

유사 사례 1.

맛있는 펜케이크를 직접 와서 드셔보세요는 필요 없습니다. 정갈한 음식 이미지 사용을 통해 통해 사용자는 식당을 예약하는 행위를 결정합니다.

글 없이 요리만으로 구성된 히어로 이미지

유사 사례 2.

입기만 해도 포근한 스웨터는 필요 없습니다. 이미 충분히 포근해 보입니다.

따뜻한 스웨터를 표현하는 히어로 이미지 

유사 사례 3.

우리는 자유로운 소통 문화를 추구합니다.는 필요 없습니다.

팀의 분위기를 표현하는 히어로 이미지


제작 사례 2.

의도적으로 사용자의 상상력에 맡겨 호기심을 유발하는 경우입니다. 

심리스 한 헤드램프가 풍기는 모던한 인상은 필요 없습니다. 오브젝트 전체를 보여주는 것보다 더 강함 임팩트를 남길 수 있는 자동차의 티저 이미지입니다. 보이는 부분 외에는 사용자의 상상력에 맡겨 더 컨텐츠에 빠져들게 만드는 히어로 이미지 사례이며 이 경우에 당연히 글을 쓸 필요는 없습니다. 

글 없이 일부분만 보여주는 티저 이미지 사례, 보이지 않는 부분은 사용자의 상상력에 맡김. 이미지 출처: 현대자동차

유사 사례 1.

사막의 언덕 뒤에는 무엇이 있을까요? 함께 떠나볼까요? 는 필요 없습니다. 여행사의 사막 여행 패키지 관련 히어로 이미지입니다. 어떤 사막인지, 어디에 있는지는 상상력에 맡깁니다. 언덕을 넘어 있는 무언가에 대한 호기심을 이미지만으로 자극합니다.

언덕 넘어 미지의 세상을 자극하는 히어로 이미지

유사 사례 2.

가을 재킷과 어울리는 스커트 모음은 필요 없습니다. 때로는 보이지 않는 부분이 궁금할 수 있습니다. 

상의만 보여주고 하의에 대한 호기심을 유도하는 히어로 이미지

글이 없을 경우에 더 극적으로 메시지를 전달할 수 있는 사례에 대해 간단히 알아보았습니다. 다음 회차는 이미지에 글을 조화롭게 결합해 보는 목적과 사례에 대해 글을 연재하도록 하겠습니다. 

읽어주셔서 감사합니다.

지성민님의 더 다양한 글을 더 보시려면

👉 브런치 https://brunch.co.kr/@jisungmin

포트폴리오 https://www.behance.net/sungminn

링크드인 https://www.linkedin.com/in/sungminji

지성민
글쓴이

지성민

UI / GUI / BX 디자이너, 디자인 성장을 돕고자 합니다.

답글 남기기

ㅛ

지성민

Manager

다른 아티클 보기

25화 AI를 활용한 제품의 컬러 바꾸기(2)

AI를 활용한 제품의 컬러 바꾸기(1)

23화 이미지 1장 + 글로 영상 만들기(2)

아직 구독 전이신가요?
구독하고 더 많은 콘텐츠를 확인해보세요.

이름/회사명

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요