POSTYPE Business

개알못도 만드는 태블로 실시간 TV 대시보드

feat. Tableau Javascript API & Bootstrap

포스타입은 올 상반기 BI 툴로 Tableau를 실험적으로 도입했습니다.

BI(Business Intelligence) 툴은 데이터 분석과 시각화를 통해 의사결정을 돕는 도구입니다. 엑셀이나 구글 시트 같은 툴로도 간단한 데이터 시각화는 가능하지만, 데이터의 양이 많아지고 데이터가 분산되어 있을수록 전문적인 BI 툴의 필요성은 커집니다. 포스타입 역시 200만이 넘는 가입자와 1천만 건 이상의 거래 기록 등 쌓여가는 데이터를 좀 더 분석적으로 활용할 필요를 느끼고 있었습니다.

출처 / Tableau

BI 툴로는 Power BI, Google Data Studio, Looker 등 다양한 소프트웨어가 있지만, Tableau가 국내외에서 가장 잘 알려져 있습니다. 구독 비용이 비교적 높고 러닝 커브 역시 높지만, 그만큼 데이터 연결, 가공, 시각화 측면에서 자유도가 뛰어나고 이용자가 많아 유저 커뮤니티나 리소스가 충실한 편입니다.

Tableau 도입은 포스타입이 데이터에 기반해 의사결정하고 그 근거를 다양한 구성원과 공유하기 위한 첫 단추였습니다.


그런데 왜 실시간 대시보드를...?

개발을 알지 못합니다만...🐾 출처 / giphy

Tableau 무료 평가판 기간이 끝나지도 않았을 무렵, 저는 슬랙으로 CEO인 규섭 님으로부터 하나의 URL를 받아버리고 맙니다(...) 8퍼센트 기술 블로그에 올라온 이 글이었습니다. 사내 TV에 Tableau 대시보드를 구축해 구성원들이 실시간으로 주요 지표를 공유하고 있다는 내용이었습니다.

개발자가 아닌 데다가 갓 Tableau를 입문한  저는 심히 당황스러웠습니다만, 실시간 대시보드는 BI의 궁극적인 목표를 달성하고 데이터 기반 사내 문화로 전환하는 가장 기본적인 방법임은 분명했습니다. 주요한 데이터와 지표를 가장 자연스럽게, 그리고 가장 최신인 상태로 구성원에게 공유할 수 있기 때문입니다.

개알못인 저는 시행착오 끝에 아래와 같이 Tableau로 구현한 여러 뷰를 슬라이드하고 데이터 소스를 주기적으로 업데이트하는 TV용 실시간 대시보드를 완성할 수 있었습니다.

저처럼 개발 지식이 부족하더라도 실시간 대시보드를 빠르게 구현할 수 있도록 저의 구현기를 공유합니다.


준비물

  • Tableau Online 또는 Server 라이센스📊
  • HTML/CSS에 대한 아주 약간의 지식👨‍💻
  • Javascript는 몰라도 좋지만, 문제가 생기면 개발자에게 코드를 들이미는 뻔뻔함🙏
  • Bootstrap에 대한 지극히 기본적인 정보🍼
  • 대시보드를 띄울 TV 또는 모니터📺

을 준비해주시면 됩니다. 물론 가장 중요한 건 개알못도 할 수 있다는 근자감💪입니다!


STEP BY STEP

1. 먼저 대시보드를 만듭니다

실시간으로 함께 공유하고자 하는 시각화 데이터를 대시보드로 구성합니다.

대시보드 사이즈는 TV 해상도에 맞게 또는 Automatic으로 설정하면 됩니다. 다만, 페이지 임베드 시 레이아웃이 깨질 수 있으니 Phone 레이아웃은 삭제해줍니다.

포스타입은 업무 중 화면 전환으로 인한 집중력 저하를 막고 전력 소모를 최소화하기 위해 대시보드를 어둡게 구성했습니다.

2. Javascript API를 활용해 페이지에 Tableau 뷰를 임베드합니다

페이지 임베드는 매우 간단합니다

Tableau가 제공하는 Javascript API를 활용하면 매우 간단하게 웹페이지에 Tableau 대시보드를 띄울 수 있습니다. 자세한 예시는 Tableau 도움말에서 확인할 수 있습니다.

웹페이지에서 Tableau Javascript API에 접근하고 보여주려는 뷰를 설정하기 위해서는 <head> 부분에는 아래 코드를 주석을 참고해 수정한 다음 넣어주면 됩니다.

API 라이브러리 파일 주소는 여기서 찾을 수 있습니다. 보여주려는 뷰의 주소는 Tableau Online 또는 Server에서 해당 뷰를 찾아 URL 전체를 복사하면 됩니다.

그다음 아래와 같이 <body> 부분을 구성하면 됩니다.

페이지에 하나의 뷰를 임베드하는 것은 이것으로도 충분합니다!

...그리고 아무 일도 일어나지 않았습니다

이제 브라우저로 페이지를 열면 페이지에 뷰가 정상적으로 임베드되는 것을 확인할 수 있습니다. 하지만 단순히 뷰를 임베드한 것에 불과하기 때문에, 시간이 지나도 뷰가 전혀 갱신되지 않습니다.

다행히 Tableau Javascript API는 Tableau 제품 내에서 데이터를 갱신하는 'Refresh Data' 기능과 동일한 함수 refreshDataAsync()를 지원하고 있습니다.

initViz 내에 아래 코드를 넣어 refreshDataAsync() 함수를 주기적으로 실행하도록 하면 뷰를 주기에 맞춰 실시간으로 갱신할 수 있습니다.

하지만 하나로는 부족해요

이제 하나의 뷰를 실시간으로 보여주는 대시보드는 간단하게 완성했습니다.

하지만 제 목표는 하나의 뷰만 임베드하는 게 아니라, 여러 뷰를 동시에 불러오는 것이었죠. 이것 역시 위에서 설명한 내용을 활용하면 어렵지 않게 구현할 수 있습니다.

<script> 부분을 아래 코드를 참고해 수정하면 됩니다.

그리고 <body> 부분에서 <div> 요소를 추가하면 끝!

3. Bootstrap으로 뷰를 슬라이드하게 만듭니다

이제 저는 거대한 난관에 봉착했습니다. 임베드한 여러 개의 뷰를 PPT 슬라이드처럼 끊임없이 회전하게 만드는 미션입니다.

Tableau의 도움말은 "브라우저에서 여러 개의 탭을 띄운 다음, 탭을 자동 전환하는 브라우저 확장 기능을 사용하라"는 팁(...)을 주고 있는데요. 페이지에 임베드하는 것만큼 깔끔하게 표현되지 않을 뿐더러, 탭이 전환될 때마다 전체화면이 해제되는 문제가 있었습니다.

Javascript로 직접 프로그래밍한 사례들도 있었지만, Tableau Javascript API의 기능을 활용하기 어렵거나, 알 수 없는 이유로 제대로 동작하지 않는 문제가 있었습니다.

제가 떠올린 묘책은 포스타입에서도 활용하고 있는 프론트엔드 프레임워크인 Bootstrap의 Carousel을 활용하는 것이었습니다. 개발자가 아닌 저 역시 매우 간단하게 슬라이드 쇼를 구현할 수 있고, 슬라이드들의 자동 회전 주기를 설정할 수 있기 때문이었습니다.

Bootstrap이 제공하는 CSS와 Javascript를 몇 줄의 코드로 간단하게 로드한 다음, <body> 부분을 Carousel 컴포넌트에 맞게 수정하면 끝입니다.

4. 이제 모든 준비가 끝났습니다😌

이제 컴퓨터를 TV와 연결한 다음, 브라우저에서 페이지를 전체화면으로 열어두면 끝✨ 잔잔한 BGM을 화이트 노이즈로 틀어두면 금상첨화🎶

제가 Tableau Javascript API와 Bootstrap을 활용해 구현한 실시간 대시보드의 HTML 코드 전체 예시는 아래와 같습니다. 필요하다면 복사한 다음 수정해서 활용하세요👐


트러블슈팅을 위한 작은 꿀팁🍯

  • 뷰의 주소에 /#/가 포함되어 있다면 '#/' 부분을 지워주세요. (링크)
  • 대시보드를 구성할 때는 레이아웃 창에서 넉넉한 padding 값을 넣어주세요.
  • Default 외의 레이아웃은 남겨두면 페이지 임베드 시 깨질 수 있으니 꼭 삭제해주세요.
  • refreshDataAsync의 주기를 지나치게 짧게 잡으면 너무 잦은 호출로 오류가 생길 수 있습니다.
  • 데이터 소스는 반드시 워크북에 임베드해주세요.

국내 최초 개인 콘텐츠 판매 블로그 플랫폼, 포스타입입니다.

POSTYPE 님의 창작활동을 응원하고 싶으세요?

포스타입 팀
포스타입 팀
구독자 51

0개의 댓글

이 포스타입은 댓글을 사용하지 않습니다.

새로운 알림이 없습니다.