MSV. LETTER
Meet Social Value, 사회적 가치를 만나는 MSV 뉴스레터에서는 '디자인의 사회적 가치''포용적인 디자인' 그리고 '접근성'에 대하여 집중적으로 다룹니다

Design for Everyone : Color

모두를 위한 디자인 : 컬러편

 

색상은 미적인 가치를 담기도 하지만, 정보를 담기도 합니다. 신호등을 생각해 보면 쉽게 알 수 있죠. 빨간색은 정지를 뜻하고, 초록색은 보행자가 횡단보도를 건너거나 차가 앞으로 갈 수 있도록 허락합니다. 모바일 인터페이스에서도 마찬가지입니다. 로그인 화면에서 입력해야 할 암호가 틀렸을 때 빨간색으로 표시되는 경우가 종종 있죠. 그런데 색을 구분하기 어려운 사람들은 어떻게 정보를 구분할 수 있을까요? 이번 뉴스레터에서는 색맹을 가지고 있는 사람들 고려하여 어떻게 디자인을 해야 할지 간단한 아이디어를 소개합니다. 분명한 건 이들을 위한 디자인은 더 많은 사람들에게 혜택을 줄 수 있다는 것입니다.


‘색을 구분하는 데 어려움이 있는 것'과 ‘색을 구분하지 못해 인터페이스를 사용하지 못하는 것’ 사이에는 차이가 있어요. 후자는 디자인 실패의 결과이죠. 
 - Tom van Beveren


에디터 김병수, 박윤주


효과적인 정보 전달을 위한 디자인

AllisonShaw, Senior Product Designer at Zendesk

내가 가진 경험이 보편적인 경험이라고 믿는 건 인간의 본성입니다. 하지만 내면의 편견을 무너뜨리고, 사람들에게 정말로 필요한 것을 찾아내기 위해 디자이너들은 유저 리서치를 진행하게되는데요. 문제는 연구 대상자 풀에 다양성이 잘 담기지 않아 왔다는 거죠. 시각 장애를 가진 사람이나 손을 하나 가진 사람을 대상으로 사용자 테스트를 진행해보신 분이 있나요? 아마 많이 없을 것 같아요.

장애를 가지는 것이 아주 특수한 경우라고 생각할 필요는 없습니다. 장애란 “움직임, 감각, 활동 등에 어떤 제한이 되는 신체적 정신적 상태”입니다. 잠깐 목이 잠겨서 목소리가 제대로 안나오거나, 눈이 부셔서 앞을 제대로 못보는 것도 일종의 장애를 경험한다고 볼 수 있습니다. 나이가 들면서 무릎이나 엉덩이 사용이 불편해져 휠체어를 사용하게 될 수도 있죠. 기억력이나 인지능력이 나빠질 수도 있습니다. 결국 장애는 누구나 경험하게 되는 일입니다.

제품 디자인에서 또한 ‘장애를 가진 사람을 위한 것’과 ‘그렇지 않은 것'으로 구분할 필요가 없습니다. 리모컨이나 턱이 없는 보행로, 옥소OXO의 감자칼 같은 것도 처음에는 장애를 가진 사람들을 고려하며 만들어졌습니다. 하지만 지금은 많은 사람에게 삶의 일부가 되었습니다.


그럼 포용성 있는 소프트웨어 디자인을 위해서는 어떤 노력을 할 수 있을까요? 우선 색깔을 경험하는 방식이 다양하다는 것을 인지할 필요가 있습니다. 명암만을 구분하는 사람이 있는가 하면, 특정 색깔을 구분하는 일에 어려움을 겪는 사람도 있습니다. 그렇기때문에 색깔을 사용자와의 소통을 위한 유일한 수단으로 삼으면 안 됩니다.


아래 사진의 좌측에서는 텍스트와 색깔만으로 정보를 전달하고 있습니다. 모든 색깔을 인식할 수 있는 사람에게는 정보 전달이 가능하겠지만 색채 식별에 어려움을 가진 사람이 보게 된다면 오른쪽 사진처럼 보이겠죠. 효과적인 정보 전달의 실패입니다

