대시보드 설계와 데이터 시각화 2부

작성자 : 플랫폼 개발실 R&D팀 신상은

대시보드 설계와 데이터 시각화 2부

대시보드 설계와 데이터 시각화 1부에서는 데이터를 효과적으로 나타내는 방법과 여러가지 시각화를 나타내는 그래프의 종류에 대해서 알아 보았습니다.
이번 편에서는 1부에서 소개드린 여러 시각화 그래프를 책에 나온 시나리오를 참고하여 어떤 상황이나 대시 보드에 맞추어 사용할 수 있는지에 대한 활용 방안에 대하여 살펴보고, 책에 소개된 다양한 시나리오 중에서 몇 가지 시나리오를 소개 해드리도록 하겠습니다.

---

1. 시나리오

1.1. 기간별 순위 비교

1.1.1. 구현 사항

• 특정 지역의 고객이 다른 지역 고객에 비해 얼마나 만족도가 높은지 알아보기 쉬워야 합니다.
• 현 분기 대비 전 분기 등 기간별로 성과를 비교할 수 있어야 합니다.
• 통계적 의미를 판단하기 위해 이전 기간과의 변화가 중요한지를 보여줘 야 합니다.

1.1.2. 관련 시나리오

• 제품과 서비스 매출을 주별로 세분화해 순위를 매긴 후, 이전 기간과 비교해야 하는 경우
• 현재 주간을 이전 주간과 비교해야 하는 경우

1.1.3. 대시보드의 특징과 장점

(1) 데이터 비교에 용이한 막대

• 막대 그래프는 정렬 하기도 쉽고, 범위를 비교하기도 쉽습니다. 그래서 그래프에 레이블이 없어도 상단 막대 길이가 하단 막대보다 길면 약 2배임을 쉽게 알 수 있으며, 세로선이나 가로선을 넣어서 데이터를 비교하면 이전 기간과 비교하기 쉽다는 장점이 있습니다.
• 색상의 규약화는 현재 기간 성과를 이전 기간의 성과와 두드러지게 대조해, 성과가 하락했는지 개선 됐는지에 대해 분명한 시각화가 가능 합니다.
  

(2) 이전 기간 대비 백분율 변화

• 이전 기간과의 백분율 차이 를 보여주면 매우 유용합니다. 백분율 차이보다 실제 숫자의 차이를 보고싶어하는 사람들도 있으므로 차이를 표시하는 두 방법 가운데 하나를 선택하게 하는 대시보드 위젯을 추가 할 수도 있습니다. 백분율의 차이가 실제 값보다 더 중요하다고 생각하면 그 차트를 더 크게 만들어야 합니다.
• 상세한 조사가 필요한 항목을 부각시키기 위해서는 막대그래프에 붉은 점을 표시하여, 현재와 이전 기간의 차이가 중요함을 나타낼 때 사용 할 수 있습니다. 붉은 점 덕분에 잠재적인 기회나 문제를 쉽게 확인 할수 있습니다. 또한 가장 중요한 질문을 가장 눈에 띄게 만들어야 합니다.
• 스파크라인은 지역마다 장기적으로 성과가 어떤지와 중요한 차이가 있는지 등을 한눈에 보여줍니다. 그래프 안에 붉은 점 범례를 사용하면 그래프의 장기적 성과를 재빨리 읽을 수 있습니다. 붉은 점은 변화가 생긴 시점이나, 중요한 의미가 있는 곳에 사용하기도 합니다.
  

1.2. 발전소 운영 모니터링

1.2.1. 구현 사항

• 설치 지역별로 데이터를 보여줘야 합니다.
• 사용자가 지역 수준까지 파고들어 통시적 데이터를 볼 수 있어야 하므로 인터랙티브하게 동작 해야합니다.
• 장기적으로 계속 예상 출력에 미달되거나 출력을 초과하는 지역은 어디인지 알아야 합니다.

1.2.2. 관련 시나리오

