완성된 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 · 청중 화면 연결 상태 |
발표자 화면과 실시간 동기화 |
- 양방향 동기화: 발표자 화면에서 넘겨도, 청중 창에서 직접 넘겨도 양쪽이 같이 움직입니다
- 청중 화면만 보정: 어긋났을 때 청중 화면만 한 장씩 조정
- 지난 발표 이어서 열기: 마지막에 쓴 자료를 다음에 열 때 한 번에 복원
- 마지막 장 인식: 끝에서 더 눌러도 진행 번호가 헛돌지 않습니다
- 대본 보관: [대본 저장] 으로 마크다운 파일로 내려받고, [대본 불러오기] 로 다시 넣습니다 (파일을 창에 끌어다 놓아도 됩니다). 자료를 고쳤어도 각 대본이 제자리를 찾아가고, 못 찾은 대본은 미배정함에 남습니다
| 키 | 동작 |
|---|---|
→ 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. 자유롭게 쓰고, 고치고, 나눠 주세요.