Slidev: 테마, 예제, 그리고 PowerPoint로 내보내는 방법
Slidev는 GitHub 스타 47.6k를 보유한 오픈소스 개발자 중심 프레젠테이션 도구입니다. Markdown으로 슬라이드를 작성하고 Vue 컴포넌트를 삽입한 뒤 브라우저에서 바로 발표할 수 있습니다. 이 글은 솔직한 안내서입니다. 테마와 예제가 어떻게 맞물리는지, PDF와 PowerPoint 내보내기가 실제로 어떻게 동작하는지, Marp 및 reveal.js와 어떻게 비교되는지, 그리고 Agent-Native Design Workspace가 어디에 자리하는지 짚어봅니다.
코드를 짜면서 PowerPoint는 되도록 열고 싶지 않다면, 아마 Slidev를 이미 마주쳤을 겁니다. 스스로를 "개발자를 위한 프레젠테이션 슬라이드"라고 소개하는데, 정확히 그런 도구입니다. 각 슬라이드를 Markdown으로 작성하고, 필요한 곳에 Vue 컴포넌트와 코드 블록을 넣은 뒤, 전체를 하나의 웹 페이지로 발표합니다——핫 리로드, 문법 하이라이트, 발표자 노트, 인터랙티브 임베드가 기본으로 들어 있죠. GitHub 스타 47.6k와 MIT 라이선스를 갖춘 Slidev는 "Markdown으로 보기 좋은 덱을 어떻게 만들지"라는 물음에 대한 대표적인 답 중 하나입니다.
이 글은 그에 대한 솔직한 지도입니다. Slidev가 실제로 무엇인지, 테마와 예제가 어떻게 맞물리는지, PDF와 PowerPoint 내보내기가 실제로 어떻게 동작하는지(함정이 있습니다), 다른 오픈소스 경쟁자들과 어떻게 비교되는지, 그리고——대부분의 글이 건너뛰는 부분인——이런 도구가 더 이상 적합하지 않고 다른 것이 이어받는 지점은 어디인지를 다룹니다. AI와 에이전트가 돕는 덱 제작 워크플로를 놓고 선택지를 저울질하고 있다면, Slidev가 무엇이고 무엇이 아닌지를 정확히 아는 것이 도움이 됩니다.
Slidev란
Slidev는 브라우저에서 실행되며, 덱을 문서가 아니라 프로젝트로 다룹니다. 단일 Markdown 파일에 슬라이드를 작성하고 ---로 각 페이지를 구분하며, 개발자 도구가 바로 핵심입니다. 타이핑하는 대로 핫 리로드, 라인 포커스를 지원하는 일급 코드 하이라이트, LaTeX와 다이어그램, 노트가 있는 발표자 모드, 그리고 터미널에서 실행하는 개발 서버까지. 순수 Markdown이 한계에 부딪히는 지점에서는 Vue 컴포넌트를 슬라이드에 직접 임베드할 수 있습니다——차트, 실시간 카운터, 혹은 직접 만든 인터랙티브 위젯을 불릿 옆에 인라인으로 둘 수 있죠. 출력 자체가 웹 앱이기 때문에, 웹이 할 수 있는 것이라면 무엇이든 슬라이드 위에서 살아 있을 수 있습니다.
절충점은 그 소개 문구에 그대로 적혀 있습니다. 이것은 GUI가 아니라 개발자 도구입니다. 당신의 워크플로는 드래그 핸들이 달린 캔버스가 아니라 코드 에디터와 개발 서버입니다——이미 Markdown과 웹 컴포넌트를 좋아하는 개발자가 이 도구를 집어 드는 이유가 바로 이것이고, 비개발자가 튕겨 나가는 이유도 바로 이것입니다. 게다가 진짜로 무료입니다. 계정도, 워터마크도, 내보내기 제한도, 좌석당 과금도 없습니다. Markdown과 그것을 둘러싼 프로젝트 전부가 당신의 것입니다.
테마와 예제
Slidev를 둘러싼 검색의 대부분은 사실 모든 슬라이드를 처음부터 디자인하지 않고도 보기 좋게 만들고 싶다는 것입니다. 그래서 각 조각이 어떻게 맞물리는지 짚어 보겠습니다.
Slidev 테마는 기본 제공되는 출발점이자 진짜 강점입니다. frontmatter에 한 줄로 테마를 지정하면(예: theme: seriph) Slidev가 그것을 가져옵니다. 공식 테마 갤러리에 더해, npm 패키지로 배포된 커뮤니티 테마도 충분히 많으며, 깔끔한 편집 디자인부터 어두운 개발자 콘퍼런스 스타일까지 다양합니다. 테마는 곧 코드이므로, "커스텀 Slidev 테마"란 자신만의 레이아웃, 폰트, 색상을 담은 테마 패키지를 만들거나 fork하는 것을 뜻합니다——스타일시트를 바꾸는 것보다는 손이 더 가지만, 완전히 버전 관리할 수 있습니다.
Slidev 예제는 하나의 빈칸 채우기 갤러리가 아니라 문서와 커뮤니티 속에 흩어져 있습니다. 공식 사이트(sli.dev) 자체가 Slidev로 만들어졌고, 저장소에는 시작용 덱이 들어 있으며, GitHub에는 소스를 읽고 클론할 수 있는 진짜 콘퍼런스 발표가 가득합니다. "slidev examples"를 찾고 있다면, 신호가 가장 강한 것은 공식 데모와 문서 소스입니다——거의 모든 기능이 실제로 쓰인 모습을 보여 주죠. 초보자에게 함정은 여느 코드 우선 도구와 같습니다. 여기서 "예제"란 UI로 빈칸을 채우는 템플릿이 아니라 클론해서 편집하는 저장소입니다.
Slidev를 PowerPoint와 PDF로 내보내기
PDF 내보내기는 일급이자 공식 지원 기능이며 잘 작동합니다. Slidev에는 내장 slidev export 명령(내부적으로 Playwright 사용)이 있어 모든 슬라이드를 깔끔한 페이지당 한 장짜리 PDF로 렌더링합니다——지원되는 경로이며, PDF는 당신의 덱과 똑같아 보입니다. 같은 방식으로 PNG 이미지로도 내보낼 수 있습니다.
반면 Slidev를 PowerPoint로 내보내는 일은 기대치를 관리해야 하는 지점입니다. Slidev는 .pptx를 만들 수 있지만 그 결과는 손실이 있습니다. 각 슬라이드는 PowerPoint에서 편집 가능한 텍스트 상자, 도형, 레이아웃이 아니라 평평한 이미지 한 장으로 도착합니다. 그러니 후속 작업에서 누군가 당신의 덱을 PowerPoint로 열어 편집해야 한다면——제목을 다시 치고, 차트 스타일을 바꾸고, 불릿을 다시 흐르게 하고——Slidev의 .pptx는 그걸 해 주지 못합니다. Slidev는 브라우저에서 발표하도록 만들어졌고, 편집 가능한 소스는 .pptx가 아니라 Markdown과 Vue입니다. 시작하기 전에 이 점을 알아 두면, 동료가 "편집 가능한 PowerPoint 좀"이라고 요청하는 날의 괴로운 놀라움을 피할 수 있습니다.
Slidev vs Marp vs reveal.js
슬라이드를 코드로 쓰는 방법이 Slidev만 있는 것은 아닙니다. 가장 가까운 오픈소스 선택지——사람들이 "Slidev 대안"이라 할 때 가리키는 것——는 reveal.js와 Marp입니다. 그리고 솔직히 말하면, Open Design은 정면으로 경쟁하기보다 완전히 다른 층위에 자리합니다.
| 도구 | 작성 방식 | 편집 가능한 .pptx | 템플릿화 | 라이선스 |
|---|---|---|---|---|
| Slidev | Markdown + Vue | 불가(PPTX/PDF는 이미지) | Vue 컴포넌트 + 테마 | MIT |
| reveal.js | HTML 또는 Markdown | 불가(PDF→PPTX는 손실 이미지) | 테마 = CSS/Sass; 커뮤니티 템플릿 | MIT |
| Marp | Markdown 전용 | 불가(PDF/PPTX는 이미지) | Markdown 테마(CSS) | MIT |
| Open Design | 에이전트에게 설명 | 가능——디자인 시스템에 맞춘 편집 가능한 출력 | 퍼스트파티 덱 템플릿 | Apache-2.0 |
reveal.js는 더 오래되고 더 투박한 형입니다. HTML(또는 Markdown)로 작성하고 data 속성으로 전환 효과를 엮으며, Slidev의 Markdown 편의성을 더 낮은 수준의 HTML 제어와 맞바꿉니다. 최대한의 자유가 필요하고 마크업 쓰는 게 싫지 않다면 reveal.js가 자연스러운 선택입니다. Marp는 반대 방향으로 갑니다——Markdown 전용, 의도적으로 미니멀하고 컴포넌트가 없습니다——덕분에 슬라이드가 대부분 텍스트이고 프레임워크를 전혀 신경 쓰고 싶지 않을 때 가장 빠른 길이 됩니다. Slidev는 그 중간에 자리합니다. 속도를 위해 Markdown 우선이면서, 어떤 슬라이드가 좀 더 해야 할 때는 Vue 컴포넌트를 바로 꺼내 쓸 수 있습니다.
셋 다 근본 형태가 같은 코드 우선 도구입니다. 덱을 작성하고, 브라우저에서 발표하며, 편집 가능한 PowerPoint 출력은 애초에 목표가 아닙니다. 이들 사이에서 고르는 일은 주로 어떤 작성 표면을 원하느냐——Markdown과 Vue, 순수 HTML, 아니면 순수 Markdown——의 문제이지, 한쪽에는 있고 다른 쪽에는 없는 기능의 문제가 아닙니다.
Open Design이 들어맞는 지점
여기 솔직한 경계가 있습니다. Slidev는 당신에게 덱을 쓰라고 요구합니다——모든 슬라이드를 Markdown과 Vue로. 손으로 작성하고 버전 관리되며 라이브 컴포넌트를 갖춘 슬라이드를 원한다면 이것은 장점이고, 그게 목표라면 이를 대신할 것은 없습니다.
Open Design은 다른 층위이며, 우리가 만드는 제품입니다. 그 점을 염두에 두고 읽어 주세요. 이것은 오픈소스(Apache-2.0), 로컬 우선, BYOK 방식의 Agent-Native Design Workspace로, 당신이 이미 쓰고 있는 코딩 에이전트——Claude Code, Codex, Cursor——의 바깥에 자리합니다. Markdown과 컴포넌트를 손으로 쓰는 대신, 원하는 덱을 설명하면 에이전트가 디자인 시스템에 맞춰 편집 가능한 덱을 생성합니다. 그래서 브랜드에 맞게 나오고, 렌더링된 산출물로 얼어붙는 대신 편집 가능한 상태로 유지됩니다. Open Design은 시작점으로 삼을 수 있는 퍼스트파티 덱 템플릿도 제공합니다.
Vue 컴포넌트와 완전한 제어로 슬라이드를 코드로 쓰고 싶다면, 이것은 Slidev의 대체재가 아닙니다——그건 Slidev의 홈그라운드이고, 거기서 Slidev는 탁월합니다. Open Design이 어울리는 경우는 이렇습니다. 마크업을 쓰기보다 에이전트에게 브리핑하고 싶고, 여러 덱에 걸쳐 출력이 디자인 시스템과 일치하길 바라며, 끝에 가서 당신이 소유하는 편집 가능한 파일을 원할 때. 덱이 곧 당신이 쓰고 있는 Markdown 그 자체일 때는 Slidev를 집으세요. 덱이 에이전트가 당신을 위해 만들어 내는 수많은 브랜드 준수 출력 중 하나일 때는 워크스페이스로 손을 뻗으세요.
자주 묻는 질문
Slidev는 무료인가요? 네. Slidev는 MIT 라이선스의 오픈소스입니다——상업적 사용도 무료이며, 계정도, 워터마크도, 내보내기 제한도 없습니다. 자신의 프로젝트에서 직접 실행합니다.
Slidev 테마는 어떻게 쓰나요? 슬라이드 frontmatter에서 테마를 지정하면(예: theme: seriph) Slidev가 설치하고 적용합니다. 공식 갤러리에 더해 npm의 커뮤니티 테마가 있습니다. 커스텀 테마란 자신만의 레이아웃, 폰트, 색상을 담은 테마 패키지를 만들거나 fork하는 것을 뜻합니다——바꿔 끼우는 스타일시트가 아니라 코드입니다.
Slidev를 PowerPoint로 내보낼 수 있나요? Slidev는 .pptx로 내보낼 수 있지만 손실이 있습니다——각 슬라이드가 편집 가능한 텍스트와 도형이 아니라 평평한 이미지로 떨어집니다. PDF와 PNG 내보내기(slidev export 통해)가 깔끔한 일급 경로입니다. 편집 가능한 PowerPoint가 필요하다면 Slidev는 적절한 소스가 아닙니다.
Slidev, Marp, reveal.js——무엇을 써야 하나요? 셋 다 오픈소스이고 코드 우선이며 MIT 라이선스입니다. Markdown과 Vue 컴포넌트(슬라이드에 상호작용이 필요할 때 훌륭)라면 Slidev, 순수 HTML 제어라면 reveal.js, 가장 단순한 Markdown 전용 덱이라면 Marp를 고르세요. 어느 것도 편집 가능한 PowerPoint 출력을 목표로 하지 않습니다.
Slidev를 쓰려면 코딩을 알아야 하나요? 사실상 그렇습니다. Slidev는 개발자 도구입니다——드래그 앤 드롭 GUI가 아니라 텍스트 에디터와 터미널에서 Markdown, Vue, 개발 서버를 다룹니다. 덱을 평범한 말로 설명하고 싶다면, 그것이 바로 Open Design 같은 에이전트 네이티브 워크스페이스가 메우는 빈틈입니다.
핵심 정리
Slidev는 47.6k 스타에 값하는 도구입니다. 무료이고 MIT 라이선스이며 개발자 우선으로, Markdown에서 보기 좋은 덱을 만들 수 있고, 진짜 테마, 핫 리로드, 라이브 Vue 컴포넌트, 그리고 깔끔한 PDF 내보내기를 갖췄습니다. 다만 눈을 크게 뜨고 들어가세요——이것은 클릭해서 쓰는 앱이 아니라 그 안에서 쓰는 도구이며, "편집 가능한 PowerPoint로 내보내기"는 잘하는 일이 아닙니다. 덱을 코드로 작성하고 싶다면 Slidev(또는 reveal.js / Marp)는 훌륭한 보금자리입니다. 덱을 설명하고 에이전트가 당신이 소유하는 편집 가능하고 브랜드에 맞는 덱을 생성하길 바란다면, 바로 거기서 Agent-Native Design Workspace가 이어받습니다.