보편적으로는 좌측처럼,
색 구분이 어려운 사람에게는 우측처럼 보일 것이다 ⒸAllisonShaw
해결하기 어려운 문제는 아닙니다. 정보전달을 위해 색깔이 아닌 다른 시그널을 추가하면 됩니다. 아이콘이나 설명문을 삽입할 수도 있고요, 글씨 굵기나 스타일, 크기를 조절할 수도 있습니다. 밑줄을 추가하는 것도 효과적인 방법입니다. 하단 사진은 위에서 컬러로만 구분한 것을 개선하여 링크에는 밑줄을 긋고, 옵션의 가능 여부는 아이콘과 텍스트의 추가로 보충 설명해줬습니다. 

간단한 아이콘과 설명을 통해
색상으로 구분 못하더라도 정보를 인지할 수 있게 해놓았다 ⒸAllisonShaw


디자인 초기 단계에서 포용성을 고려한 제품과 그렇지 않은 제품 사이에는 큰 차이가 있습니다. 코펜하겐에서 시각 장애인을 위한 안내 블록을 본 적이 있습니다. 도보에 점자 블록이 완전히 박혀있었죠. 길을 처음 만들 때부터 다양한 사용자에 대한 고민이 있었다는 것입니다. 소프트웨어 디자인을 할 때에도 포용성에 대한 고려를 시작단계에서부터 근간으로 삼으면 사용자에게 큰 기쁨을 선사할 수 있을 것입니다.


색맹을 염두에 두고 디자인하면
모두를 위한 디자인이 됩니다

Tom van Beveren, Founder of We are Colorblind


우선 색맹을 경험하는 사람들이 보는 세상을 제대로 이해해봅시다. 전색맹(全色盲)이 있는 사람은 색깔을 전혀 느끼지 못하고 명암만을 가릴 수 있습니다. 흑백사진을 보듯 세상을 경험하는 거죠. 적색약, 녹색약, 청색약을 가진 사람들도 있습니다. 이 경우에 붉은색은 붉은색으로 보이고, 푸른색은 푸른색으로 보입니다. 다만 그 대비가 명확하지 않아 색 간의 구분이 어려울 수 있습니다. 아래 사진을 보면 각 증상을 가졌을 때 세상이 어떻게 보이는지를 가늠해보실 수 있을 거예요.


좌측상단부터 시계방향으로
보편적인 시각, 녹색약, 청색약, 적색약 ⒸTom van Beveren

전 세계 인구의 4%가 색맹을 가지고 있습니다. 남성 12명 중 1명, 그리고 여성 200명 중 1명꼴이라고 보면 될 거예요. 이 중 많은 이들이 웹사이트, 앱, 온라인 쇼핑이나 게임 서비스를 사용하는데 어려움을 겪고 있습니다. 하지만 ‘색을 구분하는 데 어려움이 있는 것'과 ‘색을 구분하지 못해 인터페이스를 사용하지 못하는 것’ 사이에는 차이가 있어요. 후자는 디자인 실패의 결과이죠.


저는 색맹 UX 디자이너입니다. 디자이너들이 실천할 수 있는 간단하면서도 효과적인 두 가지 방법을 소개하겠습니다.


  1. 대비 Contrast

대비되는 색깔을 함께 배치하는 것은 큰 도움이 됩니다.
대비가 강할수록, 색맹이 있는 사람도 객체들을 더 명확하게 구분할 수 있습니다. 


  1. 색채 Color

색깔을 정보 전달의 유일한 도구로 사용하지 마세요.
항상 텍스트나 아이콘 등으로 정보 전달 기능을 하는 다른 요소를 추가해주세요. 
(첫번째 엘리슨쇼의 글 참조)


복잡하거나 어려운 것들이 아닙니다. 다만 생각하느냐 안하느냐의 차이입니다. 색맹을 가진 이들을 고려한 디자인은 쉽게 적용할 수 있을 뿐만 아니라 색맹을 가지지 않은 다른 이에게도 명쾌한 가이드가 되어 큰 도움을 줄 수 있을 것입니다.


출처 : https://www.invisionapp.com/inside-design/designing-for-colorblind-improves-design

Our philosophy

아름다움에 대한 기준과 가치는 변할 수 있습니다. 그러나 우리는 미래에도 변하지 않을 지속 가능한 가치를 위해 디자인합니다. 우리는 디자인의 역할이 심미적인 것뿐 아니라 사람을 살리고 사회를 더 나은 방향으로 변화시킬 수 있는 데에 있다고 믿습니다.
  
주식회사 미션잇 
Design for Inclusive Society
www.missionit.co
www.magazinemsv.com

문의 hello@missionit.co
서울특별시 서초구 바우뫼로 7길 16, 305-1호

수신거부 Unsubscribe