게으르게 만드는 대시보드

computer-tool
document-tool
quarto
소박하고 개인적인
Author

JS HUHH

Published

March 18, 2024

TL; DR

  • Quarto Dashboards를 활용해서 개인용 보드를 만들어 보자.
  • 🔗LINK와 함께 보자.

왜 정적 웹(static web)인가?

대시보드로 활용할 수 있는 도구는 다양하다. 본격적으로 웹 프로그래밍을 활용하지 않아도 파이썬으로 부릴 수 있는 streamlit, gradio를 비롯해 다양한 서비스들이 있다. 그런데 이러한 본격적인 서비스들에는 몇 가지 ‘개인적’ 단점이 있다.

  • 서비스를 올리려면 ‘다소’ 전문적인 웹 서버가 필요하다. 자체적인 방식으로 서비스 호스팅을 구축하거나 해당 회사에서 제공하는 무료 티어를 쓸 수 있다.
  • 다소 느리다. 개인 용도로 쓸 때 느리다는 것 자체가 문제는 아니다. 대시보드의 기능을 제한하더라도 좀 더 팍팍 뜨면 좋겠다는 의미이다.

이 단점이 그리 대단한 것은 아니다. 스트림릿에서 제공하는 기본 서비스로도 많은 것들을 구현할 수 있다. 하지만 더 간단하고 더 게으르게 뭔가 하고 싶은 나 같은 인간에게는 여전히 복잡하고 거추장스러워 보이기도 한다.

사실 (개인용) 대시보드를 쓸 때 뭔가를 인터랙티브하게 선택하는 경우는 드물다. 대체로 주요 용도는 내가 보고 싶은 정보를 한번에 모아서 본다는 데 있다. 그 용도가 보는 데에만 있다면 미리 렌더링된 정보를 보여주는 정적 웹(static web)으로 충분하지 않을까? 정적 웹은 Github pages를 비롯해 공짜로 활용할 수 있는 다양한 서비스가 있어 선택의 범위도 넓다!

인터렉티비티가 아주 없는 것은 아니다. 여기를 참고하자.

Quarto Dashboards

정적인 웹 페이지로 인터랙티비티가 제한된 대시보드(사실상의 웹 페이지)를 만들기로 했다면 툴을 골라보자. 딱 좋은 툴이 있으니 문서 작성 도구 Quarto에서 제공하는 Quarto Dashboards이다. 쿼토에 익숙한 사람이라면 링크의 내용을 보고 그 장점을 쉽게 파악할 수 있을 것이다. 자세한 설명은 생략한다.

정적 웹이라고 해서 인터랙티비가 전혀 없는 것은 아니다. 소개되어 있듯이, Plotly, Leaflet, Jupyter Widgets, htmlwidgets 등을 쓸 수 있어서 제한된 수준에서 인터랙티브한 요소를 구현할 수 있다.

두 가지 문제 그리고 해결책

이렇게 대시보드를 만드는 것까지는 좋은데 당장 떠오르는 두 가지 아쉬운 대목이 있다. (로그인을 포함한) 인증 시스템과 데이터 업데이트의 자동화가 그것이다. 일단 (아쉬운대로 불완전한) 두 가지 해결책을 제시해보자.

최소한의 암호화

정적 웹은 기본적으로 html 문서로 구성된다. 인증은 해당 문서의 열람 앞에 존재하는 것이고 따라서 그 부재를 탓할 수 없다. 그래도 아쉽다! 깃허브 기준으로 private repo에서 pages를 만들면 전체 공개로 외부에 제공된다. 데이터 업데이트에 필요한 credentials과 같은 민감한 정보는 리포를 private로 만들어 감출 수 있다. 하지만 대시 보드의 내용 자체가 민감한 정보라면 어떻게 해야 할까? 최소한 페이지에 암호라도 있다면 좋을 것이다. 이메일로 전달되는 각종 고지서에 적용된 암호화 정도면 충분한 경우도 있다.

Staticrypt는 이를 구현해주는 도구다. 이 녀석을 쓰면 html 문서에 암호를 걸 수 있다. 해당 페이지 호출할 때 암호를 먼저 입력해야 내용을 볼 수 있다. 이것이 제대로 된 로그인 시스템이라고 할 수는 없지만 개인적인 용도의 안전 장치로는 족하다.

데이터 업데이트

활용하는 데이터가 변하지 않는다면 해당 데이터를 한번 읽어서 대시보드를 제공하면 그만이다. 하지만 대시보드가 필요한 상황과 맥락에서 데이터가 이렇게 고정되는 상황은 별로 없을 것이다. 데이터를 일정한 주기로 업데이트해야 한다면 어떻게 해야할까? 필요할 때마다 깃허브를 호출해서 페이지를 수동으로 말아도 되겠지만 그리 좋은 방법은 아니다.

