그림

Quarto는 그림과 하위그림 작업을 쉽게 하고, 여러 그림·표·기타 콘텐츠를 패널에 배치할 수 있는 다양한 기능을 제공합니다.

그림 기본

Pandoc 마크다운에서는 캡션이 달린 이미지가 단독 단락으로 등장하면 그림이 생성됩니다. 예를 들어 다음과 같습니다.

![Elephant](elephant.png)

이는 출력 형식마다 다음과 같이 표시됩니다.

HTML PDF Word
코끼리 선화 코끼리 선화 코끼리 선화

LaTeX / PDF 출력에서는 그림이 자동으로 번호가 붙습니다(다른 형식에서도 그림 번호가 필요하면 상호 참조를 사용하세요).

그림 크기 조절

기본적으로 그림은 실제 크기로 표시되며, 렌더링되는 페이지의 폭 제한만 적용됩니다. 표시 크기를 바꾸려면 그림에 width, height 속성을 추가합니다.

![Elephant](elephant.png){width=300}

width만 지정하면 height는 자동 계산됩니다. 기본 동작을 바꾸고 싶다면 명시적으로 height를 지정하세요.

width, height의 기본 단위는 픽셀입니다. 백분율이나 인치, 밀리미터 같은 단위도 사용할 수 있습니다.

![Elephant](elephant.png){width=80%}
![Elephant](elephant.png){width=4in}

링크된 그림

Quarto로 렌더링할 때 그림을 링크로 감싸도 캡션이 있는 그림으로 처리됩니다.

