[The Art of Data] 3회 데이터에 색을 더하자: 데이터 시각화와 색채학

송한나의 THE ART OF DATA (3회)

데이터에 색을 더하자: 데이터 시각화와 색채학

데이터 시각화를 할 때 많은 사람들이 어떻게 색을 골라야 할지 모르겠다고 어려워합니다. 오피스 프로그램의 차트 기능처럼 이미 템플릿이 주어지고 데이터만 추가하면 되는 상황에서는 크게 걱정할 것이 없습니다. 하지만 내 입맛에 꼭 맞는 데이터 시각화 도구를 찾지 못했다면 직접 라이브러리나 프로그램을 이용하여 만들어야 합니다. 이럴 때 똑같은 모양의 차트인데도 때때로 내가 만든 시각화는 뭔가 부조화해보이는 반면 디자이너가 만든 시각화는 왠지 모르게 더 좋아 보이곤 합니다. 이 문제는 많은 경우 적절한 색상을 골라서 배색하는 것만으로 금새 해결되곤 합니다. 색을 다루는 능력은 분명 감각이 필요하지만 훈련에 의해서도 향상될 수 있는 능력입니다. 이번 시간에는 데이터 시각화에서 색을 선택하는 데 도움이 되는 색채학 지식과 배색의 원리를 알아보겠습니다.

데이터 시각화에서 색채의 역할

데이터 시각화에서 색채는 어떤 역할을 할까요? 당연히 보기 좋은 색상을 선택하면 결과물이 더 예쁘게 보입니다. 그러나 색상은 단순히 데이터 시각화의 심미성을 높이는 것 이상의 기능을 담당합니다. 클리블랜드와 맥길(Cleveland and McGill, 1986)의 기초 지각 실험 결과를 살펴보면, 색은 데이터 값의 차이를 표시하는데 매우 중요한 역할을 하는 요소임을 알 수 있습니다. 데이터의 특성에 따라 색으로 구별하는 것이 좋을 때도 있고 그렇지 않을 때도 있습니다. 기본적으로 어떤 유형이든 데이터 값을 표현할 때 가장 좋은 방법은 위치(Position)에 차이를 두어 구별하는 것입니다. 그러나 위치 이외의 다른 요소들에 있어서는 데이터의 특성에 따라 조금씩 순위가 달라집니다. 실험 결과에 따르면, 명명(Nominal) 데이터에서는 색상(Color Hue)이 위치 다음으로 가장 좋은 방법이고, 순서(Ordinal) 데이터에서는 채도(Color Saturation)가 위치와 밀도 다음으로 좋은 방법입니다. 즉 범주가 다른 데이터는 서로 다른 색상으로 구분하고, 순서가 있는 데이터는 채도의 변화로 표현하는 것이 효과적입니다. 그러나 정량(Quantitative) 데이터에서는 색으로 데이터를 표현하는 것이 별로 좋은 방법이 아닙니다. 색채는 시각화를 아름답게 만들어주는 동시에, 데이터 유형에 따라 데이터 값을 표현하는 데 중요한 역할을 담당하는 기능적 요소입니다.

[그림 1] 클리블랜드와 맥길의 기초 지각 실험

색채학의 기본 용어

색채에 대한 여러분의 이해를 돕기 위해, 간단히 색채학의 기본 용어를 살펴보겠습니다. 색채(Color)는 색상(Hue), 명도(Brightness), 채도(Saturation)라는 세 가지 요소로 구성됩니다. 색상은 무지개색처럼 서로 다른 주파수 대역에 있어 서로 구별되는 색을 말합니다. 흔히 색상환에서 보이는 빨.주.노.초.파.남.보 색깔을 생각하면 됩니다. 명도는 색상이 밝고 어두운 정도를 말하고, 채도는 색상이 맑고 탁한 정도를 말합니다. 때때로 명도와 채도의 개념을 구분하기 어려워하는 분도 있습니다만, 아래의 그림을 보면 두 용어의 차이를 이해하는 데 도움이 될 것입니다.

[그림 2] 색상의 3요소: 색상, 명도, 채도

