slides-grab: AI로 슬라이드 기획·디자인·편집·내보내기까지

1. slides-grab이란?

slides-grab은 한국 개발자 NomaDamas가 만든 오픈소스 HTML 슬라이드 생성 + AI 에이전트 편집 프레임워크입니다.

"Just slide-.html files, no proprietary format, no template engine — AI가 직접 다룰 수 있는 가장 단순한 포맷으로 작업하라"*

기존 AI 슬라이드 도구(Gamma, Beautiful.ai)는 AI가 생성하지만 편집할 때 다시 텍스트로 지시해야 합니다. slides-grab은 다릅니다 — 편집하고 싶은 영역을 브라우저에서 드래그해 선택하면, 그 시각적 맥락이 그대로 에이전트에게 전달됩니다.

Claude Code 스킬로 직접 통합되므로, 지금 이 대화에서 바로 슬라이드를 만들 수 있습니다.

---

2. 왜 기존 방식만으로는 부족한가?

✅ 텍스트 지시의 한계 — "뭘 고쳐야 하는지" 전달이 안 된다

Gamma나 Claude에게 "제목 폰트 크게 해줘"라고 말하면 AI는 어떤 슬라이드의 어떤 요소인지 추측해야 합니다. 슬라이드가 10장, 각 슬라이드에 요소가 5개라면 맥락 지정이 사실상 불가능합니다.

slides-grab은 BBox 모드로 브라우저에서 해당 요소 위에 빨간 박스를 그리면, 에이전트가 정확히 그 영역만 재작성합니다.

✅ SaaS 락인 — AI 슬라이드 도구는 대부분 클라우드 전용

Gamma, Beautiful.ai, Tome은 SaaS입니다. 내 데이터가 외부 서버로 가고, 커스터마이징이 제한됩니다. 로컬 LLM 연동은 사실상 불가능합니다.

slides-grab의 출력물은 slide-1.html, slide-2.html — 순수 파일입니다. Git으로 관리하고, 로컬 Claude로 편집하고, 어느 환경에서나 열 수 있습니다.

✅ AI 생성 vs. AI 편집의 단절

Marp, reveal.js, Slidev는 HTML/Markdown 기반이라 AI가 코드를 직접 다루기 좋습니다. 그런데 이 도구들은 AI 에이전트 워크플로우를 전제로 설계되지 않았습니다 — Plan → Design → Edit → Export 전체 파이프라인이 없습니다.

slides-grab은 처음부터 에이전트가 오케스트레이터로 동작하는 구조로 설계되었습니다.

---

3. 내부 구조: 어떻게 동작하는가?

🎯 핵심 아키텍처: 3단계 파이프라인

[기획]  slides-grab-plan    → slide-outline.md 생성
          (Claude Sonnet: organizer-agent)
           ↓
[생성]  slides-grab-design  → slide-1.html, slide-2.html ... 생성
          (에이전트가 직접 HTML 작성)
           ↓
[편집]  slides-grab edit    → 브라우저 에디터 실행
          (드래그 선택 → 에이전트 재작성 반복)
           ↓
[출력]  slides-grab-export  → PDF / PNG / PPTX(실험적)

🎯 [기획] 레이아웃은 어떻게 정의되는가?

레이아웃은 3개 레이어로 결정된다.

① 템플릿 — 구조의 출발점

13개 HTML 파일이 슬라이드 유형별 기본 구조를 정의한다.

템플릿	기본 구조
cover.html	헤더 + 중앙 대형 타이틀 + 푸터
content.html	헤더 + 2단 그리드 + 푸터
split-layout.html	이미지 50% + 텍스트 50%
statistics.html	수치 강조 블록 배열
timeline.html	수평/수직 시계열
diagram.html	Mermaid 다이어그램 전용
chart.html	Chart.js 차트 전용

② slide-outline.md — 슬라이드별 타입 지정

Stage 1(Plan)에서 각 슬라이드에 타입을 배정한다.

## Slide 3 — GraphRAG 아키텍처
type: diagram

Stage 2(Design)는 이 타입을 읽고 해당 템플릿을 기반으로 HTML을 생성한다.

③ Claude의 재량 — 콘텐츠에 맞게 조정

템플릿은 강제 제약이 아닌 참조다. 콘텐츠 필요에 따라 변형된다.

• content.html 기본 2단 → 3개 항목이면 3단으로 조정
• statistics.html에 차트 추가 가능
• 커스텀 레이아웃은 templates/custom/에 직접 정의

🎯 [생성] 35가지 디자인 스타일

