[AI 활용팁] 오픈 슬라이드 2.0 사용하기…AI PPT를 캔버스에서 편집까지

이 기사, AI에게 물어보기

오픈 슬라이드(open-slide)는 코딩 에이전트가 발표 자료를 코드로 작성하도록 설계된 오픈소스 슬라이드 프레임워크다. 클로드 코드나 코덱스에 원하는 덱을 문장으로 설명하면 에이전트가 슬라이드를 리액트 코드로 작성하고, 오픈 슬라이드는 화면 배율 조정과 페이지 넘김, 발표 모드, 내보내기를 처리한다. 리액트는 웹 화면을 부품 단위로 구성하는 자바스크립트 라이브러리다. 개발자 이웨이 허(Yiwei Ho)가 MIT 라이선스로 공개해 무료로 사용할 수 있고, npm에는 현재 코어 패키지 2.0.1 버전이 등록돼 있다.

2.0 버전에는 화면에서 요소를 직접 옮기고 크기를 바꾸는 시각 편집기가 추가됐다. 에이전트가 작성한 초안을 마무리하는 작업을 코드 수정 없이 캔버스에서 처리할 수 있다.

1. 사용 환경

오픈 슬라이드 2.0은 Node.js 20.19 이상 또는 22.12 이상에서 실행된다. Node.js는 자바스크립트를 컴퓨터에서 실행하는 환경으로, 공식 사이트에서 설치할 수 있다. 공식 문서는 클로드 코드와 코덱스, 커서(Cursor), 제미나이 CLI, 윈드서프(Windsurf), 제드(Zed) 등 파일을 읽고 쓸 수 있는 코딩 에이전트에서 사용할 수 있다고 안내한다.

모든 슬라이드는 가로 1920, 세로 1080픽셀 크기의 고정 캔버스에 표시된다. 화면 크기에 맞춰 캔버스 전체가 같은 비율로 확대·축소되므로, 노트북과 4K 모니터, 빔프로젝터에서 같은 배치로 보인다.

2. 작업 공간 생성

터미널에서 아래 명령을 순서대로 입력한다.

① 새 작업 공간을 생성한다. my-deck은 원하는 폴더 이름으로 바꿔도 된다.

npx @open-slide/cli init my-deck

② 생성된 폴더로 이동한다.

cd my-deck

③ 미리보기 서버를 실행한다.

npm run dev

실행이 끝나면 브라우저에서 http://localhost:5173 주소로 미리보기 화면을 열 수 있다. 작업 공간에는 덱이 저장되는 slides 폴더와 공용 디자인을 저장하는 themes 폴더, 에이전트용 스킬 폴더, 설정 파일이 함께 생성된다. 스킬은 에이전트가 특정 작업을 수행할 때 참고하는 지침 묶음이다.

3. 에이전트로 덱 초안 작성

작업 공간 폴더를 클로드 코드나 코덱스에서 열고 입력창에 /create-slide 명령과 함께 원하는 덱을 설명한다.

프롬프트: /create-slide for “Q2 launch – 3 chapters, mixed text density, subtle motion, dark aesthetic”
(2분기 출시 발표, 3개 장, 텍스트 밀도는 섞어서, 절제된 움직임, 어두운 분위기)

/create-slide 스킬은 주제와 분위기, 페이지 수, 텍스트 밀도, 애니메이션 사용 여부를 먼저 확인한 뒤 덱 구조를 설계하고 페이지를 작성한다. 완성된 덱은 slides 폴더 아래 덱 이름 폴더의 index.tsx 파일에 저장되고, 미리보기 화면에 바로 반영된다.

4. 캔버스에서 직접 편집

미리보기 화면의 슬라이드는 편집 모드로 열린다. 요소를 클릭해 선택한 뒤 드래그해 이동하고, 모서리 핸들로 크기를 조절하고, 회전 핸들로 각도를 바꿀 수 있다. 다른 요소나 슬라이드 중앙과 가장자리가 맞으면 정렬 안내선이 표시된다.