색은 색상, 명도, 채도의 세 가지 요소가 조합됨으로써 매우 다채로워집니다. 흑백 사진을 보는 경우가 아니라면 거의 대부분의 색채는 색상, 명도, 채도 각각에 대해 특정한 값을 갖습니다. 색 체계를 구조화하여 표현하는 컬러 시스템 중에서 유명한 것이 먼셀의 컬러시스템입니다. 색상, 명도, 채도의 3가지 축을 조합하여 만들어지는 색채들로 구성된 색 입체를 활용해 체계적으로 다양한 색채를 조합할 수 있습니다.

[그림 3] 먼셀의 컬러시스템

우리가 쓸 수 있는 색이 얼마나 다양한지 알게 되었으니 이제 데이터 시각화에 화려한 색들을 마음껏 써서 멋지게 만들어보고 싶다는 마음이 듭니다. 하지만 색이 무조건 많다고 해서 꼭 좋은 것만은 아닙니다. 색이 너무 많으면 어떻게 색을 골라야 할지 오히려 더 난감해지기 쉽습니다. 이럴 때 알아두면 좋은 지식이 배색의 원리입니다. 색상환에 빙 둘러있는 색들 중에서 어느 위치에 있는 것끼리 조합하느냐에 따라 느낌이 크게 달라집니다. 색상 중에서 가장 기본이 되는 빨강, 파랑, 노랑을 지칭하는 삼원색을 일차색(primary color)이라고 부릅니다. 일차색끼리 섞은 색을 이차색(secondary color)이라고 합니다. 색상환에서 찾아보면 빨강과 노랑을 섞은 주황색, 파랑과 노랑을 섞은 녹색, 파랑과 빨강을 섞은 보라색인 것을 알 수 있습니다.

두 가지 이상의 색끼리 배색할 때, 색상환의 정반대편에 위치하는 보색(complementary color)끼리 조합하거나 일차색끼리 조합하면 매우 강렬한 인상을 주는 반면 잘 어울리지 않는 경우가 많으므로 사용에 주의하는 것이 좋습니다. 그러나 보색 관계이지만 정반대가 아닌 이차색 위치에 있는 색끼리 조합하는 분할-보색(split-complementary color)은 비교적 잘 어울리는 경우가 많습니다. 또는 인접한 색끼리 배색하는 유사색(analogous color)의 조합은 대부분 잘 어울리지만, 색이 서로 잘 구분되어야 하는 범주형 데이터에 적용할 때에는 주의하여 사용해야 합니다. 그리고 앞의 실험에서 살펴본 것처럼 동일한 색상에서 명도만을 변화시키는 단색조(monochrome) 배색은 순서형 데이터에 적용하기에 좋습니다.

[그림 4] 색상환의 혼합색과 배색의 종류

데이터 유형에 따른 색채 배합

데이터 시각화에서 많이 쓰이는 몇 가지 색채 배합(color scheme) 방식이 있습니다. 흔히 쓰이는 유형으로 데이터 타입에 따라 분기형 배합(Diverging Scheme), 순차형 배합(Sequential Scheme), 분광형 배합(Spectral Scheme), 정성형 배합(Qualitative Scheme)이 있습니다. 분기형 배합은 중심점에서 양쪽 끝으로 변화하는 데이터를 표현할 때 적합합니다. 예를 들면 영점을 기준으로 양의 값과 음의 값을 표현할 때 쓰일 수 있습니다. 순차형 배합은 한쪽 끝에서 다른 쪽 끝으로 변화하는 값을 표현할 때 적합합니다. 지형의 고도와 같이 단계적으로 변하는 데이터를 표현할 때 유용배열된 데이터를 표현할 때 적합합니다. 정성형 배합은 서로 중복되지 않고 잘 구별되어 보이는 색들로 구성되어 범주형 데이터를 표현할 때 적합합니다.

[그림 5] 데이터시각화에 쓰이는 색채 배합-분기형-순차형-분광형-정성형 배합의 예

