html-ppt: 테마 36종과 레이아웃 31종을 갖춘 HTML 프레젠테이션 제작 에이전트 스킬

9bow · 7월 31, 2026, 12:30오후

html-ppt 소개

html-ppt는 AI 코딩 에이전트가 정적 HTML 슬라이드 덱을 만들 때 참고할 테마와 레이아웃, 애니메이션 카탈로그를 한 벌로 묶어 둔 에이전트 스킬(AgentSkill)입니다. 에이전트에게 발표 자료를 부탁하면 보통 빈 화면에서 슬라이드 구조와 CSS를 매번 새로 지어내는데, 그렇게 만든 결과물은 실행할 때마다 톤이 달라지고 레이아웃도 들쭉날쭉합니다. html-ppt는 그 자리에 미리 검증된 템플릿 파일을 놓아, 에이전트가 새로 디자인하는 대신 고르게 만듭니다.

구조는 토큰 기반 디자인 시스템 하나와 그 위에 얹히는 파일들로 정리되어 있습니다. 색과 반경, 그림자, 폰트 결정은 저장소의 assets/base.css와 현재 테마 파일에 모여 있어서 테마 CSS 링크 한 줄을 바꾸면 덱 전체의 외관이 바뀝니다. 페이지 유형은 레이아웃 파일 하나, 등장 효과는 애니메이션 클래스 하나에 대응합니다. 빌드 단계가 없는 순수 HTML·CSS·JavaScript이며, CDN은 웹폰트와 highlight.js, chart.js에만 선택적으로 쓰입니다.

산출물이 정적 HTML이라는 점 때문에 발표 도구로서의 성격도 달라집니다. 브라우저에서 바로 열리고 키보드로 넘기며, S 키를 누르면 현재 슬라이드와 다음 슬라이드, 발표 원고, 타이머를 담은 발표자 창이 별도로 열립니다. 본 게시물에서는 html-ppt가 제공하는 카탈로그의 구성, 픽셀 단위로 일치하는 미리보기를 만드는 방식, 발표자 모드의 동작, 그리고 설치와 사용 절차를 정리합니다.

html-ppt가 제공하는 카탈로그

항목	수량	위치
테마	36	`assets/themes/*.css`
전체 덱 템플릿	15	`templates/full-decks/<이름>/`
단일 페이지 레이아웃	31	`templates/single-page/*.html`
CSS 애니메이션	27	`assets/animations/animations.css`
Canvas FX 애니메이션	20	`assets/animations/fx/*.js`
쇼케이스 덱	4	`templates/*-showcase.html`
검증용 스크린샷	56	`scripts/verify-output/`

각 항목의 상세 카탈로그는 저장소의 references/ 디렉토리에 따로 정리되어 있습니다. 테마마다 언제 쓰면 좋은지를 적어 둔 themes.md, 레이아웃 유형을 정리한 layouts.md, 애니메이션 목록인 animations.md, 전체 덱 목록인 full-decks.md, 그리고 작성 흐름 전체를 다루는 authoring-guide.md가 있습니다. 에이전트가 처음 읽는 진입점은 저장소 최상위의 SKILL.md이며, 여기에는 어떤 요청에서 이 스킬을 써야 하는지가 트리거 키워드와 함께 적혀 있습니다.

html-ppt의 테마 36종

테마 이름은 용도를 짐작할 수 있게 붙어 있습니다. minimal-white, editorial-serif, academic-paper, corporate-clean처럼 차분한 계열이 있고, catppuccin-latte와 catppuccin-mocha, dracula, tokyo-night, nord, gruvbox-dark, rose-pine, solarized-light처럼 개발자에게 익숙한 색 구성표를 옮겨 온 것들도 있습니다. neo-brutalism, glassmorphism, bauhaus, swiss-grid, memphis-pop, cyberpunk-neon, y2k-chrome, vaporwave처럼 스타일을 앞세운 계열, pitch-deck-vc, news-broadcast, magazine-bold, engineering-whiteprint처럼 문서 종류를 겨냥한 계열도 포함됩니다.

각 테마는 CSS 토큰 파일 하나로만 이루어져 있습니다. 전체 목록은 templates/theme-showcase.html에서 한 번에 볼 수 있고, 이 쇼케이스는 슬라이드마다 별도의 <iframe>으로 렌더링해 테마끼리 스타일이 섞이지 않도록 격리합니다.

html-ppt의 페이지 레이아웃 31종

레이아웃은 발표 자료에서 반복적으로 등장하는 페이지 유형을 그대로 나열합니다. 표지와 목차, 섹션 구분, 불릿, 2단·3단 구성, 큰 인용, 수치 강조, KPI 그리드, 표, 코드, 코드 차이(diff), 터미널, 흐름도, 타임라인, 로드맵, 마인드맵, 비교, 장단점, 체크리스트, 간트 차트, 이미지 히어로, 이미지 그리드, 막대·선·원·레이더 차트, 아키텍처 다이어그램, 절차 단계, 마무리 페이지가 각각의 파일로 들어 있습니다.

모든 레이아웃 파일에는 현실적인 예시 데이터가 들어 있어서, 덱에 넣자마자 렌더링된 모습을 확인할 수 있습니다. 아래 애니메이션은 31개 레이아웃 파일을 2.8초마다 순환시켜 보여 주는 저장소의 미리보기입니다.

html-ppt의 31개 레이아웃을 순환하며 보여 주는 미리보기

html-ppt의 애니메이션 47가지

애니메이션은 성격이 다른 두 갈래로 나뉩니다. 가벼운 쪽은 CSS로만 구현된 27가지로, 방향별 페이드와 rise-in, zoom-pop, blur-in, glitch-in, typewriter, neon-glow, stagger-list, counter-up, path-draw, card-flip-3d, kenburns, spotlight 등이 있고 data-anim 속성으로 지정합니다.

무거운 쪽은 캔버스로 직접 구현한 20가지 효과이며 data-fx 속성으로 지정합니다. particle-burst, confetti-cannon, firework, starfield, matrix-rain 같은 일반적인 연출과 함께, 힘 기반 물리로 그리는 knowledge-graph, 신호 펄스를 표현하는 neural-net, constellation, orbit-ring, galaxy-swirl, data-stream, shockwave 등이 포함됩니다. 이 효과들은 fx-runtime.js가 슬라이드에 진입할 때 자동으로 초기화하고 빠져나갈 때 정리합니다.

html-ppt의 발표자 모드

덱을 열고 S 키를 누르면 별도의 발표자 창이 뜹니다. 이 창에는 현재 슬라이드, 다음 슬라이드 미리보기, 발표 원고, 경과 시간과 슬라이드 번호를 보여 주는 타이머의 네 카드가 놓입니다. 각 카드는 헤더를 잡아 끌어 옮기고 오른쪽 아래 손잡이로 크기를 조절할 수 있으며, 위치와 크기는 덱별로 localStorage에 저장됩니다. 기본 배치로 되돌리는 버튼도 있습니다.

미리보기가 실제 화면과 정확히 일치하는 이유는 각 카드가 같은 덱 HTML을 ?preview=N 질의 문자열과 함께 불러오는 <iframe>이기 때문입니다. 런타임이 이 파라미터를 감지하면 해당 슬라이드 하나만 부가 요소 없이 렌더링하므로, 미리보기는 청중이 보는 화면과 같은 CSS·테마·폰트·뷰포트를 사용합니다. 슬라이드를 넘길 때는 발표자 창이 각 iframe에 postMessage({type:'preview-goto', idx:N})을 보내고 iframe은 활성 클래스만 바꾸므로, 다시 불러오거나 화면이 깜빡이는 일이 없습니다. 두 창은 BroadcastChannel로 상태를 맞춥니다.

