14  대쉬보드

저자가 디지털 글쓰기를 하면서 가장 충격을 받았던 사례 중 하나는 flexdashboard 패키지를 접했을 때였다. 고정관념으로 대시보드 제작은 웹사이트를 제작하는 것이라고 여겨, 소프트웨어 개발자가 아니면 불가능하리라 생각했다. 즉, HTML, CSS, JavaScript 등을 활용하여 웹사이트에 그래프와 표, Value 박스 등 데이터 과학 구성 요소를 결합해야 하기에, 통계 전공의 데이터 과학자와 협업해야 한다고 여겼다. 하지만, flexdashboard 패키지를 사용하면 R 마크다운으로 간단히 대시보드를 제작할 수 있으며, HTML, CSS, JavaScript에 대한 지식이 없어도 대시보드를 만들 수 있다는 사실을 알았다. 쿼토 1.4 버전이 출시되면서 R마크다운 flexdashboard 기능을 쿼토 대시보드(dashboards)를 통해 제공하고 있다. 앞선 flexdashboard 경험을 통해 저작방법이 훨씬 수월해졌으며 bslib과 통합되면서 사용자 경험도 훨씬 나아졌다.

지금은 기억에서 멀어져 가고 있지만, 몇 년 전 코로나19가 전 세계를 강타했을 때, 국내외 코로나 진행 상황을 대시보드로 제작한 사례도 있다. 과거 flexdashboard 패키지로 제작된 대시보드를 쿼토 대시보드로 제작해 보자. 데이터는 coronavirus 패키지를 통해 데이터셋이 자동으로 갱신되어 대시보드 개발에 드는 노력을 크게 줄일 수 있었다. 또한, 쿼토 대시보드가 제공하는 다양한 레이아웃 기능으로 대시보드 설계가 용이해졌으며, gt, highcharter, leaflet, plotly 등 인터랙티브 패키지도 쿼토 대시보드에 반영하여 세련된 대시보드를 쉽고 전문적으로 제작할 수 있다. 마지막으로 gh-pages를 이용해 무료면서도 안정적으로 배포도 가능하다.

14.1 대쉬보드 제작과정

대쉬보드 제작을 순차적으로 진행할 수도 있지만 경우에 따라서는 병렬도 동시작업도 가능하다. 가장 일반적인 순차적 대쉬보드 제작과정은 다음과 같다. 먼저, 전세계와 한국의 코로나19 데이터를 수집하고 수집된 데이터를 분석 가능한 형태로 데이터를 전처리하여 대쉬보드 각 구성요소에 맞게 데이터셋을 맞춘다. 대시보드 UI/UX 디자인을 계획하면서 적절한 시각화 도구(gt, highcharter, leaflet, plotly)에 대한 기술적인 검토도 함께 진행한다. (Kulkarni 2019)

데이터와 UI/UX 디자인과 기술검토가 마무리된 다음, 대시보드 구성요소를 본격적으로 Value 박스, gt 표, ggplot 그래프 등으로 개발한다. 대쉬보드 외양을 정의하는 대시보드 브랜딩과 디자인 작업은 CSS/SCSS 스타일링 작업을 통해 진행된다. 대시보드 테스트 단계는 모든 구성요소가 올바르게 작동하는지 테스트하고, 완성된 대시보드를 깃헙 페이지 웹사이트에 배포한다. 이후 자동화 및 업데이트 운영 및 유지보수 단계에서 데이터가 실시간으로 갱신되도록 자동화시키고 신규 개발 코드와 UI/UX 코드도 CI/CD를 통해 자동화한다.

그림 14.1: 대쉬보드 제작 흐름

14.2 코로나19 대쉬보드

코로나19 대시보드 제작은 여러 단계로 구성된다. 먼저, 코로나19 데이터를 사용할 수 있는데 데이터는 coronavirus 데이터 팩키지로 제작되어 데이터 수집 과정이 간소화되고 이미 잘 구성되어 있어 데이터 수집에 따른 공수를 크게 줄일 수 있다. 데이터를 수집한 후, 쿼토 대시보드(dashboards)를 엔진으로 사용하여 대시보드를 제작한다. 쿼토 대시보드는 쿼토 마크다운을 기반으로 하며 다양한 시각화 도구와 통합이 안정적이고 쉽게 사용할 수 있다.

