●monday design project_06.친절한 디자인- for color Blindness (색맹)

남성의 7~10%는 대부분 색맹을 갖고 있다고 합니다. 여성은 조금 낮은 수치인데요.
색맹은 특정 색들을 구분할 수 없는 사람을 말합니다. (예를 들어 빨간색과 초록색을 구분할 수 없다면 적록색맹이라고 말합니다) 색상 결핍증과 색약 모두가 빨간색과 초록색을 구분할 수 없는것은 아닙니다.
또한 이런 색맹은 사회생활에 있어서 분명하게 눈의 띄는 증상도 아닌데요. 그 사람들은 예쁜 색연필을 사용해서 그림도 그릴 수 있고,노을이 지는 저녁을 즐길 수도 있으며, 맑고 푸른 하늘이 무언지도 알고 있습니다.
단지 약한 스펙트럼에 나오는 색상을 구분해야하는 시간이 오면. 조금 힘들어지는 것 뿐이지요.

이 때문에 소프트웨어 설계나 디자인이 이런 색맹들을 고려해 소통의 오해를 없애야할 텐데요. 정보디자인에서 디자인 요소중 (선,모양,크기 질감 등) 색상은 가장 많이 사용되는 디자인 요소입니다. 아마도 색상은 디자인에서 형태나 레이아웃을 바꾸지 않아도 가장 많은 것을 말할 수 있기 때문에 디자이너들이 아주 많이 사용하는 요소라 생각합니다.
디자이너의 의도와 메세지를 오해하지 않도록 몇 가지 간단한 예제와 가이드라인을 통해 색맹들도 흡수할 수 있는 한 단계 업그레이드 된 디자이너를 꿈꿔 볼까요?

하나의 visual cue의 사용은 피하라

일반적으로 미학과 미니멀 디자인에서는 한가지 색상으로 시각적 단서를 사용하는 것이 최고의 기법으로 말해주고 있는데요. 행동을 취하게 하고 visual cue를 주는 것은 인터페이스 디자이너에게 매우 중요합니다. 사용자가 온라인 상에서의 정보 처리와 의사 결정에 영향을 주기 때문에 보다 정확하고 신속한 과정이 되어야 하기 때문입니다. 뇌가 정보를 인식한 이후 동시에 감성적인 컬러와 같은 처리가 이루어 지는데요 이 때 컬러는 설계된 시각적 신호에 따라 자연스럽게 선택이 되어 집니다. (교통 신호 중 정지는 빨간색, 통행은 파란색인 것이지, 빨간색이 모든 신호의 정지를 의미하지는 않습니다. )
공교롭게도 색맹을 갖고 있는 사용자들은 유사한 컬러처럼 보이는 visual cue를 쉽게 알지 못하거나 혼란을 갖기도 합니다. (적록 색맹의 경우 적색과 초록색의 구분이 모호합니다.)
몇 개의 인터페이스의 예로 이처럼 중요한 visual cue를 잘못 사용한 사례를 보도록 하겠습니다.

보다시피 아래 세 가지 인터페이스에서는 빨간색과 초록색 (적록 색맹들이 색 구별이 어려운)으로 정보 상태를 전달하거나 사용자에게 정보를 제공하고 있습니다.

애플 온라인의 한페이지는 각 정보에 한가지 컬러를 사용하여 visual cue를 보여주고 있는데요.

애플은 빨간색과 초록색으로 그들의 디자인 명성처럼 아주 각각의 상태를 잘 보여주고 있지만 색맹의 사용자들에게는 유사해보이는 컬러를 사용하여 매우 실망적이고 불편한 정보형태를 보여주고 있습니다

워해머 비디오 게임의 서버를 선택하는 화면이나 MAMP의 화면도 빨강과 초록의 visual cue 역시나 같은 상황입니다.

이처럼 색맹들이 정보를 인식하기 힘들어지지 않게 하기 위해서, 또는 디자이너의 의도를 동일하게 전달하기 위해서는 한 가지의 색상 신호를 사용하지 말고 텍스트나 아이콘을 사용하여 정보를 디자인하는것이 모두에게 더 좋은 선택을 줄 수 있습니다.



좋은 예

dropbox는 각각의 아이콘에 상태를 알려주는 색상 동그라미 아이콘이 붙어 있어 자신의 파일 상태를 알 수 있는데요. 색상 동그라미가 아이콘 전체의 정보를 인식하는데 있어 조금 혼동될 수도 있지만, 색맹 사용자들이 상태를 오해하거나 처리가 어려워지는 부분은 없어지게 되는 장점이 있습니다.

Wufoo와 Versions 의 스크린샷은 매우 좋은 예가 되는 것 같습니다. 아이콘에 형태와 색상 그리고 단어를 조합하여 만들었기 때문에 visual cue가 오해되거나 색맹 사용자들이 어렵게 느껴지는 부분이 줄어들게 됩니다.
 