• 여러 지역에 산재한 모든 분산 제조 공정에 대해 출력/성과를 추적 해야 하는 경우
• 최근과 비교한 용량 지표의 간결한 실시간 요약을 얻고자 하는 경우
• 실시간 결과를 운영 센터안의 벽걸이 디스플레이에 수동 인터렉션 없이 표시하려는 경우

1.2.3. 대시보드의 특징과 장점

(1) 최신 데이터에 집중

• 심플한 디자인은 이해하기 쉽고, 한눈에 빠른 보기를 제공하며 핵심 요점을 강조 합니다. 영역 차트에 현재 값을 강조하면 사용자는 그 값에 집중해 전반적인 동향과 비교할 수 있습니다. 이러면 사용자가 더 이상 관련이 없는 최댓값, 최솟값보다 현재 값으로 관심을 돌리는 데 도움이 됩니다.
• 사용자는 꺾은 선 차트로 단일 시점 대신 특정 기간에 걸쳐 지역의 출력을 분석할 수 있습니다. 사용자는 조사 일자들을 데이터와 서로 매칭할 수도 있는데, 이렇게 하면 핵심 지역을 재빨리 파고들어 선택한 지역의 유지보수에 필요한 운영 데이터를 모두 얻을 수 있습니다.

  벤 슈나이더만의 법칙: 대시보드를 디자인할 때, 벤 슈나이더만(Ben Shneiderman)의 법칙을 고려하자. 먼저 개요가 나오고, 줌과 필터, 그 뒤에 온디맨스 세부사항(details-on-demand)이 이어져야 한다. 이 사례는 정확히 이 권고를 따른다.

(2) 불릿 그래프, 스파크라인, 성과 지표의 간결한 사용

• 심플한 불릿 그래프는 타겟 대비 실제 수치를 보여주며, 스파크 라인은 특정 기간의 동향을 나타냅니다.
• 스파크라인 차트는 대부분 데이터 동향만 나타냅니다. 스파크라인 차트와 불릿 그래프에 특정 타겟 선을 추가하면 데이터 동향을 적절한 맥락에 비춰볼 수 있습니다.
  

---

1.3. 연간 누적과 전년 대비 성과를 함께 비교

1.3.1. 구현 사항

• 현재 일까지 연간 누적 매출 성과에 순위를 매겨 전년 매출과 비교해야 합니다.
• 한눈에 지역별로 성과가 얼마나 더 좋거나 나쁜지 알아볼 수 있어야 합니다.
• 목표 달성이 제대로 진척 중인지 알기 위해 동향을 살펴봐야 합니다.
• 특정 지역, 특정 기간의 매출 활동을 보는 방법이 필요 합니다.

1.3.2. 관련 시나리오

• 다양한 각 제품에 대한 초도 상담 해결율을 모니터링해서 전년도 해결율과 비교해야 하는 경우
• 올해 10개 지역의 기부금에 순위를 매겨 전년과 비교해야 하는 경우
• 현재의 연간 누적 티켓 매출을 전년도 매출과 비교해야 하는 경우
• 사용자의 서비스 사용량을 전년도 사용량과 비교해야 하는 경우

1.3.3. 대시보드의 특징과 장점

(1) 쉽게 비교 가능한 막대

• 막대차트로는 어떤 지역의 매출이 다른 지역에 비해 얼마나 많은 지 보기가 쉽고 참조선 덕분에 성장세를 쉽게 파악 할 수 있습니다. 주된 관심사에 맞추어 데이터를 대조하기 위해 올해는 어두운 색으로, 작년은 밝은 색으로 그래프를 보여줍니다. 색상과 아이콘의 범례는 차트 안에 숨어 있어서 화면 공간을 더 차지하지 않습니다.

(2) 공간을 최적화하는 숫자 배치

• 타겟 기기가 스마트폰임을 감안하면, 막대를 나타낼 공간이 넉넉하지 않습니다. 숫자를 막대 안에 배치하면 차트에 여유 공간이 생겨서 참조선과의 충돌을 피할 수 있습니다. 숫자를 막대 밖에 매치하면 차트는 복잡해지고 참조선과도 부딪힙니다.

