슬라이드 발표

개요

이 문서는 Reveal로 슬라이드를 발표하는 방법을 다룹니다. 기본 내비게이션은 다음 키보드 단축키로 수행합니다:

동작 | 키 |
다음 슬라이드 | SPACE N</kb
이전 슬라이드 | P |
fragment 없이 이동 | Alt → Alt ← |
첫/마지막 슬라이드로 이동 | Shift → Shift ←

발표할 때 전체 화면 모드를 자주 사용하게 됩니다. F 키를 눌러 전환할 수 있습니다.

기본 키보드 내비게이션 외에도 Reveal은 다음과 같은 고급 기능을 지원합니다:

  • 내비게이션 메뉴 및 개요 모드
  • 발표자 보기(발표자 노트, 타이머, 다음 슬라이드 미리보기 포함)
  • PDF로 인쇄 및 자체 포함 HTML 배포
  • 슬라이드 위에 그리기 및 칠판/화이트보드 모드
  • Multiplex: 청중이 자신의 휴대폰, 태블릿, 노트북에서 발표자가 제어하는 슬라이드를 따라볼 수 있음

이러한 기능은 아래에서 설명합니다.

슬라이드로 이동

reveal.js의 슬라이드 이동 단축키로 특정 슬라이드로 바로 이동할 수 있습니다. 방법은 다음과 같습니다:

  • G를 눌러 활성화
  • 슬라이드 번호 또는 id 입력
  • Enter로 확인

숫자를 입력하면 해당 슬라이드 번호로 이동하고, 문자열을 입력하면 일치하는 id의 슬라이드를 찾아 이동합니다.

이 기능은 jump-to-slide: false 옵션으로 비활성화할 수 있습니다:

format:
  revealjs:
    jump-to-slide: false

개요 모드

개요 모드는 각 슬라이드의 미리보기 썸네일을 보여주는 대체 보기입니다:

개요 모드에서 표시된 슬라이드 스크린샷으로, 프레젠테이션의 슬라이드 썸네일이 나열되어 있음.

O 키로 개요 모드를 활성화할 수 있습니다.

스크롤 보기

Reveal 프레젠테이션은 슬라이드 대신 세로 스크롤로 탐색하는 스크롤 보기로 발표할 수 있습니다. 이는 Revealjs 5에서 도입된 새 보기 모드입니다. Print view처럼 항상 대체 보기 모드로 사용할 수 있으며, 작은 화면(예: 모바일에서 프레젠테이션 보기)에서는 기본 보기로 사용됩니다.

우리의 데모 프레젠테이션은 스크롤 보기 모드로도 확인할 수 있으며 아래에도 표시됩니다.

스크롤 보기 진입

스크롤 보기로 들어가려면 다음 중 하나를 수행하세요:

  • R 키로 스크롤 보기 전환

  • 내비게이션 메뉴로 스크롤 보기 전환

  • 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

프레젠테이션에서 기본적으로 스크롤 보기를 활성화합니다(기본값 false). 그렇지 않으면 스크롤 보기 진입은 수동 트리거가 필요합니다(스크롤 보기 진입 참고). scroll-view: true는 다음과 동일합니다.

scroll-view:
  activate: true

예를 들어 다음은 compact 레이아웃, proximity 스냅 모드, 진행 스크롤바 항상 표시, 작은 화면 자동 활성화 비활성화를 지정합니다:

---
title: "Presentation"
format:
  revealjs:
    scroll-view:
      layout: compact
      snap: proximity
      progress: true
      activation-width: 0
---

슬라이드 줌

Alt 키를 누른 채로 요소를 클릭하면 해당 요소로 줌 인합니다. 다음 이미지 중 하나를 확대해 보세요:

Alt 또는 Ctrl를 다시 클릭하면 축소됩니다.

발표자 보기

발표자 보기에는 현재 슬라이드와 다음 슬라이드, 타이머, 현재 슬라이드에 연결된 발표자 노트가 표시됩니다:

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

S 키로 발표자 보기를 활성화할 수 있습니다.

.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 발표자 보기에서만 슬라이드 번호 표시

미리보기 링크

Reveal은 preview-links 옵션으로 프레젠테이션 흐름에 외부 웹사이트 내비게이션을 쉽게 통합할 수 있습니다.

preview-links: true가 설정된 하이퍼링크를 클릭하면 슬라이드 위에 오버레이되는 iframe에서 링크가 열립니다. 예를 들어 Matplotlib 링크를 클릭하면 웹사이트가 슬라이드 위에 열리며(오른쪽 상단 닫기 버튼으로 닫을 수 있음) 다음과 같습니다:

matplotlib 랜딩 페이지 스크린샷.

preview-link에 사용할 수 있는 값은 다음과 같습니다:

값 | 설명 |
auto 전체 화면 발표 중에는 미리보기 링크를 사용(그 외에는 일반 이동) |
true 항상 미리보기 링크 |
false 미리보기 링크 사용 안 함(기본값) |

예를 들어 다음은 preview-linksauto로 설정합니다:

---
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-Optionsdeny로 설정하거나 Content-Security-Policyframe-ancestor 제한을 적용). 웹사이트가 iframe 사용을 허용하지 않으면 Quarto 문서 출력에서 미리보기가 동작하지 않습니다.

슬라이드 톤

슬라이드 톤은 슬라이드를 전환할 때 은은한 소리를 재생합니다. 이는 시각 장애 사용자 요청으로 추가된 기능이며, 발표자가 슬라이드 진행 상황을 청각적으로 알 수 있게 합니다. 다음과 같이 활성화합니다:

format:
  revealjs:
    slide-tone: true

톤의 음높이는 낮은 도에서 높은 도까지 슬라이드마다 증가합니다. 점진적 슬라이드에서는 톤의 음높이가 동일하게 유지됩니다.

슬라이드 톤 구현은 xaringanExtra의 slide tone 플러그인에서 가져와 적용했습니다.

자동 슬라이드

프레젠테이션은 사용자 입력 없이 슬라이드를 자동으로 진행하도록 구성할 수 있습니다. 이를 활성화하려면 auto-slide 옵션으로 슬라이드 전환 간격(밀리초)을 지정해야 합니다. 모든 슬라이드를 보여준 후 반복하려면 loop 옵션을 추가로 지정할 수 있습니다.

예를 들어 다음은 5초마다 진행하고 반복하도록 설정합니다:

---
title: "Presentation"
format: 
  revealjs: 
    auto-slide: 5000
    loop: true
---

자동 슬라이드 덱에는 재생/일시정지 컨트롤 요소가 자동으로 표시됩니다. 사용자가 덱과 상호작용을 시작하면 슬라이딩이 자동으로 일시정지됩니다. 키보드에서 A를 눌러 슬라이딩을 일시정지/재개할 수도 있습니다.

auto-slide-stoppable: false를 지정하면 자동 슬라이드 컨트롤을 비활성화하고 슬라이딩이 일시정지되지 않게 할 수 있습니다.

슬라이드 타이밍

autoslide 속성으로 개별 슬라이드와 fragment의 지속 시간을 재정의할 수도 있습니다(이 속성은 Fragments)에서도 동작합니다. 예를 들어 자동 슬라이드 값을 2초로 설정할 수 있습니다:

## Slide Title {autoslide=2000}

배포

Reveal 프레젠테이션을 배포하는 주요 방법은 두 가지입니다:

  1. PDF 파일로 배포—방법은 위의 PDF로 인쇄를 참고하세요.

  2. HTML 파일로 배포. HTML의 경우 하나의 자체 포함 파일로 배포하는 것이 가장 편리합니다. 이를 위해 embed-resources 옵션을 지정하세요:

    ---
    title: "Presentation"
    format:
      revealjs:
        embed-resources: true
    ---

    의존 이미지, CSS 스타일, 기타 자산은 Quarto가 생성한 HTML 파일에 모두 포함됩니다.

    embed-resources를 지정하면 렌더링이 몇 초 느려질 수 있으므로, 배포할 준비가 되었을 때만 활성화하는 것이 좋습니다. 또한 Reveal 플러그인 Chalkboardembed-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 플러그인 Chalkboardembed-resources 출력과 호환되지 않습니다. Chalkboard 플러그인이 활성화된 상태에서 embed-resources: true를 지정하면 오류가 발생합니다.

노트 캔버스와 칠판을 활성화하면 다음과 같습니다:

노트 캔버스가 활성화된 슬라이드로, 왼쪽에는 색상 선택 패널이 있고 하단에는 붓이 있는 메뉴 바가 있음. 슬라이드 헤더의 단어 하나가 파란색으로 밑줄 그어져 있음.

왼쪽에 색상 선택기가 있고 하단에 붓 도구가 있는 칠판 캔버스 스크린샷. 배경은 어둡고 'y = mx + b' 수식이 분필 질감의 흰색으로 그려져 있음.

노트 캔버스를 켜고 끄려면 버튼 또는 C 키를 사용하세요.

칠판을 켜고 끄려면 버튼 또는 B 키를 사용하세요.

노트 캔버스와 칠판에 대한 키보드 단축키는 다음과 같습니다:

동작
노트 캔버스 토글

C

칠판 토글

B

모든 그림 초기화

BACKSPACE

슬라이드 그림 지우기

DEL

색상 앞으로 순환

X

색상 뒤로 순환

Y

그림 다운로드

D

다음 마우스 및 터치 제스처로 그림과 상호작용할 수 있습니다:

  • 왼쪽 아래 버튼을 클릭하여 노트 캔버스 또는 칠판 토글

  • 왼쪽의 색상 선택기를 클릭하여 색상 변경(색상 선택기는 노트 캔버스 또는 칠판이 활성화된 경우에만 표시됨)

  • 오른쪽 위/아래 화살표를 클릭하여 여러 칠판 간 전환(위/아래 화살표는 칠판에서만 사용 가능)

  • 마우스 왼쪽 버튼을 누른 채로 드래그하여 노트 캔버스 또는 칠판에 작성

  • 마우스 오른쪽 버튼을 누른 채로 드래그하여 이전 그림 삭제

  • 터치 후 이동하여 노트 캔버스 또는 칠판에 작성

  • 0.5초간 터치 후 이동하여 이전 그림 삭제

그림 복원

D 키로 활성화된 모든 그림을 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 사전 기록된 그림의 선택적 파일 이름(D 키로 그림 다운로드).
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 사용에 대해 더 알아보려면 다음 문서를 참고하세요:

  • Reveal 기본: 프레젠테이션 생성의 기본을 다룹니다.
  • 고급 Reveal: 전환, 애니메이션, 고급 레이아웃과 배치, 프레젠테이션 사용자 지정 옵션을 다룹니다.
  • Reveal 테마: 기존 테마 사용/사용자 지정과 새 테마 생성 방법을 설명합니다.