애플은 자신의 OSX windows에서 빨강, 노랑, 초록의 orbs로 visual cue를 주고 있는데요
마우스를 가져다 대면 해당 orb의 아이콘이 active되는데요. 이러한 색상 조합도 색맹에게는 도움이 됩니다.상호작용또한 애플의 디자인 미학이 느껴지는 부분이라고 할 수 있겠습니다.

TiVo의 인터페이스는 초록색과 빨간색을 모두 사용하고 있지만 크고 작은 원으로 사이즈의 차이를 두어 정보처리에 도움을 주고 있습니다.

Contrasting을 사용하자

디자인을 하다보면 아이콘이나 텍스트를 사용하고 싶지 않을때가 있습니다.되도록 아이콘이나 텍스르를 사용하여 색맹을 격고있는 사용자에게 도움을 줄 수 있으면 좋겠지만, 지도처럼 모든 정보를 그러지 못할때는 대비를 사용하여 정보를 처리에 도움을 줄 수 있습니다.

지도는 지역을 표시하는 것처럼 한가지 컬러로 정보를 표현할 때가 많은데요. 가끔 설계하는 사람들은 텍스트 자체에 컬러를 입히기도 합니다.이러한 것은 대비를 통하여 문제를 해결할 수 있습니다 .

나쁜 대비

뉴욕타임즈의 지도입니다. Yes'와 Did not Vote'의 정보를 매우 비슷한 명도를 주어 색맹 사용자들은 이 차이를 거의 구별할 수 없다고 합니다. 위키 디 피아에서도 색맹에게 나쁜 예로 뉴욕 타임즈를 들고 있네요 ㅎㅎ
trulia의 지도에서도 다양한 빨강,노랑, 녹색을 사용하고 있지만 색맹을 겪고있는 사람들은 이 지도를 이해하는데 매우 오랜시간이 걸릴것으로 보입니다. 70%의 붉은색과 70%의 초록색은 과연 어떻게 구별할 수 있을까요;;;제가 다 미안해지는 순간이기도 합니다.

빨강/검정, 빨강/녹색의 텍스트는 때로 웹사이트에서 하이퍼 링크 색상으로 사용되기도 합니다.
아주 문제가 되는 컬러 조합은 아래와 같이 같은 명도의 컬러를 사용할 때입니다.

좋은 대비
이 지도는 위에 뉴욕타임즈에 비하면 정말 훌륭한 디자인이 아닐 수 없는데요. 빨간색과 파란색의 차별성과 노란색, 그리고 각각의 색 안에서는 줄무늬를 주어 정보를 쉽게 구분할 수 있도록 해주었습니다.
 

wufoo의 차트에서도 빨간색과 초록색을 사용하기는 하지만 그 두개의 명암 차이를 주어 정보를 읽는데 큰 어려움은 없어보입니다.

 

빨강/검정, 빨강/녹색의 텍스트 조합도 아래처럼 명도의 차이를 준다면 크게 어렵지 않은 정보를 얻을 수 있을 것입니다.

대부분의 경우 이러한 것이(색맹을 위한) 디자인을 하는데 고려되는 사항은 아니였습니다. 저 또한 이러한 점을 고려해본적. 혹은 생각해본적이 없었던거 같은데요. 많은 사람들이 우리가 만든 디자인이나 인터페이스를 써주기를 고려하면서도, 정작 이러한 부분은 누락되었던거 같아 부끄럽습니다. 얼마전에 했던 PTT 프로젝트에서도 색상에 toggle을 주어 차이를 주었는데요, 그때 쓰였던 색상이 같은 명도의 핑크와 블루였습니다. 어쩌면 색맹에게 조금 힘든 컬러가 아니였나 싶기도 합니다..

이러한 부분은 포토샵에서 작업후 해당 컬러의 saturation 값을 낮춰주면서 확인할 수 있을 것 같은데요. 빨간색과 초록색의 saturation갑을 낮춰주면 쉽게 check가 가능한것 같네요. 앞으로 이런 부분까지 신경쓰는 친절한 디자이너가 되어야 겠습니다.


**
위 내용은 작성자가 스터디중에 작성한 내용으로 현재 해당 내용을 재 검토하던중(2014.3.3) 상당 부분 이미지 출처와 내용 출처가 명확하지 않음을 느꼈습니다. 당시 이 글을 작성한 본인이 저작권에 대한 이해가 부족하여 상당 부분 저작권 표시에 미흡하였습니다.
저작권을 표시하기 위해 해당 내용을 발췌한 부분을 찾고 있으나 오랜 시간이 지나 해당 내용의 출처를 찾기가 어려운 부분이 있으므로 양해 부탁드립니다.

작성자에게는 저작권이 없음을 알려드립니다.