brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Apr 02. 2019

UX 디자이너가 알아야 할 이미지 사용 5가지 규칙

안녕하세요. UX 컨설턴트 전민수입니다.  

지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 통해 공유하고자 합니다. 많은 관심 바랍니다.

Nick Babich의 UX 디자이너가 알아야 할 이미지 사용 5가지 규칙의 글을 전문 번역한 글입니다. 




이미지는 제품 디자이너가 유저와 커뮤니케이션하기 위해 사용하는 시각적 언어(visual language)의 일부입니다. 이미지는 이야기를 전달할 수도 있고, 복잡한 아이디어를 전달할 수도 있으며, 텍스트를 보조하여 보다 상세한 정보를 전달하기도 합니다. 


앱에 들어갈 시각적 콘텐츠를 선택하거나 만드는 과정은 상당한 시간이 소요되는 일입니다. 하지만 이 일을 간소화할 수 있는 몇 가지 트릭과 툴을 있습니다. 


1. 맥락과 관련된 이미지 이용하기


당신의 디자인에 들어가는 각각의 이미지는 명확한 기능적 목적(functional purpose)을 수행해야 합니다. 


꾸미기용으로만 사용되는 이미지는 지양하자


온전히 ‘꾸미기용(decorative)’으로 사용되는 이미지는 유저에게 거의 긍정적인 경험을 주지 못합니다. 대부분의 경우, 유저는 그런 이미지를 그냥 무시하며, 심지어 어떤 경우에는 유저를 방해하거나 괴롭게 할 수 있습니다. 


예를 들어 많은 기업 웹사이트를 들어가 보면 디자인에 추상적인 빌딩 사진을 사용하는 것을 흔히 볼 수 있습니다. 이런 이미지를 사용하는 이유는 간단합니다. 방문자에게 ‘모던한 회사’라는 느낌을 주기 위함이죠. 불행하게도, 그런 사진들은 웹사이트에 방문한 누구에게도 의미 있는 정보를 전달하지 못합니다.  

 

단지 이미지가 멋지다는 이유로 사용하지 마세요. 항상 당신이 전달하려는 메시지에 대해 고민해야 합니다.


사용하는 이미지의 의미를 테스트해보자


이미지 역시 다른 모든 UI 요소들과 마찬가지로 사용성을 테스트해 보아야 합니다. 이미지를 통해 전달하고자 하는 메시지가 완전히 명확하게 유저에게 전달되는지 테스트하는 것은 매우 중요(vital)합니다. 

 

사용자의 감정을 고려하자


이미지는 사용자에게 감각적인 영향(emotional impact)을 줘야 합니다. 당신이 만들어내고자 하는 느낌(feelings)을 강화할 수 있어야 합니다. 


“텍스트는 읽고 잊어버릴 수 있지만, 강렬한 이미지는 유저의 마음속에 오래 머물 확률이 더 높습니다.”


유저의 감정을 고려하는 것은 유저가 문제를 직면하는 상황에서 특히 중요합니다. 예를 들어, 유저가 폼을 채워 넣다가 에러 메시지를 보게 되었는데, 에러 메시지 옆에 웃는 얼굴을 보인다면 긍정적인 경험을 만들어내기 어려울 것입니다. 


2. 초점이 명확한 이미지 쓰기


초점이 나가버리면 이미지의 가치는 확 깎이게 됩니다. 유저가 이미지의 의미를 찾아 헤매지 않게 해줘야 합니다. 


원본 이미지


이미지를 자를 때는 초점을 분명히 잡고 잘라야 합니다.



명확한 초점을 잡는 쉬운 방법이 있습니다. 이미지에 보이는 오브젝트의 수를 제한해보는 것입니다. 가장 이상적인 방법은 유저의 이목을 확실히 잡을 수 있는 단 하나의 오브젝트를 남기는 것입니다. 


3. 고품질 이미지를 제공하세요.


고해상도 이용하기


어떤 사이즈의 디스플레이와 플랫폼에서도 모든 이미지가 적절히 보이도록 사이즈를 맞춰야 합니다. 뿌옇게 보이거나 깨지는 이미지가 있어서는 안 됩니다. 


깨진 이미지 vs 적절한 사이즈의 이미지


다양한 사이즈의 디스플레이와 화소에 맞게 이미지를 최적화하는 방법은 항상 시간이 많이 드는 작업입니다. 다행히도, 이 작업에 도움이 될 툴이 몇 가지 있습니다.



찌그러지지 않게 하기


항상 이미지는 원본 이미지의 비율을 유지하여 보여주어야 합니다. 찌그러지지 않게 조심하세요.

찌그러진 이미지 vs 적절한 사이즈의 이미지


4. 접근성(accessibility)도 잊지 마세요


색상대비(color contrast) 테스트하기


이미지 위에 텍스트를 쓴다면, 텍스트가 읽기 쉽도록 명암비를 테스트해보는 것이 중요합니다.


명암비를 제대로 맞히지 못하면 가독성에 문제가 생길 수 있습니다.


W3C에서는 이미지에 텍스트를 쓸 때 다음 명암비를 따를 것을 권장합니다. 

텍스트가 작으면 최소 배경색 대비 최소 4.5 :1의 명암비를 맞혀야 한다
텍스트가 크면(굵은 폰트 14pt 이상 / 일반 폰트 18pt 이상) 배경색 대비 최소 3:1의 명암비를 맞혀야 한다. 


다음은 명암비를 테스트하는 데 도움이 되는 툴 리스트입니다. 



이미지에 캡션 제공하기


