brunch

You can make anything
by writing

C.S.Lewis

by 프로토타입L Feb 20. 2017

데이터를 살리는 색을 찾는 법

데이터 시각화에서 색의 4가지 기능

데이터 시각화 - 평범한 막대 그래프에서 부터 지리적, 시간적 차원이 추가된 복잡한 그래픽까지 데이터를 시각적으로 표현한 모든 결과물 - 에서 색(Colour)은 중요한 시각적 요소로 쓰인다. 색을 사용하지 않은 그래프를 찾기 어려울 만큼 널리 사용된다. 그런데 색이 데이터와 데이터를 통해 전달하려는 메시지에 어떤 작용을 하는지 생각해 본 적이 있는가? 매일 아침 어떤 옷을 입을지 고민하고 또 그에 어울리는 신발과 가방을 고를 때처럼, 막대 그래프에 색을 더하기 전 잠시 멈추고 어떤 색이 가장 어울릴지 고민해 본 일이 있는가?

색이라는 것은 심미적 범주에 들어있어서 좋은 색, 나쁜 색이라는 것은 없을지 모른다. 하지만 그래프에서는 그것이 담고 (encode) 있는 것이 데이터이기 때문에 색상을 적용하는 것에 특별히 신경을 써야한다. 색 하나 잘못 사용함으로서 독자가 메시지를 이해하는 것을 방해하거나, 심지어 혼란에 빠뜨릴 수도 있다. 이 말은 반대로, 색을 사용할 때 조금만 정성을 기울이면 데이터 시각화를 통해 전달하고자 하는 바를 더 효과적으로 나타낼 수도 있다는 이야기이다. 색을 선택해야 하는 다른 모든 경우 와 마찬가지로, 데이터 시각화에서도 심미적인 요소가 중요하다. 그런데 '데이터'에 색을 입힐 때, 색은 수행해야 하는 뚜렷한 역할이 있다. 굳이 따지자면 데이터 시각화에서는 심미적 요소보다는 기능적 요소가 우선한다. 색의 역할을 이해하고, 그 역할을 수행하도록하는 기본적 규칙을 지킨다면 의도한 메시지를 전달하는데 색을 적절히 활용할 수 있을 것이다. 그래서 본 포스트는 데이터 시각화와 관련된 색의 4가지 주요 역할 또는 기능과 그와 관련된 규칙들에 대해 이야기하려고 한다.

1. 상황을 설정해 준다

데이터 시각화는 여러 시각적 요소로 이루어지는데, 크게 데이터 요소와 비데이터 요소 (또는 주요 요소와 부차적 요소) 이렇게 두 가지로 분류할 수 있다. 막대 그래프의 막대, 꺾은선 그래프의 선, 점산도의 점이 데이터 요소 (주요 요소)이다. 그리고 눈금, 레이블, 축 등은 비데이터 요소 (부차적 요소)이다. 이러한비데이터 요소는 주인공인 데이터 요소를 위한 '무대'를 만들어주는데, 그래서 '배경적/상황적 요소 (Contextual elements)'라고 부를 수도 있다. 무대로서 사용되는 비데이터 요소에는데이터가 묻히지 않도록, 너무 튀지 않으면서도 상황을 제시해주는 기능을 수행하는데 무리가 없는 색을 선택해야 한다. 아래 두 그래프를 비교해보자. 그림1b에서 처럼 배경은 흰색, 눈금과 레이블 등은 옅은 회색으로 처리할 때 주요 요소인 막대가 잘 드러난다.

그림1a. 배경 요소가 과도하게 부각된 경우, 그림1b. 배경 요소가 역할에 맞게 배경으로 물러난 경우

2. 수치를 나타낸다

색이 연속적으로 증가하거나 감소하는 수치적 척도(numerical scale)를 나타내는 경우, 한 가지 색상 (hue - 파랑, 빨강, 주황 등) 을 사용하여 명도를 조정하는 것이 가장 안전하고 신중한 선택이다. 일반적으로 밝은 색은 '적음', 어두운 색이 '많음'으로 해석되게 때문에 밝기를 조정함으로써 수치의 차이를 전달할 수 있다. 중요한 것은 밝기가 일정한 수준으로 달라져야 한다는 것이다. 그림2a와 b는 5개 숫자 bucket에 대응되는 5가지 색으로 이루어진 팔레트 두 가지를 비교하고 있다. 좌측 팔레트는 (인지되는) 밝기가 왼쪽에서 오른쪽으로 일정하게 증가하므로 좋은 색 구성이라고 할 수 있다. 반면, 우측 팔레트는 첫번째에서 두 번째 색으로 넘어갈 때 밝기 (또는 거리)의 증가분이 나머지 색들에 비해 확연히 적은 것으로 보인다.

그림2a. 인지적 거리가 모두 동일한 색조로 이루어진 팔레트, 그림2b 인지적 거리가 동일하지 않은 색조로 이루어진 팔레트

