대시보드를 잘 만드는 방법

훌륭한 대시보드란?

우리는 데이터를 모니터링하고 인사이트를 얻기 위해 대시보드를 이용한다.

여러 채널과 다양한 곳에 흩어져 있는 정보들로 구성되는 대시보드는 때때로 레고를 조립해 하나의 판을 만드는 것처럼 느껴지기도 한다.

레고 조립을 잘 하기 위해 설명서를 보듯 대시보드를 잘 만들기 위해서 알아야 할것이 무엇이 있을까?

이번 기회에 한번 알아보자!!

1. 대시보드의 잠재 사용자 이해하기

"그들은 누구인가? 이 대시보드를 언제 보는가? 그 시점에 얼마나 피곤한지, 어떤 감정을 느끼는지 느낄 수 있을까? 우리의 대시보드를 얼마나 자주 보는가? 누구랑 보는가? 어디까지 공유하는가? 그 동료(혹은 상사)와는 얼마나 자주 소통하는가? 그들과 자주 나누는 데이터는 무엇이고, 공유하지 않는 데이터는 무엇인가?"

많은 디자인 아티클에서 자주 언급돼 뻔하게 느껴지지도 하는 '잠재 사용자'를 고려하는 것이다. 작은 디테일까지도 챙겨야 한다. 실제로 대시보드의 정보를 구성할 때 지켜야 할 우선순위, 대시보드 기능 개발 순서, 컨텐츠 레이블링 등이 '잠재 사용자'를 누구로 정의하는냐에 따라 전부 달라지기 때문이다.

2. 대시보드 목적과 활용 방식 결정하기

대시보드의 목적은 무엇일까요?

UX와 사용성 리서치 전문 기업인 닐슨 노먼 그룹에서도 이런 글을 다루고 있습니다. 예컨대 대시보드는 그 성격에 따라 다음과 같은 3가지 방식으로 나눌 수 있습니다. 우선 임원등 조직의 주요 의사결정자가 전체 데이터를 보는 전략형 대시보드(strategy company dashboard), 비상상황이나 이상치를 빠르게 인지하고 반응하도록 하는 작업형 대시보드(operational dashboard)가 있습니다. 그리고 트렌드를 이해하고 분석하는 분석형 대시보드(analytical dashboard)가 있습니다. 분석형 대시보드는 실무자가 이해하고 사용할 수 있는 데이터가 주로 사용됩니다.

앞서 살펴본 전략형, 작업형, 분석형 대시보드를 나누는 기준이 대시보드의 '목적'이라면, 대시보드와 사용자간의 상호작용을 기준으로도 대시보드를 나눌 수 있습니다. 모니터링, 인터랙티브 대시보드입니다. 사용자의 데이터 탐색 여부에 따라 모니터링과 인터랙티브 대시보드가 필요한지 여부가 달라지기도 합니다. 모니터링이 실시간으로 변하는 데이터를 장시간에 걸쳐 확인하는 경우라면, 인터랙티브 대시보드는 클릭, 내비게이션 등 데이터 탐색에 따라 정보 구조가 변할 수 있습니다.

따라서 어떤 목적을 주로 하느냐에 따라 대시보드에서 정보 탐색 방식이 완전히 달라지기도 합니다. 비상상황이나 이상치를 빠르게 인지하는게 목적이라면, 해당 이상치를 부각하는 디자인이 우선돼야 합니다. 반면, 탐색이 필요한 경우 부가 데이터를 확인하거나 탐색하는 인터랙션에 중점을 둡니다.

잠재적 사용자가 어떤 목적으로 대시보드를 사용할 것인지, 대시보드 존재의 목적을 정하는 단계에서는 사용자 여정을 통해 최종적으로 달성할 목표를 생각해보는 방법도 있습니다. 구체적으로 사용자가 최종적으로 구성할 보고서의 모양이나 인쇄 후 모양까지도 생각해볼 수 있습니다.

3. 정보 영역 구성하기

잠재 사용자의 특성을 이해하고, 대시보드의 목적을 명확히 정의했다면, 이제 정보 영역을 구성할 차례입니다.

데이터 구성시 메뉴, 탭, 차트 등을 활용할 수 있습니다. 사용자가 이해하기 쉬운 단위로 구성하면 인지적 부하가 출어들기 때문에 효과를 높일 수 있습니다. 탭이나 메뉴의 구성은 업무 순서를 따르는 게 좋습니다. 하나의 탭 안의 하위 레벨 탭을 만들 경우, 비슷한 목적을 가진 정보 영역끼리 그루핑이 잘 돼야 합니다. 가장 중요한 정보는 상단에 위치하는 것이 좋습니다.

구체적인 예시로 이해해 볼까요? 이커머스 매출에 관해 분석하는 대시보드라면, 이익 등의 순서로 가야 합니다. 해당 업무의 상태를 보여주는 차트/정보 영역은 5-6가지여야 합니다. 그리고 가장 중요한 3~4개의 KPI를 각 페이지 상단에 보여주는 것이 좋습니다.

또한 분석 기간에 대한 자유도를 제한해 이해도를 높일 필요가 있습니다. 예컨대 실시간 데이터와 월산 합게는 구분할 필요가 있습니다. 이 경우 정보 간 영역 구분이 명확해야 하는데, 필요하다면 빈 영역, 여백이 허용돼야 합니다.

한 페이지에 하나의 목적을, 빈칸을 두러워하지 마라.

기획 단계에서 가장 지키기 어려운 원칙은 "한 페이지에 하나의 목적을'과 "빈칸을 두려워하지 마라!"입니다.

기획을 하는 입장에서 가급적 많은 정보를 보여주고 싶은 욕심이 납니다. 그러나 많은 것을 늘어놓는 게 결코 좋은 것이 아닙니다. 너무 많은 정보를 단순히 늘어놓는다면, 정보 간의 위계가 잘 보이지 않아 오히려 어떤 정보도 볼 수 없게 되는 딜레마가 발생합니다. 따라서 이 단계에서 '어떤 정보를 포함시킬 것인가'는 종종 중요한 논쟁거리가 되곤 합니다.

4. 정보 표현 방식 결정하기

정보 영역을 구성한 뒤에는 정보의 표현 방식에 대하여 결정해야 합니다. 정보를 보여주는 차트뿐 아니라, 차트 테이블 간 인터랙션도 필요한 경우가 있습니다. 

1) 이 정보 영역에 차트를 사용할 것인가?

2) 차트를 쓰기로 했다면 어떤 차트를 쓸 것인가?

정보의 데이터 트렌드를 보여주고 싶다면 라인, 정보의 구성을 보여주고 싶은 경우 파이 차트, 순위를 보여주고 싶으면 바 차트 등

3) 차트 간의 이동이 있어야 한다면 어떤 인터랙션이 적합할까?

- 드릴 다운 : 동일한 차트에 대해 데이터의 층위를 다르게 설정함, 주밍(zooming)과 비슷함

- 드릴 스루 : 이 화면과 연관된 다른 정보나 다른 차트에서 정보 구성을 이해하는 방식

5. 시각적인 가독성 / 이해력 높이기

대시보드의 경우 다양한 정보를 한 곳에 표현하기 때문에, 이를 표현하는 방식에 따라 같은 정보라도 인지부하가 일어날 수 있다.

따라서 시각적인 가독성, 이해력을 높이기 위한 방안도 고려할 필요가 있다.

동일한 데이터를 활용할 경우 면적 (area)보다는 길이를 기준으로 한 시각화 차트, 3D보다는 2D차트가 직관적인 이해에 도움이 된다.

예컨대 닐슨 노먼 그룹에서 대시보드 솔루션을 분석한 결과, 성과를 표현하는 부채꼴 모양의 방식(1번항목)보다 막대로 표현하는 방식(2번항목)이 직관적이라고 한다. 이는 1과 같은 부채꼴 모양은 면적 외에도 '각도'라는 기준이 있어 데이터를 해석함에 있어 사용자에게 혼란을 줄 요소가 있기 때문이다. 하지만 2번과 같이 직선은 명확하게 '길이'라는 특징을 이용하기 때문에 이해하기 쉬운 요소라고 한다.

마찬가지로 3D로 이뤄진 차트는 면적뿐 아니라 높이가 더해져 혼란스럽지만, 2D차트는 길이만을 비교할 수 있으므로 명확하게 이해할 수 있다.

뿐만 아니라 거리감, 레이아웃, 색채 등도 데이터의 특징을 이해시키는 중요한 요소이다. 동일한 카테고리 속성을 갖는 데이터라면, 데이터를 구성하는 거리(proximity)와 형태를 이용해 데이터 안의 카테고리를 이해할 수 있도록 해야 한다.

컬러의 경우 특정 카테고리의 유무를 인지할 수 있을 만큼은 비슷해야 하지만, 카테고리 내의 항목을 서로 구분할 수 있을 정도로는 다르게 만들어야 한다. 색채를 활용한 완급 조절은 어려울 수 있기 때문에, 이는 보조적으로 사용된다고 한다.

#6. 결국 계속 만들고 테스트하고 고치기

지금까지 살펴본 5가지 원칙에 부합하는 대시보드를 한 번에 만드는 것을 불가능하다고 할 수 있다.

따라서 이 원칙에 부합하는 대시보드를 만들기 위해서는 사용자에게 보여주고, 의견을 받아들이고, 테스트하고 또 다시 수정하는 과정이 필요하다.

디자인 프로토타이핑을 테스트 할 경우, 핸드 스케치부터 와이어 프레임, 완성도 높은 인터랙션이 가능한 프로토타입까지 다양한 범위의 테스트를 할 수 있다. 가급적이면 자주, 주기적으로 피드백을 반영하는 것이 좋다.

대시보드는 목적에 따라 유형이 달라지고 활용 방식에 차이가 있을 수 있지만, 결국 궁극적인 목적은 데이터 내포하고 있는 의미를 찾기 위함이라고 할 수 있다. 그렇기 때문에 대시보드 속 정보가 잘 구성됐는지, 쉽게 활용할 수 있는 부가기능을 포함하고 있는지 등의 문제는 곧 데이터 인사이트를 효과적이고 효율적으로 도출할 수 있는냐의 문제로 이어진다.

이는 데이터를 활용하고자 하는 사람이라면 누구나 해결하고 싶은 문제이기도 한다. 여러분이 보고 있는 대시보드는 '좋은 대시보드'라고 할 수 있나요? 앞서 살펴본 6가지 원칙이 적용된 대시보드인지, 더 나은 대시보드를 위해 필요한 것은 무엇인지 생각하고 고민하고 개발해야 한다.

참고자료 : https://www.bloter.net/archives/311848