그래프가 포함된 웹 글쓰기 2: 코드 청크의 column 옵션

R 코드로 만든 다중 그래프의 폭 조정

Quarto 코드 청크에서 렌더링되는 여러 그래프를 화면 폭에 맞게 배치하기
Quarto
Author

Sungjun Park

Published

2026-04-16

개요

이전 글에서는 이미 저장된 그림을 Quarto layout 문법으로 재배치하는 방법을 소개했다.

이번에는 R 코드 청크에서 직접 렌더링되는 여러 그래프를 다룬다. layout-nrow로 패널을 배열하고, column 청크 옵션으로 해당 출력물만 본문 폭 바깥까지 넓힐 수 있다.

먼저 ggplot2 테마를 전역 설정한다.

theme_set(
  theme_classic(base_size = 12) + 
  theme(
    panel.background = element_rect(fill = "transparent", colour = NA),
    plot.background  = element_rect(fill = "transparent", colour = NA),
    legend.background = element_rect(fill = "transparent", colour = NA)
  )
)

비교를 위해 간단한 그래프 세 개를 만든다.

g1 <- ggplot(data = cars, aes(x = speed, y = dist)) +
  geom_point(size = 5, alpha = 0.5) +
  geom_smooth(method = "loess", formula = y ~ x, se = FALSE, linewidth = 0.7)

g2 <- ggplot(data = iris, aes(x = Sepal.Length, y = Species)) +
  geom_jitter(size = 5, alpha = 0.5, height = 0.1)

g3 <- ggplot(data = iris, aes(x = Petal.Width, y = Petal.Length)) +
  geom_jitter(size = 5, alpha = 0.5, width = 0.1)

본문 폭에서 여러 그림 넣기

layout-nrow: 1은 한 행에 여러 출력 그림을 배치한다. 먼저 그래프 두 개를 본문 폭 안에서 출력해보자.

```{r}
#| message: false
#| layout-nrow: 1
#| dev.args: { bg: "transparent" }

print(g1); print(g2)
```

본문 폭에 그림 세 개를 넣으면 축과 점의 간격이 좁아져 비교가 어려워진다.

```{r}
#| message: false
#| layout-nrow: 1
#| dev.args: { bg: "transparent" }

print(g1); print(g2); print(g3)
```

column 옵션으로 출력 폭 넓히기

세 개의 패널을 한 줄에 유지하려면 코드 청크에 column: page를 지정할 수 있다. 본문 자체의 줄 길이는 유지하면서, 이 출력물만 페이지 폭까지 확장한다.

```{r}
#| message: false
#| layout-nrow: 1
#| column: page
#| dev.args: { bg: "transparent" }

print(g1); print(g2); print(g3)
```

선택할 수 있는 폭은 다음과 같다.

column 값 출력 범위 적합한 상황
지정하지 않음 (body) 본문 폭 그래프 한 개 또는 단순한 두 패널
page 본문과 양쪽 여백을 포함한 폭 축·범례가 있는 세 패널 비교
screen-inset 화면 폭에 가까운 넓은 영역 지도나 촘촘한 다중 패널
screen-inset-shaded 넓은 영역과 배경 강조 본문 중 시선을 모아야 하는 핵심 결과

screen-inset은 페이지 폭보다 넓은 영역이 실제로 필요한 경우에 사용한다.

```{r}
#| message: false
#| layout-nrow: 1
#| column: screen-inset
#| dev.args: { bg: "transparent" }

print(g1); print(g2); print(g3)
```

본문 흐름 속에서 넓은 그림을 구분하고 싶다면 screen-inset-shaded를 사용한다.

```{r}
#| message: false
#| layout-nrow: 1
#| column: screen-inset-shaded
#| dev.args: { bg: "transparent" }

print(g1); print(g2); print(g3)
```

마무리

본문에서 설명을 바로 이어가는 그래프라면 먼저 column: page를 고려하는 편이 안정적이다. screen-inset 계열은 넓은 폭 자체가 해석에 도움이 될 때만 사용하는 것이 좋다. 그림이 네 개 이상이라면 무조건 폭을 넓히기보다 layout-ncol: 2로 행을 나누는 편이 모바일에서도 읽기 쉽다.