그림3a는 가상의 콜센터에서 직급과 결근일수 별로 고객 평가 점수를 평균내어 히트맵의 형태로 나타낸 것이다. 색조의 진하기로 각 셀의 고객 평가 점수의 평균값을 표현했다. 이렇게 밝기를 조정함으로써 한 가지 색으로도 무리없이 패턴을 읽을 수 있다. 그러나 데이터의 차이(variation)를 강조하고 싶은 경우 2-3 가지 색상을 사용하면 데이터 포인트 간의 차이점을 더 강하게 드러낼 수 있다. 그림3b는 같은 데이터를 여러 색상을 사용하여 나타낸 것이다. 그러나 두 가지 색상 이상을 조합해서 증가분이 일정한 색조(shade)를 찾아내는 일이란 쉽지 않다. 채도와 명도를 아주 세밀하게 조절해야 하기 때문이다. 다행인 것은 전문가들이 인터넷에 공유하는 다양한 툴을 사용하면 논리적이면서도 심미적으로 아름다운 팔레트를 구할 수 있다. 본 포스트 마지막 부분에 대표적 툴 몇 가지를 소개했다.

그림3a. 한 가지 색상의 색조를 사용한 히트맵, 그림3b. 여러 색상의 색조를 사용한 히트맵

한 가지 이상의 색을 사용해야 하는 또 다른 경우는 데이터 안에 분명한 구획점 (breakpoint)이 있어서 모든 데이터 포인트가 그 점 위 또는 아래에 위치하는 경우이다. 예를 들면 0을 기점으로 + 혹은 -로 표시되는 성장률, 평균이나 중간값 등의 기준점과 비교한 수치 등이다. 이런 경우에는 두 가지 색을 사용하는 것이 정석인데, 정중앙에 중립적 색을 배치하고 거기서 부터 왼쪽과 오른쪽 각각 다른 색을 사용하여 명도를 높여나가는 것이다. 예를 들면 그림4a에서는 고객 평가점수 평균이 5 이상인 경우는 파란 계열, 5 이하인 경우는 빨간 계열로 나타내고 있어서 5보다 높은 경우와 낮은 경우를 바로 알아볼 수 있다. 요즘 페이스북 등 SNS를 통해 여러가지 색 (무지개 팔레트)으로 칠해진 지도나 본 포스트에서 사용한 매트릭스 형태의 히트맵이 공유되고 있다. 보기에 예쁘고 또 눈길을 확 사로잡을지 모르지만, 많은 연구에서 여러 색을 사용한 팔레트는 한 두가지 색으로 구성된 팔레트에 비해 비효과적이라는 결론을 제시한다 (관련 논쟁에 관해 더 읽기). 그림4b에 알록달록한 무지개색을 입힌 예시를 만들어보았다. 이 히트맵을 보고 쉽게 패턴이나 variation 을 찾아낼 수 있었는지 각자 직접 한번 들여다보자.

그림4a. 두 개 색조가 중간 지점에서 갈라져 나오는 팔레트를 사용한 히트맵, 그림4b. 무지개 색상을 사용한 히트맵

일반적으로 '기능적'인 관점에서 보면, 세 가지 (어쩌면 두 가지) 이상의 색을 고려할 경우는 드물다고 볼 수 있다.

3. 그룹을 구별시킨다

색을 그룹을 지어주는데 사용하는 경우, 각 그룹을 대표하는 색들은 서로 구분이 잘 되어야 한다. 이 때 명도는 고정시키고 색상과 채도를 잘 조절하는 것이 중요하다. 색의 차이가 뜻하지 않게 어떤 순서나 관계를 암시하게 되는 결과를 피해야 한다. 가장 흔한 실수가 바로 화려한 형광색과 차분한 파스텔 계열의 색을 한 차트에 사용하는 것이다. 그림5가 바로 그런 예를 보여주는데, 밝은 형광 보라색 때문에 세 번째 막대가 본의 아니게 씬스틸러가 되었다.

그림 5. 강한 색 때문에 특정 카테고리(시추)가 misleadingly 강조되었다

그런데 어떤 경우에는 카테고리가 순서를 내포하기도 한다. 세일즈 딜 상황, 성적 등급 등이 그 예로, 이러한 데이터를 ordinal data라고 부른다. 이런 경우 카테고리 개수만 따져서 아무 색이나 넣는 것 보다는, 내포된 순서나 진행 단계가 드러나도록 하는 편이 직관적 이해를 돕는다. 아래에 세 개의 그래프를 비교하여 나열했는데, 그림6c에 교육단계의 순서에 대응되도록 색조를 조절한 정성이 엿보이며, 이러한 정성이 더 좋은 그래프를 만든다.