① 글자를 고칠 때는 텍스트를 더블클릭하거나 선택한 상태에서 Enter 키를 누른다.

② 글꼴 크기와 굵기, 색상은 Format 패널의 Text 탭에서 바꾼다. I 키를 누르면 패널을 열고 닫을 수 있다.

③ 정확한 위치와 크기, 회전 각도는 Arrange 탭에 숫자로 입력한다. 이 탭에서 정렬과 간격 맞추기, 앞뒤 순서 변경도 할 수 있다.

④ 편집을 마치면 Save 버튼이나 Cmd+S(윈도우는 Ctrl+S)로 저장한다. 저장 전까지 변경 내용은 메모리에만 남아 있고, 저장하면 원본 코드 파일에 반영된다.

Shift 키를 누른 채 크기를 조절하면 가로세로 비율이 유지되고, 회전할 때 누르면 15도 단위로 각도가 맞춰진다. 화살표 키는 1픽셀씩, Shift와 화살표 키를 함께 누르면 10픽셀씩 선택한 요소를 이동한다.

5. 코멘트로 에이전트에 수정 요청

직접 고치기 번거로운 수정은 요소에 메모를 남겨 에이전트에 요청할 수 있다.

① 수정할 요소를 클릭하고 Format 패널의 Comment 항목을 연다.

② 요청 내용을 입력하고 저장한다.

예시: “use the accent colour on this title”
(이 제목에 강조 색상을 적용해 줘)

③ 에이전트 입력창에 /apply-comments를 입력한다.

메모는 원본 코드에 표시로 저장되고, /apply-comments를 실행하면 에이전트가 표시된 부분만 수정한 뒤 메모를 지운다. 캔버스에서 요소를 클릭할 때마다 선택 정보가 에이전트에 전달되므로, “이거 더 크게 해 줘”처럼 대상을 지정하지 않고 요청해도 에이전트가 해당 요소를 찾을 수 있다.

6. 발표 모드와 내보내기

상단의 Present 버튼을 누르면 전체 화면 발표 모드로 전환된다. 발표자 화면에서는 현재 슬라이드와 다음 슬라이드, 발표자 메모, 타이머를 함께 볼 수 있다.

완성한 덱은 슬라이드 상단 도구 모음의 Export 메뉴에서 HTML이나 PDF, PPTX 파일로 내보낸다. 깃허브 소개 문서에 따르면 PPTX 내보내기는 서버 없이 브라우저에서 처리되며, 각 페이지를 파워포인트의 텍스트 상자와 도형, 이미지로 변환해 파워포인트에서 계속 편집할 수 있다. PDF 내보내기는 사파리 브라우저에서는 지원되지 않는다. 다만 공식 문서의 내보내기 안내 페이지에는 PPTX를 페이지 이미지 방식으로 저장한다는 이전 설명이 남아 있으므로, 내보낸 파일을 파워포인트에서 열어 글상자가 편집되는지 먼저 확인해 보자.

웹사이트로 공유할 때는 아래 명령으로 정적 사이트를 생성한다.

① 덱 전체를 dist 폴더에 정적 사이트로 생성한다.

npm run build

② 생성된 사이트를 내 컴퓨터에서 미리 확인한다.

npm run preview

dist 폴더는 서버 없이 작동하는 파일 묶음이어서 버셀(Vercel)이나 클라우드플레어 페이지스, 넷리파이(Netlify) 같은 정적 호스팅 서비스에 그대로 배포해 공유할 수 있다.

7. 1.x 작업 공간 업그레이드

1.x 버전으로 작성한 작업 공간은 슬라이드 코드를 고치지 않아도 2.0으로 옮길 수 있다. package.json 파일에서 @open-slide/core를 ^2.0.0, react와 react-dom을 ^19.2.8로 바꾸고, devDependencies에 있는 vite 항목을 삭제한다. 2.0은 Vite 8을 자체적으로 포함하고 있어 예전 vite 항목이 남아 있으면 실행되지 않는다. 그다음 아래 명령을 순서대로 입력한다.

① 바뀐 패키지를 설치한다.