(3) 동향을 수집하기 쉬운 꺾은선 차트

• 빠른 요약 보기가 있으면 아주 좋지만 동향을 파악하는 것이 중요합니다.
• 예를 들어 전년보다 매출이 10% 하락했을 때, 그 차이는 최근에 발생 했는가? 아니면 연초부터 문제가 있었는가? 꺾은선 차트를 보면 해답이 나옵니다. 추세선은 차이가 좁아졌는가 넓어졌는가에 대한 사실을 보여주고 차트를 보고 해석하기에 용이합니다.
  
  

1.3.4. 적용하기

• 다음은 저희 피플앤드테크놀러지 솔루션에서 사용 중인 서비스 사용량 화면 입니다. 앞서 소개드린 대시보드의 특징과 장점을 살려서 현재의 화면을 아래와 같이 개선해 보도록 하겠습니다.
• 사용자는 개선 된 그래프를 통해 월별 평균 트래픽을 막대 그래프에 나타내어 이번 달 사용량과 평균 사용량을 비교 할 수 있으며, 연도별 데이터 트래픽을 꺾은선 차트로 사용량 추세를 확인 할 수 있습니다.

---

1.4. 웹 분석

1.4.1. 구현 사항

• 블로그나 웹사이트의 방문자를 추적하여 해당 방문자들을 일정 기간 동안 살펴 보고자 합니다.
• 총 페이지뷰, 총 방문자, 기간 동안의 블로그 포스트 수를 보고자 합니다.
• 페이지뷰가 가장 많은 블로그 포스트나 웹 페이지를 보고자 합니다.
• 방문자의 지리적 위치를 파악 하고자 합니다.
• 요일별로 방문자 분포를 파악 하고자 합니다.

1.4.2. 관련 시나리오

• 책 판매, 판매 권수, 베스트셀러 도서, 판매 지역을 추적하고자 하는 출판사의 경우
• 장기적인 총 고객 확보, 인기 제품라인 카테고리를 보여주며 다양한 제품라인의 고객 확보 수치를 추적해야 하는 경우
• 서비스 구독자를 추적해야 하는 경우
• 장기적으로 수치를 취합해 인기 순위와 지리적 위치를 함께 보여주며 추적하고자 하는 경우

1.4.3. 대시보드의 특징과 장점

(1) 단순하게 추적한 소수의 핵심 지표

• 꺾은선 차트, 히스토그램, 막대차트는 모두 이 지표의 변형을 보여줍니다.
• 이를테면 장기적 페이지뷰는 추세선이 그래진 막대 차트, 요일별 페이지뷰는 히스토그램, 인기 블로그 포스트별 페이지뷰는 일반 막대 차트로 표시합니다. 사용자수 수와 블로그 포스트 수는 텍스트에 추가 합니다. 대시보드의 기타 항목은 지도위의 사용자 위치 입니다.
• 색상으로 데이터를 규약화하지 않습니다. 색상을 단순화 하여 기업의 대표색이나 팀 색 같은 어떤 색상 조합도 효과적일 수 있습니다.

(2) 다양한 비교를 위한 좋은 차트 유형

• 대시보드의 데이터 규약화에서 주된 방법론은 길이를 이용한 전주의적 속성입니다. 막대의 길이와 높이로 이 대시보드의 모든 데이터를 규약화 합니다. 그래서 비교는 아주 쉽고 정확해 집니다.
• 이를 통해 사용자는 주중보다 주말에 페이지뷰가 훨씬 더 적다는 사실을 알아차릴 수 있습니다. 실제로, 값이 비슷한 정도여도 그 작은 차이까지 분명히 나타낼 수 있습니다. 예를 들어 월요일 페이지뷰는 화, 수, 목요일 페이지뷰보다 약간 적습니다.

(3) 복잡하지 않고 깔끔한 디자인

