open-slide 2.0: AI가 만든 슬라이드를 직접 고쳐 편집 가능한 PPTX로 내보내는 오픈소스 도구

open-slide 2.0으로 코딩 에이전트가 만든 슬라이드를 브라우저에서 편집하고, 텍스트·도형·이미지가 남는 PPTX로 내보내는 방법을 소개합니다.

Huuush발행 2026.09.28 · 5분 read에디터: Jay Kim

3줄 요약

  1. open-slide 2.0은 브라우저에서 슬라이드 요소와 텍스트를 직접 편집합니다.
  2. 텍스트·도형·이미지를 PowerPoint 객체로 내보내 후속 편집이 가능합니다.
  3. React 기반 슬라이드를 Claude Code·Codex 등 코딩 에이전트와 함께 작성합니다.
open-slide 편집기에서 에이전트가 만든 슬라이드를 다듬는 화면
출처: X @1weiho

AI PPT 만들기에서 초안을 코드로 생성하고 사람이 화면에서 마무리하는 흐름이 한층 가까워졌습니다. 오픈소스 슬라이드 프레임워크 open-slide 2.0은 Claude Code나 Codex 같은 코딩 에이전트가 만든 슬라이드를 브라우저에서 직접 고치고, 편집 가능한 PPTX로 내보내도록 돕습니다. 만든 사람은 Yiwei Ho(@1weiho)이며, 2.0은 2026년 9월 26일 22:57 KST 공개됐습니다. MIT 라이선스로 제공되고 GitHub 스타는 9월 28일 기준 8,270개입니다.

X 게시물을 불러오는 중입니다.

X 게시물을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.

X에서 원문 보기

“에이전트가 덱을 만들고, 마지막 손질은 직접 하세요.” 발표 영상은 이 한 문장처럼 초안 생성과 사람의 마무리를 연결하는 2.0의 편집 과정을 보여 줍니다.

브라우저에서 슬라이드를 직접 고치기

캔버스에서 요소를 선택해 드래그로 옮기고, 핸들로 크기를 조절하거나 회전할 수 있습니다. 회전은 Shift 키를 누르면 15도 단위로 맞춰집니다. Arrange 패널에 위치·크기·회전 값을 직접 입력하고, 요소를 정렬하거나 앞뒤 레이어 순서를 바꾸는 것도 가능합니다. 가장자리나 중심선이 맞을 때 스마트 가이드가 표시되고 실행 취소·다시 실행도 지원합니다.

텍스트는 캔버스에서 바로 편집합니다. 떠 있는 도구 모음에서 글꼴 크기, 굵기, 기울임, 색상과 정렬을 바꾸고 Google Fonts를 검색해 미리 볼 수 있습니다. 사람이 바꾼 내용은 에이전트가 수정하는 동일한 소스 코드에 기록돼, 이후 에이전트가 다시 작업해도 이어집니다. 화면 편집 뒤 코드가 따로 분리되지 않는 점이 협업 흐름에 잘 맞습니다.

편집 가능한 PPTX로 이어지는 결과물

내보내기에서는 슬라이드의 텍스트 상자·도형·이미지를 PowerPoint 기본 객체로 변환합니다. 따라서 발표 파일을 받은 사람이 각 텍스트나 도형, 이미지를 선택해 계속 수정할 수 있습니다. 변환은 브라우저 안에서 처리되며 서버나 헤드리스 브라우저가 필요 없습니다. HTML과 PDF 내보내기도 제공합니다.

X 게시물을 불러오는 중입니다.

X 게시물을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.

X에서 원문 보기

편집 가능한 PPTX는 슬라이드 전체를 한 장의 그림으로 넣는 방식과 다릅니다. 2.0 안내가 밝힌 객체는 텍스트·도형·이미지입니다. 웹 화면의 모든 효과가 그대로 PowerPoint 기능이 되는 것은 아니므로, PPTX에서 계속 손볼 요소를 중심으로 구성하면 좋습니다.

새 UI에서 발표까지 이어가기

2.0은 워크스페이스와 탐색을 정리하고, 선택한 요소에 맞춰 바뀌는 Format 패널을 추가했습니다. 편집 화면과 발표 미리보기를 오갈 수 있고, 발표자 모드에서는 다음 슬라이드와 노트, 타이머를 확인할 수 있습니다.

open-slide 2.0 슬라이드 편집기와 슬라이드 목록
출처: X @1weiho

