자체 완결형 HTML 슬라이드 덱 · 2026

발표도 하고
공부도 하는 덱

빌드 없음 · 의존성 없음 · 파일 열면 그냥 돌아감

데모 — 이 덱 자체가 예제이자 출발점

왜 만들었나

덱이 늘어나면 복사본도 늘어난다

HTML 덱은 버전 관리가 되고, 링크로 공유되고, 브라우저만 있으면 열린다
문제는 두세 개째부터 — 스타일과 스크립트가 복사되면서 갈라진다
한쪽만 고치면 룩이 어긋나고, 어느 쪽이 최신인지 아무도 모른다
그 공통 부분을 엔진으로 떼어낸 것이 deckkit 이다

덱은 내용만 담고, 동작은 엔진이 가져간다.

레이아웃

실제로 쓰는 것만 있다

있는 것

표지 · 불릿 · 2단
플로우 · 테이블 · 코드블록
인용 · 숫자 강조 · 마무리

없는 것

필요해지기 전에 만든 레이아웃.

미리 만들어 둔 스켈레톤은 스켈레톤이 아니라 죽은 코드다. 필요하면 그때 docs/layouts.md 에 추가하고 쓴다.

2단 비교

대비가 있을 때만 나눈다

✕ 이렇게 말고

항목이 많아서 반으로 나눔
양쪽이 서로 상관 없음

✓ 이렇게

왼쪽 문제 / 오른쪽 해법
왼쪽 이전 / 오른쪽 이후

플로우

단계가 있는 절차

덱 복사

→

내용 작성

→

검증

→

발표 · 공유

덱 복사 — decks/demo 를 통째로 복사
검증 — bun scripts/validate-deck.mjs 가 넘치는 장표를 잡는다

숫자 강조

숫자 하나가 메시지일 때

0

빌드 스텝

0

런타임 의존성

7

기능 모듈

문장 안에 묻힌 숫자는 아무도 기억하지 못한다. — 슬라이드 만들 때마다 하는 후회

학습 모드

발표가 끝난 덱은 교재가 된다

퀴즈 — 장표에 문제를 달아두고 오답만 반복
진도 — 어디까지 봤는지, 어느 장에 오래 머물렀는지
검색 — 본문과 대본을 함께 훑어 해당 장으로 점프
메모 · 내보내기 — 장표별 메모를 남기고 마크다운으로 뽑기

전부 선택이다. 안 쓰면 스크립트를 안 붙이면 그만이고, 그러면 코드도 안 실린다.

키

지금 눌러보세요

키	기능	모듈
`← →` `Space`	이동	코어
`S`	발표자 모드 — 청중 창 분리	presenter
`Q`	퀴즈	quiz
`I`	진도 · 학습 이력	progress
`M`	메모 · 내보내기	memo
`Cmd/Ctrl+K`	검색 · 목차	search

마무리

복사해서 시작하세요

decks/demo 를 통째로 복사하고 내용만 갈아끼우면 됩니다.

빌드 없음 의존성 없음 모듈 선택 테마 토큰

자세한 건 docs/layouts.md · docs/plugin-api.md