Lab_08: Quarto로 대시보드 만들기

저자

이상일ㆍ박서우ㆍ김우형(서울대학교 지리교육과)

Modified

2026년 1월 5일

개요

여기서는 데이터사이언스 과정의 ‘소통(communication)’ 단계 혹은 ’데이터로 소통하기’를 위한 핵심 도구로서의 Quarto를 다룬다. 그리고 더 나아가 Quarto를 활용해 대시보드를 만드는 과정에 대해 설명한다.

힌트

Quarto는 한글로 ’쿼토’라고 읽는다.

1 Quarto 입문

1.1 Quarto란?

Quarto는 “과학적, 기술적 출판을 위한 오픈소스 시스템(an open-source scientific and technical publishing system)”으로 정의되는데, 다양한 형식의 저작물(연구 논문, 프레젠테이션, 대시보드, 웹사이트, 블로그, 서적 등)을 다양한 디지털 포맷(HTML, PDF, MS Word, ePub 등)으로 출판할 수 있게 해준다.

Quarto는 연구 노트, 레포트, 블로그 등을 작성할 수 있게 해준다는 측면에서 ‘개인적’ 도구이지만, 다양한 규모의 프로젝트의 원할한 진행을 도와준다는 측면에서 ‘협업’ 도구이며, 더 나아가 과학 커뮤니티 전체의 재현성(reproducibility) 고양에 도움을 줄 수 있다는 측면에서 ‘사회적’ 도구이기도 하다.

원래 R 커뮤니티에는 유사한 기능을 수행하는 RMarkdown이라는 도구가 존재했고 여전히 많은 사람들이 사용하고 있다. Quarto는 기존의 RMarkdown에 ’통합’이라는 키워드를 적용시켜 보다 발전된 형태의 저작 시스템으로 거듭난 것이다. 우선 Quarto는 다양한 오픈소스 프로그래밍 언어에서 사용될 수 있다(R, Python, Julia, Observable). 둘째, Quarto는 출판물의 다양한 형식에 구애되지 않는 일관성있는 저작 시스템을 제공한다.

