brunch

매거진 UX 디자인의 모든 것

라이킷 51 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jan 12. 2017

이미지 제공 UX 원칙 5가지

today

Today UX 아티클

babich.biz에 올라온 Nick Babich의 글 Best Practices for Imagery을 원저자의 허락을 받아 번역한 글입니다.

Best Practices for Imagery

As the saying goes, a picture is worth a thousand words. It takes users just a few seconds to evaluate a new site or app, good designer knows that and try to convey complex stories and ideas visually. This makes images a critical component for connecting with users and converting

babich.biz

천 마디 말보다 사진 하나가 가지는 힘이 더 큽니다. 사진으로 유저는 단 몇 초만에 새로운 사이트 혹은 앱을 평가하게 되는데, 좋은 디자이너는 이 사실을 알고 있으며 복잡한 이야기와 아이디어를 시각적으로 전달하려고 노력합니다. 이로 인해 이미지는 유저와 유대를 형성하고 그들을 헌신적인 유저로 전환시키는 중요한 구성요소가 됩니다.

사진은 말보다 더 많은 이야기를 전합니다.

하지만 앱이나 사이트에 사용할 시각적 콘텐츠를 만들거나 선택하는 것은 쉬운 일이 아닙니다. 다음 모범 사례들을 보시면 여러분의 디자인에 이미지를 성공적으로 넣는 데 도움이 되실 겁니다.

1. 맥락과 관련 있는 이미지를 이용한다

사이트가 제안하고 있는 가치 제안 혹은 사이트의 중심 테마와 명확하게 연결되지 않는 이미지를 사용하면, 유저에게 도움이 되지 않을 겁니다.

그런 이미지는 기껏해야 의미 없는 방해물 밖에 안 될 것입니다

위 예약 사이트와 같이 명확한 관련성이 보이지 않는 이미지를 사용하는 것은 공간을 낭비하는 것입니다.

최악의 경우에는, 잘못된 인상을 남기거나 유저가 충격을 받게 될 수도 있습니다.

맥락과 관련없는 이미지는 혼란을 초래합니다. Credits: hubpages

팁

브랜드 목표와 강한 연관성이 있는 예상 가능한 비주얼을 사용하세요

2. 명확한 초점을 가진 이미지를 사용한다

초점이 명확하지 않으면 이미지가 가지는 상징적인 퀄리티를 잃게 됩니다. 유저가 이미지의 의미를 찾아 헤매게 만들지 말고 기억하기 쉬운 방식으로 명확한 콘셉트가 전달될 수 있도록 만드세요.

왼쪽: 초점이 명확하지 않으면 이미지가 가지는 상징적 퀄리티를 잃게 됩니다. 오른쪽: 명확한 초점은 한 눈에 컨셉을 전달합니다. Credits: MaterialDesign

유저의 이목을 제대로 끄는 스트라이킹 비주얼(striking visual)을 적용해 보세요.

애픔의 홈 페이지에 들어가보면 신제품의 큰 이미지가 보여집니다. 이 페이지는 최신 제품의 세부 이미지를 보여주고 있고 유저에게 유용한 정보를 제공하고 있습니다.

팁

방해물은 최소화하고 이미지에서 의미 있는 요소에 집중하세요.

3. 실제 사람을 보여준다

사람 이미지는 유저가 몰입할 수 있게 해주는 매우 효과적인 방법입니다. 우리는 다른 사람들의 얼굴을 보면, 단순히 제품을 이용하는 것뿐만 아니라 그들과 실제로 유대를 가지고 있다고 느끼게 됩니다.

하지만, 여러 사이트에서는 순전히 꾸미기용 스톡 사진을 이용하는데, 이런 스톡 이미지가 디자인에 더해주는 가치는 거의 없으며 대개의 경우에는 사용자 경험에 악영향을 미칩니다. 그런 사진은 ‘시각적 노이즈’가 되는데, 유저가 대게는 못 보고 넘어가서 방해조차 되지 않는 존재가 된다는 것입니다. 사진을 사용할 때는 해당 사진이 정말로 여러분의 스토리를 전달하고 있는지, 여러분이 전하는 메시지를 강화해 주는지 확인해야 합니다. 매우 간단한 경험 법칙은 앱 혹은 사이트의 캐릭터와 매치가 되는 사람들의 고화질 사진을 사용하는 것입니다.

왼쪽: 순전히 꾸미기용 스톡 이미지로 텅 비어있고 아무런 감정도전달하지 못합니다. 오른쪽: 직접 찍은 사진은 실제 고객서비스 팀을 보여줍니다.

팁

군중 샷은 피하려고 노력하세요. 그 대신 하나의 메인 주인공이 있는 사진을 사용합니다.

진정한 스토리를 전달해주는 이미지를 찾아 헤매야 합니다. 흥미로운 행동을 하고 있는 회사 사람들의 사진을 찍어보세요. 만일 제품을 가지고 있다면, 그들이 제품을 이용할 수 있는 방법을 고려해보세요.

스톡 사진 사진보다는 일러스트레이션을 만들면 더 많은 개성을 담을 수 있습니다. 일러스트레이션은 유저의 상상력을 불러일으켜 제품과 강력한 개인적 유대를 형성하게 해줍니다.

일러스트레이션은 쉽게 이해할 수 있는 비주얼에 컨셉을 담아서 명확하게 메시지를 전달할 수 있게 해줍니다. Credits: Dropbox

4. 안 좋은 퀄리티의 이미지는 피한다

고해상도 디바이스가 점점 더 표준이 되어가고 있는 만큼, 유저는 HD 비주얼을 보기를 기대합니다. 요즘에는 픽셀이 깨지거나 과도하게 늘리거나 저해상도인 사진을 보여주는 것보다는 차라리 아무것도 보여주지 않는 게 낫습니다.

왼쪽: 품질이 낮은 이미지. 오른쪽: 적절한 해상도 Credits: MaterialDesign

팁

특정 비율 및 디바이스에 맞는 해상도인지 테스트함으로 다양한 화면과 플랫폼에 맞는 적절한 사이즈의 이미지인지 확인해봅니다.

5. 개성을 표현한다

앱은 특정 기능을 수행하고 유저와 의사소통하기 위해 만들어졌습니다. 하지만 그 외에도 몰입해서 재미있게 사용할 수 있어야 합니다. 앱에 유쾌함을 더하는 것은 앱을 좀 더 인간적일 뿐만 아니라 특별하게도 만들 수 있는 훌륭한 방법입니다. 전반적으로 좋은 인상을 주는 것은 사용성뿐만 아니라 개성과도 관련이 있기 때문입니다.