데이터가 고빈도(high frequency)로 변하는 상황이라면 스트림릿과 같은 본격적인 대시보드 도구를 부리는 게 좋다. 업데이트의 빈도가 충분히 낮다면, 깃허브 Actions의 스크립트를 활용해 데이터의 자동 업데이트를 손쉽게 구현할 수 있다.

깃허브 액션스를 활용하면 리포의 .github/workflows에 들어 있는 yml 파일을 통해 원하는 순서로 리포 내에서 여러가지 작업을 수행할 수 있다. 데이터 업데이트를 위해서 지시할 작업은 간단하다. 이용자가 미리 정해둔 시간 간격으로 문서를 다시 생성하면 된다. 이떄 코드도 같이 실행될텐데 해당 코드에서 업데이트된 데이터를 불러오면 된다.

여기서 깃허브 액션스를 자세하게 다루지는 않겠다. 개념은 OS(주로 Ubuntu)를 불러와서 해당 OS 하에서 여러가지 작업을 자동화할 수 있는 도구다. Ubuntu를 좀 써봤다고 쉽게 생각하면 큰 코 다칠 수 있다. 예를 들어 깃헙 페이지스 하나 퍼블리시하는 데에도 여러가지 행동 조합이 필요하다. 따라서 개인지 작성하기 보다는 이미 작성된 actions를 가져다가 쓰는 것이 좋다. yml 코드를 보면 uses: actions/checkout@v4, uses: actions/setup-python@v4와 같은 내용을 볼 수 있다. 사전에 정의된 액션스를 가져다가 쓰는 것이고 필요할 경우 with 구문을 통해서 나에게 맞는 설정을 추가할 수 있다. 이런 식으로 기존에 검증된 actions 스크립트를 쓰는 것이 압도적으로 편리하고 안전하다. 깃허브 페이지스의 퍼블리싱과 관련해서는 여기를 참고하라.

여기를 보면 GitHub Actions를 통해서 Quarto 문서를 생성하고 퍼블리싱하는 방법이 잘 소개되어 있다. 일정한 시간 단위로 자동화하고 싶다면 코드의 맨 윗 부분을 아래와 같이 수정하면 된다.

on:
  #schedule:
    # 실제 스케쥴 작업이 시작될 cron을 등록하면 됩니다.
    # 크론은 https://crontab.guru/ 여기서 확인하면 좋을 것 같습니다.
    # 이 크론은 매 4시간 마다 00분 기준으로 실행됩니다.
    #- cron: '0 */4 * * *'  
  #workflow_dispatch:    
  #push:
  #  branches: main
  schedule:
    #- cron: '*/30 * * * *' # 매 30분마다 실행
    - cron: '0 */3 * * *' # 매 3시간마다 00분 기준으로 실행 
Code Note
  • on: 어떤 조건에서 스크립트를 실행하는지를 지정한다.
  • workflow_dispatch는 github 웹 페이지에서 수동 실행 버튼을 활성화한다.
  • push가 있다면 푸시가 발생했을 때 실행된다.
  • schedule이 있다면 일정한 시간 혹은 시간 간격으로 스크립트를 실행할 수 있다. cron은 크론탭의 규칙을 따르고, 유연하게 실행 간격의 룰을 정할 수 있다.

데이터 업데이트 + 암호화?

앞서 살펴본 두 개의 요소를 조합하는 것도 가능하다! 위의 문서 생성 및 퍼블리시 과정과 압호화 과정을 깃허브 액션스의 스크립트로 구현하면 된다. 깃헙 액션스는 정말로 강력한 기능이다! 액션스를 통해서 아래와 같은 두 가지 과정을 구현할 수 있다.

  • 필요한 데이터 업데이트 반영 후 대시보드 html 생성 및 퍼블리싱
  • gh-pages 브랜치에 서브되는 html 페이지의 암호화

해당 두가지 명령을 구현한 코드와 예시 대시보드는 아래와 같다.

두 번째의 암호는 0000이다. 리포의 Actions의 staticrypt 대목을 뜯어보시면 암호를 설정하는 부분이 있다. 0000 대신 필요한 암호로 바꾸시라. 리포를 포크하거나 복제한 후 private으로 바꿔 사용하면 된다.

crontab을 설정할 수 있다면 초단위로 해두면 빠른 처리가 가능하지 않을까, 라고 생각할지 모르겠다. 깃허브는 최대 빠른 간격을 5분으로 제한하고 있다. 더 짧은 주기로 크론탭을 설정해도 5분 단위로 돌아간다.