데이터 시각화에서 같은 데이터라도 어떤 색채 배합으로 시각화 하느냐에 따라 전달되는 의미가 달라지기도 합니다. 아래 그림에 보이는 세 개의 차트는 모두 동일한 데이터 값을 표시하고 있습니다. 그러나 첫번째 차트는 정성형 배합을 사용함으로써 각 범주에 따른 데이터 값의 차이가 부각되고 있습니다. 반면 두번째 차트는 분기형 배합을 사용함으로써 데이터 값이 양끝으로 갈수록 다른 특성을 갖는 것처럼 보입니다. 세번째 차트는 분기형이면서 한쪽 끝을 무채색으로 처리하여 붉은색으로 처리된 부분을 강조하고 있습니다. 이처럼 어떤 색채 배합을 사용하느냐에 따라 데이터 시각화의 주요 메시지가 바뀔 수도 있기에 목적에 맞는 색채 배합을 적절히 선택하는 것이 중요합니다.

[그림 6] 데이터 시각화의 목적에 맞는 색채 배합의 선택

시각화 라이브러리에서 색채 배합의 적용

데이터 시각화 라이브러리를 이용하여 직접 차트를 만들 때 색채 배합을 어떻게 적용할 수 있을까요. 웹 기반으로 동작하는 데이터 시각화의 제작에 가장 많이 쓰이는 라이브러리인 D3.js의 예를 통해 어떻게 색채 배합을 적용하는지 알아보겠습니다. D3.js에는 기본으로 내장된 몇 가지 색채 배합이 있어서 간단한 함수로 쉽게 색상을 지정할 수 있습니다. 다음의 코드에서 살펴볼 수 있듯이 척도를 다루는 scale() 함수에서 category10()을 불러오면 서로 다른 10개의 색으로 구성된 정성형 색채 배합을 적용할 수 있습니다.

항목이 10개 이상인 경우라면 category20()을 불러와서 20개의 색채 배합을 사용할 수 있습니다. 이외에도 category20b()와 category20c() 함수를 사용하면 조금씩 다른 색상으로 만들어진 색채 배합을 적용할 수 있습니다. 각 함수를 적용한 파이 차트의 예를 보면 색채 배합에 따른 차이를 확인할 수 있습니다.

[그림 7] D3.js에 내장된 색채 배합의 예

색채 배합에 따라 원하는 색을 직접 선택하고 싶다면 ColorBrewer2 사이트를 이용하면 좋습니다. 분기형 배합, 순차형 배합, 정성형 배합 중에서 어떤 배합으로 구성할지, 어떤 색으로 선택하고 몇 개의 클래스로 구성할지도 선택할 수 있습니다. 또한 지도 형태의 예시를 보며 선택한 배색이 어떻게 보이는지도 실시간으로 확인할 수 있고, 선택된 색채 배합의 색상값을 HEX, RGB, CMYK로 내보낼 수 있습니다.

[그림 8] ColorBrewer2에서 색채 배합 선택하기

이렇게 생성된 색상 코드를 직접 복사하지 않고 사용할 수 있는 방법도 있습니다. D3.js와 같은 시각화 라이브러리에서는 ColorBrewer2의 색채 배합의 이름을 가져와서 적용할 수 있는 함수를 제공합니다. 아래의 코드에서 보이는 것처럼 scale() 함수에서 range()를 설정할 때 colorbrewer의 색채 배합 이름을 지정해줍니다.

어떤 색채 배합을 사용하는지는 미리 약속된 규칙으로 간단히 알 수 있습니다. 예를 들면 RdBu[6]은 붉은색과 푸른색으로 구성된 분기형 색채 배합을 6개의 색상으로 구현한다는 뜻입니다. 마찬가지로 PiYG는 핑크색과 녹색으로, PRGn은 보라색과 녹색으로, Greys는 회색으로 구성된 컬러 배합을 뜻합니다. 실제 차트가 어떻게 보이는지 다음의 그림에서 확인할 수 있습니다.

[그림 9] D3.js에서 제공하는 ColorBrewer 색채 배합

색채의 의미를 고려한 데이터 스토리텔링

