Revealjs

개요

revealjs 형식을 사용해 Revealjs 프레젠테이션을 만들 수 있습니다. Revealjs의 기능을 가장 잘 파악하는 방법은 이 데모 프레젠테이션을 보는 것입니다:

데모를 단독 브라우저에서 보고 싶다면 여기에서 확인할 수 있습니다. 슬라이드가 어떻게 만들어졌는지 보려면 데모의 소스 코드를 확인하세요.

Revealjs 출력에서 지원되는 모든 옵션에 대한 종합적인 개요는 Revealjs 형식 참조를 참고하세요.

슬라이드 만들기

마크다운에서는 제목으로 슬라이드를 구분합니다. 예를 들어 다음은 두 개의 슬라이드로 구성된 간단한 슬라이드 쇼입니다(각 슬라이드는 수준 2 제목(##)으로 정의됨):

---
title: "Habits"
author: "John Doe"
format: revealjs
---

## 일어나기

- 알람 끄기
- 침대에서 나오기

## 잠들기

- 침대에 들어가기
- 양 세기

수준 1 제목(#)을 사용해 제목 슬라이드가 있는 섹션으로 슬라이드 쇼를 나눌 수도 있습니다. 예:

---
title: "Habits"
author: "John Doe"
format: revealjs
---

# 아침에

## 일어나기

- 알람 끄기
- 침대에서 나오기

## 아침 식사

- 달걀 먹기
- 커피 마시기

# 저녁에

## 저녁 식사

- 스파게티 먹기
- 와인 마시기

## 잠들기

- 침대에 들어가기
- 양 세기

마지막으로 수평선으로 슬라이드를 구분할 수도 있습니다(예: 제목이 없는 슬라이드가 있을 때):

---
title: "Habits"
author: "John Doe"
format: revealjs
---

- 알람 끄기
- 침대에서 나오기

---

- 침대에 들어가기
- 양 세기

위 예제는 모두 슬라이드에 수준 2 제목을, 섹션/제목 슬라이드에 수준 1 제목을 사용합니다. slide-level 옵션으로 이를 사용자 지정할 수 있습니다(자세한 내용은 Pandoc의 슬라이드 쇼 구조화 문서를 참고하세요).

제목 슬라이드

위 예제에서 문서 YAML 옵션에 제공한 title과 author를 기반으로 제목 슬라이드가 자동 생성되는 것을 볼 수 있습니다. 하지만 때로는 명시적인 제목 슬라이드가 필요하지 않을 수 있습니다(예: 첫 슬라이드가 배경 이미지로만 구성된 경우). 이때는 title과 author 옵션을 제외하면 제목 슬라이드 없이도 프레젠테이션을 만들 수 있습니다:

---
format: revealjs
---

## 일어나기

- 알람 끄기
- 침대에서 나오기

## 잠들기

- 침대에 들어가기
- 양 세기

점진적 목록

기본적으로 슬라이드 안의 번호 목록과 글머리표 목록은 한 번에 모두 표시됩니다. incremental 옵션으로 전역 설정을 바꿀 수 있습니다. 예:

title: "My Presentation"
format:
  revealjs:
    incremental: true

모드를 결정하는 명시적 클래스를 가진 div로 감싸서 목록을 점진적으로 또는 비점진적으로 설정할 수도 있습니다. 목록을 점진적으로 만들려면 다음과 같이 합니다:

::: {.incremental}
- 스파게티 먹기
- 와인 마시기
:::

목록을 비점진적으로 만들려면 다음과 같이 합니다:

::: {.nonincremental}
- 스파게티 먹기
- 와인 마시기
:::

슬라이드 안에 일시 정지를 삽입하여(일시 정지 뒤의 콘텐츠를 숨긴 채로 유지) 공백으로 구분된 점 세 개를 넣을 수도 있습니다:

## 일시 정지가 있는 슬라이드

일시 정지 전 콘텐츠

. . .

일시 정지 후 콘텐츠

이 기능은 슬라이드를 만드는 제목 아래에서만 동작합니다(슬라이드 만들기 참고).

다중 열

콘텐츠를 나란한 열로 배치하려면 .columns 클래스를 가진 네이티브 div 컨테이너를 사용하세요. 그 안에 .column 클래스를 가진 div 컨테이너를 두 개 이상 넣고 width 속성을 지정합니다:

:::: {.columns}

::: {.column width="40%"}
왼쪽 열
:::

::: {.column width="60%"}
오른쪽 열
:::

::::

콘텐츠 오버플로

한 프레임에 표시할 수 있는 것보다 콘텐츠가 많은 슬라이드가 있다면 이를 완화하기 위해 슬라이드 수준 클래스 두 가지를 적용할 수 있습니다:

.smaller 클래스를 사용해 글꼴 크기를 줄이면 더 많은 텍스트가 슬라이드에 들어갑니다. 예:
```
## Slide Title {.smaller}
```
.scrollable 클래스를 사용하면 슬라이드 밖 콘텐츠를 스크롤로 볼 수 있습니다. 예:
```
## Slide Title {.scrollable}
```

이 두 옵션은 다음과 같이 모든 슬라이드에 전역으로 적용할 수도 있습니다:

---
format:
  revealjs:
    smaller: true
    scrollable: true
---

섹션 제목 슬라이드는 기본적으로 가운데 정렬되어 있어 스크롤할 수 없습니다. 제목 슬라이드를 스크롤 가능하게 하려면 가운데 정렬을 해제해야 합니다.

---
format:
  revealjs:
    scrollable: true
    center-title-slide: false
---

제한 사항: 자동 늘이기와 스크롤 가능

스크롤 가능 슬라이드에서는 자동 늘이기가 사용하는 이미지 크기 계산이 잘 작동하지 않아 이미지가 표시되지 않을 수 있습니다. 필요에 따라 다음 두 가지 해결책이 있습니다.

프레젠테이션 수준에서 자동 늘이기를 비활성화(auto-stretch: false)하고, 필요한 이미지에만 .r-stretch를 사용합니다.
스크롤 가능한 슬라이드에는 .nostretch 클래스를 추가해 해당 슬라이드의 자동 늘이기를 비활성화합니다.

발표자 노트

.notes 클래스를 가진 div를 사용해 슬라이드에 발표자 노트를 추가할 수 있습니다. 예:

## 발표자 노트가 있는 슬라이드

슬라이드 내용

::: {.notes}
발표자 노트를 여기에 작성합니다.
:::

이는 기본 플러그인에서 제공하는 Revealjs 기능이며, 콘텐츠가 외부 의존성에 의존할 수 없다는 제한이 있습니다. 예를 들어 보통 mermaid.js가 필요한 Mermaid 다이어그램을 포함하려면 SVG 또는 PNG 이미지로 임베드해야 합니다.

S 키를 누르거나 내비게이션 메뉴를 사용해 발표자 보기 화면을 표시할 수 있습니다:

Speaker View에서 본 reveal.js 프레젠테이션 스크린샷. 오른쪽에는 활성 슬라이드가 표시됩니다. 왼쪽 열에는 위에서 아래로 다음 슬라이드, 시간(경과 시간과 시계 시간), 발표자 노트를 표시하는 섹션이 있습니다.

보통 이 화면은 한쪽 화면(예: 노트북)에서 보고, 다른 화면에서 슬라이드를 발표합니다.

테마

Reveal 프레젠테이션에는 11개의 기본 제공 테마가 있습니다(직접 테마를 만들 수도 있습니다). default와 dark 테마는 비교적 고전적인 타이포그래피와 색상 체계를 사용하며 시작하기에 좋습니다.

default 테마는 자동으로 사용됩니다. 다른 테마로 전환하려면 theme 옵션을 사용하세요. 예:

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

사용 가능한 테마 전체 목록은 다음과 같습니다:

beige
blood
dark
default
dracula
league
moon
night
serif
simple
sky
solarized

테마를 사용자 지정하거나 새로운 테마를 만드는 방법은 Reveal 테마 문서를 참고하세요.

부연 설명과 각주

부연 설명은 주변적 관심의 콘텐츠를 담으며, 슬라이드 하단에 더 작고 옅은 글꼴로 표시됩니다. aside 클래스를 가진 div로 부연 설명을 만들 수 있습니다. 예:

## Slide Title

Slide content

::: aside
Some additional commentary of more peripheral interest.
:::

각주는 부연 설명과 비슷한 시각적 처리를 갖지만 각주 번호가 포함됩니다. 예를 들어 다음은 한 슬라이드에 각주와 부연 설명을 함께 사용한 예입니다:

## Slide Title

- Green ^[A footnote]
- Brown
- Purple

::: aside
Some additional commentary of more peripheral interest.
:::

렌더링하면 다음과 같이 보입니다:

상단에 제목이 있고 그 아래에 글머리표 목록이 있는 렌더링된 슬라이드(첫 항목에 각주가 있음). 슬라이드 하단에 부연 설명(주변적 관심의 추가 해설)이 표시되고 그 아래에 각주가 표시됨.

각주를 문서 끝에 포함하고 싶다면 reference-location: document 옵션을 지정하세요:

---
format:
  revealjs:
    reference-location: document
---

이 옵션을 지정하더라도 슬라이드에서 각주 번호에 마우스를 올리면 각주를 볼 수 있습니다.

푸터 및 로고

footer와 logo 옵션을 사용해 각 슬라이드 하단에 푸터 텍스트와 로고를 포함할 수 있습니다. 예:

---
format:
  revealjs:
    logo: logo.png
    footer: "Footer text"
---

슬라이드 제목에 {footer=false}를 사용하면 해당 슬라이드의 프레젠테이션 푸터를 제거할 수 있습니다.

---
format:
  revealjs:
    footer: "Footer text"
---

## Slide with default footer

Content

## No footer {footer=false}

No footer is shown on this slide

슬라이드 하단에 footer div를 추가하여 슬라이드별 사용자 정의 푸터를 포함할 수도 있습니다.

## Slide Title

Slide content

::: footer
Custom footer text
:::

코드 블록

Quarto HTML 코드 블록의 핵심 기능 대부분은 Reveal 슬라이드에서도 사용 가능합니다. 코드 접기, 코드 복사, 사용자 정의 구문 강조 테마 선택 등이 포함됩니다. 어두운 Reveal 테마를 선택하면 Quarto 기본 다크 구문 강조 테마가 사용됩니다.

줄 강조

코드 출력의 특정 줄을 강조하거나 단계별로 서로 다른 줄을 강조하고 싶을 수 있습니다. 코드 블록의 code-line-numbers 속성으로 설정할 수 있습니다. 예:

```{.python code-line-numbers="6-8"}
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

쉼표로 구분해 서로 떨어진 범위를 강조할 수도 있습니다. 예:

```{.python code-line-numbers="7,9"}
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

마지막으로 |로 구분해 서로 다른 줄 범위를 단계적으로 강조할 수 있습니다. 예를 들어 다음은 모든 줄을 먼저 보여주고, 이후 6번째 줄, 마지막으로 9번째 줄을 강조합니다:

```{.python code-line-numbers="|6|9"}
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

code-line-numbers 셀 옵션을 사용하면 실행 코드 셀에서도 동일한 옵션을 사용할 수 있습니다:

```{python}
#| code-line-numbers: "|6|9"

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

코드 블록 높이

기본적으로 코드 블록은 최대 높이 500px로 제한됩니다. 이 높이를 초과하면 스크롤바가 표시됩니다. 스크롤바를 피하려면 code-block-height 옵션으로 최대 높이를 늘릴 수 있습니다:

---
format:
  revealjs: 
    code-block-height: 650px
---

실행 코드

다른 Quarto 문서와 마찬가지로 슬라이드에 실행 코드 블록의 출력을 포함할 수 있습니다. 이는 다른 형식과 거의 동일하게 동작하지만, 슬라이드에는 아래의 몇 가지 특별한 고려 사항이 있습니다.

그림 크기

슬라이드용 그림은 전체 슬라이드를 채우거나 필요한 영역을 채우도록 크기를 자주 사용자 지정해야 합니다. Quarto는 이를 일부 지원합니다. Python에서는 Matplotlib와 Plotly Express의 그림 크기가 제목 아래 슬라이드 영역을 채우도록 설정되고, R에서도 Knitr 그림 너비와 높이가 유사하게 기본값으로 설정됩니다.

그럼에도 특정 그림에 대해서는 이러한 기본값을 자주 변경해야 합니다. 방법은 그래픽 라이브러리마다 다릅니다. 다음은 Altair 플롯 크기를 명시적으로 지정하는 예입니다:

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).properties(
    width=700,
    height=300
).interactive()

코드 에코

일반 문서와 달리 Quarto 프레젠테이션의 실행 코드 블록은 기본적으로 소스 코드를 echo하지 않습니다(코드가 가능한 한 많은 세로 공간을 차지하는 그림을 생성하는 경우가 많기 때문입니다). echo 옵션으로 이 동작을 재정의할 수 있습니다. 예:

```{python}
#| echo: true

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

출력 위치

기본적으로 실행 코드 블록의 출력은 코드 바로 뒤에 표시됩니다. output-location 옵션을 사용해 다음과 같이 이 동작을 변경할 수 있습니다:

`fragment`	출력을 Fragment로 표시(슬라이드를 진행해야 명시적으로 표시됨).
`slide`	출력을 다음 슬라이드에 표시.
`column`	출력 내용을 코드 옆 열에 표시.
`column-fragment`	출력 내용을 코드 옆 열에 표시하고, 슬라이드를 진행해야 명시적으로 표시됨.

예를 들어 다음은 셀 출력을 별도 슬라이드에 표시합니다:

```{r}
#| echo: true
#| output-location: slide
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")
```

코드 실행 출력 사용자 지정에 대한 다른 방법은 Execution Options 문서를 참고하세요.

탭세트

Quarto의 표준 tabsets 문법으로 슬라이드에 탭 콘텐츠를 추가할 수 있습니다. 예:

::: {.panel-tabset}

### Tab A

Content for `Tab A`

### Tab B

Content for `Tab B`

:::

탭세트의 중요한 단점은 PDF로 인쇄할 때 첫 번째 탭만 보인다는 점입니다.

슬라이드 배경

슬라이드는 어떤 디스플레이에도 맞게 균일하게 확대/축소될 수 있도록 기본적으로 화면의 제한된 영역 안에 배치됩니다. 슬라이드 제목에 background 속성을 추가하면 슬라이드 영역 밖에 전체 페이지 배경을 적용할 수 있습니다. 지원되는 배경 유형은 색상, 그라디언트, 이미지, 비디오, iframe 다섯 가지입니다.

색상 배경

hex 값, 키워드, rgba(), hsl() 등 모든 CSS 색상 형식이 지원됩니다. 예:

## Slide Title {background-color="aquamarine"}

미디어의 배경색이 프레젠테이션 테마와 다르면(예: 라이트 테마에서 어두운 이미지 사용) 배경 위 텍스트가 올바른 색으로 보이도록 background-color를 명시적으로 설정해야 합니다(예: 어두운 배경 위 밝은 텍스트).

그라디언트 배경

linear-gradient, radial-gradient, conic-gradient 등 모든 CSS 그라디언트 형식이 지원됩니다.

## Slide Title {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}

## Slide Title {background-gradient="radial-gradient(#283b95, #17b2c3)"}

이미지 배경

기본적으로 배경 이미지는 전체 페이지를 덮도록 크기가 조정됩니다. 사용 가능한 옵션:

속성	기본값	설명
`background-image`		표시할 이미지 URL. GIF는 슬라이드가 열릴 때 다시 시작됩니다.
`background-size`	cover	MDN의 background-size 참고.
`background-position`	center	MDN의 background-position 참고.
`background-repeat`	no-repeat	MDN의 background-repeat 참고.
`background-opacity`	1	배경 이미지 투명도(0~1). 0은 투명, 1은 완전 불투명.

For example:

## Slide Title {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

이 슬라이드의 배경 이미지는 100px로 크기가 지정되고 반복됩니다.

이 이미지는 배경이 어두운데 슬라이드는 기본(라이트) 테마를 사용하므로, 위에 표시되는 텍스트가 밝게 보이도록 background-color를 검정으로 명시적으로 설정했습니다.

비디오 배경

슬라이드 뒤에서 전체 크기 비디오가 자동으로 재생됩니다.

속성	기본값	설명
`background-video`		단일 비디오 소스 또는 쉼표로 구분된 비디오 소스 목록.
`background-video-loop`	false	비디오를 반복 재생할지 여부.
`background-video-muted`	false	오디오를 음소거할지 여부.
`background-size`	cover	`cover`는 전체 화면과 일부 크롭, `contain`은 레터박스.
`background-opacity`	1	배경 비디오의 투명도(0~1). 0은 투명, 1은 완전 불투명.

예:

## Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

이 슬라이드의 배경 비디오는 오디오가 음소거된 상태로 반복 재생됩니다.

IFrame 배경

reveal.js의 너비와 높이를 100% 덮는 웹 페이지를 슬라이드 배경으로 임베드합니다. iframe은 슬라이드 뒤의 배경 레이어에 있으므로 기본적으로 상호작용할 수 없습니다. 배경을 상호작용 가능하게 하려면 background-interactive 속성을 추가하세요.

속성	기본값	설명
`background-iframe`		로드할 iframe URL
`background-interactive`	false	iframe 콘텐츠와 상호작용할 수 있게 하려면 이 속성을 포함하세요. 활성화하면 슬라이드 콘텐츠와의 상호작용이 제한됩니다.

For example:

## Slide Title {background-iframe="https://example.com"}

제목 없는 슬라이드 배경

제목 텍스트를 생략하고 배경 정보만 지정할 수도 있습니다:

## {background-color="aquamarine"}

(A slide with no title)

## {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

(Another slide with no title)

메인 제목 슬라이드 배경

메인 제목 슬라이드는 문서 YAML 옵션으로 생성되는 첫 번째 슬라이드입니다. 따라서 위에서 설명한 방법으로는 제목 슬라이드 배경을 지정할 수 없습니다. 대신 다음을 수행해야 합니다:

title-slide-attributes 아래에 제목 슬라이드 배경 옵션을 지정합니다.
배경 옵션에 data- 접두사를 붙입니다.

For example:

---
title: My Slide Show
title-slide-attributes:
    data-background-image: /path/to/title_image.png
    data-background-size: contain
    data-background-opacity: "0.5"
---

더 알아보기

Reveal의 고급 기능을 알아보려면 다음 문서를 참고하세요:

슬라이드 발표: 슬라이드 탐색, PDF 인쇄, 칠판 기능으로 슬라이드에 그리기, 멀티플렉스 프레젠테이션 생성 등을 설명합니다.
고급 Reveal: 전환, 애니메이션, 고급 레이아웃과 배치, 프레젠테이션 사용자 지정 옵션을 다룹니다.
Reveal 테마: 기존 테마 사용/사용자 지정과 새 테마 생성 방법을 설명합니다.