14.2.1 데이터셋

코로나 19 데이터셋은 존스 홉킨스 대학(Johns Hopkins University)과 세계보건기구(WHO)에서 제공되는 두가지 형태로 제공되고 있지만 존스 홉킨스 대학 데이터셋이 WHO 데이터셋 보다 더 많은 호응을 받아 coronavirus 데이터 패키지를 사용한다. 원자료가 데이터프레임이라 티블(tibble)로 자료형을 바꾸고 변수명을 janitor 패키지 clean_names() 함수로 변수명을 정리한다.

• coronavirus: The coronavirus dataset
  • COVID-19: Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE
• covid: Novel Coronavirus(2019-nCoV) updates from WHO daily reports
  • PDF WHO 보고서

library(tidyverse)
# devtools::install_github("RamiKrispin/coronavirus")
library(coronavirus)
library(bslib)
library(bsicons)

data("coronavirus")

coronavirus <- coronavirus %>% 
  as_tibble() %>%
  janitor::clean_names() 

14.2.2 대쉬보드 디자인

데이터 과학 요소가 들어간 대쉬보드 제작을 위한 UI 설계안을 작성한다. 디자인 작업을 완료한 후, 와이어프레임(wireframe)을 중심으로 데이터 과학 요소가 포함된 대시보드 UI 설계작업을 진행한다.

아이콘과 디자인 요소를 위해 Font Awesome, Ionicons, Bootstrap, Bootstrap과 같은 라이브러리를 활용하여 다양한 아이콘과 UI 컴포넌트를 통해 대시보드 시각적 표현을 풍부하게 한다.

그림 14.2: 코로나19 대쉬보드 UI 설계

14.2.3 프로토타입 제작

작성한 wireframe을 기반으로 쿼토 대시보드 문법에 맞춰 대시보드 구성요소를 적절히 배치하고 쿼토 마크다운 코드로 대시보드를 구현한다. 전체적으로 ValueBox를 대시보드 상단에 배치하고, 아래 두 그래프 영역에 필요한 그래프를 삽입하고 전세계와 한국을 탭(tabset)으로 구분하여 표현하고 대쉬보드 메인(main)에 이미지를 두개 배치한다. 쿼토 확장기능 lipsum을 활용하여 대시보드 메인에 이미지를 배치하여 와이어프레임에서 작성한 디자인을 구현한다. 대시보드에 텍스트가 필요한 경우 lipsum을 활용하여 텍스트를 삽입하여 전체적인 대시보드 외양을 살펴보는 것도 가능하다.

그림 14.3: 쿼토 대시보드 배치도(layout)

# 상단 메뉴바(navbar) “전세계” 탭을 만들게 되고 ## Row 를 통해 Value 박스가 들어갈 항목을 명세한다. flexdashboards 문법과 비교하면 Value 박스 문법이 list와 #|으로 잘 구성되어 코드가 간결한 것을 알 수 있다. 쿼토 확장기능 lipsum을 통해 unsplash 개와 고양이 이미지를 임의로 넣어 대시보드 배치를 확인하도록 코드를 간결히 작성했다.

---
title: "코로나19 대쉬보드"
format: dashboard
---

# 전세계

## Row

```{r}
#| content: valuebox
#| title: "확진자수"

list(
  icon = "hospital",
  color = "yellow",
  value = 100
)
```

```{r}
#| content: valuebox
#| title: "사망자수"

list(
  icon = "moon-fill",
  color = "danger",
  value = 100
)
```

```{r}
#| content: valuebox
#| title: "회복자수"

list(
  icon = "heart-fill",
  color = "green",
  value = 100
)
```

## Column

### Chart 1

\{\{< unsplash dog.jpg >\}\}

### Chart 2

\{\{< unsplash cat.jpg >\}\}

14.2.4 구성요소

코로나19 대시보드를 구성하는 주요 구성요소가 value 박스, 표, 그래프로 구성되기 때문에 각각을 레고블럭처럼 모듈별로 개발한다.

value 박스

검사자, 확진자, 사망자, 회복자를 value 박스로 만들어 주요현황을 쉽게 파악할 수 있도록 구성한다. 쿼토 대시보드 valuebox 문법에 맞춰 코드를 작성하고 부츠트랩 아이콘도 검색하여 삽입한다.

