Markdown을 슬라이드로 변환

README를 작성하듯이 프레젠테이션을 만드세요. Markdown 제목, 글머리 기호 목록, 코드 블록을 --- 가로줄로 슬라이드마다 구분하면 됩니다. 이 도구는 Reveal.js로 데크를 실시간 렌더링하며(테마: 검정, 흰색, 심플, solarized), Note:로 발표자 노트를, --로 중첩된 세로 슬라이드를 지원하고, 독립 실행형 HTML 파일이나 인쇄용 PDF로 내보낼 수 있습니다.

Markdown이 슬라이드 데크가 되는 방식

  1. 1

    Markdown 작성

    `---`로 슬라이드를 구분하세요. 표준 제목, 목록, 코드 블록은 평소와 동일하게 작동합니다.

  2. 2

    발표자 노트 추가

    단락 앞에 `Note:`를 붙이세요: 발표자 모드에서만 표시됩니다.

  3. 3

    데크 미리보기

    실시간 미리보기에서 방향키로 데크를 탐색하며 확인할 수 있습니다.

  4. 4

    테마 선택

    검정, 흰색, league, sky, 심플, solarized: 어떤 Reveal.js 테마든 사용할 수 있습니다.

  5. 5

    내보내기

    독립 실행형 HTML 파일 또는 브라우저 인쇄를 통한 PDF.

슬라이드 문법

# 첫 슬라이드

부제 텍스트

---

## 두 번째 슬라이드

- 항목 하나
- 항목 둘
- 항목 셋

Note: 발표자 모드에서만 보이는 발표자 노트입니다.

---

## 코드 슬라이드

\`\`\`python
def hello(name):
    return f"Hi {name}"
\`\`\`
  • ---(별도 줄에 하이픈 세 개)는 새로운 가로 슬라이드를 시작합니다.
  • --(하이픈 두 개)는 현재 슬라이드 열 안에서 세로 슬라이드를 시작합니다, 아래 방향키를 누르면 내려갑니다.
  • 단락 첫머리의 Note:는 발표자 노트가 됩니다.

키보드 탐색

동작
오른쪽 / 스페이스 다음 슬라이드
왼쪽 이전 슬라이드
아래 / 위 세로 스택 탐색
s 발표자 보기 열기
o 슬라이드 개요
f 전체 화면
? 도움말 대화상자

레이아웃 팁

  • 2단 레이아웃: 슬라이드 안에서 원시 HTML을 사용하세요, <div class="columns">...</div>.
  • 프래그먼트 표시: Reveal.js를 직접 사용할 때 글머리 기호 목록이 {.fragment} 속성으로 하나씩 애니메이션 표시됩니다. 필요하면 원시 HTML로 추가하세요.
  • 배경 이미지: 슬라이드 수준 속성 <!-- .slide: data-background="url" -->로 전체 화면 배경을 설정합니다.
  • 슬라이드 간 자동 애니메이션: Reveal 4는 일치하는 요소 사이의 부드러운 전환을 지원합니다, 테마 설정에서 켜세요.

PDF로 내보내기

실시간 미리보기에서 브라우저 주소에 ?print-pdf를 열고 브라우저의 인쇄 대화상자를 사용하세요. A4 가로, 배경 그래픽 켜기, 여백 최소로 선택합니다. Reveal.js는 페이지당 슬라이드 한 장을 출력하며, 선택 시 추가 페이지에 발표자 노트를 표시합니다.

Markdown 기반 슬라이드가 빛나는 경우

  • 코드 예제가 많은 기술 발표.
  • 레이아웃이 부차적이고 콘텐츠를 우선하는 데크.
  • 문서를 그대로 슬라이드로, 프레젠테이션을 프로젝트 README 옆에 두고 git으로 관리.
  • 버전 관리되는 교육 자료.

적합하지 않은 경우

  • 이미지 배치를 정밀하게 다루는 디자인 중심의 키노트.
  • 복잡한 애니메이션이나 임베드 영상 타이밍이 필요한 슬라이드.
  • 템플릿이 모든 세부 사항을 규정하는 브랜드 관리 데크.

자주 묻는 질문

네, 일반적인 Markdown 이미지 문법이 그대로 작동합니다. 내보낸 HTML에서 접근할 수 있도록 절대 URL을 사용하거나 이미지를 먼저 업로드하세요.

네, 선택적으로 유지됩니다. Reveal 인쇄 모드는 “노트를 별도 페이지로” 기능을 지원해, 각 슬라이드가 두 개의 PDF 페이지가 됩니다. 하나는 슬라이드, 다른 하나는 노트입니다.

아니요. 렌더링은 브라우저 안에서 로컬로 이루어집니다. Markdown 소스와 내보낸 HTML은 결코 사용자의 기기를 벗어나지 않습니다.

네. Markdown 상단에 <style> 블록을 추가하거나 테마 설정에서 외부 스타일시트를 연결하세요. 해당 내용이 Reveal.js 출력에 삽입됩니다.

내보낸 HTML은 GitHub Pages, Netlify, S3 등 어떤 정적 호스트에서도 실행되는 독립 실행형 파일입니다. HTML을 업로드하기만 하면 됩니다.

관련 도구

이 도구는 다른 언어로도 제공됩니다