에이전트가 React 코드로 덱을 작성한다

open-slide는 정해진 슬라이드 템플릿이나 Markdown 문법 대신 1920×1080 캔버스 위의 React 컴포넌트로 페이지를 만듭니다. 각 슬라이드는 slides/<deck-id>/index.tsx에 놓이며, 에이전트가 직접 TSX 코드를 작성합니다. 코딩 에이전트가 코드베이스를 읽고 필요한 부분을 찾아 작업할 때는 jevgrep: AI 코딩 에이전트에 필요한 코드만 찾아 비용을 줄이는 오픈소스 CLI 같은 도구를 함께 살펴볼 수 있습니다.

/create-slide 스킬은 주제와 분위기, 페이지 수, 글 밀도, 움직임 여부를 바탕으로 덱 전체를 작성합니다. /slide-authoring은 캔버스와 글자 크기, 색상, 레이아웃 규칙을 알려 주고, 브라우저에서 요소에 댓글을 남긴 뒤 /apply-comments를 실행하면 에이전트가 요청을 한 번에 반영합니다. 스캐폴드는 Claude Code용 스킬을 미리 구성하며 Claude Code·Codex·Cursor 등 코드 편집 에이전트에서 프로젝트를 열어 사용할 수 있습니다.

설치하고 첫 슬라이드 만들기

Node.js 20.19 이상과 Node 패키지 매니저가 필요합니다. 새 프로젝트를 만들고 개발 서버를 실행합니다.

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

npm을 쓰는 경우 개발 서버는 npm run dev로 실행할 수 있습니다. 프로젝트를 에이전트에서 열고 다음처럼 요청하면 됩니다.

/create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic"

뜻은 “Q2 출시 자료를 세 챕터로 나눠 만들고, 글 밀도는 섞고, 움직임은 은은하게, 어두운 분위기로 구성해 줘”입니다. 에이전트가 만든 초안을 브라우저에서 직접 손본 뒤 PPTX로 내보내면 됩니다. 정적 빌드 결과는 Vercel·Cloudflare Pages·Netlify 등에 배포할 수 있습니다. 에이전트 실행 환경을 살펴보고 있다면 구글 AI 에이전트 런타임 AX도 함께 볼 수 있습니다.

1.x 프로젝트를 쓰고 있다면 v2 마이그레이션 안내를 참고합니다. 설치와 에이전트 스킬 구성 등 자세한 내용은 GitHub 저장소와 공식 사이트에서 확인할 수 있습니다.

오픈소스 라이선스와 사용 비용

open-slide는 MIT 라이선스로 무료 공개돼 있습니다. 별도의 유료 슬라이드 생성 서비스가 아니라 로컬 프로젝트에서 코딩 에이전트와 함께 쓰는 도구이므로, 초안 작성에 드는 비용은 사용하는 에이전트의 요금에 따릅니다. 2.0.1 패치는 9월 27일 13:03 KST에 나왔고 저장소는 9월 28일 01:22 KST에도 업데이트됐습니다.

자주 묻는 질문

코딩 에이전트가 React 코드로 슬라이드를 만들고, 사람이 브라우저 편집기에서 직접 다듬어 HTML·PDF·PPTX로 내보내는 오픈소스 프레임워크입니다.

텍스트 상자·도형·이미지가 PowerPoint 기본 객체로 변환돼 개별 선택과 편집이 가능합니다.

Claude Code, Codex, Cursor 등 React 코드를 작성할 수 있는 코딩 에이전트에서 프로젝트를 열어 사용할 수 있습니다. 프로젝트 초기 구성에는 에이전트 스킬이 포함됩니다.

Node.js 20.19 이상과 npm·pnpm 등 패키지 매니저가 필요합니다. CLI로 프로젝트를 초기화한 뒤 개발 서버를 실행하고 코딩 에이전트로 슬라이드를 작성합니다.

open-slide는 MIT 라이선스 오픈소스이며 무료입니다. 슬라이드 작성에 사용하는 코딩 에이전트 요금은 별도로 적용됩니다.

함께 보면 좋은 글

Whiteboard: AI 코딩 에이전트의 설계도와 코드를 연결하는 오픈소스 리뷰 도구

출처

작성자 소개

제이킴유니버스

제이킴유니버스

AI 자동화와 홈페이지 제작으로 업무 시간을 줄이고 매출을 만듭니다.