나만의 무료 웹사이트 제작 5부 – Quarto 기본기 다지기

나만의 무료 웹사이트 제작 4부 – 배포(feat. Netlify) 포스트까지는 온라인 상에서 웹사이트를 띄우는데 집중했습니다. 이번 포스트부터 여러 차례에 걸쳐서 웹페이지를 꾸미는 방법에 대해서 알아보겠습니다. 이를 위해서 R 마크다운 차세대 버전인 쿼토(Quarto)에 대해 알아야 합니다. 이 둘에 대한 자세한 내용은 쿼토에 관한 R 마크다운 사용자 FAQ를 통해 확인하세요.

* 그림을 조금 더 자세히 보시기를 원하시는 분은 클릭하시면 확대가 됩니다.

Quarto(쿼토) 문서 개요

렌더링 프로세스

앞선 포스트에서 우리는 쿼토 문서는 .qmd 확장자명을 가지고 있음을 배웠습니다. 위 그림에서 왼쪽이 쿼터 문서이고 오른쪽이 렌더링 되어서 Viewer Panel에 나타난 결과입니다. 쿼토 문서를 렌더링(, 단축키: 윈도우 Ctrl+Shift+K, 맥OS ⇧+⌘+K) 하면 기본적으로 HTML 문서가 생산됩니다. 물론, PDF 등 다른 형식으로의 렌더링도 가능합니다.

위 그림은 쿼토 문서가 MS word 등과 같은 문서로 렌더링 되는 과정을 보여줍니다. knitr 패키지는 쿼토 문서로 마크다운(.md)를 생성합니다. 이 파일은 다시 범용 문서 변환기인 pandoc에 의해 최종 렌더링 문서를 만들어 냅니다. 단축키 하나로 이런 복잡한 프로세스가 진행됩니다.(별도의 지정이 없는 상황에서 기본적으로 랜더링된 문서형식은 HTML입니다.)

쿼토 편집모드

쿼토 문서는 2가지의 RStudio 편집 모드로 생성할 수 있습니다. 단적인 예로 Visual 편집모드에서는 텍스트를 선택하고 Ctrl+B 단축키를누르면 볼드체로 변환할 수 있습니다. Source 편집모드에서는 이것을 위해 다음과 같이 마크다운 형식을 사용합니다. 아래의 예시는 렌더링된 HTML 화면에서 볼드체로 표시됩니다 하고 나타납니다. 그리고 이 2가지 모드는 단축키(Ctrl+Shift+F4, ⇧+⌘+F4)를 한번 누르면 편집모드가 비쥬얼에서 소스로, 한번 더 누르면 소스에서 비쥬얼로 화면이 상호 전환 가능합니다.

**볼드체로 표시됩니다.** 

무료 웹사이트 제작을 위한 쿼토 문서 구성

쿼토 문서는 위 그림에서 보는 바와 같이 야믈 헤더(YAML Header), 코드 뭉치(Code Chunk), 마크다운 텍스트(Markdown Text)로 구성됩니다.

야믈 헤더(YAML Header)

위 아래 3개의 대시(—)로 구분된 야믈 헤더에는 제목, 형식, 편집기 등이 명시됩니다. 기본 형식은 key: value의 형태로 표현됩니다. 위 예시에서는 key가 title이고, value가 “Hello, Quarto”가 되겠습니다. 더 자세한 내용은 추후에 다른 포스트를 통해 알아보도록 하겠습니다.

코드 뭉치(Code Chunk)

위 아래 3개의 백틱(“`)과 전단부 {r}로 R 코드 뭉치(청크) 옵션이 표현됩니다. 이 청크 내에 야믈 형식을 사용 시에는 #| 로 명시됩니다. label은 코드 청크 이름을 나타내고, include는 코드 청크나 출력을 렌더링 화면에서 표시할 것인지를 정합니다. false라고 되어 있으니 제일 처음 그림에서 library에 대한 코드 자체와 그 코드 실행결과에 대해 렌더링 화면에서는 전혀 표시되지 않음을 알 수 있습니다.

마크다운 텍스트(Markdown Text)

쿼토 문서는 텍스트로 마크다운 구문을 사용합니다. 비주얼 편집 모드를 사용하면 굳이 문서 작성을 위해 수많은 마크다운 구문을 학습할 필요는 없습니다.

아래는 지금까지 위에서 다루고 있는 내용의 코드 소스(출처: 쿼토 홈페이지)입니다. RStudio를 실행하고 qmd파일을 만들고 이 코드 소스를 복사해서 넣으시면 됩니다. 그리고 직접 2가지 편집 모드를 바꿔가면서 바뀌는 모습 확인 실습을 해보시고 렌더링도 수행해보시기 바랍니다.

---
title: "Hello, Quarto"
editor: visual
preview: viewer
---

```{r}
#| label: load-packages
#| include: false

library(tidyverse)
library(palmerpenguins)
```

## Meet Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Meet the penguins

![](https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/get-started/hello/rstudio/lter_penguins.png){style="float:right;" fig-alt="Illustration of three species of Palmer Archipelago penguins: Chinstrap, Gentoo, and Adelie. Artwork by @allison_horst." width="401"}

The `penguins` data from the [**palmerpenguins**](https://allisonhorst.github.io/palmerpenguins "palmerpenguins R package") package contains size measurements for `{r} nrow(penguins)` penguins from three species observed on three islands in the Palmer Archipelago, Antarctica.

The plot below shows the relationship between flipper and bill lengths of these penguins.

```{r}
#| label: plot-penguins
#| warning: false
#| echo: false

ggplot(penguins, 
       aes(x = flipper_length_mm, y = bill_length_mm)) +
  geom_point(aes(color = species, shape = species)) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(
    title = "Flipper and bill length",
    subtitle = "Dimensions for penguins at Palmer Station LTER",
    x = "Flipper length (mm)", y = "Bill length (mm)",
    color = "Penguin species", shape = "Penguin species"
  ) +
  theme_minimal()
```

정리하기

이번 포스트에서는 쿼토 기본기를 다지기 위해서 렌더링 프로세스를 시작으로, 쿼터 문서의 편집모드와 구성요소에 대해 알아 보았습니다. 이제 조금씩 R과 RStudio, 쿼토가 익숙해지고 있으신가요? 아니시라면 조금만 더 힘을 내어 보시기 바랍니다.

이상, IT활용을 통한 삶의 풍성함을 드리기 위해 노력하는 secondlife.lol에 테리였습니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.