• 추가 데이터는 툴팁으로 보여주지만, 텍스트를 읽고 차트를 해석하는데도 문제가 없습니다. 툴팁은 선택하거나 강조한 특정 시점의 데이터 세부사항을 보여주기 위해 시각화 전반에 걸쳐 사용 합니다.
• 아래는 웹 분석에 흔히 사용 되는 구글 애널리틱스 화면 입니다. 사용자는 이 화면을 보고 특정 기간, 날짜를 선택 하여 페이지 뷰, 방문자 수, 세션 시간 등을 조회 할 수 있습니다.
  

1.5. 서버 프로세스 모니터링

1.5.1. 구현 사항

• 서버 관리자로서 프로세스가 실패할 경우 재빨리 대응해야 합니다.
• 매일 아침, 지난밤 프로세스의 요약 보고가 담긴 이메일이 필요합니다.
• 실패한 프로세스에 대해 문제를 진단해 수정하는 데 유용한 추가적 맥락의 세부사항이 필요합니다.

1.5.2. 관련 시나리오

• 완성까지 생산 일정의 진행상황을 추적해야 하는 제조사의 경우
• 업무가 정확히 시작해 시간에 맞춰 운영되는지 추적해야 하는 이벤트 관리자

1.5.3. 대시보드의 특징과 장점

(1) 간트 차트의 레이블

• 간트 차트에 운영 중인 그래프에 사용자가 빨간 색의 실패한 작업을 볼 때, 이름도 시선이 놓인 그 곳에 바로 있으므로 작업명을 찾으러 좌측으로 시선을 이동해 살필 필요가 없습니다.
  

(2) 참조선

• 실패한 프로세스를 빨리 찾는 것 외에 그 실패에 일조할 수도 있는 다른 프로세스에 대한 표식이 필요합니다. 이 경우는 참조선으로 예약 일정과 지속 시간을 보여 줍니다. 수직 실선은 작업마다 평균 지속 시간을 보여줍니다. 이 실선을 보여줌으로써 사용자는 하나의 지연이 다른 지연을 유발 했는지를 알게 됩니다.

(3) URL 액션

• 툴팁에는 URL이 들어 있습니다. 어떤 세부사항을 더 조사해야 할지 알 수 있으며, 클릭 한번이면 관련 정보로 바로 이동할 수 있습니다. 이와 같이 빠르고 직접적인 정보이동은 사용자를 흐름에 맡기므로 모든 대시보드에서 중요 합니다. 사용자는 관련된 다음 대시보드를 찾느라 시간을 낭비할 필요가 없습니다. URL로 직접 이동할수 있기 때문입니다.

(4) 개요, 줌과 필터, 온디맨드의 세부사항

• 모두가 알다시피, 성공적인 대시보드는 데이터를 탐구하도록 유도하는 측면도 있습니다. 벤 슈나이더만은 데이터 시각화의 모범관례를 다음과 같이 설명 했습니다.

  ① 개요 ② 줌과 필터 ③ 온디맨드의 세부사항

• 최근 일자들의 서버 성능 개요가 있습니다. 날짜를 클릭하면 하루별 내용 보기로 필터링할 수 있습니다. 이어서 작업을 클릭해 온디맨드로 세부사항을 얻을 수 있습니다. 그러면 작업 요약 뷰에 세부사항이 나타나거나, URL을 클릭해 서버 자체의 작업으로 바로 이동 합니다. 흐름이 위에서 아래로 자연스럽게 이어지므로 따라가기가 쉽습니다.

• 아래는 서버 모니터링의 오픈소스로 널리 알려진 스카우터 화면 입니다. 사용자는 서버 모니터링 화면을 통해 CPU, memery, disk, TPS 등의 정보를 알 수 있고 이를 통해 에러가 발생한 시각, 문제 원인을 얻을 수 있습니다.
  

1.6. 병원 수술실의 이용 현황 대시보드

1.6.1. 구현 사항

