슬라이드 발표
개요
이 문서는 Reveal로 슬라이드를 발표하는 방법을 다룹니다. 기본 내비게이션은 다음 키보드 단축키로 수행합니다:
| 동작 | 키 | | |
|---|---|
| 다음 슬라이드 | → SPACE N</kb | |
| 이전 슬라이드 | ← P | | |
| fragment 없이 이동 | Alt → Alt ← | | |
| 첫/마지막 슬라이드로 이동 | Shift → Shift ← |
발표할 때 전체 화면 모드를 자주 사용하게 됩니다. FF 키를 눌러 전환할 수 있습니다.
기본 키보드 내비게이션 외에도 Reveal은 다음과 같은 고급 기능을 지원합니다:
- 내비게이션 메뉴 및 개요 모드
- 발표자 보기(발표자 노트, 타이머, 다음 슬라이드 미리보기 포함)
- PDF로 인쇄 및 자체 포함 HTML 배포
- 슬라이드 위에 그리기 및 칠판/화이트보드 모드
- Multiplex: 청중이 자신의 휴대폰, 태블릿, 노트북에서 발표자가 제어하는 슬라이드를 따라볼 수 있음
이러한 기능은 아래에서 설명합니다.
슬라이드로 이동
reveal.js의 슬라이드 이동 단축키로 특정 슬라이드로 바로 이동할 수 있습니다. 방법은 다음과 같습니다:
- GG를 눌러 활성화
- 슬라이드 번호 또는 id 입력
- Enter로 확인
숫자를 입력하면 해당 슬라이드 번호로 이동하고, 문자열을 입력하면 일치하는 id의 슬라이드를 찾아 이동합니다.
이 기능은 jump-to-slide: false 옵션으로 비활성화할 수 있습니다:
format:
revealjs:
jump-to-slide: false개요 모드
개요 모드는 각 슬라이드의 미리보기 썸네일을 보여주는 대체 보기입니다:

OO 키로 개요 모드를 활성화할 수 있습니다.
스크롤 보기
Reveal 프레젠테이션은 슬라이드 대신 세로 스크롤로 탐색하는 스크롤 보기로 발표할 수 있습니다. 이는 Revealjs 5에서 도입된 새 보기 모드입니다. Print view처럼 항상 대체 보기 모드로 사용할 수 있으며, 작은 화면(예: 모바일에서 프레젠테이션 보기)에서는 기본 보기로 사용됩니다.
우리의 데모 프레젠테이션은 스크롤 보기 모드로도 확인할 수 있으며 아래에도 표시됩니다.
스크롤 보기 진입
스크롤 보기로 들어가려면 다음 중 하나를 수행하세요:
RR 키로 스크롤 보기 전환
내비게이션 메뉴로 스크롤 보기 전환
URL에
?view=scroll을 추가해 스크롤 보기 전환(예:https://quarto.org/docs/presentations/revealjs/demo/?view=scroll)
동일한 동작으로 스크롤 보기에서 쉽게 빠져나올 수 있습니다.
기본 보기 모드
scroll-view 옵션으로 프레젠테이션의 기본 모드를 스크롤 보기로 설정할 수 있습니다:
format:
revealjs:
scroll-view: true스크롤 보기 옵션
scroll-view 아래의 다음 옵션으로 스크롤 보기를 구성할 수 있습니다:
| 옵션 | 설명 | | |
|---|---|
progress |
auto: 스크롤 중에는 스크롤바를 표시하고 유휴 상태에서는 숨김(기본값). true는 항상 표시, false는 항상 숨김. | |
snap |
mandatory: 스크롤 시 가장 가까운 슬라이드로 자동 스냅(기본값). proximity를 사용하면 슬라이드 상단에 가까울 때만 스냅됩니다. false로 설정하면 스냅을 비활성화합니다. | |
layout |
full: 각 슬라이드의 높이를 뷰포트 높이에 맞춤(기본값). 여러 슬라이드를 동시에 더 촘촘하게 보려면 compact로 설정합니다. | |
activation-width |
스크롤 보기 활성화 너비 제어. 뷰포트가 모바일 너비에 도달하면 스크롤 보기가 자동으로 활성화됩니다. 0으로 설정하면 자동 활성화를 비활성화하며, 다른 픽셀 값으로 더 큰/작은 너비에서 자동으로 활성화할 수 있습니다. | |
activate |
프레젠테이션에서 기본적으로 스크롤 보기를 활성화합니다(기본값 |
예를 들어 다음은 compact 레이아웃, proximity 스냅 모드, 진행 스크롤바 항상 표시, 작은 화면 자동 활성화 비활성화를 지정합니다:
---
title: "Presentation"
format:
revealjs:
scroll-view:
layout: compact
snap: proximity
progress: true
activation-width: 0
---슬라이드 줌
AltAlt 키를 누른 채로 요소를 클릭하면 해당 요소로 줌 인합니다. 다음 이미지 중 하나를 확대해 보세요:
AltAlt 또는 CtrlCtrl를 다시 클릭하면 축소됩니다.
발표자 보기
발표자 보기에는 현재 슬라이드와 다음 슬라이드, 타이머, 현재 슬라이드에 연결된 발표자 노트가 표시됩니다:

SS 키로 발표자 보기를 활성화할 수 있습니다.
.notes 클래스를 가진 div를 사용해 슬라이드에 발표자 노트를 추가할 수 있습니다. 예:
## Slide with speaker notes
Slide content
::: {.notes}
Speaker notes go here.
:::슬라이드 번호
slide-number 옵션으로 프레젠테이션에 슬라이드 번호를 추가할 수 있습니다. show-slide-number 옵션으로 슬라이드 번호가 표시되는 컨텍스트를 제어할 수도 있습니다. 예를 들어 다음은 인쇄 출력에만 슬라이드 번호를 표시하도록 설정합니다:
---
title: "Presentation"
format:
revealjs:
slide-number: true
show-slide-number: print
---slide-number 옵션은 true/false 값 외에도 형식을 지정할 수 있습니다. 사용 가능한 형식은 다음과 같습니다:
| 값 | 설명 |
|---|---|
c/t |
슬라이드 번호 / 전체 슬라이드(기본값) |
c |
슬라이드 번호만 |
h/v |
수평 / 수직 슬라이드 번호 |
h.v |
수평 . 수직 슬라이드 번호 |
수직 슬라이드에 대한 추가 정보는 수직 슬라이드를 참고하세요.
show-slide-number 옵션은 다음 값을 지원합니다:
| 값 | 설명 |
|---|---|
all |
모든 컨텍스트에서 슬라이드 번호 표시(기본값) |
print |
PDF로 인쇄할 때만 슬라이드 번호 표시 |
speaker |
발표자 보기에서만 슬라이드 번호 표시 |
PDF로 인쇄
Reveal 프레젠테이션은 특별한 인쇄 스타일시트를 통해 PDF로 내보낼 수 있습니다.
참고: 이 기능은 Google Chrome, Chromium, Firefox에서 동작이 확인되었습니다.
PDF로 인쇄하려면 다음을 수행하세요:
- EE 키(또는 내비게이션 메뉴)로 Print View 전환
- 브라우저 인쇄 대화상자 열기 Ctrl+PCtrl+P.
- Destination을 Save as PDF로 변경
- Layout을 Landscape로 변경
- Margins를 None으로 변경
- Background graphics 옵션 활성화
- Save 클릭 🎉
같은 창에서 인쇄 모드로 들어갔다면 EE 키로 Print View를 종료하거나, 브라우저의 일반 뒤로 가기 버튼으로 마지막으로 본 슬라이드로 돌아갈 수 있습니다.
이 설정을 적용하면 Chrome 인쇄 대화상자는 다음과 같이 보입니다:

인쇄 옵션
인쇄 출력에 영향을 주는 여러 옵션이 있으므로 인쇄 전에 설정할 수 있습니다:
| 옵션 | 설명 | | |
|---|---|
show-notes |
발표자 노트 포함(true, false, 또는 separate-page) | |
slide-number |
슬라이드 번호 포함(true 또는 false) | |
pdf-max-pages-per-slide |
한 페이지에 담기기 어려울 정도로 긴 슬라이드는 여러 페이지로 확장됩니다. pdf-max-pages-per-slide 옵션으로 슬라이드가 확장될 최대 페이지 수를 제한할 수 있습니다. | |
pdf-separate-fragments |
fragment가 여러 개인 슬라이드는 기본적으로 한 페이지에 인쇄됩니다. 각 fragment마다 페이지를 만들려면 true로 설정하세요. | |
예를 들어 다음은 발표자 노트를 별도의 페이지에 인쇄하고 슬라이드 번호를 포함하도록 지정합니다:
---
title: "Presentation"
format:
revealjs:
show-notes: separate-page
slide-number: true
---미리보기 링크
Reveal은 preview-links 옵션으로 프레젠테이션 흐름에 외부 웹사이트 내비게이션을 쉽게 통합할 수 있습니다.
preview-links: true가 설정된 하이퍼링크를 클릭하면 슬라이드 위에 오버레이되는 iframe에서 링크가 열립니다. 예를 들어 Matplotlib 링크를 클릭하면 웹사이트가 슬라이드 위에 열리며(오른쪽 상단 닫기 버튼으로 닫을 수 있음) 다음과 같습니다:

preview-link에 사용할 수 있는 값은 다음과 같습니다:
| 값 | 설명 | | |
|---|---|
auto |
전체 화면 발표 중에는 미리보기 링크를 사용(그 외에는 일반 이동) | |
true |
항상 미리보기 링크 | |
false |
미리보기 링크 사용 안 함(기본값) | |
예를 들어 다음은 preview-links를 auto로 설정합니다:
---
title: "Presentation"
format:
revealjs:
preview-links: auto
---이 옵션은 링크별로 설정할 수도 있습니다. 다음 두 링크는 각각 미리보기를 활성화/비활성화합니다:
[Preview](https://example.com){preview-link="true"}
[NoPreview](https://example.com){preview-link="false"}HTML 형식에서 웹사이트를 미리보기하면 <iframe>을 사용하며, 모든 웹사이트가 이를 허용하지는 않습니다(예: 응답 헤더에 X-Frame-Options를 deny로 설정하거나 Content-Security-Policy의 frame-ancestor 제한을 적용). 웹사이트가 iframe 사용을 허용하지 않으면 Quarto 문서 출력에서 미리보기가 동작하지 않습니다.
슬라이드 톤
슬라이드 톤은 슬라이드를 전환할 때 은은한 소리를 재생합니다. 이는 시각 장애 사용자 요청으로 추가된 기능이며, 발표자가 슬라이드 진행 상황을 청각적으로 알 수 있게 합니다. 다음과 같이 활성화합니다:
format:
revealjs:
slide-tone: true톤의 음높이는 낮은 도에서 높은 도까지 슬라이드마다 증가합니다. 점진적 슬라이드에서는 톤의 음높이가 동일하게 유지됩니다.
슬라이드 톤 구현은 xaringanExtra의 slide tone 플러그인에서 가져와 적용했습니다.
자동 슬라이드
프레젠테이션은 사용자 입력 없이 슬라이드를 자동으로 진행하도록 구성할 수 있습니다. 이를 활성화하려면 auto-slide 옵션으로 슬라이드 전환 간격(밀리초)을 지정해야 합니다. 모든 슬라이드를 보여준 후 반복하려면 loop 옵션을 추가로 지정할 수 있습니다.
예를 들어 다음은 5초마다 진행하고 반복하도록 설정합니다:
---
title: "Presentation"
format:
revealjs:
auto-slide: 5000
loop: true
---자동 슬라이드 덱에는 재생/일시정지 컨트롤 요소가 자동으로 표시됩니다. 사용자가 덱과 상호작용을 시작하면 슬라이딩이 자동으로 일시정지됩니다. 키보드에서 AA를 눌러 슬라이딩을 일시정지/재개할 수도 있습니다.
auto-slide-stoppable: false를 지정하면 자동 슬라이드 컨트롤을 비활성화하고 슬라이딩이 일시정지되지 않게 할 수 있습니다.
슬라이드 타이밍
autoslide 속성으로 개별 슬라이드와 fragment의 지속 시간을 재정의할 수도 있습니다(이 속성은 Fragments)에서도 동작합니다. 예를 들어 자동 슬라이드 값을 2초로 설정할 수 있습니다:
## Slide Title {autoslide=2000}배포
Reveal 프레젠테이션을 배포하는 주요 방법은 두 가지입니다:
PDF 파일로 배포—방법은 위의 PDF로 인쇄를 참고하세요.
HTML 파일로 배포. HTML의 경우 하나의 자체 포함 파일로 배포하는 것이 가장 편리합니다. 이를 위해
embed-resources옵션을 지정하세요:--- title: "Presentation" format: revealjs: embed-resources: true ---의존 이미지, CSS 스타일, 기타 자산은 Quarto가 생성한 HTML 파일에 모두 포함됩니다.
embed-resources를 지정하면 렌더링이 몇 초 느려질 수 있으므로, 배포할 준비가 되었을 때만 활성화하는 것이 좋습니다. 또한 Reveal 플러그인 Chalkboard는embed-resources와 호환되지 않습니다. Chalkboard 플러그인이 활성화된 상태에서embed-resources: true를 지정하면 오류가 발생합니다.
GitHub Pages와 Posit Connect를 포함한 Reveal 프레젠테이션의 추가 배포 방법은 HTML 배포 문서를 참고하세요.
내비게이션 옵션
Reveal 프레젠테이션에는 여러 내비게이션 신호가 제공되며, 이를 제어하는 옵션이 있습니다:
| 옵션 | 설명 | | |
|---|---|
controls |
슬라이드 탐색을 위한 화살표 컨트롤 표시(기본값 auto, 수직 슬라이드가 있거나 덱이 iframe에 임베드된 경우 표시). | |
progress |
하단에 진행 바 표시(기본값 true). | |
history |
슬라이드 변경을 브라우저 히스토리에 기록. 기본값 true로, 브라우저의 앞으로/뒤로 버튼으로 슬라이드 탐색이 가능합니다. | |
hash-type |
슬라이드에 사용할 URL 해시 유형. 기본값은 슬라이드 제목에서 파생되는 title입니다. number도 지정할 수 있습니다. | |
예를 들어 다음 구성은 진행 바를 숨기고 브라우저 히스토리를 사용하도록 지정합니다:
---
title: "Presentation"
format:
revealjs:
progress: false
history: true
---Chalkboard
Quarto에는 reveal.js-chalkboard 플러그인의 내장 버전이 포함되어 있습니다. chalkboard: true 옵션으로 플러그인을 활성화하면 슬라이드 위의 노트 캔버스에 그리거나, 프레젠테이션 안에 빈 칠판을 열 수 있습니다:
---
title: "Presentation"
format:
revealjs:
chalkboard: true
---Reveal 플러그인 Chalkboard는 embed-resources 출력과 호환되지 않습니다. Chalkboard 플러그인이 활성화된 상태에서 embed-resources: true를 지정하면 오류가 발생합니다.
노트 캔버스와 칠판을 활성화하면 다음과 같습니다:


노트 캔버스를 켜고 끄려면
버튼 또는 CC 키를 사용하세요.
칠판을 켜고 끄려면
버튼 또는 BB 키를 사용하세요.
노트 캔버스와 칠판에 대한 키보드 단축키는 다음과 같습니다:
| 동작 | 키 |
|---|---|
| 노트 캔버스 토글 | CC |
| 칠판 토글 | BB |
| 모든 그림 초기화 | BACKSPACEBACKSPACE |
| 슬라이드 그림 지우기 | DELDEL |
| 색상 앞으로 순환 | XX |
| 색상 뒤로 순환 | YY |
| 그림 다운로드 | DD |
다음 마우스 및 터치 제스처로 그림과 상호작용할 수 있습니다:
왼쪽 아래 버튼을 클릭하여 노트 캔버스 또는 칠판 토글
왼쪽의 색상 선택기를 클릭하여 색상 변경(색상 선택기는 노트 캔버스 또는 칠판이 활성화된 경우에만 표시됨)
오른쪽 위/아래 화살표를 클릭하여 여러 칠판 간 전환(위/아래 화살표는 칠판에서만 사용 가능)
마우스 왼쪽 버튼을 누른 채로 드래그하여 노트 캔버스 또는 칠판에 작성
마우스 오른쪽 버튼을 누른 채로 드래그하여 이전 그림 삭제
터치 후 이동하여 노트 캔버스 또는 칠판에 작성
0.5초간 터치 후 이동하여 이전 그림 삭제
그림 복원
DD 키로 활성화된 모든 그림을 JSON 파일로 다운로드합니다. 이후 프레젠테이션을 보여줄 때 src 옵션으로 그림을 복원할 수 있습니다. 예:
---
title: "Presentation"
format:
revealjs:
chalkboard:
src: drawings.json
---Chalkboard 옵션
칠판의 동작과 모양을 사용자 지정할 수 있는 옵션은 다음과 같습니다:
옵션 | 설명 | =====================+=================================================================================================================================================+ theme | chalkboard(기본값) 또는 whiteboard로 설정할 수 있습니다. | |
|
boardmarker-width |
보드마커의 선 두께. 값이 클수록 선이 두꺼워집니다. 기본값 3. | |
chalk-width |
분필 선 두께. 값이 클수록 선이 두꺼워집니다. 기본값 7. | |
chalk-effect |
[0.0, 1.0] 범위의 float로, 칠판의 분필 효과 강도입니다. 최대 효과(기본값) 1.0, 효과 없음 0.0. | |
src |
사전 기록된 그림의 선택적 파일 이름(DD 키로 그림 다운로드). |
read-only |
기존 그림 변경 방지 옵션. true: 변경 불가, false(기본값): 변경 가능. | |
buttons |
슬라이드 하단에 칠판 버튼 추가(기본값 true). | |
transition |
슬라이드 전환 지속 시간(밀리초)을 지정하여 전환 완료 후 노트 캔버스가 그려지도록 함. | |
예를 들어 다음 구성은 whiteboard 테마와 더 두꺼운 보드마커 두께를 사용하고, 슬라이드 하단의 칠판 버튼을 숨기도록 지정합니다:
---
title: "Presentation"
format:
revealjs:
chalkboard:
theme: whiteboard
boardmarker-width: 5
buttons: false
---칠판 버튼을 전역으로 비활성화한 경우, chalkboard-buttons 속성으로 개별 슬라이드에서 다시 활성화할 수 있습니다. 예:
## Slide Title {chalkboard-buttons="true"}chalkboard-buttons="false"로 개별 슬라이드의 버튼을 끌 수도 있습니다.
Multiplex
Quarto에는 Reveal Multiplex 플러그인의 내장 버전이 포함되어 있습니다. Multiplex 플러그인은 청중이 자신의 휴대폰, 태블릿, 노트북에서 발표자가 제어하는 프레젠테이션 슬라이드를 따라볼 수 있게 합니다. 발표자가 마스터 프레젠테이션의 슬라이드를 바꾸면 모든 청중이 자신의 기기에서 같은 내용을 보게 됩니다.
Multiplex를 지원하는 Reveal 프레젠테이션은 간단히 만들 수 있습니다. 다음과 같이 multiplex: true 옵션을 지정하세요:
---
title: "Presentation"
format:
revealjs:
multiplex: true
---프레젠테이션을 렌더링하면 Quarto가 다음 두 HTML 파일을 생성합니다:
| 파일 | 설명 | |
|---|---|
presentation.html |
온라인에 배포해야 하며 청중이 볼 파일입니다. | |
presentation-speaker.html |
발표자가 사용할 파일입니다. 이 파일은 컴퓨터에 남겨두고 다른 곳에 배포할 필요가 없습니다. | |
두 버전의 프레젠테이션은 동기화되어 발표자 버전이 슬라이드를 전환하면 관객도 동일한 슬라이드로 전환됩니다.
Multiplex 서버
백엔드에는 관객 버전과 발표자 버전 사이의 슬라이드 이벤트를 동기화하는 Multiplex 서버가 있습니다. 이 서버는 슬라이드 콘텐츠를 실제로 보지 않으며 이벤트 동기화에만 사용됩니다.
기본적으로 Revealjs 팀이 생성하고 호스팅하는 서버를 사용합니다: https://multiplex.up.railway.app/. multiplex: true를 지정하면 기본으로 이 서버가 사용됩니다.
자체 서버 실행
이 서버의 자체 버전을 운영하려면 소스 코드를 여기에서 확인하세요: https://github.com/reveal/multiplex/blob/master/index.js.
그 다음 Multiplex가 대체 서버를 사용하도록 다음과 같이 구성할 수 있습니다:
---
title: "Presentation"
format:
revealjs:
multiplex:
url: 'https://myserver.example.com/
---Quarto는 백그라운드에서 Multiplex 서버를 호출해 프레젠테이션의 id와 secret을 발급합니다. 자체 id와 secret을 발급하려면 https://multiplex.up.railway.app/ (또는 사용자 정의 서버 URL)에서 발급한 뒤 YAML에 명시하세요:
---
title: "Presentation"
format:
revealjs:
multiplex:
id: '1ea875674b17ca76'
secret: '13652805320794272084'
---secret 값은 발표자 버전의 프레젠테이션에만 포함됩니다.
더 알아보기
Reveal 사용에 대해 더 알아보려면 다음 문서를 참고하세요:

