대시보드 레이아웃

대시보드는 내비게이션과 데이터 표시를 위한 컴포넌트로 구성됩니다. 아래에서는 대시보드의 내비게이션과 레이아웃을 구성하는 컴포넌트를 설명합니다.

내비게이션

모든 대시보드에는 제목과(선택적으로) 로고, 저자를 표시하는 최상위 내비게이션 바가 있습니다. 여러 페이지가 있는 대시보드는 내비게이션 바에 각 페이지 링크도 포함합니다.

title과 author는 일반 문서와 동일하게 지정합니다. logo와 하나 이상의 nav-buttons도 포함할 수 있습니다.

--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: 
  dashboard:
    logo: images/penguins.png
    nav-buttons: [linkedin, twitter, github]
---

내비게이션 버튼으로 인식되는 특수 별칭은 linkedin, facebook, reddit, twitter, github입니다. Nav Items에서 설명한 방식으로 사용자 정의 버튼을 만들 수도 있습니다. 예:

format:
  dashboard:
    nav-buttons:
      - reddit
      - icon: gitlab
        href: https://gitlab.com/

레이아웃

페이지 안에서는 행과 열을 번갈아 배치해 대시보드 컴포넌트를 구성합니다. 행과 열은 마크다운 제목과 계산 셀로 정의됩니다. 예를 들어 아래는 두 개의 행을 가진 간단한 레이아웃이며, 두 번째 행은 두 개의 열로 나뉩니다.

---
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: dashboard
---
    
## Row {height=70%}

```{python}
```

## Row {height=30%}

```{python}
```

```{python}
```

