색상 디자인 적용 Tips
UX 디자인 배우기 #54
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%는 상당히 큰 숫자이긴 합니다), 그들을 염두에 두고 디자인할 필요가 있습니다. 컬러를 선택할 때 이런 유저들도 염두에 두면 여러분도 행복할 것이고 최종 디자인의 내용도 모두를 기쁘게 해주어, 결과적으로 훨씬 더 나은 앱과 사용자 경험을 낳게 될 것입니다.
12,000명 브런치 구독자를 위한 특별한 혜택!!!!!
라이브 클래스 PM VOD 패키지(리서치/분석/기획/전략/설계) 추천
300시간 이상 UX 강좌, PM을 위한 180여개 UX 강좌 묵음 패키지
브런치 구독자에 한해 정가 대비 90% 할인 쿠폰 증정합니다.
쿠폰 코드: 20241231
상세 정보 확인하기
