많은 양의 데이터를 시각적으로 표현할 때는 보는 사람으로 하여금 데이터를 쉽게 인식할 수 있도록 디자인하는 게 중요합니다. 똑같은 데이터를 가지고 시각화 작업을 하더라도 데이터를 구성하고 있는 요소들의 크기, 모양, 그림자, 컬러에 따라서 전혀 다른 느낌을 전달 할 수 있습니다.

컬러

오늘은 위에서 언급한 많은 요소들 중에 컬러에 대해 이야기 해보려고 합니다

위 그림은 Nathan Yau의 One Dataset, Visualized 25 Ways(원문)라는 포스트입니다. 전부 다른 그래프 같지만, 아래 그래프를 구성하고 있는 데이터는 모두 동일합니다. 한 가지 데이터 세트로 25가지 다른 그래프를 그린 것 입니다. 천천히 보시면 아시겠지만 컬러의 존재 유무가 그래프의 가시성에 많은 영향을 끼칩니다.

한가지 데이터 세트를 가지고 여러 방법으로 표현할 수 있습니다.

그런데 많은 디자이너들이 데이터 시각화 작업을 할 때 UI나 프린트 작업용 색상 팔레트를 이용해서 데이터 시각화 작업을 진행합니다. 특히 데이터의 성격을 고려하지 않고 Flat UI 디자인 컬러를 주로 사용하는데 디자이너들은 반드시 데이터 소스의 성격과 특성을 고려해서 디자인 의도에 맞는 컬러를 선택해야 합니다.

데이터의 성격과는 무관한 디자이너의 눈길을 끌만한 컬러 팔레트 입니다.

기존의 색상 팔레트를 수정하지 않고 곧바로 사용하면 몇 가지 문제가 발생할 수 있습니다.

첫 번째는 다양한 데이터 경우의 수를 모두 표현할 만큼 팔레트 색상이 충분하지 않아서 우리가 나타내고자 하는 정보를 제대로 표현하지 못하는 경우 입니다. 우리는 빅데이터의 세상에서 살고 있습니다. 현재 우리는 생각하는 것보다 데이터와 빠르게 연결되고 있는 중입니다. 이렇게 축적된 데이터를 효율적으로 시각화하기 위해서는 디자이너의 의도에 따라 섬세하게 분류된 많은 컬러가 필요합니다.

우리가 표현해야 할 데이터는 이렇게 끝없이 펼쳐져 있을 수 도 있습니다.

두 번째는 컬러들이 구분이 잘 되지 않는다는 점입니다. 컬러를 사용할 때 데이터를 보는 사람으로 하여금 얼핏 봐도 쉽게 구분할 수 있는 컬러를 사용하는 게 좋은데 웹 상의 대부분의 컬러 팔레트는 밝기의 변화가 충분하지 않아서 대부분 한눈에 구분되지가 않습니다. 그런데 많은 양의 데이터를 표현하기 위해서 밝기가 비슷한 여러 가지 컬러를 한꺼번에 사용한다면 컬러가 더욱 구분이 안돼서 데이터를 해석하는데 큰 어려움이 생길 것입니다. 컬러 구분이 잘 되지 않는 이 컬러 팔레트를 수정하지 않고 그대로 데이터 디자인에 적용했다가는 색맹인 사람들은 디자이너의 의도대로 데이터를 받아들일 시도 조차 못할 것입니다.

그렇다면 데이터 시각화 작업에 적합한 컬러는 어떻게 선택해야 할까요? 데이터 시각화에 적합한 색상 팔레트를 만들기 위한 팁을 알려드리겠습니다.

데이터 시각화 작업에 사용되는 컬러들은 데이터를 모두 표현할 수 있을 만큼 충분한 명도와 데이터를 잘 구분할 수 있도록 채도의 범위를 확실하게 구분되어야 하는데요. 개인적으로는 Colorbrewer와 Chroma.js Color Scale Helper를 추천드립니다.

두 사이트 모두 디자이너가 설정을 통해 데이터의 성격에 맞는 자신의 의도를 반영한 컬러를 추출할 수 있게 해줌으로서 데이터 시각화 작업에 앞서 컬러를 선택하는데 도움을 줄 수 있습니다.

정확한 데이터를 전달하기 위한 컬러 팔레트 설정

딱딱하고 복잡한 빅데이터와 사람들에게 감정적으로 반응을 일으킬 수 있는 컬러의 만남은 예술과 과학을 만나게 함으로써 데이터를 읽는 사람들에게 차가운 숫자들을 더욱 매력적으로 가공해줄 것입니다. 이를 통해 데이터를 읽는 사람은 기능적으로나 미학적으로 더 흥미를 가지고 데이터를 바라보고 이해할 수 있을 것입니다.