brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Oct 19. 2016

색상 디자인 적용 Tips

UX 디자인 배우기 #54

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


※ 이글은 UXPlanet에 올라온 CanvasFlip가 작성한 「108 million web users are color blind. Tips for designing keeping them in mind」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.


 디자인, 모두를 생각하며 해야 하는 것.


저의 대학교 친구 중 한 명은 색맹인데 누구든 이 사실을 알고 나면 “이게 무슨 색인지 알겠어?”라는 질문을 던졌다고 합니다. 색맹이라고 해서 모든 색을 구분하지 못하는 건 아닙니다! 다보지만 대비가 충분하지 않거나 하는 경우에만 어떤 색인지 분명히 짚어내는 데 어려움을 겪을 뿐입니다. 



디자이너로서 여러분은 캔버스에 가장 잘 어울리는 색을 골라야 하며 유저의 흥미를 가장 많이 끌만한 내용을 선택해야 하지만, 색맹 유저는 자주 빠트리게 됩니다. 항상 반복해서 언급하는 수치이지만, 남성 중 8%, 여성 중 0.5%가 색맹입니다. 여러분의 유저 베이스가 크다면 이 숫자는 매우 큰 숫자가 될 겁니다. 사회의 8%와 0.5%를 무시하는 것은 용납되지 않습니다. 다음은 그들의 니즈도 충족하는 방향으로 디자인하는 데 도움이 되는 몇 가지 팁과 요령입니다. 


색상을 언급한다


웹사이트에서 모든 색상의 이름을 언급해줘야 할까요? 아닙니다. 문제가 되는 경우에만 언급하면 됩니다. 멋진 블레이저나 티셔츠를 살 때 색맹인 사람들은 보통 친구들에게 색상에 대한 의견을 물어보긴 합니다. 그리고 그 친구가 자기만큼 색을 잘 모르면 잘못된 선택을 하게 될 수도 있습니다. 





제품이 어떤 색인지 스펙 부분에서 언급합니다. 그리고 ‘포도색’과 같은 용어들은 색상 설명에 의존하지 않아도 되는 우리 같은 사람들에게 멋있게 들릴 수 있지만 다른 5%의 유저에겐 상당히 혼란스러울 수 있음을 염두에 둬야 합니다. 따라서 색상의 이름은 명확하고도 명확하게 알려줘야 합니다. 
호버 효과를 이용해 색상의 이름이 뜨게 만들지 않아야 합니다. 모바일 디바이스에서 이용할 때는 그렇게 해서는 이 문제를 해결할 수 없기 때문입니다. 

아래와 같이 보여주는 것이 가장 좋습니다.

(좌) 색상 필터를 적용하는 최선의 방법이 아님  (우) 색상 필터의 모범 사례


색깔만 주고 선택하게 하는 방법과 이름만 알려줘서 색상을 떠올리는 데 시간이 걸리게 하는 방법을 적절히 균형을 맞춰줄 수 있습니다. 


대비 효과를 제대로 준다


1. 밝은 부분과 어두운 부분의 대비


색맹에게 필요한 건 흑백의 캔버스가 아닙니다. 적절한 대비 효과를 준 웹사이트가 필요한 겁니다! 밝은 색과 어두운 색의 조합을 정하는 것은 대비율을 유지하는 가장 좋은 방법 중 하나입니다. 두 가지 색의 온도나 명도가 같을 때, 색맹은 그 두 가지를 구분하기 어렵습니다


2. 보색 대비 효과


다음과 색상환은 모든 디자이너가 알고 있을 겁니다. 색상환에서 반대쪽에 있는 색을 선택하는 것은 색맹 오디언스가 색을 구분할 수 있게 해주는 쉬운 방법입니다. 



3. 따뜻한 색과 어두운 색의 대비


공식은 꽤 간단합니다. 차가운 색의 짙은 색조와 따뜻한 색의 옅은 색조를 선택하는 겁니다. 이제 여러분은 준비가 되었습니다!



4. 패턴과 질감 이용하기


색상을 구분하는 것은 색맹 유저에겐 어려운 일이지만, 패턴을 비교하는 건 어렵지 않습니다. 그러니 이것도 좋은 옵션이 될 수 있겠군요! 두 가지 그래프와 심벌을 구분하기 위해서는 다양한 색상 조합을 활용하는 대신 대비되는 색상에 다양한 패턴을 활용할 수도 있겠습니다. 


그레이 스케일에서도 잘 보이게 만든다


흑백 웹사이트를 만들라는 뜻이 아닙니다. 웹사이트를 그레이 스케일 모드에서 한 번 확인해보세요. 만일 모든 요소가 시각적으로 구분이 되면 색맹 유저도 잘 구분할 확률이 높습니다. 


성공사례.


이를 놀랍게 해낸 앱들이 있습니다. 구글 맵스(Google maps)는 최고의 모범사례 중 하나입니다. 빨간색과 녹색을 이용해서 교통이 혼잡한 길과 아닌 길을 표현하긴 했지만, 상당히 다른 색조를 사용하여 색맹인 사용자들도 상당히 잘 구분할 수 있게 만들었습니다. 



절대 하면 안 되는 색상 조합은 피한다


색상 조합을 선택할 때는 색상을 잘 알고 있어야 합니다. 색맹이 사람들에게 다양하게 영향을 미치기 때문에, 웹 디자인에서 어떤 색을 이용하는 것이 ‘안전’한 지 결정하기 어렵습니다. 다음은 팔레트를 선택할 때 절대로 선택하면 안 되는 몇 가지 색상 조합입니다.


녹색&빨간색
녹색&갈색
파란색&보라색
녹색&파란색
밝은 녹색&노란색
파란색&회색
녹색&회색
녹색&검은색


배경 이미지에 텍스트를 겹쳐 쓰지 않는다


이미지 위에 겹쳐서 써진 텍스트는 헷갈립니다. 이미지 일부 혹은 전부가 텍스트와 충분한 대비를 이루지 않을 수 있기 때문입니다. 


배경 불투명도를 줄이면 대비 정도가 올라가서 텍스트를 읽기 쉬워집니다. 아니면 텍스트 자체에 스타일을 줘서 눈에 띄는 색을 입히거나 그림자 효과를 주거나 여러분의 브랜드 가이드라인과 맞는 다른 어떤 것을 할 수도 있습니다. 


마무리


색맹이 전체 인구 중 상대적으로 작은 비중이긴 하지만(물론 전체에서 5%는 상당히 큰 숫자이긴 합니다), 그들을 염두에 두고 디자인할 필요가 있습니다. 컬러를 선택할 때 이런 유저들도 염두에 두면 여러분도 행복할 것이고 최종 디자인의 내용도 모두를 기쁘게 해주어, 결과적으로 훨씬 더 나은 앱과 사용자 경험을 낳게 될 것입니다. 



매거진의 이전글 하이퍼링크 UX 가이드라인

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면