레이아웃 구조가 확정되면, 생성 단계에서 디자인 스타일이 색·폰트·장식을 입힌다. slides-grab list-styles 명령으로 전체 목록 확인. 각 스타일에는 무드·유스케이스 메타데이터가 포함됩니다.

카테고리	대표 스타일	적합 상황
테크·모던	Glassmorphism, Neo-Brutalism, Aurora Neon Glow	AI/스타트업 피치, 기술 발표
크리에이티브	Vaporwave, Memphis Pop, Retro Y2K	브랜드 캠페인, 크리에이티브 브리프
에디토리얼	Swiss International, Editorial Magazine, Brutalist Newspaper	리포트, 사내 공유 자료
소프트·비즈니스	Claymorphism, Executive Minimal, Warm Neutral	고객 제안서, 팀 발표

커뮤니티 소스 30개 + 오리지널 5개(Executive Minimal, Sage Professional, Corporate Blue, Warm Neutral, 1개 추가).

🎯 [편집] 드래그 선택 편집기의 동작 방식

에디터는 세 패널로 구성됩니다: 상단 네비게이션 / 중앙 슬라이드(960×540px iframe) / 우측 에디터 사이드바.

1. BBox 모드 선택 후 수정할 요소 위에 드래그 → 빨간 박스 생성
2. 자연어로 수정 지시 입력 ("텍스트를 더 크게, 색상은 흰색으로")
3. "Run" 실행 → 에이전트가 해당 영역만 HTML 재작성
4. iframe에서 실시간 렌더링 확인 → 반복

🎯 [출력] 에이전트용 HTML 제약 사양

에이전트가 일관된 HTML을 생성하도록 명세가 강제됩니다:

• 슬라이드 크기: 720pt × 405pt (16:9)
• 폰트: Pretendard (CDN)
• 텍스트는 반드시 시멘틱 태그(<p>, <h1>~<h6>, <ul>, <li>)에만 배치
• <div>/<span>에 직접 텍스트 금지
• CSS 그라디언트 사용 금지 (Sharp로 PNG 래스터화 필요)

이 제약이 AI 생성 결과물의 품질을 일관되게 유지합니다.

---

4. 직접 해보기 (시작 가이드)

1) 설치

npm install slides-grab
npx playwright install chromium

스타일 목록을 미리 확인하려면 CLI를 전역 설치한다.

npm install -g slides-grab
slides-grab list-styles      # 전체 35종 목록
slides-grab preview-styles   # 브라우저 시각 갤러리

2) Claude Code 스킬 등록

npx skills add ./node_modules/slides-grab -g -a claude-code --yes --copy
# Claude Code 재시작

등록 후 slides-grab-plan, slides-grab-design, slides-grab-export 스킬이 Claude Code에서 바로 호출 가능해집니다.

3) 슬라이드 생성

Claude Code에서:

"GraphRAG를 소개하는 5장짜리 슬라이드 만들어줘, Neo-Brutalism 스타일로"

에이전트가 3단계를 순차 실행합니다.

① Plan — slides-grab-plan

에이전트가 스타일을 확정하고 슬라이드 구성을 설계합니다. 승인 후 아래 파일이 생성됩니다.

decks/graphrag/slide-outline.md   ← 슬라이드 구성표 (스타일 ID 포함)

slide-outline.md는 각 슬라이드의 제목·핵심 메시지·비주얼 방향을 명세합니다:

---
title: GraphRAG 소개
style: neo-brutalism
slides: 5
---

## Slide 1 — 표지
**제목:** GraphRAG: 검색 AI, 그래프로 진화하다
**서브:** RAG가 놓친 것을 그래프가 연결합니다
**비주얼:** 굵은 타이포 + 노드-엣지 그래픽

## Slide 2 — 기존 RAG의 한계
**제목:** 벡터 검색은 왜 부족한가?
**핵심 메시지:**
- 유사도 검색은 문맥 단절 문제를 해결 못 함
- 엔티티 간 관계(연결고리)를 무시
- 멀티-홉 질문에 취약
...

이 구성표에 동의하면 다음 단계로 진행합니다.

② Design — slides-grab-design

slide-outline.md를 읽고 스타일 스펙(색상·폰트·레이아웃)을 적용해 HTML 파일을 생성합니다.

decks/graphrag/slide-01.html  ← 표지 (Yellow BG + 타이포 카드)
decks/graphrag/slide-02.html  ← 기존 RAG의 한계 (단절 vs. 연결 비교 시각)
decks/graphrag/slide-03.html  ← GraphRAG란? (파이프라인 흐름도)
decks/graphrag/slide-04.html  ← 핵심 아키텍처 (2×2 단계 그리드)
decks/graphrag/slide-05.html  ← 활용 사례 & CTA (Yellow BG + 카드 3열)

