Ch.2 JavaScript 라이브러리 15선
Reveal.js — PPT 대체 프레젠테이션
핵심 개념
Reveal.js
HTML로 프레젠테이션을 만드는 프레임워크
핵심 내용
파워포인트 없이 HTML로 발표 자료를 만드는 라이브러리, Reveal.js를 만나보세요.
Reveal.js = 코드로 만드는 프레젠테이션 도구. PPT처럼 슬라이드 넘기기, 순차 등장 애니메이션, 코드 구문 강조까지 전부 HTML 파일 하나로 해결합니다. 만든 결과물은 URL 하나로 공유할 수 있죠.
발표 자료에 실제 코드가 들어가야 할 때, PPT에 코드 캡처 이미지를 붙이는 건 2010년 방식입니다. Reveal.js는 코드를 직접 넣으면 자동으로 색칠해줍니다.
코드가 들어간 기술 발표, 매주 형식이 같은 주간 보고, URL 하나로 공유해야 하는 상황에 딱입니다.
수동 방식 (PPT): 코드를 캡처 → 이미지로 붙이기. 폰트가 깨지고, 코드 수정하면 다시 캡처. 파일 공유 시 '최종_진짜최종_v3.pptx' 지옥.
Reveal.js 코드: HTML에 코드를 직접 작성하면 구문 강조 자동 적용. Git으로 버전 관리. 배포하면 URL 하나로 전 세계에 공유.
npm으로 설치하거나 CDN을 사용할 수 있습니다. section 태그 하나 = 슬라이드 한 장이 핵심 규칙입니다.
npm install reveal.js또는 CDN으로 바로 시작할 수도 있습니다. CSS 2줄 + JS 1줄이면 준비 완료.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css">
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script><div class="reveal">
<div class="slides">
<section>
<h1>첫 번째 슬라이드</h1>
<p>Hello, Reveal.js!</p>
</section>
<section>
<h2>두 번째 슬라이드</h2>
<p>← → 화살표 키로 이동하세요</p>
</section>
<section>
<h2>세 번째 슬라이드</h2>
<p>이렇게 section을 추가하면 됩니다</p>
</section>
</div>
</div>
<script>Reveal.initialize();</script>브라우저에서 열면 첫 슬라이드가 중앙에 표시됩니다. 오른쪽 화살표 키를 누르면 부드러운 전환 효과와 함께 다음 슬라이드로 넘어갑니다.
AI에게 발표 자료를 시킬 때, 슬라이드 수, 주제, 순차 등장 여부, 테마를 구체적으로 지정하세요.
좋은 프롬프트 예시: "Reveal.js로 10페이지 프레젠테이션 만들어줘. 'AI 시대 업무 자동화' 주제. 각 슬라이드에 fragment로 핵심 포인트를 순차 표시. 5번째 슬라이드에 Python 코드 예시를 넣고 highlight.js 구문 강조 적용해줘."
프롬프트 변형: "테마를 moon(어두운 배경)으로 바꾸고, 3번째 슬라이드 아래에 세로 슬라이드 2장을 추가해줘. 마지막에 Q&A 슬라이드를 넣고 배경을 그라디언트(#667eea → #764ba2)로 설정해줘."
<!-- AI가 생성해준 코드: 순차 등장 + 코드 슬라이드 -->
<section>
<h2>AI가 자동화하는 3가지 업무</h2>
<ol>
<li class="fragment fade-up">반복적인 데이터 입력 → RPA 봇</li>
<li class="fragment fade-up">주간 보고서 작성 → GPT 요약</li>
<li class="fragment fade-up">고객 문의 응대 → 챗봇 자동 응답</li>
</ol>
</section>
<section>
<h2>Python 자동화 예시</h2>
<pre><code data-trim data-line-numbers="1-2|4-5|7-8">
import openai
# 1. 주간 매출 데이터 읽기
with open("sales.csv") as f:
data = f.read()
# 2. AI에게 요약 요청
summary = openai.chat("이 매출 데이터를 3줄로 요약해줘: " + data)
</code></pre>
<p class="fragment">data-line-numbers로 코드를 단계별로 하이라이트할 수 있습니다</p>
</section>팀 발표용 프레젠테이션을 만들어봅시다. 순차 등장, 코드 슬라이드, 배경색 변경까지 포함된 완전한 HTML 파일입니다.
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css">
</head><body>
<div class="reveal"><div class="slides">
<!-- 표지 -->
<section data-background-color="#667eea">
<h1 style="color:white">AI 업무 자동화</h1>
<p style="color:#ddd" class="fragment">— 코드 한 줄로 시작하는 효율 혁명 —</p>
</section>
<!-- 목차 -->
<section>
<h2>오늘 다룰 내용</h2>
<ul>
<li class="fragment">왜 자동화인가?</li>
<li class="fragment">3가지 자동화 도구</li>
<li class="fragment">실전 데모</li>
<li class="fragment">Q&A</li>
</ul>
</section>
<!-- 내용 슬라이드 -->
<section>
<h2>반복 업무에 낭비되는 시간</h2>
<p class="fragment"><strong>주 평균 12시간</strong>을 반복 작업에 사용</p>
<p class="fragment">AI 자동화로 <strong>3시간</strong>으로 줄일 수 있습니다</p>
</section>
<!-- 코드 슬라이드 -->
<section>
<h2>엑셀 자동화 코드</h2>
<pre><code data-trim>
import openpyxl
wb = openpyxl.load_workbook("report.xlsx")
ws = wb.active
ws["A1"] = "이번 주 매출 요약"
wb.save("report_final.xlsx")
</code></pre>
</section>
<!-- 마무리 -->
<section data-background-color="#e8f5e9">
<h2>감사합니다</h2>
<p>질문 있으시면 편하게 말씀해주세요</p>
</section>
</div></div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script>Reveal.initialize({ hash: true });</script>
</body></html>presentation.html로 저장하고 브라우저에서 열어보세요. 화살표 키로 슬라이드를 넘기고, fragment가 달린 요소는 하나씩 순차적으로 나타납니다. 표지와 마지막 장은 배경색이 다르게 설정되어 있습니다.
hash: true 옵션을 넣으면 URL에 #/2 같은 슬라이드 번호가 붙습니다. 링크를 공유할 때 특정 슬라이드로 바로 이동시킬 수 있어 편리합니다.
핵심 용어
Reveal.js
HTML로 프레젠테이션을 만드는 프레임워크
기술 세미나
코드 예시가 많은 개발 발표. 구문 강조 + 라인 하이라이트까지 자동
팀 주간보고
매주 같은 레이아웃에 내용만 바꾸면 되는 반복 발표
강의 자료
fragment 애니메이션으로 설명 순서에 맞게 내용이 하나씩 등장
온라인 포트폴리오
프로젝트를 인터랙티브 슬라이드로 소개. 링크만 보내면 끝
핵심 정리
- 1Reveal.js에서 section 태그 하나가 슬라이드 한 장이다
- 2class="fragment"를 붙이면 클릭할 때마다 요소가 순차적으로 나타난다
- 3pre > code에 코드를 넣으면 자동 구문 강조. data-line-numbers로 단계별 하이라이트도 가능
- 4테마(white, moon, night 등)는 CSS 파일 한 줄로 전환한다
- 5완성된 HTML 파일을 GitHub Pages나 Netlify에 올리면 URL 하나로 발표 자료 공유 끝
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작