reveal.js: 테마, 내보내기, 그리고 대안들과의 비교
reveal.js는 GitHub 스타 71.9k를 기록한 오픈소스 HTML 프레젠테이션 프레임워크입니다. 슬라이드를 HTML이나 Markdown으로 작성하고 어떤 브라우저에서든 발표할 수 있습니다. 이 글은 솔직한 안내서입니다. 테마·템플릿·예제가 어떻게 작동하는지, PDF와 PowerPoint 내보내기가 실제로 어떻게 동작하는지, Slidev 및 Marp와 어떻게 비교되는지, 그리고 agent-native 디자인 워크스페이스가 어디에 들어맞는지를 다룹니다.
코드를 쓰는 사람이고 발표를 해야 한다면, 아마 reveal.js를 마주쳤을 겁니다. 여러분이 봤던 개발자 콘퍼런스 슬라이드의 상당수를 떠받치는 오픈소스 프레임워크죠. 각 슬라이드를 HTML이나 Markdown으로 작성하면, 그것이 어떤 브라우저에서든 웹 페이지로 실행됩니다——테마, 전환, 프래그먼트 애니메이션, 발표자 노트, 그리고 네이티브 PDF 내보내기가 기본 내장되어 있습니다. GitHub 스타 71.9k와 MIT 라이선스를 갖춘 이것은 "PowerPoint를 열지 않고 슬라이드를 어떻게 만들지"에 대한 기본 답입니다.
이 글은 그것에 대한 솔직한 지도입니다. reveal.js가 실제로 무엇인지, 테마와 템플릿과 예제가 어떻게 맞물리는지, PDF와 PowerPoint 내보내기가 실제로 어떻게 동작하는지(함정이 하나 있습니다), 다른 오픈소스 경쟁자들과 어떻게 견주어지는지, 그리고——대부분의 글이 건너뛰는 부분——이런 프레임워크가 더 이상 알맞은 도구가 아니게 되고 다른 무언가가 넘겨받는 지점은 어디인지를 다룹니다. AI와 에이전트가 돕는 슬라이드 작업 흐름의 선택지를 저울질하는 중이라면, reveal.js가 무엇이고 무엇이 아닌지 정확히 알아 두면 도움이 됩니다.
reveal.js란
reveal.js는 스스로를 "The HTML Presentation Framework"라고 부르는데, 그 설명은 정확합니다. 열어서 이리저리 클릭하는 앱이 아니라, HTML 파일에 끼워 넣는 JavaScript 라이브러리입니다. 각 슬라이드는 <section> 요소이며, section을 중첩하면 세로 슬라이드가 됩니다. 모든 것을 CSS로 스타일링하고, data 속성으로 전환과 프래그먼트를 연결한 뒤, 브라우저에서 페이지를 열어 발표합니다. 출력물이 바로 웹 페이지이기 때문에, 웹이 할 수 있는 것은 무엇이든——라이브 코드, 임베드 영상, iframe, WebGL, 여러분만의 컴포넌트——슬라이드 위에 올라올 수 있습니다.
절충점은 정의 안에 그대로 담겨 있습니다. 이것은 GUI가 아니라 개발자용 프레임워크입니다. 여러분의 도구는 드래그 핸들이 달린 캔버스가 아니라 코드 편집기와 브라우저입니다. 바로 그 점 때문에 개발자들이 좋아하고——완전한 버전 관리, 완전한 CSS 제어, 독점 파일 형식 없음——바로 그 점 때문에 코드를 안 쓰는 사람은 튕겨 나갑니다. 게다가 진짜로 무료입니다. 계정 없음, 워터마크 없음, 내보내기 상한 없음, 좌석당 과금 없음. HTML은 여러분 것입니다.
테마, 템플릿, 예제
reveal.js를 둘러싼 검색의 대부분은 사실 밑바닥부터 디자인하지 않고도 보기 좋게 만드는 방법에 관한 것입니다. 그래서 각 조각이 어떻게 맞물리는지 정리해 봅니다.
reveal.js 테마는 내장된 출발점입니다. 프레임워크에는 미리 만들어진 테마 한 벌——Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized 등——이 딸려 오며, 스타일시트 링크 한 곳만 바꾸면 전환됩니다. 테마는 그냥 CSS이므로, "커스텀 reveal.js 테마"란 여러분의 글꼴, 색상, 제목 스타일을 지정하는 Sass/CSS 파일을 작성(또는 포크)하는 것을 뜻합니다. 테마 스토어는 없습니다. 여러분이 편집하는 것은 스타일시트입니다.
reveal.js 템플릿과 예제는 하나의 공식 갤러리가 아니라 주로 커뮤니티 안에 흩어져 있습니다. 저장소에는 예제 덱이 딸려 오고, 문서 사이트(revealjs.com) 자체가 소스를 읽어 볼 수 있는 reveal.js 덱이며, GitHub에는 스타터 템플릿, 보일러플레이트, 프레임워크 래퍼가 넘쳐납니다. "reveal js examples"를 찾고 있다면 신호가 가장 강한 것은 공식 사이트 자체의 소스입니다——거의 모든 기능을 실제 배치된 상태로 보여 줍니다. 초보자를 위한 함정: 여기서 "템플릿"은 내용을 채워 넣는 디자인 파일이 아니라, 클론해서 편집하는 코드 저장소입니다.
PowerPoint와 PDF로 내보내기
PDF 내보내기는 일급이자 내장 기능이며 잘 동작합니다. 덱의 URL 뒤에 ?print-pdf를 붙이고, 브라우저의 인쇄 대화상자를 연 뒤 "PDF로 저장"을 고르면, reveal.js가 모든 슬라이드를 각자의 한 페이지로 재배치합니다. 이것이 깔끔하고 지원되는 경로입니다——얻게 되는 PDF는 여러분의 슬라이드와 똑같이 보입니다.
reveal.js를 PowerPoint로 내보내는 것은 기대치를 다스려야 하는 지점입니다. 편집 가능한 PowerPoint 파일을 만들어 주는 네이티브 ".pptx로 저장"은 없습니다. 현실적인 경로는 PDF → PPTX 변환인데, 그 변환은 손실이 있습니다. 각 슬라이드는 PowerPoint에서 편집 가능한 텍스트 상자, 도형, 레이아웃이 아니라 납작한 이미지 하나로 들어옵니다. 그러니 후속 단계에서 누군가 여러분의 덱을 PowerPoint에서 열어 편집해야 한다면——제목을 다시 치고, 차트 스타일을 바꾸고, 불릿을 다시 배치——reveal.js는 그걸 줄 수 있는 도구가 아닙니다. 브라우저에서 발표하도록 만들어졌고, 편집 가능한 소스는 .pptx가 아니라 HTML입니다. 시작하기 전에 이 점을 알아 두면, 동료가 "그 PowerPoint" 좀 달라고 하는 날의 뼈아픈 놀라움을 피할 수 있습니다.
reveal.js 대안과 그 비교
슬라이드를 코드로 쓰는 방법이 reveal.js만 있는 건 아닙니다. 가장 가까운 오픈소스 대안——사람들이 "reveal.js 대안"이라 말할 때 가리키는 것——은 Slidev와 Marp입니다. 그리고 솔직히 말하면, Open Design은 정면으로 경쟁하기보다 완전히 다른 레이어에 자리합니다.
| 도구 | 작성 방식 | 편집 가능한 .pptx | 템플릿화 | 라이선스 |
|---|---|---|---|---|
| reveal.js | HTML 또는 Markdown | 아니오(PDF→PPTX는 손실 이미지) | 테마 = CSS/Sass; 커뮤니티 템플릿 | MIT |
| Slidev | Markdown + Vue | 아니오(이미지/PDF 내보내기) | Vue 컴포넌트 + 테마 | MIT |
| Marp | Markdown만 | 아니오(PDF/PPTX는 이미지) | Markdown 테마(CSS) | MIT |
| Open Design | 에이전트에게 설명 | 예——디자인 시스템에 맞춘 편집 가능한 출력 | 퍼스트파티 덱 템플릿 | Apache-2.0 |
Slidev는 철학적으로 가장 가까운 형제입니다. Markdown을 우선하고 그 아래에 Vue 컴포넌트를 두어, reveal.js의 날것 그대로의 HTML 자유를 얼마간 내주는 대신 더 구조적이고 개발자 친화적인 작성 흐름을 얻습니다. Vue/Vite 세계에 살면서 라이브 코딩 데모를 원한다면 Slidev가 자연스러운 선택입니다. Marp는 반대 방향으로 갑니다——오직 Markdown, 일부러 미니멀, 컴포넌트 없음——덕분에 슬라이드가 대부분 텍스트이고 프레임워크를 전혀 신경 쓰고 싶지 않을 때 가장 빠른 길이 됩니다.
셋 다 같은 근본 형태를 지닌 코드 우선 프레임워크입니다. 덱을 쓰고, 브라우저에서 발표하며, 편집 가능한 PowerPoint 출력은 사실 핵심이 아닙니다. 이들 사이의 선택은 대체로 어떤 작성 표면을 원하느냐(날것 HTML, Vue Markdown, 순수 Markdown)의 문제이지, 하나에만 있고 나머지엔 없는 능력의 문제가 아닙니다.
Open Design이 들어맞는 곳
솔직한 경계를 그어 봅니다. reveal.js는 덱을 쓰라고 요구합니다——모든 슬라이드를, 코드로. 손으로 다듬은 HTML 제어를 원한다면 이건 장점이고, 그게 목표라면 여기 있는 그 무엇도 이를 대체하지 않습니다.
Open Design은 다른 레이어이며, 우리가 만드는 제품이기도 하니 그 점을 감안하고 읽어 주세요. 이것은 오픈소스(Apache-2.0), 로컬 우선, BYOK 방식의 Agent-Native Design Workspace로, 여러분이 이미 쓰고 있는 코딩 에이전트——Claude Code, Codex, Cursor——의 바깥에 자리합니다. HTML을 손으로 쓰는 대신 원하는 덱을 설명하면, 에이전트가 디자인 시스템에 맞춰 편집 가능한 것을 생성합니다. 그래서 처음부터 브랜드에 맞게 나오고, 렌더링된 산출물로 얼어붙는 대신 편집 가능한 상태로 남습니다. Open Design은 시작점으로 삼을 수 있는 퍼스트파티 덱 템플릿도 제공합니다.
완전한 CSS 제어로 슬라이드를 코드로 쓰는 것이 원하는 바라면, Open Design은 reveal.js의 대체재가 아닙니다——그건 reveal.js의 홈그라운드이고, 거기서 훌륭합니다. Open Design은 이런 경우를 위한 것입니다. 마크업을 쓰기보다 에이전트에게 브리핑하고 싶고, 출력이 여러 덱에 걸쳐 하나의 디자인 시스템과 맞기를 바라며, 마지막에 자신이 소유하는 편집 가능한 파일을 원할 때. 덱 자체가 여러분이 쓰는 코드일 때는 reveal.js에 손을 뻗고, 덱이 에이전트가 여러분을 위해 만들어 내는 여러 브랜드 준수 출력 중 하나일 때는 워크스페이스에 손을 뻗으세요.
자주 묻는 질문
reveal.js는 무료인가요? 네. reveal.js는 MIT 라이선스의 오픈소스입니다——상업적으로도 무료이며, 계정도 워터마크도 내보내기 제한도 없습니다. HTML은 직접 호스팅합니다.
reveal.js 테마는 어떻게 추가하거나 바꾸나요? reveal.js에는 내장 테마(Black, White, League, Sky, Night, Serif 등)가 딸려 오며, 스타일시트 링크 한 곳을 바꿔 교체합니다. 커스텀 테마란 자신의 글꼴과 색상을 담은 CSS/Sass 파일을 작성하거나 포크하는 것을 뜻합니다——둘러볼 테마 스토어는 없습니다.
reveal.js를 PowerPoint로 내보낼 수 있나요? 편집 가능한 .pptx로는 안 됩니다. reveal.js는 PDF로 깔끔하게 내보냅니다(?print-pdf를 붙이고 브라우저에서 PDF로 인쇄). 그 PDF를 PowerPoint로 변환하는 것은 가능하지만 손실이 있습니다——각 슬라이드가 편집 가능한 텍스트와 도형이 아니라 납작한 이미지로 떨어집니다. 편집 가능한 PowerPoint가 필요하다면 reveal.js는 알맞은 소스가 아닙니다.
reveal.js vs Slidev vs Marp——무엇을 써야 하나요? 셋 다 오픈소스, 코드 우선, MIT 라이선스입니다. 날것 HTML 제어에는 reveal.js, Markdown에 Vue 컴포넌트를 더한 것(라이브 데모에 훌륭)에는 Slidev, 가장 단순한 Markdown 전용 덱에는 Marp를 고르세요. 어느 것도 편집 가능한 PowerPoint 출력을 목표로 하지 않습니다.
reveal.js를 쓰려면 코딩을 알아야 하나요? 사실상, 그렇습니다. reveal.js는 개발자용 프레임워크입니다——드래그 앤 드롭 GUI가 아니라 텍스트 편집기에서 HTML, Markdown, CSS로 작업합니다. 대신 평범한 말로 덱을 설명하고 싶다면, 바로 그 빈틈을 Open Design 같은 agent-native 워크스페이스가 메웁니다.
핵심 정리
reveal.js는 71.9k 스타를 받을 만합니다. 무료, MIT 라이선스, HTML 네이티브로, 브라우저가 있는 곳이라면 어디서나 돌아가는 슬라이드를 만들 수 있고, 진짜 테마와 깔끔한 PDF 내보내기, 완전한 CSS 제어를 갖췄습니다. 다만 눈을 똑바로 뜨고 들어가세요——이건 여러분이 그 안에서 쓰는 프레임워크이지 클릭해 넘기는 앱이 아니며, "편집 가능한 PowerPoint로 내보내기"는 하지 않는 일입니다. 덱을 코드로 작성하고 싶다면 reveal.js(또는 Slidev / Marp)는 훌륭한 안식처입니다. 덱을 설명하고 편집 가능하며 브랜드에 맞고 자신이 소유하는 것을 에이전트가 생성해 주길 바란다면, 바로 그 지점에서 Agent-Native Design Workspace가 이어받습니다.