• 이 대시보드에 포함된 지표는 사용자가 실제 수술 시간 대비 예상 수술 시간의 정확도를 비교할 때 도움이 됩니다.
• 예약된 일정이 부정확하게 운영되면 정확한 일정 준수, 시설 활용, 수술실 회전 시간, 환자 만족도에 부정적 영향을 줍니다.

1.6.2. 관련 시나리오

• 회의실 예약 등 시설 운용 계획을 시각화해야 하는 경우
• 콘서트 일정이나 행사 장소의 청소, 공조 등 유지보수와 같은 이벤트 기획을 시각화 해야 하는 경우
• 자원 예약을 모니터링 해야 하는 의료 서비스 경우
• 비행기가 정확한 시각과 위치에 배치 하도록 보장 해야 하는 항공 일정 관리
• 운송이나 물류 회사에서 운전기사 관리 등 물류 정보를 시각화 해야하는 경우

1.6.3. 대시보드의 특징과 장점

(1) 정확한 값을 표시하는 달력 보기

• 이 대시보드에는 달력 보기와 히트맵이 더 효과적 입니다. 의사는 매주 구체적으로 할당된 수술실 날짜와 시간에 수술을 집도하는 경우가 많습니다. 그러므로 해당 수술 일자를 직접 몇 주나 몇 달간 확인하고 비교해서 수술실 예약의 개선 기회, 추가적인 수술실 자원의 수요에 관한 단서를 제공하는 일정과 활용 패턴이나 추세도 검토할 수 있으면 유용합니다.
  

(2) 모든 데이터의 표시

• 대부분 상황에서는 취합된 데이터만 보여주면 숫자가 타겟보다 적은 이유를 정당화하기가 쉽습니다. 이 경우에서는, 의사별로 취합도딘 수술실의 효율성은 부정확한 데이터로 여겨 쉽게 버려질 수 있습니다.
  수술실 마다 일별로 세분화하는 기능은 문제를 상세히 보여줍니다. 이런 대시보드가 있기전에는 의사들이 개요 데이터에만 접근 가능 했을 것 입니다. 하지만 세부 데이터도 모두 볼 수 있으므로 문제를 확인해 개선 기회도 확인할 수 있습니다.

1.7. 순위와 규모를 보여주는 방법

1.7.1. 구현 사항

• 매출별로 상위 20위 제품을 보여주어야 합니다.
• 매출의 순위와 규모를 모두 봐야 합니다.
• 고객 세그먼트, 성별 등 다양한 디멘전에 걸쳐 매출과 함께 순위가 어떻게 변하는지 살펴야 합니다.

1.7.2. 관련 시나리오

• 다중 선택 질문의 소비자 설문을 통해 어떤 제춤을 가장 많이 선택했는지를 다양한 카테고리별 순위로 보고싶은 경우
• 사람들에게 정치 후보자에 대한 선호도를 물어서 성별 연령별, 지역별 선호도를 확인하고 싶은 경우
• 다양한 음악 그룹의 인기도를 국가별, 성별, 카테고리별로 비교 하고 싶은 경우

1.7.3. 대시보드의 특징과 장점

(1) 다각적인 접근법

• 다각적인 접근법은 순위를 매겨야 하는 거의 모든 경우에 효과적 입니다. 설문 조사와 같은 전반적인 결과에 선택된 값은 레이블을 선택하여 그 활용과 순위를 세분화하여 볼 수 있습니다.
  막대 차트로는 특정 제품의 매출이 다른 제품에 비해 얼마나 많거나 적은지를 쉽게 볼 수 있습니다. 실제로 막대 옆의 숫자를 보여주지 않고도 인기 있는 제품이 무엇인지를 알 수 있습니다.

(2) 범프 차트(Bump chart)

