brunch

You can make anything
by writing

C.S.Lewis

by 매일IT IN Nov 09. 2020

대시보드 설계:직관적인 대시보드 만드는 비법 대공개-1

좋은 대시보드란 어떤 내용을 주의해야 할까요? 놓쳐서는 안될 꿀팁 봅시다

안녕하세요, 매일 IT IN 입니다. 

이번 시간에는 ' 대시보드( Dashboard)' 란 주제로 일련 포스팅을 하려고 합니다. 초보자나 경험자에게 이 포스트를 통해 Dahboard에 대한 전첵적인 인식과 제작법을 알려주시고 도움이 주시면 좋겠습니다. 


오늘 포스텡에서는 <Dashboard란 무엇인가? 그리고 Dashboard를 제작할때, 어떻게 디자인할까>에 관련 내용을 살펴보겠습니다. 다음 시간에는 " 10분안에 초보자가 대시보드를 만드는 방법"에 대한 내용을 올릴 예정입니다. 놓쳐서는 안될 꿀팁! 지금 시작합시다!


1. 먼저, 대시보드( Dashboard ) 란?


대시보드는 이벤트를 모니터링하고, 결정을 내리며, 다른 사람에게 정보를 제공하고, 추세를 볼 수 있는 공간 정보와 데이터를 보여줍니다. 대시보드는 하나의 화면에서 서로 연동되는 여러 시각화를 표시하도록 설계되었습니다. 데이터에 대한 포괄적인 뷰를 통해 중요한 의사결정 정보를 한눈에 파악할 수 있습니다.


2. 대시보드의 역할은?


빅데이터 활용이 중요해지는 최근 트렌드에서 빅 스크린의 데이터 시각화는 감탄하는 대화형 디스플레이 모드가 되었습니다.디스플레이의 역할은 정보를 여기저기 뿌려놓는 것이 아닙니다. 여러 정보들로 구성되어 있는 대시보드 는 한 눈에 이해하고 파악하기 쉬운 직관적인 구성을 가지고 있어야 합니다. 대시보드를 통해 핵심 정보를 빠르게 전달 할 수 있다면, 의사결정에 큰 도움이 될 것입니다.


리포팅 툴을 사용하여 빅 스크린 디스플레이를 쉽게 구성할 수도 있다는 것을 알고 계십니까? 단일 보고서 또는 다중 인터렉티브 보고서의 대시보드 레이아웃 구성을 통해 하나의 빅 스크린 디스플레이를 구성하거나, 보고서의 여러 페이지 레이아웃을 통해 빅 스크린을 구현할 수 있습니다. 그렇다면 어떻게 직관적이면서도 강력한 대시보드를 디자인 할 수 있을까요?


아래 그림은 스티븐 리프먼트(Stephen Few)가 2012년 대시보드 그래픽 디자인 공모전에서 등한 우수한 대시보드의 특징입니다.


여러분의 대시보드는 몇 점 입니까? �


아래는 파인리포트(FineReport)를 사용하여 대시보드를 설계할 때 고려하는 몇 가지 요소입니다. 이를 통해 대시보드 구성의 원칙과 공통점을 정리해보겠습니다.


3. 좋은 대시보드 는 어떻게 만들까요? 어떤 기준으로 평가해야 할까요?


Step1: 대시보드 Dashboard의 사용자는 누구인가?

“누가 이 대시보드 를 보는가?” -바로 이 대시보드의 사용자입니다. 사용자를 이해하면 표시할 KPI와 데이터의 논리적 분해를 파악하는 데 도움이 될 것입니다. 대부분 경우에 대시보드 는 리더십 관리를 위한 것이므로 운영 수준에서 더 많은 운영 지표를 보여주는 것을 목적으로 합니다.


Step2: 대시보드 Dashboard의 레이아웃 디자인

사람들은 위에서 아래로 읽는 것에 익숙해져 있고, 중간 위치에 주목합니다. 그러므로 중요한 내용은 상단이나 중앙에 배치해야 합니다. 아래와 같이 중요한 지표 정보를 이 페이지 상단에 직접 표시할 수 있습니다. 이 레이아웃은 많은 보고서시스템에서 가장 인기 있는 레이아웃입니다. 전체적인 숫자 지표는 한눈에 알아볼 수 있으므로, 사용자가 몇 초 만에 데이터속의 인사이트를 파악할 수 있을 것입니다.

대시보드 레이아웃 출처: 파인리포트


Step3: 대시보드 의 배경

대시보드 화면의 배경색이 어두운 경우(파란색, 청녹색, 검은색)에는 빅 스크린에 배치하면 더 큰 주목도를 가질 수 있습니다. 동시에 내용을 보다 명확히 표시하기 위해서는 문구와 배경의 색 대비가 커야 합니다. 어두운 톤의 배경을 사용한다면, 텍스트는 밝고 눈에 띄는 색깔을 고르는 것이 좋습니다.

대시보드 템플릿 출처: 파인리포트 솔루션


배경 이미지 사용도 좋은 선택이 될 수 있습니다. 예를 들어 아래 두 개의 이미지와 같이 어두운 톤의 배경 이미지를 사용함으로써, 테크니컬한 느낌을 표현할 수도 있습니다.


Step4: 색 구성

아래는 인터넷에서 쉽게 찾아볼 수 있는 일반적인 색 구성표들입니다. 또한 FineReport 내부에서 지원하는 색상표를 사용할 수도 있습니다. 색 구성을 먼저 정한 다음, 통일성있게 대시보드를 구성하는 것도 깔끔하고 주목도 있는 화면 구성에 중요한 부분입니다.

FineReport는 많은 아름다운 색깔 시안을 가지고 있습니다.

특정 RGB 값은 색깔 선택 소프트웨어를 통해 얻을 수 있습니다. 인터넷에는 다양한 자료가 있습니다.


Step5: 대시보드 시각화 그래픽

ECharts, D3.js, Highcharts와 같은 그래픽 기법을 사용하여 히스토그램(histograms)이나 선형 차트 같은 차트를 제작함으로써 사용자들은 대시보드의 핵심 데이터를 더 명확하게 표시할 수 있습니다.


Step6: 동적 대시보드 효과

완벽한 대시보드는 사용자 대화형 특성을 가지고 있습니다. 동적인 대시보드 효과를 적용해 사용자가 원하는 정보를 깊이있게 제공할 수 있습니다.


드릴다운(drill down):

데이터 시각화 위젯 :

데이터 분석 프로세스를 고도적으로 통합하고 데이터 뒤에 있는 인사이트를 더 잘 파악하기 위해서는, 폼(form) 유형 외에도 동적 시각화가 포함되고 있습니다.

마지막으로

대시보드의 가장 큰 역할은 업무에 필요한 데이터들을 실시간으로, 함축적으로 디스플레이 하여 지금 바로 필요한 의사결정을 내릴 수 있도록 서포트 하는 것입니다. 본 포스팅에서 소개해드린 다양한 유형의 대시보드를 통해 지금 나에게 필요한 대시보드를 스케치해 보세요. 


대시보드 화면을 만들 때는 대시보드 리포팅 소프트웨어가 필요합니다. 파인리포트(FineReport)는 다양한 데이터 시각화 차트를 제공하는 대시보드 리포팅 툴입니다. 다양한 템플릿을 기본으로 내장하고 있으며, 지금 공식 홈페이지에서 무료로 제품 체험판을 다운로드할 수 있습니다. 더 자세한 내용은온라인 데모 플랫폼을 참조하세요!



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari