데이터로 새로운 경험을 만드는 기업 빅스데이터(BigxData)입니다.

오늘은 태블로를 사용하시는 비즈니스 유저 분들을 위한 태블로 대시보드 꿀팁을 들고 왔습니다.

앞으로 태블로 대시보드 꿀팁을 알려드리는 콘텐츠를 주기적으로 작성하여 비즈니스 유저 분들과 빅스데이터의 고객사 분들께 소개해 드릴 예정이니 많은 관심 부탁드립니다!

이번 콘텐츠에서는 특별히 태블로 대시보드의 컨테이너를 100% 활용하는 방법에 대해 알아보려 합니다. 예시와 함께 어떻게 태블로 대시보드 컨테이너를 활용하여 태블로 대시보드를 잘 구축할 수 있을지 설명해 드리도록 하겠습니다. 

오늘 콘텐츠, 이런 분들에게 추천 드려요!

✅ 태블로 대시보드를 직접 구축하시거나 수정하시는 분

✅ 현재 사용 중인 태블로 대시보드를 개선하고 싶으신 분

✅ 태블로 대시보드를 구축하는 데 어려움을 겪고 계시는 분

✅ 태블로 컨테이너의 개념과 활용법에 대해 알고 싶으신 분

들어가기에 앞서...

태블로 대시보드, 시각화 작업물을 누구나 보기 편한 대시보드, 가독성 있는 대시보드로 만들기 위해 중요한 점은 무엇일까요? 바로 레이아웃입니다.

가장 중요한 데이터 혹은 차트를 대시보드의 최상단에 배치하고 상세 데이터는 최하단에 배치하는 등의 레이아웃을 일반적으로 잡는 이유가 누구나 보기 편한 대시보드를 만들기 위함이죠.

태블로 대시보드의 컨테이너를 잘 활용한다면 더 깔끔하고 가독성 있는 대시보드를 구축하실 수 있어 오늘의 콘텐츠를 준비하였습니다.

태블로 대시보드의 컨테이너를 조정하기 전과 후를 보여주는 간단한 예시 이미지를 보겠습니다. 

단순히 여백과 컨테이너, 그리고 제목 폰트만 조정했는데 조금은 더 깔끔해 보이진 않으신가요?

실제 프로젝트를 수행하며 위 보여드린 예시 이미지보다 훨씬 더 많은 양의 시트를 활용하는 경우가 많습니다. 이 때 마무리 단계에서 대시보드 레이아웃 작업을 따로 잡기도 할 정도로 대시보드 레이아웃은 그 중요도가 크죠.

누군가에게는 사소해 보일 수 있으나, 디테일한 변화를 통해 가독성과 디자인에 크고 중요한 역할을 하기도 합니다.

그러나, 처음 접하는 분들에게는 활용하시기에 어려우실 것 같아 레이아웃 중에서도 여백과 항목 계층을 중심으로 대시보드 활용법을 디테일하게 설명해 드리도록 하겠습니다.

위 차트 중 고객별 매출 및 수익 시트라는 '개체'를 선택하게 되면 좌측 레이아웃 영역에 아래와 같은 정보가 나옵니다. 각 개체의 레이아웃 요소를 살펴보겠습니다.

개체의 레이아웃 요소

• 위치
  • x : 선택한 개체의 좌측 상단 꼭지점의 x좌표 (위치)
  • y : 선택한 개체의 좌측 상단 꼭지점의 y좌표 (위치)

• 크기
  • 너비 : 선택한 개체의 가로 길이
  • 높이 : 선택한 개체의 세로 길이 

• 테두리
  • 선택한 개체의 테두리 유형, 굵기, 색상 선택
    
    
•  백그라운드
  • 선택한 개체의 배경 색상과 불투명도
     
• 바깥쪽 여백
  • 선택한 개체의 바깥쪽 여백 
• 안쪽 여백
  • 선택한개체의 안쪽 여백
    

• 항목 계층
  • 어떤 컨테이너를 활용해 작업 했는지에 따라 컨테이너의 계층이 구조적으로 정리됩니다.
     

예시로 알아보는 대시보드 여백 적용 방법

위 보여드리는 예시 이미지 차트에서는 시트 개체에 색상을 입혔고 바깥쪽 여백과 안쪽 여백 모두 0으로 된 상태입니다. 

확실한 이해를 도와드리기 위해 바깥쪽 여백과 안쪽 여백을 극적으로 적용 시켜 보도록 하겠습니다.

📊 예시 1

아래 개체에는 바깥쪽 여백의 왼쪽, 위쪽, 오른쪽, 아래쪽 모두 50을 적용 시켰습니다. 

색상을 입히지 않은 개체 바깥 부분(흰색)의 여백이 늘어난 것을 확인할 수 있습니다.

📊 예시 2

아래 개체에는 안쪽 여백의 왼쪽, 위쪽, 오른쪽, 아래쪽 모두 50을 적용 시켰습니다. 

색상을 입힌 개체 안쪽 부분(초록색)의 여백이 늘어난 것을 확인할 수 있습니다.

예시로 알아보는 항목 계층 레이아웃

보통 컨테이너 작업이라고 불리는 항목 레이아웃 배치 작업은 대시보드 구조와도 연관이 깊습니다.

항목 계층을 위에서부터 살펴보겠습니다.

우선 가장 상위의 '세로' 컨테이너를 Drill-Down하면 위의 이미지와 같이 

· 고객 분석 대시보드

· 가로 컨테이너

2개의 항목이 존재합니다.

즉, 가로 컨테이너와 그 하단에는 구조적으로 더 낮은 수준의 항목이 존재하는 것으로 보입니다.

이처럼 '가로' 컨테이너를 Drill-Down하면 세로 컨테이너 2개가 들어가 있다는 것을 쉽게 확인할 수 있죠.

더 Drill-Down하여 상세히 그 항목까지 살펴볼 수 있습니다.

• 좌측 세로 컨테이너 - 필터 및 범례
  

• 우측 세로 컨테이너 - 그래프 3종 (막대1, 산점도1, 막대2)
  • 해당 세로 컨테이너 안에는 고객 개요라는 이름의 파란색 막대 차트와 가로 컨테이너가 있습니다.
    
    • 선택된 가로 컨테이너 안에는 고객 분산형 시트와 고객 순위 시 2가지가 들어가 있습니다.
      

위와 같이 태블로 대시보드 상에서 레이아웃 항목 계층의 구성은 복잡한 듯 보이지만 보다 구조적으로 대시보드를 설계하고 또 조정하는 데에 아주 큰 도움이 됩니다. 

위 보여 드린 예시를 통해 어느정도까지 태블로 대시보드를 구조적으로 설계할 수 있고 조정할 수 있는지를 파악하셨기를 바랍니다.

대시보드 컨셉에 따라 각 개체마다의 색상을 다르게 부여할 수 있고, 컨테이너를 활용하여 소제목 스타일 및 폰트 등을 변경할 수도 있습니다. 디테일한 태블로 대시보드 꿀팁을 통해 지금 바로 태블로 대시보드의 활용성을 높여가러 가보시는 건 어떨까요?

지금까지 데이터로 새로운 경험을 만드는 기업 빅스데이터(BigxData)였습니다.

감사합니다. 😊

🔗 하단 배너 클릭 시 빅스데이터 문의하기 페이지로 연결!