## Row

```{r}
#| content: valuebox
#| title: "확진자수"

list(
  icon = "hospital",
  color = "yellow",
  value = 100
)
```

```{r}
#| content: valuebox
#| title: "사망자수"

list(
  icon = "moon-fill",
  color = "danger",
  value = 100
)
```

```{r}
#| content: valuebox
#| title: "회복자수"

list(
  icon = "heart-fill",
  color = "green",
  value = 100
)
```

그림 14.4: valueBox

표

coronavirus 데이터 팩키지에서 월별 코로나 통계표를 전세계 기준으로 작성한다. 먼저 대한민국을 포함한 전세계 년월별 확진자수, 사망자수, 회복자수 정적 gt 코로나 19 통계표를 작성한다.

coronavirus <- coronavirus::coronavirus %>% 
  as_tibble() %>%
  janitor::clean_names() 

coronavirus |> 
  mutate(yearmon = floor_date(date, "month")) |> 
  group_by(yearmon, type) |>
  summarise(사례수 = sum(cases)) |> 
  pivot_wider(names_from = type, values_from = 사례수) |> 
  ungroup() |> 
  arrange(desc(yearmon)) |> 
  slice(1:10) |> 
  gt() |> 
  cols_align(columns = yearmon, "center") |> 
  cols_label(yearmon = "년월",
             confirmed = "확진자수", 
             death = "사망자수", 
             recovery = "회복자수") |> 
  fmt_number(columns = 2:4, decimals = 0) |> 
  data_color(
    columns = recovery,
    palette = "Greens"
  ) |>
  data_color(
    columns = death,
    palette = "Purples"
  ) |>
  data_color(
    columns = confirmed,
    palette = "Blues"
  )  

년월	확진자수	사망자수	회복자수
2023-03-01	1,247,911	9,120	0
2023-02-01	4,587,649	37,344	0
2023-01-01	10,270,797	141,962	0
2022-12-01	17,219,669	56,975	0
2022-11-01	12,388,536	43,439	0
2022-10-01	12,795,215	45,200	0
2022-09-01	14,721,332	51,212	0
2022-08-01	25,713,990	75,102	0
2022-07-01	29,650,733	61,119	0
2022-06-01	17,732,748	43,958	0

표 14.1: 대시보드를 위한 전세계 코로나19 통계표

그래프

전세계 코로나19 추이를 정적 ggplot 그래프로 작성한다. coronavirus 데이터 패키지에서 확진자(confirmed), 사망자(death), 회복자(recovery)로 나눠져 있는 데이터를 월별로 그래프를 작성한다.

coronavirus |> 
  mutate(yearmon = floor_date(date, "month")) |> 
  group_by(yearmon, type) |>
  summarise(사례수 = sum(cases)) |> 
  ungroup() |> 
  ggplot(aes(x = yearmon, y = 사례수, color = type)) +
   geom_line() +
   geom_point() +
   theme_minimal(base_family = "NanumGothic") +
   theme(legend.position = "none") +
   scale_y_sqrt(labels = scales::comma) +
   labs(title = "전세계 코로나19 추이",
        y = "사례수",
        x = NULL,
        color = "종류") +
    facet_wrap(~type, scales = "free_y")

그림 14.5: 전세계 코로나19 유형별 추세 그래프

14.2.5 대시보드

위에서 작성한 모듈별로 작성한 value 박스, gt 통계표, ggplot 그래프 코드를 대시보드에 결합했고, 색상과 글꼴 레이아웃 등 CSS/SCSS 디자인 기본요소만을 적용하여 대시보드를 완성했다. 로컬 서버에서 대시보드를 미리 보면서, 사용자 인터페이스의 일관성과 시각적 호소력을 높이는 후속 작업과 함께 전세계 옆에 “한국” 탭을 만들어 한국 코로나19 현황을 면밀히 살펴볼 수 있는 대시보드를 추가로 개발한다.

코로나19 전세계 대시보드

14.3 한국 대시보드

한국 대시보드는 전세계 대시보드와 동일하며 filter(str_detect(country, "Korea")) 코드만 추가하여 한국 코로나19 현황만 추출하면 된다.