그림 1: Quarto의 기본 개념(https://rstudio.github.io/cheatsheets/html/quarto.html)

Quarto 다큐먼트의 기본 구문은 마크다운(markdown), 혹은 마크다운의 보다 특수한 형태로서의 팬독(pandoc) 마크다운이다. 마크다운 언어는 마크업(markup) 언어의 일종인데, 마크업 언어는 다큐먼트의 구조와 포맷을 관장하는 텍스트-엔코딩 시스템이다. 그런데 마크업 언어는 배우기 어렵다. 예를 들어, 대표적인 마크업 언어인 HTML은 수많은 태그의 복잡한 위계 구조를 가지고 있어 사용자 입장에서는 읽기도 어렵고, 쓰기도 어렵다. 마크다운 언어는 사용자가 보다 사용하기 쉬운 구문 구조를 제공함으로써 동일한 웹 결과물을 보다 용이하게 제작할 수 있게 도와준다. Quarto는 이러한 마크다운 언어에 기반하고 있다.

프로그래밍 언어와의 관련성이라는 측면에서 보면, Quarto 다큐먼트는 기본적으로 워드프로세서에 프로그래밍 언어가 부가된 것으로 이해할 수 있다. 워드프로세서가 기본적으로 제공하는 텍스트 작성, 테이블 작성, 그래픽 삽입 등의 기능 외에 코드 편집, 코드 실행, 실행 결과 삽입 등의 기능이 함께 포함되어 있다. 이렇게 작성된 Quarto 다큐먼트는 .qmd라는 확장자를 갖는다. Quarto 다큐먼트를 렌더링하면 knitr 패키지가 마크다운 파일(.md)을 생성하고, pandoc이 그것들을 다양한 포맷의 산출물로 변환한다.

그림 2: Quarto의 작동 방식(https://quarto.org/docs/get-started/hello/rstudio.html)

1.2 Quarto 다큐먼트의 기본 구조

그림 3 을 바탕으로 Quarto다큐먼트의 기본 구조를 설명하고자 한다. 왼쪽은 비주얼 에디터(visual editor)를 사용한 것이고, 오른쪽은 소스 에디터(source editor)를 사용한 것이다. 소스 에디터는 마크다운 구문을 그대로 사용하는 것이므로 마크다운의 기본 형식에 대한 이해가 선행되어야 한다. 이에 반해 비주얼 에디터는 마치 워드프로세서를 다루듯 메뉴 형식으로 Quarto 다큐먼트를 작성할 수 있다. 비주얼 에디터에 대해서는 뒤에서 상세히 다루기로 한다.

그림 3: Quarto의 기본 구조와 비주얼 에디터

그림 3 의 왼쪽 그림에서 보다 잘 드러나는 것처럼, Quarto 다큐먼트는 크게 세 부분으로 나뉘어진다.

  • YAML 헤더(header)

  • 코드 청크(code chunk)

  • 마크다운 텍스트

1.2.1 YAML 헤더

YAML 헤더는 Quarto 다큐먼트의 최상단에 위치하는 것으로, 일종의 메타데이터로 다큐먼트의 전반적인 사항을 관장한다. YAML 헤더 부분은 세 개의 대시 부호(- - -)를 통해 다른 부분과 구분된다.

힌트

YAML은 YAML Ain’t Markup Language의 약자이며, 한글로 ’예믈’이라고 읽는다.

YAML 헤더의 모든 요소는 기본적으로 key: value의 행태를 띤다. key는 항목이고, value는 해당 항목에 대한 옵션값이다. 위의 예에는 title, format, editor의 세 key가 사용되었는데, 제목은 “Hello, Quarto”이며, 산출 포맷은 HTML이며, Quarto 다큐먼트 작성을 비주얼 에디터를 통해 할 것이라는 점을 명시하고 있다.

다양한 key를 설정할 수 있으며, 다음의 것들이 중요하다.

표 1: YAML 헤더의 다양한 key
key 설명
title 다큐먼트 제목
date 다큐먼트 작성 날짜
author 다큐먼트 저자 이름
format 다양한 포맷 관련 사항의 지정
toc 목차 삽입
number-section 섹션 제목에 자동 번호 부여 여부
execute: echo 소스 코드의 포함 여부를 글로벌하게 설정, 보통 true
execute: warning 경고 메시지를 산출물에 나타나게 할지를 글로벌하게 설정, 보통 false
editor 비주얼 에디터와 소스 에디터 중 선택, 보통 visual

1.2.2 코드 청크

코드 청크는 프로그래밍 언어의 코드가 들어가는 부분이다. R를 사용하는 경우 {r}로 시작한다. 데이터 불러오기, 정리하기, 변형하기, 시각화하기, 탐색하기, 수집하기와 관련된 모든 종류의 코드가 여기에 들어갈 수 있다. 보통 하나의 Quarto 다큐먼트에 다수의 코드 정크가 포함된다. 각 코드 청크 내에서 코드를 실행할 수 있다. 한 단위씩 실행할 때는 Ctrl + Enter 단축기를 사용하지만 한 코드 청크 내 모든 코드를 실행하고자 할 때는 Ctrl + Shift + Enter 단축기를 사용한다.

각 코드 청크의 앞 부분에 해당 코드 정크와 관련된 다양한 옵션을 #| 형태로 삽입할 수 있다. YAML 헤더에서처럼, key: value의 행태를 띤다. 가장 중요한 옵션은 코드 청크의 내용이나 실행 결과 등이 산출물에 어떻게 표현되는지를 결정하는 것들이다. 다음의 표는 코드를 실행할지의 여부, 코드를 보여줄지의 여부, 코드의 결과를 보여줄지의 여부, 생성되는 플롯을 보여줄지의 여부, 메시지나 경고문을 보여줄지의 여부 등을 관장하는 다양한 옵션을 정리한 것이다.

표 2: 다양한 코드 청크 옵션
Option Run code Show code Output Plots Messages Warnings
eval: false X X X X X
include: false X X X X X
echo: false X
results: hide X
fig-show: hide X
message: false X
warning: false X

1.2.3 마크다운 텍스트

워드프로세서처럼 텍스트를 작성한다. 섹션 헤더, 하이퍼링크(hyperlink), 이미지 등을 지정할 수 있고, 인라인 코드 청크(inline code chunk)도 삽입할 수 있다. 마크다운 텍스트의 작성에 비주얼 에디터는 큰 역할을 한다. 비주얼 에디터는 마크다운 언어의 사용자 편이성을 한번 더 강화한 것으로 볼 수 있다.

비주얼 에디터는 다음의 메뉴로 구성된다. 워드프로세서와 비슷한 형태를 가지고 있음을 알 수 있다. 많이 사용되는 기능은 아이콘을 통해 전면에 배치되어 있다.

그림 4: 비주얼 에디터의 메뉴바

포맷(Format), 삽입(Insert), 테이블(Table) 메뉴 속에 다양한 하위 기능들이 포함되어 있다. Quarto를 마스트하는데 비주얼 에디터의 기능을 숙달하는 것이 필수적이다.

그림 5: 비주얼 에디터의 메뉴 구성

1.3 기본 Quarto 다큐먼트의 작성

1.3.1 새 Quarto 다큐먼트 열기

File > New File > Quarto Document를 실행한다. Title과 Author란에 적절한 텍스트를 기입하고 아래에 위치한 Create 버튼을 클릭한다.

1.3.2 Quarto 다큐먼트의 작성

비주얼 에디터를 통해 아래와 같은 결과물이 나오도록 Quarto 다큐먼트를 작성해본다.

그림 6: 렌더링 결과

1.3.3 Quarto 다큐먼트의 렌더링

아래의 그림에 나타나 있는 Render 버튼을 클릭해 다큐먼트를 실행한다. 결과는 오른편 하단의 Viewer 탭에 나타난다. 결과를 그림 6 과 비교한다. 최종적인 html은 프로젝트 파일이 들어있는 폴더에 저장되어 있다. 본 실습에서 사용하는 강의 자료 또한 Quarto 다큐먼트를 통해 만들어진 결과물이다.

2 대시보드 만들기

본격적으로 Quarto를 이용해 데이터 대시보드(dashboard)를 만들어 본다. 대시보드는 단일한 주제에 대한 상호연관된 다양한 정보를 주로 그래픽 형태로 일관성 있게 제시한 것을 말한다. 일반적인 대시보드에서 결국 ’대시보드형 인터랙티브 웹 앱(web app)’을 만드는 것을 지향한다.

2.1 대시보드의 기본 구조

대시보드는 기본적으로 다섯 가지의 구성요소로 이루어진다. 각각은 메인 바디, 헤더, 내비게이터, 사이드바, 푸터이다.

그림 7: 대시보드의 기본 구조(https://blog.zarathu.com/posts/2023-12-11-quarto-dashboard/#tabset)

첫째, 메인 바디(main body)는 대시보드의 핵심 요소이다. 메인 바디는 카드(card)라고 불리는 기본 단위들로 구성된다. 개별 카드는 다양한 내용 요소(텍스트, 그래프, 표, 지도, 밸류박스 등)를 가질 수 있다. 즉, 어떤 카드 속에는 그래프가 들어가며, 어떤 카드 속에는 지도가 들어간다. 이러한 카드들은 특정한 레이아웃 요소(페이지, 행, 열, 탭셋 등)를 통해 메인 바디에 배열된다. 페이지(page)는 대시보드 레이아웃 요소 중 최상위 레벨인데, 개별 페이지는 다수의 행(row) 혹은 열(column)로 구성된다. 행 혹은 열을 또다른 행 혹은 열이 아닌 탭 클릭 방식으로 분할하고 싶을 때 탭셋(tabset)이 사용된다.

둘째, 헤더(header)는 대시보드의 가장 중요한 메타 정보(로고, 제목, 저자 등)를 포함한다.

셋째, 내비게이터(navigator)는 최상위 레이아웃인 페이지간 이동을 통제한다.

넷째, 사이드바(sidebar)는 주로 사용자의 인풋(input)을 받을 때 사용되는 것으로, 동적인 대시보드에서 주로 사용된다. Quarto는 사이드바 외에 툴바(toolbar)와 카드인풋(card input)과 같은 옵션을 제공한다.

다섯째, 푸터(footer)는 헤더와 유사한 기능을 하는데, 주로 부차적인 매타 정도를 포함한다.

다섯개의 구성 요소 중 가장 중요한 것은 메인 바디, 해더, 내비게이터이다. Quarto는 헤더와 내비게이터를 통합한 내비게이션바(navigation bar)를 제공한다. 푸터는 가장 지엽적인 요소이다. 대시보드를 만드는 데에 있어 Shiny 패키지를 활용하면 훨씬 동적이고 아름다운 대시보드를 만들 수 있다. 이후 이어지는 인터렉티브 심화 부분에서 Shiny 패키지를 학습한다.

다음의 대시보드를 살펴보자.

그림 8: 대시보드의 사례(https://quarto.org/docs/dashboards/)

이 대시보드는 크게 내비게이션바와 메인 바디로 구성되어 있다. 네비게이션바에는 다음의 내용이 포함되어 있다.

  • 이 대시보드의 제목(title)은 ’고객이탈(Customer Chrun)’이고 회사 이름은 DEMOCO(로고)이다.

  • 이 대시보드는 모두 두 개의 페이지(page)로 구성되어 있다. 페이지의 이름은 각각 ’Churn (Standard)’과 ’Data’이다.

메인 바디는 다음과 같은 레이아웃 요소들로 구성되어 있다.

  • 첫 번째 페이지(Churn (Standard))는 세 개의 행(row)으로 구성되어 있다.

  • 첫 번째 페이지의 첫 번째 행은 세 개의 카드(card)로 구성되어 있는데, 내용 요소는 모두 밸류박스(value box)이다.

  • 첫 번째 페이지의 두 번째 행은 두 개의 열(즉, 카드)로 구성되어 있는데, 내용 요소는 모두 그래프(graph)이다.

  • 첫 번째 페이지의 세 번째 행은 단일한 열(즉, 카드)로 구성되어 있는데, 내용 요소는 테이블(table)이다.

  • 두 번째 페이지에도 다양한 사항이 포함되어 있을 것이다.

2.2 레이아웃 설정

2.2.1 행과 열의 설정

행(row)과 열(column)은 가장 기본이 되는 레이아웃 요소이다. 기본 원칙은 다음과 같다.

  • 헤더 1(header 1) 레벨이 페이지를 결정한다.

  • 헤더 2(header 2) 레벨이 행의 구분을 결정한다.

  • 헤더 3(header 3) 레벨이 헤더 2의 행 안에서, 열의 구분을 결정한다.

## Row 1 {height=70%}

Card 1

## Row 2 {height=30%}

### Column 1 {width=40%}

Card 2-1 

### Column 2 {width=60%}

Card 2-2

위와 같이 설정하면 다음과 같은 결과를 얻을 수 있다. Row의 경우는 {height} 태그를 통해서, Column의 경우는 {width}태그를 통해 상대적인 크기를 설정할 수 있다.

그림 9: 대시보드의 행렬 구조(https://blog.zarathu.com/posts/2023-12-11-quarto-dashboard/)

2.2.2 탭셋의 설정

탭셋(tabset)은 행(row)과 열(column)을 다른 하위 행과 열이 아닌 탭의 설정을 통해 분할하고자 할 때 사용된다.

## Row 1 {height=70%}

Card 1

## Row 2 {height=30% .tabset}

### Column 1

Card 2-1 {width=50%}

### Column 2

Card 2-2 {width=50%}

위와 같이 설정하면 다음과 같은 결과를 얻을 수 있다. 탭셋의 설정을 위해 {.tabset} 태그가 사용된다는 점에 주의한다.

그림 10: 대시보드의 탭셋 구조

2.2.3 페이지의 설정

페이지(page)는 최상위 레이아웃 요소이다. 기본 원칙은 다음과 같다.

  • 헤더 1(header 1) 레벨이 페이지의 구분을 결정한다.

  • Quarto에서는 페이지가 내비게이션바에 나타난다.

# Page A

## Row 1 {height=70%}

Card 1

## Row 2 {height=30%}

### Column 1 {width=40%}

Card 2-1

### Column 2 {width=60%}

Card 2-2

# Page B

Card 3

위와 같이 설정하면 다음과 같은 결과를 얻을 수 있다. 페이지가 내비게이션바에서 마치 탭셋처럼 존재하는 것에 주의한다.

그림 11: 대시보드의 페이지 구조

2.3 내비게이션바와 사이드바의 설정

2.3.1 내비게이션바의 설정

내비게이션바는 헤더와 내비게이터로 구성된다. 내비게이터는 페이지가 설정된 경우에만 나타나게 된다. 여기서는 헤더에 집중하고자 한다. 대시보드 헤더는 다른 Quarto 다큐먼트와 마찬가지로 YAML 헤더를 통해 통제된다. 다음과 같은 요소들이 중요하다.

  • 제목(title): 대시보드 전체의 이름을 결정한다.

  • 저자(author): 만든 사람이나 관리 회사의 이름이지만, 부제로 활용되기도 한다.

  • 포맷(format): 기본 설정인 대시보드(dashboard) 하에 다양한 하위 설정이 가능하다.

    • logo: 로고 그림 파일을 지정하면 내비게이션바의 왼쪽 끝에 나타난다.

    • nav-buttons: github이나 이메일 연결을 설정할 수 있다.

    • scrolling: true 설정: 디폴트는 false인데, 레이아웃 요소들의 높이들의 합이 100%가 되도록 일괄적으로 조절된다. true로 지정하면, 개별 내용 요소의 원 크기를 그대로 살리면서 스크롤되게 디자인이 바뀐다. 둘 다를 실험해 보고 자신의 목적에 맞는 것을 고른다.

  • 테마(theme): 대시보드의 외관을 한꺼번에 바꿀 수 있다. 모두 25개의 부트스와치(bootswatch) 테마가 존재한다. 여러가지를 실험해 보고 자신의 취향에 맞는 것을 선정한다.

2.3.2 사이드바의 설정

사이드바(sidebar)는 {.sidebar} 태그를 통해 만들 수 있는데, 헤더 1(header 1) 레벨이므로 특정한 페이지에 종속되지 않는다. 사이드바는 주로 사용자의 투입을 받을 때 사용되기 때문에 동적인 대시보드에 주로 사용된다. 정적인 대시보드의 경우에는 텍스트를 통한 특정 정보의 제공에 사용될 수 있다.

# {.sidebar}
Sidebar content

위와 같이 설정하면 다음과 같은 결과를 얻을 수 있다.

그림 12: 대시보드의 사이드바 구조(https://blog.zarathu.com/posts/2023-12-11-quarto-dashboard/)

2.4 카드와 내용 요소

카드(card)란 특정한 내용 요소(텍스트, 벨류박스, 테이블, 그래프, 지도 등)를 포함하고 있는, 대시보드의 가장 기본적인 단위이다. 다음의 두 가지 사항이 중요하다.

  • 카드의 제목이 중요하다. 완성된 대시보드 상에 등장하기 때문에 이해하기 쉬운 제목이 부여되어야 한다.

  • 내용 요소에 따라 카드를 작성하는 방법이 조금 다르다.

내용 요소 제작의 세세한 사항은 아래의 “예시 대시보드 만들기”에서 확인한다.

2.4.1 그래프

Quarto는 그래프 하나를 만들어내는 코드 청크를 하나의 카드로 인식한다. 그래프 카드의 제목은 코드 청크 내의 #| title: 옵션을 통해 부여된다. ggplot2와 같은 정적인 플롯 도구 뿐만 아니라 plotly와 같은 반응형 플롯 도구를 사용하여 그래프 카드를 생성한다.

2.4.2 테이블

Quarto는 테이블 하나를 디스플레이하는 코드 청크를 하나의 카드로 인식한다. 테이블 카드의 제목은 코드 청크 내의 #| title: 옵션을 통해 부여된다. knitr 패키지의 kable() 함수, gt 패키지의 gt() 함수, DT 패키지의 datatable() 함수 등을 이용해 테이블 카드를 생성한다.

2.4.3 지도

Quarto는 지도 하나를 디스플레이하는 코드 청크를 하나의 카드로 인식한다. 지도 카드의 제목은 코드 청크 내의 #| title: 옵션을 통해 부여된다. ggplot2와 같은 정적인 지도 제작 도구 뿐만 아니라 leaflet과 같은 반응형 지도 제작 도구를 사용하여 지도 카드를 생성한다.

2.4.4 텍스트

일종의 텍스트 박스도 하나의 카드로 간주된다. 그래프, 테이블, 지도가 하나의 코드 청크가 하나의 카드로 인식되는데 반해 텍스트 카드는 다른 형식을 취한다. ::: {.card} div를 사용해야 하며 #| title: 옵션을 사용해 제목을 지정해야 한다.

2.4.5 밸류박스

요약적 수치를 큰 박스 속에 나타내는 것을 밸류박스(value box)라고 하는데, 코드 청크로 표현하지만 형식은 조금 다르다. #| content: valuebox라는 옵션이 반드시 포함되야 하며, 제목을 지정하기 위해 #| title: 옵션도 필요하다. 또한 리스트를 이용해 아이콘(icon), 컬러(color), 수치(value)를 지정해야 한다.

아이콘은 부트스트랩 아이콘(bootstrap icon)이 사용된다. 적절한 아이콘을 찾고 그 이름을 icon = 옵션을 통해 설정하는 것이 중요하다.

모든 컬러가 다 사용가능한 것은 아니다. 아래의 표를 참조하여 컬러를 설정해야 한다.

표 3: 밸류박스의 컬러 선택
Color Alias Default Theme Color(s)
primary Blue
secondary Gray
success Green
info Bright Blue
warning Yellow/Orange
danger Red
light Light Gray
dark Black

2.5 예시 대시보드 만들기

예시 대시보드(https://sangillee.quarto.pub/my-first-dashboard/)에 접속하여 구성을 살펴본다. 다음의 사항에 주목한다.

  • 내비게이션바에 서울대학교 로고가 있고, 오른쪽 맨 끝애 github 및 이메일 아이콘이 위치해 있다.

  • 대시보드가 네 개의 페이지(Intro, Graphs, Tables, Maps)로 나뉘어져 있고, 각 페이지마다 행, 열, 탭셋과 같은 레이아웃 요소들이 배치되어 있다.

어떤 식으로 제작할 수 있을지 생각해 본다. 새로운 프로젝트를 생성하고 Quarto 다큐먼트를 생성한다. 아래는 해당 대시보드를 만들기 위해 사용된 코드이다. 참고하여 자신만의 대시보드를 만들어 본다.

2.5.1 YAML 해더

특히, nav-buttons: 옵션의 지정 형식에 주의한다. scrolling 옵션과 다양한 theme: 옵션을 시험해 본다.

---
title: "My First Dashboard"
author: Sang-Il Lee
format: 
  dashboard:
    logo: snu_logo_2.png
    nav-buttons: 
      - icon: github
        href: https://github.com/sangillee66
        aria-label: GitHub
      - icon: envelope
        href: mailto:si_lee@snu.ac.kr
        aria-label: Mail
    # scrolling: true
theme: default
editor: visual
editor_options: 
  chunk_output_type: console
---

2.5.2 Intro 페이지

Intro라는 이름의 페이지를 설정한다.

# Intro

첫번째 행: Text 카드

행을 설정하고 행의 상대적인 높이(10%)를 지정한다.

## Row {height="10%"}

텍스트 카드를 생성한다. 텍스트 카드를 생성하기 위해 {.card} 태그가 사용되어야 하며, 텍스트 카드의 제목을 지정하기 위해 title= 옵션이 사용되어야 함에 주의한다.

::: {.card title="Text"}
This is my first dashboard.
:::

두번째 행의 탭셋: Histogram of GDP per capita & Table of Mean Values

행을 설정하고 행의 상대적인 높이(70%)를 지정한다. 탭셋을 생성하기 위해 {.tabset} 태그가 사용되어야 함에 주의한다.

## Row {.tabset height="70%"}

그래프 카드를 생성하기 위해 ggplot2 패키지를 활용한다. 그래프 카드의 제목을 지정하기 위해 title= 옵션이 사용되어야 함에 주의한다.

#| title: "Histogram of GDP per capita"
library(tidyverse)
library(gapminder)
gapminder |> 
  filter(year == 2007) |>
  ggplot(aes(x = gdpPercap)) +
  geom_histogram()

테이블 카드를 생성하기 위해 knitr 패키지의 kable() 함수를 활용한다. 테이블 카드의 제목을 지정하기 위해 title= 옵션이 사용되어야 함에 주의한다.

#| title: "Table of Mean Values"
library(knitr)
gapminder |> 
  filter(year == 2007) |> 
  summarize(
    GDP_percap = mean(gdpPercap),
    Life_Exp = mean(lifeExp),
    Population = mean(pop),
    .by = continent
  ) |> 
  kable()

세번째 행의 3개의 밸류박스

행을 설정하고 행의 상대적인 높이(20%)를 지정한다.

## Row {height="20%"}

첫번째 밸류박스를 생성한다. #| content: valuebox 옵션과 #| title: 옵션이 사용됨에 주의한다.

#| content: valuebox
#| title: "Number of Countries"
n_countries <- gapminder |> distinct(country) |> nrow()
list(
  icon = "asterisk",
  color = "primary",
  value = n_countries
)

두번째 밸류박스를 생성한다.

#| content: valuebox
#| title: "First Year"
first_year <- gapminder |> distinct(year) |> pull() |> first()
list(
  icon = "airplane",
  color = "secondary",
  value = first_year

세번째 밸류박스를 생성한다.

#| content: valuebox
#| title: "Last Year"
last_year <- gapminder |> distinct(year) |> pull() |> last()
list(
  icon = "bank",
  color = "success",
  value = last_year
)

2.5.3 Graphs 페이지

Graphs라는 이름의 페이지를 설정한다.

# Graphs

첫번째 행의 그래프 카드: GDP and Life Expectancy

행을 설정한다.

## Row

ggplot2 패키지를 활용하여 그래프 카드를 생성한다.

#| title: GDP and Life Expectancy
gapminder |> 
  filter(year == 2007) |> 
  ggplot(aes(x = log10(gdpPercap), y = lifeExp)) +
  geom_point(aes(color = continent), show.legend = FALSE) +
  geom_smooth() + 
  facet_wrap(~continent, ncol = 5)

두번째 행의 그래프 카드: Population & Life Expectancy

첫번째 그래프(Population)를 위한 열을 설정한다.

### Column

그래프 카드를 생성한다.

#| title: Population
gapminder |> 
  summarize(
    sum_pop = sum(pop),
    .by = c(year, continent)
  ) |> 
  ggplot(aes(x = year, y = sum_pop)) +
  geom_area(aes(fill = continent)) +
  labs(x = "Year", y = "Population", fill = "Continents")

두번째 그래프(Life Expectancy)를 위한 열을 설정한다.

### Column

그래프 카드를 생성한다.

#| title: Life Expectancy
gapminder |> 
  ggplot(aes(x = year, y = lifeExp)) +
  geom_line(aes(color = continent, group = country)) +
  labs(x = "Year", y = "Life Expectancy", color = "Continents")

2.5.4 Tables 페이지

Tables라는 이름의 페이지를 설정한다.

# Tables

단일 행을 설정한다.

## Row

DT 패키지를 활용하여 테이블 카드를 생성한다.

#| title: Lookup Table
library(DT)
datatable(gapminder, filter = "top", 
          options = list(
            pageLength = 5, autoWidth = TRUE
          ))

2.5.5 Maps 페이지

Maps라는 이름의 페이지를 설정한다.

# Maps

단일 행을 설정한다.

## Row

leaflet 패키지를 활용하여 지도 카드를 생성한다.

#| title: A Reference Map 
library(leaflet) 
leaflet() |>  
  addTiles()

2.6 대시보드를 웹상에 배포하기

블로그와 마찬가지로 다음의 절차에 따라 완성된 대시보드를 웹 상에 출판한다. 여기서는 Posit에서 제공하는 무료 출판 사이트인 Quarto Pub을 활용한다.

  • Quarto Pub에 접속하여 계정을 만든다.

  • RStudio에서, 왼쪽 하단부의 Terminal 탭을 누른다.

  • 프롬프트에 다음과 같이 입력하고 실행한다: quarto publish quarto-pub

  • 나머지 사항에 대해서는 조교의 도움을 받는다.