slides-grab: HTML 슬라이드를 Claude Code와 Codex로 만들고 드래그로 편집하는 도구

slides-grab 소개

slides-grab은 AI 코딩 에이전트가 만든 슬라이드를 화면에서 직접 영역으로 골라 수정하기 위해 만들어진 슬라이드 제작 도구입니다. 슬라이드 한 장 한 장을 HTML과 CSS 파일로 다루기 때문에, Claude Code나 Codex 같은 코딩 에이전트가 코드를 읽고 고치듯이 슬라이드의 내용과 디자인을 바꿀 수 있습니다. 발표 자료를 PowerPoint 편집기에서 손으로 옮기는 대신, 텍스트 파일을 다루는 에이전트의 강점을 그대로 프레젠테이션 제작에 가져온 셈입니다.

AI로 슬라이드 HTML을 생성하는 도구는 이미 여럿 있지만, slides-grab이 메우려는 빈틈은 "바꾸고 싶은 부분을 눈으로 지목해서 그 자리에서 고치는" 작업 흐름입니다. 슬라이드를 띄운 브라우저 편집기에서 마우스로 영역을 드래그해 선택한 뒤 에이전트에게 수정을 요청하면, 에이전트가 해당 영역에 대응하는 HTML을 다시 작성합니다. 글자, 크기, 굵기 같은 단순한 변경은 편집기에서 직접 손볼 수도 있습니다.

slides-grab은 Builder Josh가 만든 ppt_team_agent 를 기반으로 발전시킨 프로젝트입니다. 슬라이드를 표준 HTML/CSS로 저장하므로 결과물을 PDF나 이미지로 내보낼 수 있고, 실험적인 단계의 PPTX와 Figma 가져오기 흐름도 제공합니다. 본 게시물에서는 slides-grab의 제작 흐름과 비주얼 편집기, 디자인 스타일, 설치와 사용법을 정리합니다.

slides-grab의 슬라이드 제작 흐름

slides-grab은 슬라이드를 만들고 다듬는 과정을 네 단계로 나눕니다. 각 단계는 코딩 에이전트가 수행하거나 사용자가 명령으로 직접 실행합니다.

  • 계획(Plan): 에이전트가 주제나 입력 파일을 바탕으로 슬라이드 개요를 구조화합니다.

  • 디자인(Design): 각 슬라이드를 독립적인 HTML 파일(slide-XX.html)로 생성합니다.

  • 편집(Edit): 브라우저 기반 편집기에서 영역을 드래그로 선택(bbox)하고, 직접 텍스트를 고치거나 에이전트에게 재작성을 맡깁니다.

  • 내보내기(Export): 한 번의 명령으로 PDF로 변환하며, 실험적인 PPTX나 Figma 가져오기 흐름도 사용할 수 있습니다.

슬라이드를 HTML 파일로 다룬다는 점이 이 흐름의 핵심입니다. 에이전트는 익숙한 HTML/CSS를 읽고 수정하면 되고, 사람은 그 결과를 브라우저에서 바로 확인하면서 고칠 부분을 영역으로 지정할 수 있습니다.

slides-grab의 비주얼 편집기

slides-grab edit 명령은 슬라이드를 띄우는 브라우저 기반 편집기를 실행합니다. 여기서 영역을 드래그로 선택해 에이전트에게 수정을 요청하는 것이 slides-grab의 중심 기능입니다. 아래 데모는 슬라이드의 한 영역을 골라 편집하는 과정을 보여줍니다.

slides-grab 비주얼 편집기에서 슬라이드 영역을 드래그로 선택해 편집하는 데모

편집기는 순수 자바스크립트 파일로 구성되어 있어, 새로운 코딩 에이전트를 추가하거나 디자인을 바꾸는 식으로 기능을 직접 확장하기 쉽습니다. 슬라이드 워크스페이스가 준비된 상태에서 edit, build-viewer, validate, convert, pdf 같은 명령을 사용할 수 있고, 갓 클론한 상태에서도 --help, list-templates, list-styles, preview-styles 같은 탐색용 명령은 슬라이드 없이 동작합니다.