여기서 2단계 마크다운 제목(예: ## Row {height=70%})은 행의 내용과 상대 높이를 정의합니다. ```{python} 코드 셀은 자동으로 카드가 되어 행 안의 열로 배치됩니다.

Note제목 텍스트는 필요하지 않음

Quarto 대시보드에서 행과 열의 레이아웃을 정의할 때 마크다운 제목을 사용하지만, 제목 텍스트 자체는 버려집니다. 이 문서에서는 이해를 돕기 위해 Row와 Column 제목을 사용했지만, 소스 코드를 탐색하기 쉽도록 더 설명적인 제목을 사용해도 됩니다.

방향

기본적으로 대시보드 페이지는 먼저 행, 그 다음 열 순서로 배치됩니다. 하지만 orientation: columns 문서 옵션으로 이를 변경할 수 있습니다.

---
title: "Diamonds Explorer"
format: 
  dashboard:
    orientation: columns
---
    
## Column {width=60%}

```{python}
```

## Column {width=40%}

```{python}
```

```{python}
```

채우기 vs. 흐름

명시적인 높이가 지정되지 않은 행은 남은 공간을 채우거나 자연 높이로 흐르도록 크기가 결정됩니다. 채우기 레이아웃이 일반적으로 기본값이지만, 마크다운 텍스트 같은 일부 콘텐츠는 흐름 레이아웃이 기본입니다.

기본 동작이 원하는 것과 다르면 행에 .fill 또는 .flow 클래스를 적용해 명시적으로 지정할 수 있습니다. 예:

## Row {.fill}

## Row {.flow}

스크롤

기본적으로 대시보드 콘텐츠는 페이지의 사용 가능한 공간을 모두 채웁니다. 대신 scrolling: true 옵션을 지정해 자연 높이로 레이아웃을 구성하고, 페이지가 넘치면 스크롤하도록 할 수 있습니다. 예:

---
title: "Scrolling"
format: 
  dashboard:
    scrolling: true 
---
    
```{python}
```

```{python}
```

```{python}
```

스크롤을 지원하므로 더 많은 차트를 쉽게 배치할 수 있습니다. 하지만 페이지를 채우는 레이아웃에서 콘텐츠를 구성하는 다른 방법으로 페이지와 탭셋도 고려할 수 있습니다(다음 두 섹션에서 설명).

페이지

위의 레이아웃 예시는 모두 단일 페이지 대시보드였습니다. 여러 페이지를 만들려면 행과 열을 정의하는 2단계 제목 위에 1단계 제목을 추가합니다. 1단계 제목 텍스트는 내비게이션 바의 페이지 링크로 사용됩니다. 예를 들어 다음 대시보드는 콘텐츠를 두 페이지로 나눕니다.

---
title: "Palmer Penguins"
format: dashboard
---
    
# Bills 

```{python}
```

# Flippers {orientation="columns" scrolling="true"}

## Column

```{python}
```

```{python}
```

## Column 

```{python}
```

페이지 제목에 orientation 속성을 추가하면 페이지별 방향을 설정할 수 있습니다(위 예시에서 두 번째 페이지는 orientation="columns"). 또한 페이지 제목에 scrolling 속성을 추가해 페이지별 스크롤 동작을 제어할 수 있습니다(위 예시에서는 scrolling="true").

탭셋

탭셋은 데이터의 여러 뷰를 제공하거나, 중요도가 낮은 콘텐츠를 주요 표시 영역을 방해하지 않고 포함할 때 유용합니다. 탭셋은 행 또는 열에 .tabset 클래스를 추가해 생성합니다. 예를 들어 아래 레이아웃은 하단 행을 두 개의 탭으로 표시합니다.

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row

```{python}
```

## Row {.tabset}

```{python}
#| title: Chart 2
```

```{python}
#| title: Chart 3
```

탭셋은 원하는 깊이로 중첩할 수 있습니다. 아래는 최상위 행의 한 열 안에 탭셋을 넣은 예시입니다.

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row {height=70%}

```{python}
```

## Row {height=30%}

### Column {.tabset}

```{python}
#| title: Chart 2
```

```{python}
#| title: Chart 3
```

### Column

```{python}
```

탭셋 열 안의 각 셀이 하나의 탭이 됩니다. 탭 제목은 각 탭을 만드는 셀에 title 옵션을 추가해 지정합니다.

마크다운만 포함된 탭도 만들 수 있습니다. 이를 위해 ::: {.card} div를 사용하고 탭에 사용할 title 속성을 추가합니다.

::: {.card title="My Title"}
Card text 
:::

위 예시에서는 각 탭에 하나의 카드가 포함되었습니다. 탭에 여러 카드를 포함하려면 탭셋 행 또는 열 아래에 한 단계 더 제목을 추가하세요. 예:

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row {.tabset}

### Plots

```{python}
```

```{python}
```

### Data

```{python}
```

카드

카드는 대시보드에서 콘텐츠를 표시하는 기본 단위입니다. 행과 열 안에 있는 셀과 마크다운 콘텐츠는 자동으로 카드로 만들어집니다. 예를 들어 아래의 Python 셀은 각각 카드가 됩니다.

## Column {width=40%}

```{python}
```

```{python}
```

.card div를 사용하면 임의의 마크다운을 담는 카드를 만들 수도 있습니다. 예:

## Column {width=40%}

```{python}
```

::: {.card}
This text will be displayed within a card
:::

```{python}
```

마크다운 카드에 제목을 추가하려면 title 속성을 사용합니다. 예:

::: {.card title="My Title"}
This text will be displayed within a card
:::

Jupyter 노트북에서 작성하는 경우, 마크다운 셀은 자동으로 .card div가 됩니다.

셀과 콘텐츠가 카드로 매핑되는 방식(예: 셀 제외, 다중 출력 셀 등)에 대한 자세한 내용은 셀 출력을 참고하세요.

표시 옵션

기본적으로 카드는 제목 없이, 가장자리에 약간의 여백을 두고 표시됩니다. 아래는 Leaflet 지도를 표시한 카드입니다.

title 셀 옵션으로 카드에 제목을 추가할 수 있습니다. padding 옵션으로 여백을 사용자 정의할 수도 있습니다. 예를 들어 아래는 제목을 추가하고 여백을 0으로 설정합니다.

```{python}
#| title: "World Map"
#| padding: 0px
from ipyleaflet import Map, basemaps, basemap_to_tiles
Map(basemap=basemap_to_tiles(basemaps.OpenStreetMap.Mapnik),
    center=(48.204793, 350.121558), zoom=2)
```

셀의 첫 번째 출력으로 title= 표현식을 출력하면 동적 title을 만들 수 있습니다. 예:

Python

```{python}
from ipyleaflet import Map, basemaps, basemap_to_tiles

lat = 48
long = 350

print("title=", f"World Map at {lat}, {long}")

Map(basemap=basemap_to_tiles(basemaps.OpenStreetMap.Mapnik),
    center=(lat, long), zoom=2)
```

R

```{r}
library(leaflet)

lat <- 48
long <- 350

cat("title=", "World Map at", lat, long)

leaflet() |> addTiles() |> 
  setView(long, lat, zoom = 2)
```

카드 확장

기본적으로 카드 오른쪽 아래의 확장 버튼으로 콘텐츠를 확대할 수 있습니다.

카드를 확장 가능하게 하고 싶지 않다면 문서 수준 또는 개별 카드에서 expandable: false를 지정하세요.

카드 채우기 동작

Quarto는 카드 콘텐츠를 살펴보고 내용에 가장 알맞은 채우기 동작을 선택합니다(기본적으로 카드는 컨테이너를 채우지만, 간단한 마크다운 같은 경우 카드가 flow 레이아웃을 선택합니다). fill 속성에 불리언 값을 지정해 카드의 채우기 동작을 명시적으로 제어할 수 있습니다. 예를 들어 fill="false"는 카드 높이를 내용 크기에 맞춥니다(채우지 않음).

더 알아보기

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

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

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

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

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

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