완성된 HTML 발표 자료를 넣기만 하면, 파워포인트의 "발표자 보기"가 붙습니다. 발표 자료는 한 글자도 고치지 않습니다.
👉 바로 사용하기 (설치도, 회원가입도 없습니다) 📄 사용 설명서 내려받기 (PDF) (A4 6쪽, 인쇄용)
요즘은 AI로 발표 자료를 HTML로 만듭니다. PPT보다 빠르고 디자인도 잘 나옵니다. 그런데 딱 하나가 없습니다. 발표자 도구.
다음 장이 뭐였는지, 이 장에서 무슨 말을 하려 했는지, 지금 몇 분 지났는지. 파워포인트라면 당연히 있는 그 화면이 HTML 슬라이드에는 없어서, 대본을 종이에 뽑아 들고 발표해야 했습니다.
이 도구는 발표 자료를 고치지 않고 그 화면을 만들어 줍니다. 자료에 코드를 심는 방식이 아니라, 자료를 감싸는 방식이라 어떤 HTML 슬라이드든 그대로 넣으면 됩니다.
- 여기를 엽니다 (또는 이 저장소를 내려받아
index.html더블클릭) - 발표 자료 줄의 [고르기] 로 슬라이드 HTML 을 고릅니다 (끌어다 놓아도 됩니다)
- 지난 발표의 대본이 있으면 발표 대본 줄의 [고르기] 로
.md를 함께 고릅니다 (선택) - [발표 시작] → 발표자 화면이 열립니다
- 오른쪽 위 [청중 화면 열기] → 새 창이 열립니다
끝입니다. 이제 내 화면에는 현재/다음 슬라이드와 대본이, 청중 화면에는 슬라이드만 보입니다.
처음이라면 이 저장소의
sample-deck.html로 먼저 연습해 보세요.
Important
디스플레이는 반드시 "확장" 모드로. 미러링(복제)이면 발표자 대본이 청중에게 그대로 보입니다.
맥은 ⌘ + Fn + F1, 윈도우는 Win + P로 전환합니다.
화면이 하나로 감지되면 청중 화면을 열 때 도구가 경고해 줍니다.
- 빔프로젝터를 연결하고 확장 모드로 설정
- HTML Presenter 를 열고 발표 자료를 끌어다 놓기
- [청중 화면 열기] → 새로 뜬 창을 프로젝터 화면으로 끌어다 놓기
- 그 창에서
F또는 화면의 [⛶ 전체화면] 버튼 - 상단에 ● 청중 화면 연결됨 초록불 확인. 끝
같은 방식이고, 3번만 다릅니다. "전체 화면 공유"가 아니라 "창 공유"를 골라
[청중 화면] 파일명 창을 선택하세요. 그래야 발표자 대본이 새어 나가지 않습니다.
| 발표자 화면 (나만 봄) | 청중 화면 |
|---|---|
| 현재 슬라이드 | 슬라이드만 깨끗하게, 전체화면 |
| 다음 슬라이드 미리보기 | F 또는 버튼 한 번으로 전체화면 |
| 장별 대본 (내용 기준으로 붙어서 자료를 고쳐도 안 밀림) | 4초 뒤 마우스 커서 자동 숨김 |
| 대본 내보내기·가져오기(.md) · 글씨 크기 조절 | 화면 꺼짐 방지 (Wake Lock) |
| 경과 타이머 | 발표자 화면과 실시간 동기화 |
현재 위치 7 / 21 · 청중 화면 연결 상태 |
발표자 화면과 실시간 동기화 |
- 양방향 동기화: 발표자 화면에서 넘겨도, 청중 창에서 직접 넘겨도 양쪽이 같이 움직입니다
- 청중 화면만 보정: 어긋났을 때 청중 화면만 한 장씩 조정
- 지난 발표 이어서 열기: 마지막에 쓴 자료를 다음에 열 때 한 번에 복원
- 마지막 장 인식: 끝에서 더 눌러도 진행 번호가 헛돌지 않습니다
- 대본 보관: [대본 저장] 으로 마크다운 파일로 내려받고, [대본 불러오기] 로 다시 넣습니다
(파일을 창에 끌어다 놓아도 됩니다). 파일명은
날짜_시각_자료이름_대본.md라 같은 날 여러 번 저장해도 최신본이 구분됩니다. 자료를 고쳤어도 각 대본이 제자리를 찾아가고, 장을 넣거나 빼서 자리를 못 찾으면 파일에 적힌 장 번호로 붙일지 물어봅니다. 그래도 못 찾은 대본은 미배정함에 남습니다
| 키 | 동작 |
|---|---|
→ Space PageDown |
다음 슬라이드 |
← PageUp |
이전 슬라이드 |
숫자 + Enter |
그 번호 장으로 바로 가기 (위치 숫자를 클릭해도 됩니다) |
F |
전체화면 (청중 창에서. 화면의 ⛶ 전체화면 버튼도 같은 동작) |
? |
단축키 도움말 |
대본을 쓰는 중에는 단축키가 동작하지 않습니다. 글자가 그대로 입력됩니다.
리모컨(프레젠터)은 대부분 →/← 또는 PageUp/PageDown을 보내므로 그대로 동작합니다.
됩니다: 키보드 ← →로 넘어가는 HTML 슬라이드 (AI로 만든 자료 대부분이 여기 해당),
한 장씩 스크롤되는 형태의 자료, Reveal.js 같은 라이브러리로 만든 자료.
안 됩니다: 마우스 클릭으로만 넘어가고 키보드를 지원하지 않는 자료, 여러 파일로 쪼개진 자료(이미지·CSS가 따로 있는 경우 → 단일 HTML로 합쳐야 합니다).
파일 하나로 완결된 HTML인지가 핵심입니다. AI에게 "이미지와 CSS를 포함해 단일 HTML로 합쳐줘"라고 하면 됩니다.
내 발표 자료가 서버로 올라가나요?
아닙니다. 파일은 브라우저 안에서만 열리고 어디로도 전송되지 않습니다. 인터넷이 끊긴 강의장에서도 그대로 동작합니다.
대본은 어디에 저장되나요?
쓰는 즉시 내 브라우저에 자동 저장됩니다 (자료별·페이지별로 따로). 브라우저를 껐다 켜도 남아 있습니다. 다만 브라우저 안에 저장되므로 다른 PC로는 따라가지 않습니다. 같은 자료를 여러 탭에서 열어도 한쪽에서 쓴 대본이 다른 탭 때문에 사라지지 않습니다.
여러 명이 같이 써도 되나요?
네. 대본은 각자의 브라우저에 저장되므로 발표자끼리 서로 섞이지 않습니다. 계정도 로그인도 필요 없습니다.
청중 화면이 새 탭으로 열려요.
팝업이 차단된 경우입니다. 주소창 오른쪽 팝업 아이콘에서 "항상 허용"을 선택한 뒤 화면의 [청중 화면 열기]를 다시 누르면 독립된 창으로 열립니다.
발표 중 화면이 꺼지지 않나요?
Wake Lock을 걸어 두어 발표 중에는 화면 보호기가 뜨지 않습니다.
[ 발표자 화면 ] 현재 화면 · 다음 화면 · 대본 · 타이머
│
│ 같은 발표 자료를 창 2개에 띄우고 키 입력을 함께 보냅니다
│ (전부 브라우저 안에서, 서버도 인터넷도 없이)
▼
[ 청중 화면 ] 슬라이드만 전체화면
발표 자료를 분석하거나 수정하지 않고, 사용자가 넘길 때와 똑같은 키 입력을 양쪽 화면에 보냅니다. 그래서 자료가 어떤 방식으로 만들어졌든 원본 그대로 동작합니다. 현재 위치는 자료의 실제 상태를 읽어 보정하므로, 끝까지 갔다 돌아와도 번호가 어긋나지 않습니다.
요구 사항: 크롬 또는 엣지 권장, 맥/윈도우. 설치·빌드·서버 불필요
순수 로직(지문 계산·대본 파일 왕복·시간 표시)은 index.html 안 PURE CORE 구역에 있고,
빌드 없이 Node 내장 러너로 테스트합니다.
node --test test/*.test.mjs설계·구현 기록은 docs/superpowers/ 에 있습니다.
docs/manual/ 에 설명서 원본이 있습니다. 스크린샷은 가짜 UI 를 그린 것이 아니라
실제 index.html 을 크롬으로 띄워 찍습니다. 본체가 바뀌면 다시 만들어 주세요.
docs/manual/build.sh크롬과 Pillow 가 필요합니다. QR 을 다시 만들려면 segno 도 설치하세요
(없으면 커밋된 shots/qr.svg 를 그대로 씁니다).
MIT. 자유롭게 쓰고, 고치고, 나눠 주세요.