slides-grab의 디자인 스타일과 이미지 생성

slides-grab은 35종의 디자인 스타일을 기본 제공합니다. 이 중 30종은 corazzon/pptx-design-styles 에서 가져온 것이고, 나머지 5종은 slides-grab의 자체 스타일입니다. slides-grab list-styles 로 카탈로그를 살펴보거나 slides-grab preview-styles 로 브라우저에서 시각적으로 미리 볼 수 있으며, 에이전트에게 원하는 스타일을 알려주거나 완전히 새로운 디자인을 요청할 수도 있습니다.

슬라이드에 들어갈 이미지는 기본 제공자인 god-tibo-imagen 으로 생성합니다. 이 제공자는 로컬 Codex의 ChatGPT 로그인(~/.codex/auth.json)을 재사용하므로 별도의 OpenAI/Google API 키 없이 사용할 수 있지만, 이미지 생성 권한이 있는 ChatGPT 계정의 Codex CLI 로그인이 필요합니다. 저자는 god-tibo-imagen이 "공식적으로 지원되지 않는 비공개 Codex 백엔드를 호출하므로 예고 없이 동작이 멈출 수 있다" 고 경고하고 있습니다. 기본 제공자 호출이 실패하면 credentials가 있는 대체 제공자(--provider codex 의 OpenAI gpt-image-2, --provider nano-banana 의 Google Gemini)로 자동 전환합니다.

내보내기 단계도 폭이 넓습니다. slides-grab pdf 는 슬라이드를 래스터화해 PDF로 담는 capture 모드가 기본이며, 검색 가능한 텍스트가 필요하면 --mode print 를 사용합니다. slides-grab png 는 슬라이드마다 PNG를 렌더링하고, --slide-mode card-news 를 주면 인스타그램용 1:1 정사각형 카드 뉴스로 만들 수 있습니다. 저장되는 슬라이드는 원격 http(s):// 이미지 URL 대신 /assets/ 에 둔 로컬 파일을 ./assets/ 로 참조하도록 정해져 있어, 내보낸 결과물이 외부 호스팅에 의존하지 않습니다.

slides-grab 설치 및 사용법

slides-grab은 Node.js 20 이상이 필요합니다. 일반적인 사용에는 npm 패키지 설치만으로 충분하며, slides-grab 자체를 수정하거나 기여할 때만 저장소를 클론하면 됩니다.

npm install slides-grab
npx playwright install chromium
npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy

코딩 에이전트에서 바로 시작하려면 설치 안내 문서를 읽도록 지시하는 방법도 있습니다. 예를 들어 Claude Code에서는 다음 문장을 붙여 넣습니다.

Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md and follow every step.

여러 개의 덱을 다룰 때는 --slides-dir 로 작업 디렉토리를 지정합니다. 아래는 하나의 덱을 편집하고 검증한 뒤 PDF와 PNG로 내보내는 예시입니다.

slides-grab edit --slides-dir decks/my-deck
slides-grab validate --slides-dir decks/my-deck
slides-grab pdf --slides-dir decks/my-deck --output decks/my-deck.pdf
slides-grab png --slides-dir decks/my-deck --output-dir decks/my-deck/out-png

저자는 slides-grab convert(PPTX) 와 slides-grab figma 출력이 현재 experimental / unstable 단계라고 명시하고 있으므로, PowerPoint나 Figma에서 레이아웃이 어긋나거나 수동 정리가 필요할 수 있다는 점을 감안하는 편이 좋습니다. 내보내기 전 slides-grab validate 로 누락된 로컬 에셋과 권장되지 않는 경로 형식을 미리 점검할 수 있습니다.

slides-grab의 라이선스

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

:house: slides-grab 쇼케이스 갤러리

:github: slides-grab 프로젝트 GitHub 저장소

더 읽어보기




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

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: