월: 2020년 6월월

들어가며

대시보드 여러 장을 돌려가면서 사용할 일이 있습니다. 예를 들어 대한민국 일자리 상황판이나 제조 현황판, 코로나 상황판 이런 것들이 될텐데요, 한 번에 여러개의 KPI를 한 곳에 모아놓은 종합 대시보드를 만들어서 그것을 볼 수도 있겠지만 여러개의 KPI별로 만들어진 대시보드 여러장을 돌려가면서 살펴볼 수 도 있습니다.

대시보드의 데이터 갱신을 위해 지금까지 사용해온 방식은 몇 가지 있고 그 중 하나는 크롬의 익스텐션을 이용하는 것입니다. 처음 들어보시는 분도 있겠지만 크롬 브라우저의 기능을 강화해주는 브라우저에 설치하는 보조 프로그램이 익스텐션이라 할 수 있습니다.

이번에는 데이터 갱신 뿐만 아니라 몇 개의 화면을 로테이팅 할 필요가 있어서 그런 익스텐션을 찾아보았습니다.

탭-로테이트 크롬 익스텐션

탭-로테이트라는 익스텐션을 소개합니다. 몇 가지 익스텐션을 테스트해 보면서 가장 필요한 특징은 다음 세 가지 정도였는데요 아래에서 설치하면서 확인해보겠습니다.

• Full Screen이 지원되어야 한다
• 사전 로딩이 지원되어야 한다.
• 화면 및 동작 정의가 편리해야 한다.

먼저 설치는 통상의 크롬 익스텐션 설치 방법을 따르면 됩니다. 혹시라도 망분리 등으로 오프라인 설치 방법이 필요하신 분은 [여기]를 클릭해서 내용을 참고하시기 바랍니다.

https://chrome.google.com/webstore/detail/tab-rotate/pjgjpabbgnnoohijnillgbckikfkbjed

설치는 [Chrome에 설치] 버튼을 눌러서 하게 됩니다. 확인을 해서 설치해 주게 되고요.

필요한 탭을 열어 놓은 상태에서 실행 버튼인 [▶]을 눌러주게 됩니다. 기부를 권유하는 창이 뜨는데 관심 있는 분은 기부도 좋지 않을까 생각합니다.

플레이/pause버튼을 우 클릭하여 [옵션]을 열면 텍스트 에디터가 나옵니다. 코드라고 무턱대고 겁먹지 마시고요 내용을 살펴보겠습니다.

• URL목록이 보이고
• duration은 유지 시간입니다.
• tabReloadIntervalSeconds 는 해당 탭을 리로드 하는 타이밍입니다. 데이터가 가끔씩 한 번 바뀌는 경우에는 인터벌을 크게 놔도 좋을 듯 합니다.
• 최상단에도 옵션이 있는데 fullscreen, autoStart는 단어만으로 의미를 아실 듯 합니다.
• lazyLoadTabs은 탭이 열리기 전에 미리 url을 로딩한다는 의미로서 화면 로딩시간이 느린 페이지의 경우 다른 페이지가 사용자에게 보여지는 동안에 미리 url을 로딩하기 때문에 모래시계가 보여지는 시간을 최소화 해줍니다. 가장 중요한 기능 같습니다.

옵션 설정해주기

한편 태블로 화면의 경우에는 서버 url을 그대로 사용하셔도 되고요, 혹은 url의 끝부분에 .pdf, .png를 붙여주게 되면 pdf나 이미지로 로딩되게 됩니다. 위의 lazyLoadTabs 기능으로 인해서 직접 로딩을 해도 되는지 판단이 필요할 듯 합니다.

샘플을 아래에 붙입니다.

{
“settingsReloadIntervalMinutes”: 1,
“fullscreen”: true,
“autoStart”: true,
“lazyLoadTabs”: true,
“websites”: [
{
“url”: “http://lgpoc.planit.ai/#/views/1/1?:iid=3”,
“duration”: 10,
“tabReloadIntervalSeconds”: 15
},
{
“url”: “http://lgpoc.planit.ai/#/views/1/2?:iid=3”,
“duration”: 10,
“tabReloadIntervalSeconds”: 15
},
{
“url”: “http://lgpoc.planit.ai/#/views/1/3?:iid=3”,
“duration”: 10,
“tabReloadIntervalSeconds”: 300
},
{
“url”: “http://lgpoc.planit.ai/#/views/1/1_1?:iid=3”,
“duration”: 10,
“tabReloadIntervalSeconds”: 15
}
]
}

