웹 페이지 사용자는 방문과 동시에 다양한 느낌을 받게 됩니다. 긍정적일 수도 있고 부정적일 수도 있지만 이러한 느낌은 대체로 사용자의 시선이 닿는 요소에 따라 달라집니다. 시각은 인간의 가장 강력한 감각이기 때문에 히어로 이미지는 사용자의 시선을 가장 빠르게 사로잡는 수단이 될 수 있습니다. 과감하고 생생하면서도 의도적으로 배치한 이미지는 사용자의 시선을 사로잡습니다. 히어로 이미지는 사용자의 몰입도를 높일 뿐만 아니라 미니멀한 앱 또는 웹 사이트에 없어서는 안 될 핵심 요소입니다.

히어로 이미지는 단순히 미적 측면을 위한 것이 아닌, 의사소통을 위한 강력한 수단이 될 수 있습니다.

이 글에서는 히어로 이미지 사용 시 유념해야 할 몇 가지 팁을 살펴봅니다. 또한 조금 색다른 방식으로 디자인의 프로토타입과 와이어프레임을 작성하고 싶다면 무료로 제공되는 어도비 XD(Adobe XD)를 다운로드하여 테스트해 보십시오.

1. 연관성 있는 이미지를 사용할 것

히어로 이미지는 서문과 같습니다. 사용자는 히어로 이미지를 보고 나머지 웹 사이트에서 어떤 내용이 전개되는지 예상합니다. 히어로 이미지의 목적은 방문자에게 해당 웹 사이트를 간략하게 소개하고 전달하려는 메시지를 알리는 데 있습니다. 히어로 이미지가 웹 사이트 콘텐츠에 대한 컨텍스트를 정확히 제공하지 못한다면 아무런 가치가 없는 무의미한 이미지에 불과하게 됩니다. 즉 이는 소중한 화면 공간을 낭비한 것이며, 때때로 사용자를 혼돈에 빠트릴 수도 있습니다. 히어로 이미지가 브랜드 또는 제품에 대해 방문자가 예상하는 것과 일치하지 않는 경우 쉽게 혼돈을 느낍니다.

적절치 않은 히어로 이미지를 잘 보여주는 예입니다. 이 이미지가 대출과 어떤 연관성이 있는지 이해할 수가 없습니다.

히어로 이미지에 사용할 사진을 고를 때는 심사숙고해야 합니다. 지금 만들고 있는 경험의 주제, 용도 또는 캠페인에 맞는 사진을 선택합니다. 루넷 아이웨어(Lunet Eyewear’s) 히어로 이미지의 경우, 웹 사이트의 메시지를 명확하게 전달하고 있습니다. 이 이미지의 콘텐츠는 브랜드를 잘 대변하고 있습니다.

웹 사이트에서 제품을 홍보 또는 판매하는 경우 히어로 이미지는 제품의 이점을 부각시켜야 합니다. 제품의 컨텍스트가 반영된 히어로 이미지를 사용하는 것이 좋습니다. 제품의 외관만을 보여주는 것이 아니라 제품이 실제로 어떻게 사용되는지를 보여주어야 합니다.

제품 판매를 위한 최고의 방법은 제품이 스스로 팔리도록 하는 것입니다. 이를 위해 히어로 이미지는 제품의 이점을 입증해야 합니다.

디지털 제품과 서비스를 대표하는 히어로 이미지도 마찬가지입니다. 호환 디바이스의 스크린샷과 같은 목업을 히어로 이미지로 사용하여 사람들이 앱 또는 서비스에서 기대하는 것을 맛보게 할 수도 있습니다.

슬랙(Slack)은 앱 인터페이스에 히어로 이미지를 사용하고 있습니다.

물론 히어로 이미지를 디자인하고 선택하는 일은 어렵습니다. 과학적이면서도 예술적인 감각이 필요하기 때문입니다. 이 작업을 간소화하기 위해서는 의사 결정을 원활히 할 수 있는 프레임워크를 이용해야 합니다. 앤지 쇼트뮬러(Angie Schottmuller)는 히어로 이미지를 판단하기 위한 7가지 프레임워크를 착안했습니다.

• 키워드 연관성
• 이미지가 타겟팅한 키워드를 시각화하고 있는가?
• 목적의 명확성
• 이미지가 웹 사이트의 메시지를 분명하게 전달하고 있는가?
• 디자인 지원
• 이미지가 CTA로 유도하는 페이지의 흐름을 돕고 원활하게 만들고 있는가?
• 진정성
• 이미지가 신뢰할 수 있는 방식으로 브랜드를 대표하고 있는가?
• 부가 가치
• 이미지가 연관성을 강화시키거나 이점을 입증하고 있는가?
• 원하는 감정
• 이미지가 원하는 액션을 유발할 수 있도록 감정을 표현하고 있는가?
• 고객을 히어로로 간주
• 이미지가 고객이 제품을 사용하면 히어로가 될 것 같은 분위기를 표현하고 있는가?

2. 이미지를 중심으로 만들 것

히어로 이미지는 한 편의 정보를 담을 수 있는 완벽한 컨테이너입니다. 차별화되고 돋보이는 히어로 이미지는 사용자가 웹 사이트를 방문할 때마다 오래 머물며 웹 사이트를 탐색하게 합니다. 그렇다고 해서 히어로 이미지를 통해 모든 것을 전달하려고 할 필요는 없습니다. 히어로 이미지는 연관성 있는 방식으로 메시지를 시각적으로 강화하는 수단으로 사용되어야 합니다.

(이미지 출처: 브라이틀링(Breitling))

3. 감정을 자극하는 설득력 있는 이미지 선택

디자인에는 감정이 반영되어야 합니다. 이미지는 정서적인 영향을 주고 영감을 발휘하게 하며 어필하려는 감정을 강화해야 합니다. 무엇보다도 중요한 의사 결정을 내릴 때 감정은 논리를 지배합니다. 긍정적인 감정 자극제는 사용자들에게 참여 의식을 고취시킬 수 있습니다.

(이미지 출처: 코카콜라(Coca-Cola))

(이미지 출처: 어도비)

4. 최대한 빠르게 로딩 및 렌더링할 것

히어로 이미지는 매우 중요한 디자인 요소이기 때문에 빠르게 렌더링되어야 합니다. 안타깝게도 히어로 이미지가 등장하는 수많은 디자인은 대부분 차단 스크립트 및 스타일 시트로 인해 HID(Hero Image Delay: 히어로 이미지 지연)라는 문제를 겪고 있습니다.

디자이너는 히어로 이미지가 나타나는 타이밍에 집중해야 합니다. 하지만 이는 말처럼 쉽지가 않습니다. 요즘 브라우저는 콘텐츠가 표시될 때를 알리는 표시가 없습니다. 스티브 사우더즈(Steve Souders)는 “히어로 이미지 맞춤형 지표“라는 글에서 히어로 이미지가 포함된 모든 페이지에 맞춤형 지표를 추가하면 이 중요한 콘텐츠인 히어로 이미지가 얼마나 빠르게(또는 느리게) 표시되는지를 설명하고 있습니다.

간단한 예를 하나 들자면 시간을 기록하고 img 태그 바로 뒤에 배치되는 스크립트인 인라인 스크립트 타이머입니다. 이 스크립트의 코드는 다음과 같습니다.

<img src=’hero.jpg’ onload=’performance.mark(‘hero1’)’>
< script>performance.mark(‘hero2’)</script>

이 코드에는 사용자 타이밍 API가 사용되는데, 이 코드가 어떻게 작동하는지는 스티브의 테스트 페이지에서 확인할 수 있습니다.

5. 고해상도 이미지만 사용할 것

이미지는 깨지거나 흐릿하지 않아야 합니다. 용량만 크고 해상도가 낮은 이미지만큼 최악인 경우는 없습니다. 이 기법을 제대로 사용하기 위해서는 긍정적인 첫인상을 심어주는 이미지가 핵심입니다. 히어로 이미지는 반드시 고품질 이미지로 사용하십시오.

깨진 이미지 vs. 적절한 크기의 이미지

6. 다양한 화면 크기를 고려할 것

다양한 디스플레이와 플랫폼에 따라 화면의 크기를 조절해야 합니다. 소형 디바이스의 경우 큰 이미지를 작은 이미지로 줄이거나 교체하는 방식으로 모든 디바이스의 크기에 맞게 이미지를 최적화합니다.

