Quarto 대시보드

개요

Quarto 대시보드는 Python, R, Julia, Observable을 사용해 대화형 대시보드를 쉽게 만들 수 있게 해줍니다.

관련된 데이터 시각화를 대시보드로 배포할 수 있습니다. Plotly, Leaflet, Jupyter Widgets, htmlwidgets, 정적 그래픽(Matplotlib, Seaborn, ggplot2 등), 표 데이터, 값 박스, 텍스트 주석 등 다양한 컴포넌트를 사용할 수 있습니다.
행과 열 기반 레이아웃을 유연하고 쉽게 지정할 수 있습니다. 컴포넌트는 브라우저 크기에 맞춰 지능적으로 리사이즈되며 모바일에서도 잘 표시되도록 조정됩니다.
어떤 노트북 편집기(JupyterLab 등)나 어떤 텍스트 편집기(VS Code, Positron, RStudio, Neovim 등)에서도 일반 텍스트 마크다운으로 작성할 수 있습니다.
대시보드는 정적 웹 페이지로 배포할 수 있으며(특수 서버 불필요), 필요하다면 백엔드 Shiny Server를 통합해 상호작용성을 강화할 수도 있습니다.

예시

아래 예시는 다양한 레이아웃과 테마를 보여 줍니다(클릭하면 자세히 볼 수 있습니다).

실제 대시보드, 소스 코드, 추가 예시는 갤러리의 대시보드 섹션을 참고하세요.

워크스루

여기서는 기본을 이해할 수 있도록 간단한 예시를 따라가며 설명합니다. 이후 대시보드 작성 방법을 자세히 안내합니다.

이 간단한 단일 페이지 Python 대시보드는 Gapminder 데이터셋의 개발 지표를 Plotly로 탐색합니다. 대시보드는 두 개의 행으로 구성되며, 두 번째 행은 두 개의 열을 포함합니다.

대시보드는 다음 구성 요소로 이루어집니다.

내비게이션 바 — 아이콘, 제목, 저자, 하위 페이지 링크(두 페이지 이상일 때).
페이지, 행, 열, 탭셋 — 페이지, 행, 열은 마크다운 제목으로 정의합니다(높이/너비 등 속성 지정 가능). 탭셋은 행 또는 열 안의 콘텐츠를 더 세분화할 때 사용합니다.
카드, 사이드바, 툴바 — 카드는 플롯, 데이터 표시, 자유 형식 콘텐츠를 담는 컨테이너입니다. 카드 콘텐츠는 보통 노트북이나 소스 문서의 셀에 대응합니다. 사이드바와 툴바는 대화형 대시보드에서 입력을 표시하는 데 사용합니다.

대시보드는 Jupyter 노트북(.ipynb) 또는 일반 텍스트 마크다운(.qmd)으로 만들 수 있습니다. 아래는 위 예시의 노트북 버전 코드입니다(이미지를 클릭하면 확대됩니다).

아래는 대시보드의 .qmd 버전입니다(오른쪽 숫자를 클릭하면 문법과 동작에 대한 추가 설명을 볼 수 있습니다).

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
--- 

```{python}
import plotly.express as px
df = px.data.gapminder()
```

## Row {height=60%}

```{python}
#| title: GDP and Life Expectancy 
px.scatter(  
  df, x="gdpPercap", y="lifeExp", 
  animation_frame="year", animation_group="country", 
  size="pop", color="continent", hover_name="country",
  facet_col="continent", log_x=True, size_max=45, 
  range_x=[100,100000], range_y=[25,90] 
)  
```

## Row {height=40%}

```{python}
#| title: Population
px.area(
  df, x="year", y="pop", 
  color="continent", line_group="country"
)
```

```{python}
#| title: Life Expectancy
px.line(
  df, x="year", y="lifeExp", 
  color="continent", line_group="country"
)
```

1: 문서 옵션은 내비게이션 바에 표시될 title과 author를 정의하고 dashboard 포맷을 지정합니다.
2: 행과 열은 제목으로 정의합니다. 이 예시에서는 두 개의 행을 정의하고 height 옵션으로 상대 크기를 지정합니다.
3: 계산 셀은 행 또는 열 안의 카드가 됩니다. 카드는 선택적으로 제목을 가질 수 있으며(여기서는 title 옵션 사용).
4: 두 번째 행에는 계산 셀이 두 개 있으며, 자동으로 나란한 두 개의 카드로 나뉩니다.

시작하기

1단계: Quarto 설치

대시보드는 Quarto v1.4의 기능입니다. 시작하기 전에 Quarto 최신 릴리스를 설치하세요.

_ 아래 표에서 운영체제를 찾으세요

하이라이트

Quarto 1.8에는 다음과 같은 새 기능이 포함됩니다:

브랜드 지원 개선:
- 라이트/다크 색상: 브랜드 지정에서 어떤 색상에도 light와 dark를 지정할 수 있습니다.
- 라이트/다크 로고: 브랜드 지정에서 로고의 light, dark 버전을 지정할 수 있습니다.
- 브랜드 확장: Quarto 프로젝트 간에 브랜드 정의와 자산을 공유합니다.
- format: revealjs의 다크 브랜드: brand-mode: dark를 지정해 프레젠테이션에 다크 브랜드를 적용합니다.
HTML 접근성 검사: HTML 형식에 axe 옵션을 추가해 Axe-core 엔진으로 접근성 검사를 수행합니다.
코드 셀에서 실행 설정 접근: QUARTO_EXECUTE_INFO 환경 변수를 읽어 실행 컨텍스트 정보를 가져옵니다.
필터와 숏코드에서 메타데이터 및 변수 접근: 새로운 quarto.variables.get()와 quarto.metadata.get() API를 사용합니다.
기본 LaTeX 엔진이 이제 lualatex입니다.

의존성 업데이트:

mermaidjs가 11.6.0으로 업데이트됨
Bootstrap icons가 v1.13.1로 업데이트됨
julia 엔진의 QuartoNotebookRunner가 0.17.3으로 업데이트됨

릴리스 노트

모든 플랫폼의 릴리스 노트와 설치 파일은 다운로드 페이지에서 확인할 수 있습니다.

2단계: 기본 학습

먼저 대시보드 레이아웃을 구성하고 콘텐츠를 채우는 방법을 익히세요.

대시보드 레이아웃은 내비게이션 바를 제어하고, 페이지/행/열/탭셋/카드로 콘텐츠를 배치하는 방법을 설명합니다.

데이터 표시는 대시보드에서 플롯, 테이블, 값 박스, 텍스트를 표시하는 방법을 설명합니다.

3단계: 더 알아보기

기본을 익힌 뒤에는 다음 문서에서 더 자세한 내용을 확인하세요.

Examples는 참고할 수 있는 대시보드 예시 갤러리를 제공합니다.

Inputs는 대화형 대시보드에서 입력을 배치하는 다양한 방법(사이드바, 툴바, 카드에 직접 입력 연결 등)을 보여 줍니다.

Theming는 대시보드의 글꼴, 색상, 레이아웃 등 외관을 사용자 정의하는 방법을 설명합니다.

Parameters는 파라미터를 정의하고 명령줄로 서로 다른 값을 제공해 대시보드 변형을 만드는 방법을 설명합니다.

Deployment는 정적 대시보드(웹 호스트만 필요)와 Shiny 대시보드(Shiny Server 필요)를 배포하는 방법을 다룹니다.

Interactivity는 더 유연한 데이터 탐색을 위한 대화형 대시보드 제작 방법을 살펴봅니다.