[ je 개발 공유 ] 데이터 시각화 (입문)

데이터 시각화 발표.pdf

2.05MB

 

 

 

  내가 만든 도메인들, 그리고 우리 회사 도메인들은 대부분 수집된 많은 양의 데이터를 활용해 사용자에게 의미 있는 정보를 전달한다. 그 과정에서, 기획에서는 "어떤 정보를 보여줄까?" 에 초점을 맞추게 되고 디자인에서는 "어떻게 정보를 보여줄까?" 를 고민하게 된다. 이번 L 프로젝트를 하면서 위의 두 가지 고민을 정말 많이 했으며, 특히 디자인 쪽은 우리 회사에서 전문가가 없기 때문에 더 큰 책임감을 갖고 고민했어야 했다. 이런 과정에서 데이터 시각화에 대한 공부를 해야겠다 생각했고 깊게 공부해 놓으면 프론트엔드 개발자 전문성의 한 분야로 나아갈 수 있을 것 같아서 관심 있게 공부했다. 공부 방법은 관련 전문 서적을 읽고 기록하는 방식이다. 그리고, 공부한 내용을 바탕으로 공유를 한 것이 위의 발표 자료다. 하이라이트 슬라이드만 몇 개 집어서 간단하게 정리하고자 한다. 

 

1. 데이터 시각화의 본질

 

  데이터 시각화에 있어서 가장 중요한 것은 하나의 정보를 직관적으로 제공하는 것이다. 여기에서 시사하는 바는 시각화된 하나의 자료에서 여러 정보를 담는 것은 인지 부하를 일으킨다. 디자인을 하다 보면 그런 경우가 진짜 많다. A 데이터와 T 데이터를 결합하면 X 라는 유의미한 정보를 알 수 있고, A 데이터와 R 데이터를 결합하면 Y 라는 유의미한 정보를 알 수 있다고 하자. 그러면 보통, 하나의 차트에 A 데이터, T 데이터, R 데이터를 모두 담아서 보여주는 것이 디자인하기도 편하고, 개발하기도 편하고, 이런 요구 사항도 많이 들어 온다. 하지만, 이런 방식은 사용자가 데이터를 직관적으로 이해하는 것이 아니라 한 번 계산을 해야한다. X 라는 정보를 얻기 위해서 R 데이터를 걷어 내고, A 와 T 에만 집중해야 하는 인지 부하가 발생한다. 

 

---

 

2. 빼고 강조하라

 

 

  하나의 정보만을 직관적으로 받아들일 수 있도록 빼고, 강조해야 한다. 위의 예시들은 책에서 나온 잘못된 생각들이다. 위의 생각들로 차트에 데이터를 덕지덕지 바르지 말자.

 

 

  여기에서 Data-ink Ratio 는 모든 데이터 시각화 책에서 심심하지 않게 볼 수 있는 이론이다.

 

 

  위의 3개의 차트 예시들을 보면, 첫 번째 차트에서는 데이터가 한 눈에 들어오지 않고, 두 번째 차트에서는 C회사의  데이터(회색 데이터)는 눈에 잘 들어오지 않지만 다른 데이터 파란색과 주황색이 눈에 확 띄어 동일한 레벨의 정보를 제공하고 있다 파악할 수 있다. 그러나 세 번째 데이터에서는 누가봐도 세 번째 C 회사의 데이터가 가장 중요한 정보라는 것을 직관적으로 알 수 있다. 여기에서 얘기하고 싶은 것은, 중요한 정보에만 잉크의 양을 많이 부여하고(채도가 높거나 눈에 띄는 색일수록 잉크를 많이 사용한다), 그렇지 않은 데이터는 잉크의 양을 적게 투자(회색 계열의 색상일수록 잉크를 적게 사용한다)

 

---

3. 적용하기 (예제)

  아래의 차트 예시들은, 내가 발표하기 위해서 직접 Mock 데이터를 만들고 시각화 해본 결과물이다.

 

3-1) 무미건조한 차트

 

  이런 차트가 있다고 해보자. 이 차트에서 직관적으로 정보를 얻을 수 있는가? 그렇지 않다. 굉장히 무미건조하다. 어떤 정보를 얻어야 할지 모르겠다. 이런 차트는 "불친절" 하고, 너무 다양한 정보들을 내포하고 있다. 나는 위의 차트들을 "어떤 정보를 제공해줄 것인가?" 에 맞춰서 새롭게 디자인해봤다. 

 

3-2) 제공할 정보가 분명한 차트

    이렇게만 해도, 어디에 초점을 맞춰야할지 분명하게 보인다. 딱 봐도, C 회사의 추이가 보이며 백그라운드에 깔리는 A 회사, B 회사 덕분에 현재 C 회사가 굉장히 높은 성장 추세를 보인다는 것을 한 눈에 알 수 있다.

 

 

 

 

  발표 자료에서도 얘기하지만, 꺾은 선 그래프는 추이를 표시할 때 사용된다. 하지만, 만약 양을 표시하고 싶다면 컬럼(바, 막대) 차트가 가장 좋다. 컬럼 차트는 반드시 0에서 시작해야 한다. 위의 차트를 만들어 나가는 과정은 발표 자료에 상세하게 적어 놨지만, 전할 정보에서 강조할 것만 강조하면 된다. 위의 차트를 보면 직관적으로 각 연도별로 가장 많은 판매량을 기록한 회사의 컬럼 색이 칠해지는 것을 알 수 있다. 그리고 그 컬럼 가까이에 수치가 있는데, 자연스럽게 그 수치가 그 컬럼의 정확한 데이터 값을 보여주고 있음을 직관적으로 알 수 있다. (이건, 게슈탈트 법칙의 "근접성의 법칙" 에 의한 결과다) 

 

 

 

  뒤에 음영(Plotbands)이 칠해진 곳에 눈이 확 가게 된다. 그리고, 자회사(B 회사)에만 잉크의 양이 많이 사용돼서 눈에 확 띈다. 또, X 축에 다른 연도들은 보여주지 않고, 시작점과 끝점(기간을 나타내는 X 축일 때는 시작하는 시간과 끝나는 시간을 명시하는 것이 좋다.), 그리고 우리가 보여주고 싶은 정보에 해당하는(B회사가 다른 회사에 비해 판매량이 저조할 때) 연도들만 보여준다. 

 

 

 

4.  결론

 

  결론에서 얘기하고 싶은 것은 "무엇을 보여줄 것인가?" 가 중요하다는 점이다. 이는 UX 에서도 중요한 부분이긴 하다.

 

  하나의 정보를 직관적으로 알 수 있는 100개의 차트를 그린다는 것은 좀 과장일 수 있다. 어느 정도의 타협은 필요할 수 있을진 모르겠으나 100개의 정보를 알 수 있는 하나의 차트와 비교해서 선택하자면 100개의 차트를 그리는 것이 더 낫다는 것이다.

 

  프론트엔드 개발자 입장에서는 그만큼 차트를 많이 그려야 하기 때문에 하나의 API 에서도 데이터를 잘 가공해 여러 차트로 보여줄 수 있도록 해야 한다. 실제로 모니터링 하는 페이지 하나의 디자인이 완전 바뀌게 됐는데, 원래는 두 개의 차트만 제공하던 것을 지금은 6~7개의 데이터를 보여주고 있고, 또 다른 페이지 기획할 때도 차트를 굉장히 많이 생산해내고 있다.