다양한 디바이스에 적합한 최상의 이미지 해상도를 선택하는 것은 반응형 웹 사이트 개발자를 비롯한 대부분의 최첨단 웹 사이트의 개발자에게도 쉽지 않은 일입니다. 화면 해상도와 디바이스에 상관없이 하나의 이미지만 사용된다면 분명 만족할 만한 결과를 얻지 못할 것입니다. 웹 사이트는 각양각색의 디바이스와 다양한 해상도, 픽셀 밀도 및 방향에 맞게 최적화되어야 합니다. 미디어, 특히 이미지를 관리, 편집 및 전달하는 일은 개발자가 반응형 웹 사이트를 구축할 때 당면하게 되는 주요 과제 중 하나입니다. 다행히도 이 문제를 해결할 솔루션이 하나 있습니다. 반응형 중단점 생성기(Responsive Breakpoints Generator)는 이미지의 중단점을 인터랙티브한 방식으로 생성할 수 있는 무료 오픈 소스 웹 툴입니다.

반응형 중단점 생성기를 사용하면 반응형 이미지 중단점을 인터랙티브한 방식으로 생성하여 여러 크기의 이미지를 한 번에 관리할 수 있습니다.

7. The Call To Action (CTA)를 강조할 것

히어로 이미지가 핵심 역할을 하기는 하지만 보다 나은 효과를 위해서는 CTA와 같은 필수적인 요소를 추가해야 합니다. CTA는 이미지와 상충해서는 안 됩니다. 또한 색상은 이미지를 강조하기 위한 매우 중요한 요소입니다. 히어로 이미지에 사용되는 CTA 버튼에는 일반 CTA 버튼보다 훨씬 더 밝은색을 사용해야 합니다.

버튼의 시각적 무게감은 전체 이미지의 크기에 비례해야 합니다.

흐림 효과를 이용한 CTA 테스트

흐림 효과를 이용하여 페이지의 시각적 계층 구조를 테스트할 수 있습니다. 흐림 테스트는 디자이너가 의도한 대로 사용자의 시선을 끌 수 있는지 판단할 수 있는 간단한 테스트 기법입니다. 사이트의 스크린샷을 만든 다음 어도비 XD에서 흐림 효과를 적용하기만 하면 됩니다(XD에서 흐림 효과 추가)(아래 채리티 워터(Charity Water) 페이지의 예시 참조). 흐림 효과가 적용된 페이지에서 어떤 요소가 가장 눈에 띕니까? 이때 원하는 요소가 눈에 띄지 않는다면 다시 페이지로 돌아가 수정합니다.

흐림 테스트는 디자인의 주요 포인트와 시각적 계층 구조를 드러내는 기법입니다.

8. 대비를 이용해 디자인할 것

이미지 상단에 표시되는 타이포그래피는 가독성이 있어야 합니다. 시각적 요소와 잘 어울리는 동시에 명확하면서도 두껍고 가독성이 좋은 서체를 선택합니다. 이미지 위에 텍스트를 배치할 계획이라면 이미지의 주요 부분이 텍스트에 가려지지 않고 잘 보이며 쉽게 알아볼 수 있어야 합니다.

오버레이

가장 쉬운 방법은 일반 텍스트를 이미지 위에 직접 배치해보는 것입니다. 그러나 텍스트와 이미지와의 대비가 충분하지 않은 경우 전체 이미지를 반투명의 색상 블록과 오버레이해볼 수 있습니다.

아웃라인즈(Outlines)는 색상 오버레이를 사용합니다.

브랜드 색상을 사용해 히어로 이미지를 향상시킬 수도 있습니다. 즉 제품 또는 브랜드를 디자인하는 경우 해당 제품이나 브랜드를 연상시키는 색상을 활용하면 더 나은 효과를 얻을 수 있습니다. 해당 기본 색상을 찾고 이미지의 전경에 배치합니다.

클리크(Clique)는 히어로 이미지에 앱 인터페이스에 사용된 파란색을 적용했습니다.

스크림

스크림을 이용해 텍스트와의 대비 효과를 만들어낼 수도 있습니다. 스크림은 이미지를 부드럽게 만들어 이미지 위에 배치된 텍스트의 가독성을 향상시켜주는 시각 디자인 기법입니다.

불투명도 값은 상황에 따라 달라집니다. (이미지 출처: 머티리얼 디자인(Material Design))

상황에 따라 그레이디언트의 불투명도를 적절하게 선택합니다. 아래의 이미지처럼 일부 히어로 이미지는 그레이디언트 값을 60%로 설정하여 더 어두운 그레이디언트를 적용해야 할 수도 있습니다.

(이미지 출처: 머티리얼 디자인(Material Design))

이처럼 다양한 기법을 수행하는 방법에 대한 실용적인 조언은 CSS 기법과 관련된 문서인 “디자인 시 고려해야 할 사항: 이미지 위에 텍스트 오버레이“를 참조하십시오.

9. 실제 사람의 이미지를 사용할 것

사람 이미지를 사용하면 사용자의 시선을 효과적으로 사로잡을 수 있습니다. 사용자가 이미지에 있는 사람의 얼굴을 보면 이들과 교감하는 듯한 느낌을 받게 되며, 단순히 제품을 구매한다고만 느끼지 않습니다. 그러나 수많은 기업 웹 사이트는 소위 “신뢰 구축”에 초점을 둔 진정성 없는 사진을 남용하고 있습니다.

사용성 테스트 결과에 따르면 장식용에 불과한 사진(예: 아래 이미지)이 디자인 효과에 기여하는 가치는 매우 낮으며, 사용자 경험을 향상시키기보다는 오히려 저해하는 것으로 나타났습니다. 따라서 아무런 근거 없이 그저 미소를 짓고 있는 사원의 이미지는 지양해야 합니다.

진정성 없는 이미지는 피상적이고 거짓된 가식적인 느낌을 줍니다.

매우 간단한 경험 법칙 하나는 앱과 웹 사이트의 특성에 맞는 사람들을 담은 고해상도 사진을 사용하는 것입니다. 이미지는 제품, 기업 또는 문화를 거짓 없이 나타내야 합니다.

(이미지 출처: 다니엘라 드레이퍼(Daniella Draper))

(이미지 출처: 더 리노베이터(The Renovator))

다음은 알아두면 유용한 몇 가지 팁입니다.
• 군중 사진이 아닌 주요 인물 한 명이 등장하는 사진을 사용합니다.
• 진정한 스토리가 담긴 이미지를 이용합니다. 직원들이 일에 몰두해 있는 모습을 사진으로 촬영합니다. 제품을 홍보하는 웹 사이트인 경우 해당 제품과 상호 작용하는 다양한 모습을 이미지에 담습니다.

10. 일러스트레이션을 사용해 개성을 표출할 것

히어로 이미지는 하나의 시각적 요소에 불과하며 모든 유형의 이미지를 활용할 수 있습니다. 사진에 비해 뚜렷한 개성을 나타낼 수 있는 일러스트레이션은 최근 대안 미디어로 급부상하고 있습니다. 일러스트레이션은 이미지의 콘텐츠와 기술적 세부 사항을 제어할 수 있다는 측면에서 사진보다 훨씬 효과가 좋습니다. 고유한 맞춤형 일러스트레이션은 경쟁업체와 차별화된 요소로서 브랜드 회상도(brand recall)가 더 높습니다.

드롭박스(Dropbox)는 이해하기 쉬운 일러스트레이션을 사용하여 메시지를 명확하게 전달하고 복잡한 개념을 간단하게 표현합니다.

일러스트레이션은 상상력에 호소하고 사용자와의 강력한 교감을 형성합니다. (이미지 출처: 베이스캠프(Basecamp))

뛰어난 효과를 얻으려면 일러스트레이션은 눈에 잘 띄어야 하고 전달하려는 메시지가 누구에게나 유사한 의미로 해석될 수 있어야 합니다. 또한 여러 개의 일러스트레이션을 사용하는 경우 한 사람이 만든 것처럼 서로 연관성 및 일관성을 유지해야 합니다.

결론

흥미로우면서도 콘텐츠와 완벽한 조화를 이루는 고품질의 히어로 이미지는 웹 사이트를 돋보이게 할 최상의 요소라 자부합니다. 앞서 설명한 충분한 대비 효과와 명확한 CTA를 적용하여 디자인하면 이 기법의 이점을 충분히 누릴 수 있습니다.

출처 : 어도비 블로그(https://blogs.adobe.com/creativedialogue/ko/design-ko/best-practices-for-hero-images/)