그림6a. 4개의 카테고리에 4가지 임의의 색을 선택함, 그림6b. 색조와 각 카테고리가 직관과 반대로 대응됨, 그림6c. 색조와 각 카테고리가 논리적으로 대응됨

차트의 종류도 색 사용에 영향을 준다. 점산도와같이 데이터 포인트를 작은 점으로 표현하는 경우 은은한 색 구성을 사용하는 것은 적절하지 않다. 아래두 점산도는 옅은 색과 짙은 색으로 데이터를 레이블한 경우를 비교하고 있다. 그림 7a에서 처럼 산점도에서는 데이터가 아주 작은 점으로 표현되기 때문에 옅은 색을 사용하면 대략 트렌드나 클러스터는알아볼 수 있어도 레이블하는 측면에서 그 기능을 다 하지 못한다. 반대로 상대적으로 큰 도형이 사용되는 막대 그래프나 면적 그래프를 사용하는 경우에는 너무 강한 색상을 고르는 것은 보기에 불편할 수 있다.

그림7a. 옅은 색으로 레이블 된 점산도, 그림7b. 짙은 색으로 레이블 된 점산도

여기서 그룹을 위한 색 선택에 관해 개수에 관한 언급을 간략히 해야할 것 같다. 우리의 인지 능력에 제한이 있기 때문에, 한번에 보여줄 수 있는 카테고리의 수와 그에 대응되는 색의 수는 대략 최대 10-12개이다. 실제로는 그보다 적을 것이다. 만약에 그 이상의 카테고리를 레이블해야 하는 경우, 색 이라는 한 가지 시각적 신호에 의존하는 것은 효과적이지 않으므로, 패턴 등 다른 시각적 신호를 함께 사용하거나, 텍스트로 직접 레이블하는 방법을 써야할 것이다.

4. 의미와 감정을 더해준다

일반적인 색의 이론이 데이터 시각화에도 동일하게 적용된다. 문화권에 따라, 또 구체적인 상황에 따라 다른 의미와 감정을 나타내는 경우가 많긴 하다. 그렇지만 더 효과적으로 데이터를 나타낼 수 있는 색을 찾을 수 있는 여지는 충분히 있다. 그림8이 바로 대표적인 사례이다. 연간 온도 변화를 히트맵으로 표현했는데, 낮은 온도는 차가운 색상을, 높은 온도는 따뜻한 색상을 사용함으로서 범례를 읽지 않아도 이 그림이 무언가 온도에 관련된 것이라는 직관적으로 알아차릴 수 있도록 한다. 특히 이 차트는 여러 색상으로 조합된 팔레트가 바람직하게 사용된 사례이기도 하다 (위에서 본 '그림 4b'와 비교해보자). 만일 Green-Purple 등 다른 색조합을 사용했더라면 데이터의 양적 의미는 전달할 수 있겠지만 질적 의미 ('온도'라는 주제) 까지 적극적으로 전달하지는 못했을 것이다. 이러한 의미론적인 접근이 데이터 시각화 결과물에 설득력을 더해준다고 생각한다.

그림8. 1년 동안의 온도변화를 나타낸 히트맵 (출처: Climate visualization with Matlab)

자 그러면 지금까지 살펴본 원칙들을 바탕으로 앞으로 색을 효과적으로 사용해보기 위해 맨손으로 컬러 팔레트를 만들어야 하느냐. 그럴 수도 있지만, 그러려면 많은 공부가 필요하고 시행착오를 겪어야 할 것이다. 그러니 그러한 과정을 생략하고 전문가들의 공로에 기대어보도록 하자. ColorBrewer2는 바로 쓸 수 있는 다양한 팔레트를 제공하는데 색맹인 사람을 위한 팔레트도 찾을 수 있다. 직접 실험해 보고 자신만의 팔레트를 만들고 싶다면 Categorical 이나 I Want Hue (http://tools.medialab.sciences-po.fr/iwanthue/) 를 추천한다 - 색에 대한 이론적, 기술적 지식이 좀 필요하다. Movies in color 는 데이터 시각화나 정보 디자인 전용은 아니지만 범주형 데이터를 위한 색 구성시에 참조가 될 수 있을 것이다.

서두에 언급했듯 좋은 색과 나쁜 색이라는 것은 없을지 모르지만, 데이터에 칠해지는 색은 데이터를 죽이기도 살리기도 한다. 그러니 색을 고르는데 심혈을 반드시 기울여야 하지 않겠는가. 데이터를 살리는 좋은 색을 고르는데 본 포스트가 도움이 되었길 바란다. 혹 시간이 된다면 전에 만들었던 차트를 다시 꺼내서 색이 제 기능을 잘 했는지 점검해보는 것도 좋겠다.

본 포스트는 'Understanding the functions of colour in data visualisation'이라는 제목으로 지난 1월 회사 블로그에 기고한 글을 번역 및 수정한 것이다.

keyword