• 개별 순위를 장기적으로, 혹은 다양한 디멘전에 걸쳐 보여주는 방법으로 사람들에게 인기 높은 방법으로는 규모가 중요하지 않은 경우라면 범프 차트가 좋은 선택 입니다.
• 하지만 순위 있는 막대와 범프 차트를 사용할 때 주의할 점이 있습니다. 한 차트에 제품이나 팀, 이슈 등을 한꺼번에 표시할 수는 없습니다. 그러면 사용자에게 해독이 불가능한 막대와 선이 뒤죽박죽 얽힌 모습을 보이게 되기 때문입니다. 2가지 경우 모두 사용성 높은 차트를 만드려면, 각 항목을 선택해서 시각화 상태의 화면을 캡처하거나, 필요한 인터랙션이 있는 대시보드를 별도로 제공해야 합니다.
  

1.8. 잠재적 활용 대비 실제 활용의 표시

1.8.1. 구현 사항

• 각 부서마다 자원 활용 타겟 대비 성과가 어떤지 파악 해야 합니다.
• 한 부서에서 잠재적인 수수료 수입보다 비용이 더 많이 드지는지 여부를 파악 해야 합니다.
• 활용도가 낮은 잠재적 원인을 확인하기위해 청구 불가한 시간의 세분화를 파악 해야 합니다.

1.8.2. 관련 시나리오

• 청구 가능한 시간과 잠재적으로 청구 가능한 시간을 소프트웨어 개발 지원 인력에 대해 부서 전반에 걸쳐 비교 해야하는 회사의 경우
• 직원들의 시간을 추적하고 자원과 식품의 적정한 활용 수준을 모니터링 해야하는 경우

1.8.3. 대시보드의 특징과 장점

(1) 개요와 색상 범례

• 대시보드는 서로 다른 척도를 보여주지만, KPI 점들 덕분에 성과가 나쁜 영역에 집중하기 쉽습니다. 화면 상단에 있는 숫자는 핵심성과 지표에 걸쳐 조직의 성과를 보여주며, 색상 범례 역할을 합니다.

(2) 비교하기 쉬운 막대

• 막대를 누적하여 전반적으로 어떤 부서가 높거나 낮은지 살필 수 있습니다. 누적 막대 뒤에 더 넓고 밝은 색의 타겟 막대를 배치하면, 얼마나 높고 낮은지 알 수 있습니다. 막대를 지능적으로 배치하고 색과 참조선을 사용하여 간결한 차트 하나로 여러 질문에 답할 수 있습니다.
  • 어떤 부서가 가장 많은 시간 일하는지?
  • 어떤 부서가 청구 가능한 시간의 백분율이 가장 높은지?
  • 어떤 부서가 간단한 타겟을 넘는지?
  • 어떤 부서가 타겟보다 상당히 낮은지?
  • 사람들은 공통 기준선으로 막대 길이를 비교하는 데 능숙하지만, 온디맨드로 팝업을 통해 세부사항을 제공할 수 있습니다.

2. 정리

• 지금까지 여러가지 시나리오를 통해 대시보드를 설계 하는 방법과 데이터를 시각화 하는 방법에 대해 알아 보았습니다. (1부가 궁금하신 분들은 ✔여기를 참고 해주세요. )
• 이 책에 소개된 시나리오를 몇 가지 추려서 소개 드렸는데, 시나리오 목적에 맞는 경우 대시보드의 특징을 살려서 여러분들이 대시보드를 설계 하는데 이 글이 조금이나마 도움이 되셨으면 좋겠습니다. 읽어 주셔서 감사합니다! 😇
  

출처

• 도서: <대시보드 설계와 데이터 시각화>
• https://datavizproject.com/family/chart/#
• https://help.qlik.com/en-US/sense/February2020/Subsystems/Hub/Content/Sense_Hub/Visualizations/VisualizationBundle/bullet-chart.htm
• https://www.klipfolio.com/resources/dashboard-examples/executive/kpi-dashboard
• https://help.privy.com/hc/en-us/articles/360024415834-How-To-Find-the-Monthly-Pageviews-for-Your-Website-in-Google-Analytics
• https://chartio.com/blog/new-chart-type-sparklines/