topic★★★★★난이도

Reveal.js — 프레젠테이션

HTML/마크다운으로 만드는 프레젠테이션 프레임워크. 코드 하이라이팅, 애니메이션, 발표자 노트 내장.

#Reveal.js#프레젠테이션#마크다운#발표

왜 배우는가

파워포인트를 열 필요 없이 코드로 PPT를 만든다. 개발자 발표, 기술 세미나에 최적화되어 있고, Git으로 버전 관리까지 된다.

Reveal.js는 코드로 만드는 PPT다. HTML 섹션 태그 하나가 슬라이드 한 장이 되고, 마크다운으로도 작성할 수 있다. 코드 구문 강조, 수학 수식(KaTeX), 발표자 노트까지 기본 지원.

용도	설명
기술 세미나	코드 하이라이팅이 깔끔하게 적용
교육 자료	수식·다이어그램 삽입 용이
포트폴리오	웹 URL로 공유 (설치 불필요)
자동 발표	자동 넘김 + 녹화 기능

javascript

// npm install reveal.js
import Reveal from "reveal.js";
import Markdown from "reveal.js/plugin/markdown/markdown";

Reveal.initialize({
  plugins: [Markdown],
  autoSlide: 5000,  // 5초마다 자동 넘김
});

// HTML: <section data-markdown>## 제목\n내용</section>

HTML 파일에 `<section>` 태그로 슬라이드를 나누고, `Reveal.initialize()`로 시작한다. `data-markdown` 속성을 쓰면 마크다운으로 작성 가능.

Claude Code 팁: "Reveal.js로 AI 트렌드 발표 슬라이드 5장 만들어줘"라고 하면 섹션 구성, 코드 예시, 발표자 노트까지 한 번에 생성한다.