생성 후 slides-grab validate 자동 실행 — 텍스트 클리핑·요소 이탈 등을 검사하고 오류가 있으면 자동 수정합니다.

③ Edit — slides-grab edit

→ http://localhost:3456

브라우저 에디터가 열립니다. 수정할 요소를 드래그해 BBox를 그리고, 지시를 입력한 뒤 Run.

💡 팁: BBox 모드로 개별 블럭을 선택해 수정할 수 있지만, 슬라이드별로 이동해야 하므로 레이아웃 통일 작업에는 불편할 수 있다. 이럴 때는 텍스트 프롬프트가 오히려 간결하다:
"slide4 의 타이틀 및 위치 박스가 slide3 맞춰지게 업데이트"

4) 내보내기

decks/graphrag 폴더를 pdf 로 저장해줘.
---
npx slides-grab convert --slides-dir ./decks/graphrag --output ./decks/graphrag/graphrag.pptx

Converting 5 slides...
  ✓ slide-01.html done
  ✓ slide-02.html done
  ✓ slide-03.html done
  ✓ slide-04.html done
  ✓ slide-05.html done
Saved: ./decks/graphrag/graphrag.pdf

5) 회사 브랜드 스타일 등록하기

Claude Design 스킬이 설치되어 있다면 브랜드 스타일을 slides-grab에 등록하는 것도 AI가 처리한다.

① 스타일 파일 생성 및 등록

DESIGN 스킬의 색상·폰트·레이아웃 규칙을 읽고
slides-grab 호환 스타일 파일(my-brand.js)을 만들어줘.
id는 my-brand, number는 36으로.
만들고 나서 slides-grab npm 패키지의 design-styles-data.js에 주입해줘.

Claude가 브랜드 토큰을 읽어 JS 파일을 생성하고, npm 패키지 경로를 찾아 직접 주입한다.

② 확인 및 사용

slides-grab list-styles | grep my-brand 로 등록 확인해줘

이후 slide-outline.md에서:

style: my-brand

---

5. Gamma·Beautiful.ai / Marp·Slidev / Google Slides vs. slides-grab: 핵심 비교

항목	Google Slides	Gamma / Beautiful.ai	Marp / Slidev	slides-grab
AI 생성	제한적	✅	일부 가능	✅
AI 시각적 편집 지시	❌	❌	❌	✅ 드래그 선택
로컬 실행	❌ (SaaS)	❌ (SaaS)	✅	✅
Claude Code 네이티브	❌	❌	❌	✅ 스킬 등록
출력 포맷 락인	Google 포맷	SaaS	HTML/PDF	HTML 파일 (零 락인)
PPTX 내보내기	✅	✅	제한	실험적
디자인 스타일 수	템플릿 다수	다수	제한적	35가지
오픈소스	❌	❌	✅	✅ (MIT)

한 줄 요약: 기존 도구 = AI가 만들고 사람이 텍스트로 고친다, slides-grab = AI가 만들고 시각적으로 선택해서 AI가 고친다.

---

6. 마치며

slides-grab은 "AI에게 슬라이드를 고쳐달라고 할 때의 불편함"을 정확하게 겨냥한 도구입니다.

"3번째 슬라이드 오른쪽 상단 작은 텍스트 수정해줘" — 텍스트 프롬프트만으로는 여전히 모호합니다. 드래그로 BBox를 지정하면 개별 슬라이드의 특정 요소를 정확하게 집어 수정할 수 있습니다.
반면 여러 슬라이드에 걸친 레이아웃 통일처럼 페이지를 넘나드는 작업에는 텍스트 프롬프트로 직접 지시하는 것이 오히려 간결합니다. 두 방식을 상황에 맞게 혼용할 수 있다는 점이 실제 사용에서 가장 유연한 강점입니다.

HTML 파일 기반이라 Git으로 관리되고, Claude Code 스킬로 등록되며, 로컬에서 모든 작업이 완결됩니다. SaaS 피로가 있는 팀이라면 진지하게 검토할 가치가 있습니다. PPTX 내보내기가 아직 불안정하다는 점은 명확한 trade-off입니다.

---

참조

• slides-grab GitHub 저장소 — NomaDamas
• 설치 가이드 (README)
• pptx-design-styles — 커뮤니티 디자인 소스 — corazzon