brunch

매거진 UI DESIGN

라이킷 403 댓글 15

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 강수영 Dec 13. 2015

데이터 시각화에 맞는 색상 팔레트 찾기 (번역)

일반 색상 팔레트만으로는 부족하다

Graphiq 팀 디자이너 Samantha의 글 번역입니다(원문). 제 경우에는 데이터 시각화에 필요한 색상을 고를 때 거의 임의로 선택하거나 명도나 채도 중 하나만 변화를 줄 때가 많았는데, 그러다 보니 확장성이나 접근성을 고려하지 못하는 경우가 더러 생겼습니다. 개인적으로 참고하기 위해 번역하였는데, 공유해봅니다.

좋은 색상 팔레트는 구하기 쉬운 반면, Data Visualization, 즉 데이터 시각화 분야에 맞는 색상 팔레트 찾기는 아직 상당한 도전 과제다.

Graphiq 팀에서는 더더욱 어려웠다. 수천 가지의 데이터 소스를 여러 가지 유형의 시각화 레이아웃을 통해 전달하는 일을 하고 있기 때문이다.

최근의 문제점들

우리만의 색상 팔레트를 만들기 전에, 현재 웹상에 존재하는 색상 팔레트에 대한 리서치를 진행했다. 놀랍게도, 이들 중 몇 가지는 복잡한 차트와 데이터 시각화를 위해 만들어졌다. 하지만 기존에 있는 색상 팔레트를 사용할 수 없는 몇 가지 이유를 깨닫게 되었다.

문제 1 : 낮은 접근성(Accessability)

대부분의 색상 팔레트가 데이터 시각화를 위한 것은 아니었다. 명도 차이가 충분히 나지 않을 뿐만 아니라, 접근성도 고려하지 않았다. Flat UI 색상은 가장 널리 사용되고 가장 많이 보이는 팔레트 중 하나이다. 예쁘기 때문이다. 하지만 이 팔레트는 그 이름에서도 알 수 있듯이, 사용자 인터페이스를 위한 것이다. 색맹인 사람들은 flat ui 색상을 사용한 데이터 시각화 자료를 이해하기 힘들 것이다.

Flat UI 색상, 적록색맹 모드, 그레이 스케일.

문제 2 : 충분하지 않은 색상

지금 존재하는 색상 팔레트의 또 다른 문제점은 색상이 충분하지 않다는 것이다. 우리의 데이터 시각화에 맞는 팔레트는 적어도 6가지 이상의 색상을 제공해야 했다. 대부분의 색상 팔레트가 충분한 색상 옵션을 제공하지 않았다.

여기에 몇 가지 예시가 있다. Color Hunt

좋은 색상 팔레트들이지만, 복잡한 데이터들을 표현할 수 있을 만큼 유연하지는 않다.

문제 3 : 구별이 힘들다

생각해 보면 그라디언트 같은 색상 팔레트가 있다. 이론적으로는 하나의 색상으로 여러 가지 차이를 만들어 낼 수 있다. 맞는가?

불행하게도 밝기의 변화가 충분하지 않았고, 대부분이 빠르게 구분되지 않았다. 이것들처럼 말이다.

위의 첫 번째 예시를 10단계로 분리해보자.

원래 4단계인 것을 잘게 쪼개 10개로 만든 것이다. 만약 일반 사용자가 아래 예시의 왼쪽에 있는 4개의 초록색 라벨을 보고 시각화 자료의 라벨과 정확하게 매치할 수 있다면, 그건 정말 놀라운 일이 아닐 수 없다.

우리의 접근

데이터 안에서 깊게 숨 쉬며 생각해봤다(!). 데이터 시각화에 대응할 수 있는 여러 개의 색상 팔레트를 만들기 위해 적지 않은 시간을 투자했다. 이 과정을 통해 많은 것을 배웠고, 유연한 색상 팔레트를 생성하는 3가지의 법칙에 대해 공유하려고 한다.

법칙 1: 채도와 명도의 범위를 넓게 설정하라

접근성이 높고 쉽게 구분할 수 있는 색상 팔레트를 만들려면, 충분한 명도와 채도 범위를 설정해야 한다. 명도 차이는 일반적이다. 단색 팔레트를 가지고 적색맹을 가진 사람들에게는 어떻게 보이는지, 녹색맹을 가진 사람들에게는 어떻게 보이는지, 그레이 스케일에서는 어떻게 보이는지 테스트해라. 빠르게 접근성 테스트를 할 수 있다. (관련 링크)

구글 머터리얼 팔레트 Light 블루의 적색맹 테스트, 그레이 스케일 테스트.

하지만 명도의 변화를 가진 팔레트만으로는 충분하지 않다. 더 많은 차이를 가진 팔레트를 만들려면 사용자들을 표로 정리해 보자. 만약 색맹이 아닌 일반 사람들을 위해 채도 변화를 이용한다면, 더 명확한 구분뿐만 아니라 시각적인 즐거움까지 줄 수 있을 것이다.

명도와 채도 모두 넓은 범위를 설정한다면 더 많은 데이터 종류에 대응할 수 있다.

법칙 2: 색상의 고유한 패턴을 이용하라

디자이너들이 알고 있는 비밀이 있다. 모든 색상이 다 똑같이 만들어지지는 않는다는 것이다. 순수하게 수학적인 관점에서는, 밝은 보라 - 어두운 노랑 그라디언트는 밝은 노랑 - 어두운 보라 그라디언트와 대략 비슷하게 느껴져야 한다. 하지만 아래의 첫 번째 예시가 두 번째 예시보다 더 자연스럽다는 것을 볼 수 있다.

첫번째 예시가 더 자연스럽다.

이 현상은 우리가 자연에서 볼 수 있는 그라디언트에 계속적으로 영향을 받았기 때문이다. 우리는 멋진 해 질 녘에서 밝은 노랑 - 어두운 보라 그라디언트를 볼 수 있다. 그러나 지구에서 자연적으로 밝은 보라 - 어두운 노랑 그라디언트를 볼 수 있는 곳은 없다.

Photos from Kyle Pearce, Wesley Fryer, and Jon Sullivan.

비슷한 예로, 밝은 녹색 - 짙은 파랑, 연노랑 - 진녹색, 진노랑 - 회색 등등이 있다

Photos from Kbh3rd, Ian Britton, and Jon Sullivan.

인간은 항상 자연적인 그라디언트를 봐왔기 때문에 이에 상응하는 색상 팔레트를 사용했을 때, 친숙하고 쾌적한 느낌을 받는다.

법칙 3: 고정된 색상 차트 대신 그라디언트에서 색상을 골라라

두 가지 다른 채도를 포함한 그라디언트 팔레트는 두 가지 장점이 있다. 2가지 색상이 필요하든 10가지 색상이 필요하든, 데이터 시각화에 필요한 모든 색상들을 이 그라디언트에서 추출할 수 있다. 이렇게 추출한 색상들은 자연스러울 뿐만 아니라, 충분히 넓은 범위의 채도와 명도를 가지고 있을 것이다.

그라디언트 사고방식으로의 전환은 쉽지 않은 일이다. 포토샵에서 그라디언트 위에 데이터의 구분점 단위에 해당하는 그리드 라인을 잡아놓고, 계속 테스트해보는 것이 좋은 시작점이 될 것이다. 완벽한 그라디언트를 만드는 과정에 대한 스냅샷이다.

보이는 것과 같이, 상단에 색상 팔레트와 그레이 스케일 그라디언트를 맞붙여 놓았다. 그라디언트 오버레이 값을 조정하면서 (나중에 정확한 코드 값을 얻을 수 있다) 데이터 포인트에 해당하는 색상을 선택하여 실제로 어떻게 보이는지 테스트해보았다.

우리의 색상 팔레트

실험 끝에 결과를 얻어내서 기쁘다. 실제로 사용하고 있는 몇 가지 색상 팔레트들이다. 명도 범위의 최대치를 활용하기 위해 모두 화이트에서 시작하여 블랙으로 끝난다.

색상 팔레트의 활용

(링크를 클릭해서 보는 것을 추천합니다. 통째로 임베드가 안되네요..)

https://www.graphiq.com/wlp/7tlO0gssSyN

http://conditions.healthgrove.com/l/1057/Type-2-Diabetes

http://celebrities.prettyfamous.com/l/256240/Jennifer-Lawrence#filmography&s=2r3CJF

요약

좋은 색상 팔레트들이 많이 만들어지고 있지만, 모든 팔레트가 데이터 시각화나 차트에 적절한 것은 아니다. 우리의 접근 방식은 자연에서 볼 수 있는 그라디언트의 채도와 명도를 최대한 넓게 활용하는 것이다. 이 방법을 통해 색맹인 사람들에게도 유용하고, 그렇지 않은 사람들에게도 명백한 데이터를 제공할 수 있으며, 다양한 데이터 경우의 수에 대응할 수 있다.