Open Slide: AI 코딩 에이전트가 React로 PPT를 짜주는 오픈소스 프레임워크

open-slide는 AI 코딩 에이전트를 위해 설계된 오픈소스 React 슬라이드 제작 프레임워크입니다. 마크다운이나 단순 HTML 생성에 머무르지 않고, Claude Code나 Codex CLI, Cursor 같은 에이전트가 직접 1920 × 1080 캔버스 규격의 React 컴포넌트로 발표 자료를 코딩하도록 돕습니다.

브라우저에서 만들고 싶은 슬라이드를 묘사하면 에이전트가 페이지 단위로 코드를 작성하며, 캔버스 화면은 핫 리로드와 함께 실시간으로 결과물을 렌더링합니다.

무엇을 할 수 있나

open-slide는 코드 기반 생성과 시각적 직접 편집의 장점을 유기적으로 결합했습니다.

슬라이드 화면에서 A 키를 누르면 브라우저 내에서 바로 에이전트 제어 패널이 열립니다. 수정이 필요한 영역은 C 키를 눌러 드래그하거나 요소를 클릭한 뒤 코멘트를 남길 수 있습니다. 이 피드백은 코드 내 주석 마커로 저장되어 에이전트가 한 번에 읽고 일괄 수정합니다.

직접 손을 대고 싶을 때는 내장된 비주얼 에디터를 쓰면 됩니다. 드래그와 리사이즈, 정렬 가이드, 인라인 텍스트 편집 기능을 모두 지원합니다.

기술 발표를 자주 하는 개발자를 위해 1,500개 이상의 브랜드 벡터 로고를 모아둔 svgl 라이브러리와 Google Fonts도 기본 탑재되었습니다. Claude나 Cursor 같은 도구의 고화질 로고를 따로 찾아다닐 필요가 없습니다.

발표자 노트와 타이머가 지원되는 발표 모드를 제공하며, 완성된 슬라이드는 정적 HTML, PDF, PPTX로 내보내거나 Vercel, Cloudflare Pages, Netlify 등에 바로 배포할 수 있습니다.

실행 방법

프로젝트는 MIT 라이선스로 배포됩니다. 터미널에서 npx @open-slide/cli init my-deck 명령어를 실행하면 새 프로젝트를 즉시 생성할 수 있습니다.

기존에 로컬에서 쓰던 Claude Code나 Codex CLI 로그인 세션을 브라우저 패널과 바로 연동하므로 별도의 API 키를 추가 등록할 필요가 없습니다. 터미널 작업을 선호한다면 번들 명령어를 통해 외부 에이전트 워크플로와도 곧바로 연결됩니다.

왜 중요한가

기존 AI 슬라이드 툴들은 정형화된 템플릿에 갇혀 있거나 결과물을 미세 조정하기가 무척 까다로웠습니다. open-slide는 슬라이드를 정규 React 프런트엔드 코드로 다루면서 개발자가 매일 쓰는 코딩 에이전트를 작업 주체로 삼아 이 문제를 영리하게 해결했습니다.

기술 세미나나 제품 소개 데모를 자주 제작하면서 자유도 높은 커스텀 슬라이드가 필요했던 개발자라면 지금 바로 로컬에 설치해 써볼 만합니다.