[Tableau Tip] gif로 대시보드 구성하기

Table of Contents

1. Introduction
2. 움직이는 이미지
3. GIF를 이용한 대시보드 구성하기
4. Reference

 

Introduction

Tableau의 도입과 함께 기존에 사용하고 있는 대시보드와의 차별화된 요소를 제공하기 위해 커스텀된 대시보드를 기대한다. 기존에 사용하고 있는 대시보드는 정적인 형태의 대시보드와 일부 인터랙션이 담긴 반응형 대시보드가 있다. 정적인 대시보드의 경우에는 정보성 데이터를 한눈에 볼 수 있도록 의미를 집결해서 시각화를 해야하는 반면에 반응형 대시보드는 필터 기능을 활용하여 자세한 정보를 볼 수 있는 대시보드를 구성할 수 있다. 전자의 경우에는 화면의 구성을 심플하게 가져갈 수 있으며 작업 속도가 빠르다는 장점이 있는 반면에 심심하게 느껴질 수 있다. 후자의 경우에는 화면의 구성을 디테일하게 구성하여 사용자에게 인터랙티브한 요소를 담아 활용을 유도할 수 있다는 장점을 가진 반면에 개발하기 위한 작업 공수나 속도가 더디다. 여기에 그치지 않고 "재미"라는 요소를 대시보드에 반영하기까지 한다.

 

움직이는 이미지

움직이는 이미지는 다양한 형식의 이미지 파일로 저장될 수 있다. 그 중에서 주변에서 흔히 볼 수 있는 gif파일을 이용하여 Tableau에서 활용하고자 한다. GIF는 Graphics Interchange Format의 약자로 이미지 전송을 위해 압축 저장하는 방식중에 하나라고 한다. GIF는 1987년 미국의 CompuServe 사에서 개발한 것이 시작이며, 원래 사이즈의 약 40%까지 압축할 수 있다는 강점을 가지고 있다. 독특하게 애니메이션 효과도 함께 저장되어 움직임을 보여주는데 효과적이다.

[그림 1] Progress Bar gif 파일

 

GIF를 이용한 대시보드 구성하기

1. Tableau에서 GIF파일을 이용하여 대시보드를 구성해보자. 먼저, gif파일을 생성해야 한다. 보통 프로젝트에서는 디자이너가 있거나 회사 내에서 사용하고 있는 gif 파일들이 존재한다. 만약 없을 경우에는 직접 생성하는 것을 추천한다. 저작물이기 때문에 무분별한 이미지 사용은 저작권법에 영향을 미칠 수 있기 때문이다.

 

2. Tableau에서는 대시보드를 구성할 수 있는 다양한 개체를 제공한다. 가로, 세로 컨테이너와 빈 페이지, 탐색 버튼, 텍스트, 다운로드, 이미지, 확장, 웹 페이지로 구성되어 있다. 이미지를 이용해서 gif 파일을 가져다 둘 경우에는 정지된 상태로만 보여진다. 따라서 이 방법으로는 움직이는 모습을 표현할 수 없고 웹 페이지를 이용할 것이다.

[그림 2] 대시보드 개체

 

3. 생성한 gif 파일을 웹 페이지 개체를 사용하기 위해 웹 URL이 필요하다. 따라서 github의 public 프로젝트에 개시한다. AWS 등의 클라우드를 이용해서 이미지의 웹 URL을 생성할 수 있는 경우에는 그 방법을 사용해도 무방하다.

[그림 3] github에 gif 파일 업로드

 

4. github에 업로드한 파일을 클릭해서 나온 화면이 그림 4이다. 이때 상단 주소창에 표시된 URL을 복사할 경우 Tableau에 github 화면 전체가 임베딩이 된다. 움직이는 이미지 위에 마우스를 올리고 오른쪽 버튼을 클릭하여 나타나는 팝업 창에서 '이미지 주소 복사'를 클릭한다.

[그림 4] 해당 이미지 URL 복사

 

5. Tableau로 돌아가서 대시보드를 구성하는 여러 개체들 중에 웹 페이지 그림 5와 같이 생성한다. 웹 페이지를 사용할 경우에는 검정색 배경이 나타나는데 최초에 생성한 gif 이미지 크기와 동일한 사이즈로 배치할 경우에 깔끔하게 나타난다. 그림 5가 안보일 경우에는 이미지를 클릭해서 확인하면 나타난다.

참고. 현재 github를 이용한 방법이 정상적으로 보이지 않고 있어서 tistory에 올려서 사용하고 있다. tistory에 이미지를 게시하고 해당 이미지의 오른쪽 버튼을 클릭하여 나타나는 팝업 창에서 '이미지 주소 복사'를 클리하고 해당 URL을 붙여넣어서 사용하였다.

[그림 6] 완성된 화면

 

 

Reference

gif, 두산백과, https://terms.naver.com/entry.naver?cid=40942&docId=1179979&categoryId=32842

태블로 help, help.tableau.com/current/pro/desktop/ko-kr/default.htm