발표 원고에 대해서는 세 가지 작성 규칙을 제시합니다. 읽을 문장이 아니라 신호로 쓰라는 것(핵심어는 굵게, 전환 문장은 별도 문단으로), 슬라이드당 150에서 300단어를 유지하라는 것(페이지당 2~3분 속도), 그리고 문어체가 아니라 말하듯 쓰라는 것입니다. 전체 작성 안내는 저장소의 references/presenter-mode.md에 있고, 모든 슬라이드에 원고가 채워진 presenter-mode-reveal 템플릿을 그대로 복사해 쓸 수도 있습니다.

html-ppt의 전체 덱 템플릿 15종

전체 덱 템플릿은 슬라이드 여러 장이 완성된 형태로 묶인 폴더입니다. 8종은 실제로 쓰인 덱에서 추출한 외관이고(xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7종은 상황별 골격입니다(pitch-deck, product-launch, tech-sharing, weekly-report, 3:4 비율 9장 구성인 xhs-post, course-module, 그리고 발표자 모드를 전제로 설계된 presenter-mode-reveal).

각 폴더의 CSS는 .tpl-<이름> 선택자로 범위가 한정되어 있어서, 여러 덱을 나란히 미리보기로 띄워도 스타일이 충돌하지 않습니다. 전체 갤러리는 templates/full-decks-index.html에서 볼 수 있습니다.

html-ppt 설치와 사용법

설치는 한 줄입니다.

npx skills add https://github.com/lewislulu/html-ppt-skill

이 명령이 스킬을 에이전트 런타임에 등록하고, 이후에는 AgentSkill을 지원하는 에이전트에게 자연어로 발표 자료를 요청하면 됩니다. 저장소를 직접 복제해 손으로 쓸 때는 스크립트를 사용합니다.

# 기본 템플릿에서 새 덱 만들기
./scripts/new-deck.sh my-talk

# 카탈로그 둘러보기
open templates/theme-showcase.html
open templates/layout-showcase.html
open templates/animation-showcase.html

# 헤드리스 Chrome으로 PNG 렌더링
./scripts/render.sh examples/my-talk/index.html 12

덱을 열었을 때 쓰는 키는 다음과 같습니다.

← → Space PgUp PgDn Home End   슬라이드 이동
F                               전체 화면
S                               발표자 창 열기
N                               간단 메모 서랍
R                               타이머 초기화 (발표자 창)
O                               슬라이드 개요 그리드
T                               테마 순환
A                               현재 슬라이드 애니메이션 순환
#/N (URL)                       N번 슬라이드로 직접 이동
?preview=N (URL)                슬라이드 한 장만 렌더링

html-ppt의 설계 원칙

프로젝트가 밝히는 원칙은 네 가지로 정리됩니다. 첫째는 토큰 기반 디자인 시스템으로, 변수 하나를 바꾸면 덱 전체가 함께 조정되도록 색과 간격, 그림자 결정을 한곳에 모아 둡니다. 둘째는 미리보기의 iframe 격리인데, 테마와 레이아웃, 전체 덱 쇼케이스가 모두 슬라이드마다 독립된 렌더링을 갖도록 하기 위한 선택입니다.

셋째는 빌드 없음입니다. 산출물이 정적 파일이라 브라우저로 열면 그대로 동작하고, 배포도 파일을 올리는 일로 끝납니다. 넷째는 기본값을 의견 있게 정해 두는 것으로, 타입 스케일과 간격 리듬, 그라디언트와 카드 처리를 미리 정해 둡니다. 폰트 쪽에서는 Noto Sans SC와 Noto Serif SC가 미리 임포트되어 중국어와 영어를 함께 다루도록 준비되어 있습니다.

html-ppt의 라이선스

html-ppt는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

html-ppt 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

이 도구를 직접 설치해 사용해보셨다면, 파이토치 한국 사용자 모임 회원들을 위해 경험이나 팁을 댓글로 남겨주세요!