태블로는 뷰의 url을 로딩하면 인터렉티브한 태블로 화면이 나타나게 되고요, url뒤에 pdf나 png를 붙이면 pdf나 png가 로딩되게 됩니다.

제가 테스트를 해보니 일반 인터렉티브 화면의 경우 아래 그림과 같이 테두리를 자동으로 없애기가 어려웠습니다. [전체 화면] 버튼을 눌러도 리로딩할 때 자꾸 원상태로 돌아가더라고요.

이미지를 로딩하게 되는 경우에는 아래와 같고, 이미지의 사이즈도 지정하실 수 있습니다.

?:size=3000인 파라미터를 붙이게 되면 아래 그림처럼 폭이 3000인 이미지가 로딩됩니다. 이 로테이션을 운용할 장비의 해상도를 확인해서 원하는 사이즈로 이미지를 다운로드 받으시면 되겠습니다.

응용

이미지 사이즈가 다르거나 혹은 제목 등을 넣고 싶다면 위 url을 html페이지를 만들어 내장시키면 됩니다. 위 url 대신 로컬 html을 로테이션 시키는 것입니다.

https://help.tableau.com/current/pro/desktop/ko-kr/embed_ex_img.htm

예를 들어 NOTEPAD혹은 에티터를 열어 page1.html을 만든 다음 아래와 같은 코드를 내장시킵니다. 이와 같은 페이지를 page1, page2, page3로 만들어 로테이션을 시키게 됩니다.

이 경우 이미지가 스크린 사이즈랑 딱 맞지 않는 경우 height혹은 width 중 하나만을 100%로 놓아야 이미지 비율 왜곡이 생기지 않게 됩니다. html 샘플은 [여기]를 클릭해서 다운로드하세요.

마무리

전반적으로 원하는 기능은 전부 있었습니다만, 사람이 어느정도 기능이 지원되면 또 욕심이 생기는지라 하면 전환간에 부드러운 전환은 안되는가 하는 욕심도 슬며시 생겼습니다. 1) smooth하게 탭을 전환해주는 익스텐션이 있을까 하는 생각과 함께 2) 오픈 소스이니 소스를 고치는 것도 방법이 아닐까 했습니다. (물론 folk를 내는 순간 업데이트는 포기해야 하겟지요)

이번에는 이 정도로 일단 마무리하려고 하는데요, 간이하게 대시보드로 상황판이 필요한 분들에게 도움이 되시기 바랍니다.

추가팁 – 잘되는 익스텐션 복사하기

혹시 잘 운용되고 있는 크롬의 익스텐션을 복사할 수 있을지 확인해봤는데 그것도 가능합니다.

먼저 사용자 계정별로 익스텐션을 설치하게 되므로 그 디렉토리를 찾습니다. 요령은 아래의 커맨드를 주소창에 붙여 나온 결과값을 보고 폴더의 위치를 확인합니다.

chrome://version

이것을 누르게 되면 이런 이미지를 볼 수 있습니다. 여기서 프로필 경로가 가장 중요합니다. 드래그하여 복사를 해주세요.

(윈도우+E 버튼을 눌러) 탐색기를 켜준 주소창에 위 주소를 붙여넣어 다음 해당 폴더로 이동하여 Extension폴더로 들어갑니다. 프로파일은 크롬의 사용자 추가시마다 일련번호를 붙여서 숫자가 늘어나는 듯 했습니다. 위의 프로필 경로가 가장 확실한 방법입니다.

익스텐션 폴더에 들어가면 여러 익스텐션이 있는데 이게 또 암호입니다.

어떤 폴더를 복제할지는 확장 프로그램 관리로 가봐야 합니다. 여기에 개발자 모드를 켜서 프로그램 아이디를 확인하시거나 혹은 해당 익스텐션의 [세부정보]를 눌러 들어가면 주소창에 프로그램 아이디가 보입니다.

여기서는 pjgjpabbgnnoohijnillgbckikfkbjed 이므로 이 이름으 가진 폴더를 찾으면 됩니다.

이 폴더를 압축하여 zip파일을 만들어 필요한 사람에게 전송하면 되겠습니다.

 1,865 total views,  1 views today