coronavirus |> 
  filter(str_detect(country, "Korea")) |> 
  mutate(yearmon = floor_date(date, "month")) |> 
  group_by(yearmon, type) |>
  summarise(사례수 = sum(cases)) |> 
  ungroup()

큰 틀에서 한국 데이터만 추출이 되었지만 대시보드는 “전세계”와 “대한민국” 2개의 탭으로 작성되었기 때문에 코드가 길어지게 되었다. 이때 쿼토 {{ < include *.qmd > }} 기능을 사용하면 대시보드 코드를 모듈화하여 가독성도 높일 수 있고 유지보수도 수월하게 된다. 즉, world.qmd 쿼토 파일에 전세계 대시보드 현황 코드가 작성되어 있고, korea.qmd 쿼토 파일에 한국 대시보드 현황 코드가 작성되어 있다. 나중에 대시보드를 수정사항이 생겼을 때 해당 파일만 수정하면 수월히 대시보드를 유지보수할 수 있다.

---
title: "코로나19 대쉬보드"
format: dashboard
---

```{r}
library(tidyverse)
library(bslib); library(bsicons)

coronavirus <- coronavirus::coronavirus %>% 
  as_tibble() %>%
  janitor::clean_names() 

valuebox_stat <- coronavirus |> 
  filter(str_detect(country, "Korea")) |>
  group_by(type) %>% 
  summarise(사례수 = sum(cases)) 

valuebox_world <- coronavirus |> 
  group_by(type) %>% 
  summarise(사례수 = sum(cases)) 
```

{{< include world.qmd >}}

{{< include korea.qmd >}}

14.4 배포 대쉬보드

대시보드 제작이 완료되면 인터넷에 공개하기 위해 gh-pages를 사용해 웹사이트에 배포한다. gh-pages는 GitHub에서 제공하는 무료 웹 호스팅 서비스로, 쿼토 대시보드를 정적 웹사이트 형식으로 변환해 대시보드 서비스를 제공할 수 있다. gh-pages를 사용하면 웹사이트를 만들기 위한 별도의 서버를 구축할 필요가 없고 비용도 들지 않기 때문에 개인정보가 포함되지 않고 공개적으로 공유할 수 있는 대시보드를 만들기에 적합하다.

배포 과정은 먼저 GitHub 저장소를 생성하고 대시보드 모든 파일을 업로드한 다음 GitHub 설정에서 gh-pages를 활성화하고 대시보드가 포함된 브랜치를 선택한다. 설정이 완료되면 GitHub은 자동으로 웹사이트를 생성하고 해당 URL을 제공한다.

코로나19 대시보드는 인터넷에 자유롭게 접근 가능하며, 누구나 코로나19 현황을 쉽게 파악하고 이해하도록 도움을 준다. 대쉬보드는 코로나19 대쉬보드 웹사이트에서 확인할 수 있다.

그림 14.6: 코로나19 전세계 현황

 

그림 14.7: 코로나19 한국 현황

코로나19 쿼토 대쉬보드

 

연습문제

객관식

1. flexdashboard 패키지를 사용하는 주된 이유는 무엇인가요?
   1. 복잡한 웹사이트 제작
   2. 간단한 R 마크다운으로 대시보드 제작
   3. 고급 프로그래밍 기술 요구
   4. 오직 JavaScript 개발자용

2. 쿼토 대시보드 제작에 있어서 중요한 구성 요소는 무엇인가요?
   1. Value 박스, 표, 그래프
   2. 복잡한 데이터베이스
   3. 고급 웹 개발 기술
   4. 오직 텍스트 기반 컨텐츠

3. 대시보드 배포를 위해 사용되는 GitHub의 기능은 무엇인가요?
   1. gh-pages
   2. git-clone
   3. git-merge
   4. git-commit

서술형

1. 쿼토 대시보드 제작 과정에서 고려해야 할 디자인 요소는 무엇인가요?

2. 대시보드 개발과 배포 과정에서의 자동화의 중요성에 대해 설명해보세요.

Kulkarni, Sagar. 2019. “Building an HR Dashboard in R using Flexdashboard”. Towards Data Science, 9월. https://towardsdatascience.com/building-an-hr-dashboard-in-r-using-flexdashboard-76d14ed3f32.