HTML 슬라이드 관리 도구입니다. 폴더를 하나 지정하면 그 안(하위 폴더 포함)의 HTML 슬라이드를 찾아, 썸네일로 늘어놓습니다. 이후에는 쓸 것을 모아 순서만 바꾸면 됩니다. 이미지까지 담은 하나의 HTML로 내보낼 수 있습니다. 열면 화살표 키로 넘길 수 있고, 인쇄에서 PDF로도 됩니다.
폴더 하나를 고르면 하위의 HTML 슬라이드를 찾아, 실제로 표시된 상태로 썸네일을 만듭니다. 기사 페이지 등은 대상이 아닙니다. 정렬은 폴더 계층 그대로라 안정적입니다. 왼쪽 폴더 목록으로 좁히고, 파일명·제목 검색도 됩니다.
쓰고 싶은 슬라이드를 오른쪽 「출력 트레이」로 드래그합니다. + 버튼이나 더블클릭으로도 들어갑니다. 서로 다른 파일에서 고른 슬라이드가 하나의 트레이에 늘어서고, 나중에 순서를 바꿉니다.
모은 슬라이드를 하나의 HTML 파일로 내보냅니다. 원래 따로 있던 파일이어도 모습이 깨지지 않습니다. 이미지도 파일 안에 들어가니, 이미지 폴더를 같이 들고 다닐 필요가 없습니다. 열면 화살표 키로 넘기고, PDF로도 만들 수 있습니다.
썸네일을 클릭하면 크게 열립니다. 고칠 부분을 클릭이나 드래그로 고르고 「이렇게 고쳐」라고 한글로 쓰면, 원본 HTML의 그 부분이 바뀝니다. 질문만 하고 답을 받을 수도 있습니다. 편집할 때마다 전후 상태가 남아 나중에 되돌릴 수 있습니다(Claude Code CLI가 별도 필요).
우클릭으로 디자인 목록을 열고, 클릭하면 가운데 슬라이드가 그 자리에서 바뀝니다. 마음에 들면 확정하면 그 슬라이드에만 배색이 들어갑니다. 다른 슬라이드에는 영향 없습니다. 시착 중인 모습이 그대로 적용됩니다.
42가지 장식을 본문이 들어가지 않는 여백에 둘 수 있습니다. 색은 그 슬라이드 배색에 맞춰 고르고, 기본적으로 글자를 가리지 않습니다. 늘리기·줄이기·다시 그리기도 됩니다.
평소 자료 폴더에서도 같은 방식으로 쓸 수 있습니다. 다른 시리즈를 넘나들며 고르고, 정렬·끼워 넣기도 같은 조작입니다.
다음 4가지 짜임새를 지원합니다. 슬라이드 표시가 없는 HTML(기사 전재, PDF 변환 페이지 등)은 처음부터 대상이 아닙니다. 크기는 실제 치수로 재므로, 한 파일에 크기가 다른 슬라이드가 섞여 있어도 다룰 수 있습니다.
| 형식 | 구조 | canvas 예 |
|---|---|---|
| Template A | deck-stage + section | 1920×1080 ／ 1080×720 |
| Template B | #deck-viewport + .slide | 1080×720 |
| class-slide | div.slide를 세로로 늘어놓은 것 | 960×540 등 |
| page | 위 표시는 있으나 경계를 가릴 수 없는 것 | 실제 치수 측정 |
서명된 앱 배포는 없습니다. macOS와 Node.js 18 이상이 필요합니다. 목록·수집·내보내기만이면 이것으로 충분합니다. AI 편집·디자인 변경·장식을 쓸 때만 Claude Code CLI가 별도로 필요합니다.
git clone https://github.com/GridJapan/gjHtmlSlideComposer.git
cd gjHtmlSlideComposer
npm install
npm startAI 편집·디자인 변경·장식은 사본이 아니라 원본 HTML을 고칩니다. Git 등으로 관리되는 위치에서의 사용을 권장합니다(앱 측도 편집 전후 상태를 남깁니다).
미리보기가 file://의 이미지나 글꼴을 읽기 위해서입니다. 출처를 모르는 HTML 슬라이드는 열지 마세요.
macOS 전용입니다. 배포는 소스만이며, npm start로 실행합니다.