시각장애가 있어 스크린 리더기를 쓰는 사람들도 여러분이 만드는 콘텐츠와 상호작용할 수 있도록 해야 한다는 점을 잊지 마세요. 각각의 주요 이미지에는 대체 텍스트나 캡션을 제공하여 스크린 리더기가 유저에게 의미 있는 정보를 전달할 수 있게 해 주세요.


5.  스톡 사진 사용 시 주의하기


스톡 사진은 디자이너의 툴킷 중에서 매우 훌륭한 도구입니다. 프로토타이핑 단계나 최종 프로덕션 단계 동안에 많은 시간을 절약해주는 존재죠.



하지만 다른 모든 툴과 마찬가지로, 조심해서 사용하는 것이 필수적입니다. 포괄적인 의미를 담는 스톡 이미지는 지양해야 합시다. 그런 이미지는 가짜이고, 사람들은 그런 이미지를 볼 때 제품에 대한 의심을 하기 시작합니다. 결국 신뢰를 떨어트리는 결과를 낳을 때가 많습니다. 


고객 서버팀을 꾸며낸 이미지


예를 들어, 당신의 팀에 대한 이야기를 전하고 싶다면, 이런 아무나로 구성된 이미지보다는 여러분이 실제 함께 일하고 있는 팀원들의 사진을 사용하는 것이 훨씬 좋습니다. 그런 이미지가 너무 깔끔해 보이지 않는다고 걱정할 것 없습니다. 사이트 방문자들은 그런 사진을 보았을 때, 실제 사람이 그 사진을 찍었다고 느끼게 될 것이고, 그럼 인간적인 유대 관계를 형성하는 데 도움이 될 것입니다. 


실제 팀의 사진



감사합니다. 




추천 UI/UX 설계 교육 


1) UI/UX 트랜드 조사 방법에 대해 학습한다

2) 성공적인 모바일 UI/UX 설계를 위한 UX 방법론에 대해 학습한다

3) 경쟁사 및 자사 서비스를 분석하는 방법에 대해 학습한다

4) Task 분석 및 이해관계자 인터뷰 방법에 대해 학습한다

5) 모바일 화면 설계를 위한 사용자 리서치 방법을 학습한다

6) 퍼소나 설계 방법에 대해 학습한다

7) UI/UX 컨셉 설정 및 기능 정의 방법에 대해 학습한다

8) 프로토타입 설계 및 테스트 방법에 대해 학습한다

9) 모바일 화면 설계에 대한 사용자 테스트 방법을 학습한다

10) UI/UX 가이드 작성 방법에 대해 학습한다




1) 사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있는 정도에 대한 UX 가이드 원칙을 학습한다 

2) 시스템의 현재 상태를 시각적으로 명확하게 나타내는 UX 가이드 원칙을 학습한다

3) 사람들이 오류를 저지를 수 있는 가능성을 미연에 제거하거나 줄여 줌으로써 실수를 범하는 것을 사전에 방지하는 UX 가이드 원칙을 학습한다

4) 오류가 발생하였다면 시스템은 즉시 사용자에게 이를 알려줘야 하는 UX 가이드 원칙을 학습한다

5) 오류가 발생했다는 사실을 사용자가 되도록 빨리 인식하고, 빠른 시간 안에 조치를 취할 수 있게 도와줘야 하는 UX 가이드 원칙을 학습한다

6) 시스템의 내부 상태가 변화했을 때 그 변화된 상태를 사용자가 감지할 수 있게 해 주는 UX 가이드 원칙을 학습한다 

7) 주요 정보는 사용자의 눈에 잘 띄어야 하며, 간결하게 전달해야 하는 UX 가이드 원칙을 학습한다

8) 전달된 정보는 누구나 쉽게 이해할 수 있도록 구성해야 하는 UX 가이드 원칙을 학습한다.

9) 사용자가 보기에 정보가 제공되는 순서나 구조가 논리적이라고 생각할 수 있도록 구성해야 하는 UX 가이드 원칙을 학습한다

10) 사용자가 이전에 한 행위를 별도로 기억하지 않아도 시스템에서 사용자가 기억할 수 있도록 도와줘야 하는 UX 가이드 원칙을 학습한다

11) 사용자가 이전에 한 행위를 별도로 기억하지 않아도 시스템에서 사용자가 기억할 수 있도록 도와줘야 하는 UX 가이드 원칙을 학습한다

12) 사용자가 자신이 원하는 대로 시스템과 상호작용할 수 있도록 해주는 UX 가이드 원칙을 학습한다

13) 시스템이 주도권을 갖고 상호작용하는 UX 가이드 원칙을 학습한다

14) 사용자 자신이 처한 상황에 따라 가장 적절한 방법을 선택할 수 있도록 하는 UX 가이드 원칙을 학습한다

15) 사용자가 한꺼번에 두 개 이상의 작업을 동시에 수행할 수 있도록 하는 UX 가이드 원칙을 학습한다

16) 사람들이 실제 생활에서 가지고 있었던 경험을 바탕으로 시스템을 사용하는 UX 가이드 원칙을 학습한다

17) 사용자가 자신이 과거에 시스템과 상호작용한 경험에 비추어 자기가 어떤 행동을 하면 그 결과가 어떻게 되리라는 것을 예측 할 수 있는 UX 가이드 원칙을 학습한다

18) 명령어나 메뉴, UI 등 일관된 스타일에 대한 UX 가이드 원칙을 학습한다 

매거진의 이전글 사용성 테스트 과제 시나리오 작성 방법

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;