데이터에 따라 적절한 색채 배합을 선택하는 것으로 데이터 시각화의 기본적인 목적은 달성할 수 있습니다. 여기서 한 가지 더 고려할 점은 색채는 특정한 이미지를 연상시킬 뿐 아니라, 문화권에 따라서 같은 색채가 다른 상징을 갖기도 한다는 점입니다. 데이터가 무엇에 관한 것인지에 따라 적절한 색채의 기준이 달라질 수 있습니다. 문화권에 따른 색상의 의미를 보여주는 다음의 시각화를 살펴봅시다. 예를 들어 용기(courage)는 서구문화에서는 빨간색으로, 일본문화에서는 노란색으로, 힌두문화에서는 주황색으로 인식됩니다. 한편 죽음(death)은 서구문화와 일본문화에서는 검정색으로, 힌두문화와 아시아문화에서는 흰색으로, 무슬림 문화에서는 회색으로, 남미문화에서는 녹색으로 인식됩니다. 이처럼 무심코 선택한 색상이 자칫 주제와 전혀 다른 의미를 전달하게 될 수도 있기에 색채 배합을 선택할 때 색상의 문화적 상징을 고려할 필요가 있습니다.

[그림 10] 색상의 문화적 의미

고유 색상과 강하게 연결된 특정한 대상을 시각화할 때도 있습니다. 예를 들어 코카콜라에 대한 데이터 시각화를 한다면 파란색보다는 빨간색으로 표현하는 것이 더 적절할 것입니다. 또한 그 대상이 자연물이라면 본래의 색상에 가능한 가깝게 표현하는 것이 내용의 전달에 도움이 될 것입니다. 커피 제조법에 관한 데이터 시각화를 만든다면 커피는 갈색으로, 우유는 흰색으로, 물은 푸른색으로 표현한다면 색상만으로도 한눈에 내용을 파악하기 쉬워집니다. 적절한 데이터 스토리텔링을 하기 위해서는 이처럼 데이터의 속성뿐 아니라 색상의 의미까지 고려하여 색을 선택하는 것이 좋습니다.

[그림 11] 고유 색상의 활용

색채 배합의 적용

색채 배합은 색채학 교과서에서만 볼 수 있는 내용이 아니라 실제로 데이터 시각화에 흔히 적용되는 방법입니다. 아래의 그림에서 볼 수 있듯이, 뉴욕에서 플리커(주황색)와 트위터(파란색)의 사용량을 표시한 히트맵 지도에 분기형 색채 배합을 사용하고 있는데 색상만으로 어느 지역에서 특정 활동이 더 많은지 한눈에 비교할 수 있습니다. 다음으로 트위터 직원 140명의 트윗을 계정 생성일 순서로 연결한 아크 다이어그램에서는 분광형 색채 배합이 사용되어 차례로 배열된 각 노드의 연결 관계를 표시하고 있습니다. 이처럼 색채는 데이터의 의미를 더 직관적으로 전달하도록 할 뿐 아니라 데이터 시각화의 첫인상에서 결코 빼놓을 수 없는 중요한 요소입니다.

[그림 12] 분기형 색채 배합의 예(좌) [그림 13] 분광형 색채 배합의 예(우)

지금까지 색채학의 기본 용어부터 시작해서 데이터 시각화에서 유용하게 쓰이는 컬러 배합의 유형에는 어떤 것들이 있는지, 시각화 라이브러리에서 어떻게 활용할 수 있는지 간단히 살펴보았습니다. 또한 데이터 시각화에서 전달하려는 메시지가 무엇인지에 따라서 문화적인 의미를 고려함으로써 더 효과적인 스토리텔링이 가능함을 살펴보았습니다. 색채학 이론이 데이터 시각화에서 실제로 어떻게 적용되는지 사례를 통해 살펴보니 이제 나도 멋진 시각화를 만들 수 있겠다는 의욕이 솟아나는 것 같습니다. 감각은 이론적 지식만으로 얻어지지 않기에 처음부터 원하는 결과를 얻지 못할 수도 있습니다. 하지만 조금만 더 관심을 기울이고 좋은 사례들을 보며 따라해보고 연습하면 누구나 디자이너 못지 않은 멋진 데이터 시각화를 만들 수 있을 것입니다. (다음 회에 계속)

이 칼럼은 디비가이드에 연재한 [송한나의 The Art of Data]를 전재한 것입니다. 원문보기>

출처 : 한국데이터진흥원

제공 : 데이터 전문가 지식포털 DBguide.net

#datavisualization #theartofdata