[![Elephant](elephant.png)](https://en.wikipedia.org/wiki/Elephant)

그림 정렬

기본 정렬은 가운데입니다. 다른 정렬을 사용하려면 fig-align 속성을 추가하세요.

![Elephant](elephant.png){fig-align="left"}

긴 캡션을 고려해 캡션 텍스트는 기본적으로 왼쪽 정렬입니다.

대체 텍스트

fig-alt 속성으로 그림에 대체 텍스트를 추가할 수 있습니다. 예를 들어 다음 마크다운은…

![](elephant.png){fig-alt="코끼리 그림."}

… 다음 HTML을 생성합니다.

<img src="elephant.png" alt="코끼리 그림.">

캡션, 제목, 대체 텍스트는 서로 다르게 지정할 수 있습니다. 예를 들어 다음 코드는…

![Elephant](elephant.png "Title: An elephant"){fig-alt="코끼리 그림."}

… 다음 HTML을 생성합니다.

<img src="elephant.png" title="Title: An elephant" alt="코끼리 그림.">

캡션 대신 대체 텍스트를 렌더링하려면 Pandoc 문서에 설명된 것처럼 줄 끝에 백슬래시를 추가합니다.

![코끼리 그림.](elephant.png)\

다중 형식 그림

대상 출력 형식에 따라 다른 이미지 파일 형식을 제공할 수도 있습니다. 확장자를 생략하면 됩니다.

![](elephant)

기본적으로 elephant.png를 찾지만 PDF로 렌더링할 때는 elephant.pdf를 찾습니다. default-image-extension 옵션으로 이 동작을 조정할 수 있습니다.

format:
  html:
    default-image-extension: svg
  pdf:
    default-image-extension: tex

라이트박스 그림

HTML 출력에서는 이미지를 클릭해 더 크게 볼 수 있도록 라이트박스 스타일과 동작을 추가할 수 있습니다. 아래 이미지는 라이트박스를 적용한 예시입니다(이미지를 클릭해 확인해 보세요).

An elephant

An elephant

이미지에 .lightbox 클래스를 추가하면 됩니다.

![An elephant](elephant.png){.lightbox}

더 많은 정보와 다양한 활성/비활성화 방법은 라이트박스 그림을 참고하세요.

여러 매개변수 적용

여러 속성을 조합할 때는 공백으로 구분합니다.

![](elephant.png){fig-alt="코끼리 그림." fig-align="left" width=20%}

상호 참조

fig- 접두사가 붙은 ID를 추가하면 그림을 상호 참조할 수 있으며, 본문에서는 @ 접두사로 참조합니다.

![An Elephant](elephant.png){#fig-elephant}

이는 @fig-elephant 에서 잘 볼 수 있습니다.

실행 가능한 코드 셀에서 생성한 그림은 fig- 접두사가 붙은 label을 추가하면 상호 참조할 수 있습니다.

선형 플롯 예시는 @fig-line-plot 을 확인하세요.

```{python}
#| label: fig-line-plot
#| fig-cap: "A line plot "

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
```
Important레이블 접두사

그림을 상호 참조하려면 레이블이 반드시 fig-로 시작해야 합니다.

추가 정보는 상호 참조 문서를 참고하세요.

하위그림

여러 그림을 하나의 그룹으로 표시하려면 그림을 div로 감싸면 됩니다.

::: {#fig-elephants layout-ncol=2}

![Surus](surus.png){#fig-surus}

![Hanno](hanno.png){#fig-hanno}

Famous Elephants
:::

마지막 문단이 주 캡션 역할을 하고, 각 그림이 서브캡션을 가집니다. HTML 렌더링 결과는 다음과 같습니다.

왼쪽에는 수루스 그림과 '(a) Surus', 오른쪽에는 한노 그림과 '(b) Hanno' 캡션이 있으며, 아래에는 'Figure 1: Famous elephants'가 가운데 정렬된 예시

그림 사이(또는 마지막 그림과 캡션 사이)에 빈 줄이 있어야 각 이미지가 별도 단락으로 인식됩니다.

또한 layout-ncol 속성을 사용해 2열 레이아웃을 지정했습니다. 다음 섹션에서는 레이아웃 사용자 지정을 더 자세히 살펴봅니다.

그림 패널

위에서는 서브캡션과 주 캡션을 가진 그림 두 개를 나란히 배치했습니다. 캡션 처리 여부, 여러 행 사용 여부 등은 자유롭게 선택할 수 있습니다.

두 그림 각각에만 캡션을 달고 주 캡션은 제거하려면 #fig 식별자와 마지막 캡션을 삭제하세요.

::: {layout-ncol=2}
![Surus](surus.png)

![Hanno](hanno.png)
:::

왼쪽에는 'Surus', 오른쪽에는 'Hanno' 캡션만 있는 두 개의 코끼리 그림

캡션을 완전히 제거할 수도 있습니다.

::: {layout-ncol=2}
![](surus.png)

![](hanno.png)
:::

여러 행

이미지가 2개 이상이면 여러 행으로 배치하고 싶을 수 있습니다. layout-nrow 속성을 사용하면 됩니다.

::: {layout-nrow=2}
![Surus](surus.png)

![Hanno](hanno.png)

![Abdul Abbas](abdul-abbas.png)

![Lin Wang](lin-wang.png)
:::

2x2 격자로 배치된 코끼리 사진. 왼쪽 위부터 시계 방향으로 Surus, Hanno, Lin Wang, Abdul Abbas

열 구성이 행마다 달라지는 등 더 복잡한 레이아웃도 가능합니다. 자세한 내용은 아래 사용자 정의 레이아웃을 참고하세요.

그림 Div

#fig- 접두사가 붙은 Pandoc div 블록으로 감싸면 임의의 마크다운 콘텐츠도 그림으로 취급할 수 있습니다. 예를 들어 다음은 iframe을 포함한 그림입니다.

::: {#fig-elephant}

<iframe width="560" height="315" src="https://www.youtube.com/embed/SNggmeilXDQ"></iframe>

Elephant
:::

div 블록의 마지막 문단이 그림 캡션으로 사용됩니다.

LaTeX 그림

이 섹션은 LaTeX 출력 전용 옵션을 다룹니다.

아래에서 설명하는 fig-env, fig-pos 옵션을 사용하면 LaTeX 플로팅 환경(대개 \begin{figure})이 생성됩니다. 이 LaTeX가 생성되는 위치(예: 다른 \begin{figure} 내부)에 따라 잘못된 LaTeX가 될 수도 있으므로, 이러한 속성은 문서 최상위 이미지에서만 사용하는 것이 안전합니다.

환경

일부 LaTeX 패키지는 사용자 정의 그림 환경을 제공합니다. 예컨대 2단 구성에서는 figure* 환경을 사용하면 두 단을 모두 차지합니다. 사용할 환경을 fig-env 속성으로 지정할 수 있습니다.

![Elephant](surus.jpg){#fig-elephant fig-env="figure*"}

::: {#fig-elephant-2 fig-env="figure*"}

![](surus.jpg)

Another elephant.

:::

그림 위치

기본 LaTeX figure는 플로팅 환경이므로 실제 위치는 크기와 주변 콘텐츠에 따라 달라집니다. fig-pos 옵션으로 이를 어느 정도 제어할 수 있습니다. fig-pos는 figure 환경에 전달되는 배치 지정자입니다. 아래 LaTeX 조각에서 ht 부분이 fig-pos입니다.

\begin{figure}[ht]

\end{figure}

fig-pos는 문서 수준, 실행 코드 블록 옵션, 마크다운 속성 어디에든 지정할 수 있습니다. 아래 예시에서는 세 가지 방법을 모두 보여 줍니다.

---
title: "My Document"
format:
  pdf:
    fig-pos: 'h'
---

```{python}
#| fig-pos: 't'

```

![](figure.png){fig-pos='b'}

LaTeX 그림 위치에 대한 자세한 내용은 이 글을 참고하세요.

Note그림과 코드 블록

실행 가능한 코드 블록이 그림을 생성했고 코드가 출력에 포함되어 있다면(echo: true) 기본적으로 fig-pos가 H로 설정되어 코드와 그림을 함께 유지하려고 합니다. 다른 경우에는 명시적으로 fig-pos를 지정하지 않는 한 LaTeX 기본 배치가 사용됩니다.

짧은 캡션

fig-scap 옵션으로 “그림 목록”에 사용될 짧은 캡션을 지정할 수 있습니다. 실행 코드 블록 옵션이나 이미지 속성에 지정하세요.

```{python}
#| fig-cap: "Long caption"
#| fig-scap: "Short caption"

```

![Long Caption](figure.png){fig-scap='Short caption'}

PGF/TikZ 그래픽

LaTeX 출력 시 .tex 파일을 참조하는 마크다운 이미지는 PGF/TikZ 벡터 그래픽으로 간주해 올바른 LaTeX를 자동으로 생성합니다.

![](image1.tex)

![](image2.tex){width=80%}

LaTeX 출력은 다음과 같습니다.

\input{image1.tex}

\resizebox{0.8\linewidth}{!}{\input{image2.tex}}

위 예시처럼 width, height 백분율은 자동으로 \linewidth 비율로 변환됩니다. 필요하면 \resizebox의 인자로 직접 LaTeX 값을 지정할 수 있습니다.

캡션 위치

기본적으로 그림 캡션은 그림 아래에 표시됩니다. HTML과 PDF에서는 fig-cap-location 옵션으로 위치를 변경할 수 있습니다.

---
fig-cap-location: top
---

여러 형식에서 공유할 수 있도록 최상위에서 지정했습니다. 단일 형식만 대상이라면 해당 형식 옵션과 함께 둘 수 있습니다.

가능한 값은 다음과 같습니다.

값 설명
top 캡션을 그림 위에 배치합니다.
bottom 캡션을 그림 아래에 배치합니다.
margin 캡션을 여백에 배치합니다.

여백에 캡션을 배치하는 방법은 문서 레이아웃을 참고하세요.

사용자 정의 레이아웃

위 예시에서는 layout-ncol, layout-nrow 속성으로 동일한 너비의 단순한 레이아웃을 만들었습니다. layout 속성을 사용하면 훨씬 복잡한 배치를 만들 수 있습니다.

다음 예시는 첫 번째 행에 두 개의 동일한 그림, 두 번째 행에 전체 폭을 차지하는 그림 하나를 배치합니다.

::: {layout="[[1,1], [1]]"}
![Surus](surus.png)

![Hanno](hanno.png)

![Lin Wang](lin-wang.png)
:::

첫 행에는 두 개의 코끼리 그림이 나란히, 두 번째 행에는 전체 폭을 차지하는 Lin Wang 그림

layout 속성은 2차원 배열이며 첫 번째 차원은 행, 두 번째 차원은 열을 정의합니다. 위 예시의 "[[1,1], [1]]"은 첫 번째 행에 동일한 두 열, 두 번째 행에 단일 열을 배치하라는 의미입니다.

행마다 합이 일정할 필요는 없습니다. 가장 자연스러운 비율을 사용하면 됩니다. 예를 들어 행 내 열의 비율을 백분율처럼 지정할 수 있습니다.

::: {layout="[[70,30], [100]]"}
![Surus](surus.png)

![Hanno](hanno.png)

![Lin Wang](lin-wang.png)
:::

음수 값을 사용하면 요소 사이에 여백을 만들 수 있습니다.

::: {layout="[[40,-20,40], [100]]"}
![Surus](surus.png)

![Hanno](hanno.png)

![Lin Wang](lin-wang.png)
:::

첫 행에는 여백을 두고 두 개의 그림, 두 번째 행에는 더 큰 그림 하나가 배치된 모습

세로 정렬

서로 다른 높이의 이미지를 한 행에 배치하는 경우 layout-valign 속성으로 세로 정렬을 제어할 수 있습니다.

::: {layout="[15,-2,10]" layout-valign="bottom"}
![Surus](surus.png)

![Lin Wang](lin-wang.png)
:::

왼쪽에는 Figure 1: Surus, 오른쪽에는 Figure 2: Lin Wang이 서로 다른 크기로 배치된 예시

세로 정렬은 이미지에만 국한되지 않으며 패널에 포함된 다른 요소에도 적용할 수 있습니다.

계산 결과

실행 가능한 코드 블록이 생성한 그림은 자동으로 문서에 포함됩니다. label, fig-cap, fig-link 옵션으로 ID, 캡션, 링크를 설정하고, fig-align, fig-alt 등 다른 속성도 같은 이름의 청크 옵션으로 지정합니다.

계산형 그림의 기본 크기는 문서 헤더의 fig-width, fig-height 옵션으로 제어할 수 있습니다. 자세한 내용은 실행 옵션: 그림 옵션을 참고하세요.

레이아웃

실행 코드 블록이 만든 그림에도 레이아웃 속성이 적용됩니다. 아래는 Jupyter와 Knitr 예시입니다.

```{python}
#| layout-ncol: 2
#| fig-cap: 
#|   - "Line Plot 1"
#|   - "Line Plot 2"

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()
```

나란히 배치된 두 개의 Jupyter 선형 플롯

```{r}
#| layout-ncol: 2
#| fig-cap: 
#|   - "Speed and Stopping Distances of Cars"
#|   - "Vapor Pressure of Mercury as a Function of Temperature"

plot(cars)
plot(pressure)
```

나란히 배치된 두 개의 산점도

위 예시에서는 fig-cap 옵션으로 각 그림에 캡션을 적용했습니다.

서브캡션

fig-cap와 fig-subcap 옵션을 조합하면 계산형 출력에 서브캡션을 만들 수 있습니다. 캡션을 적용할 때 fig- 접두사가 있는 label을 함께 지정하면 그림에 번호가 붙고 상호 참조할 수 있습니다.

```{python}
#| label: fig-charts
#| fig-cap: "Charts"
#| fig-subcap: 
#|   - "First"
#|   - "Second"
#| layout-ncol: 2

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()
```

캡션이 붙은 두 개의 Jupyter 선형 플롯

```{r}
#| label: fig-charts
#| fig-cap: "Charts"
#| fig-subcap: 
#|   - "Cars"
#|   - "Pressure"
#| layout-ncol: 2

plot(cars)
plot(pressure)
```

캡션이 붙은 두 개의 산점도

사용자 정의 레이아웃

layout 속성은 Knitr와 Jupyter 모두에서 동일하게 작동합니다. 예를 들어 다음 Rmd 코드는 3개의 플롯을 생성하고 사용자 정의 레이아웃을 지정합니다.

```{r}
#| layout: [[45,-10, 45], [100]]

plot(cars)
plot(pressure)
plot(mtcars)
```

위에는 두 개의 플롯이 나란히, 아래에는 넓은 플롯 하나가 있는 레이아웃

블록 레이아웃

앞의 예시는 그림 배치에 초점을 맞췄지만, 레이아웃 속성은 어떤 블록 콘텐츠에도 사용할 수 있습니다. 예를 들어 두 개의 목록을 나란히 배치할 수 있습니다.

::: {layout-ncol=2}
### List One

- Item A
- Item B
- Item C

### List Two

- Item X
- Item Y
- Item Z
:::

제목은 자동으로 뒤따르는 블록과 결합되므로 결과적으로 2개의 열이 생성됩니다. 다음은 제목 없이 단락과 목록을 나란히 배치한 예시입니다.

::: {layout-ncol=2}
- Item X
- Item Y
- Item Z

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida eu erat et fring. Morbi congue augue vel eros ullamcorper, eget convallis tortor sagittis. Fusce sodales viverra mauris a fringilla. Donec feugiat, justo eu blandit placerat, enim dui volutpat turpis, eu dictum lectus urna eu urna. Mauris sed massa ornare, interdum ipsum a, semper massa. 
:::

복잡한 콘텐츠를 배치할 때는 div(:::)로 블록을 나누세요. 다음은 코드 블록과 텍스트, 그림을 나란히 배치한 예시입니다.

:::: {layout="[ 40, 60 ]"}

::: {#first-column}
```r
# Some code
```

Some text that should be laid out below the code
:::

::: {#second-column}
![](elephant.png)
:::

::::

#first-column, #second-column 같은 ID 속성은 필수는 아니지만 가독성을 높여 줍니다.