slidev 분석 · Giting

홈 · TypeScript · 마크다운 · 프레젠테이션 · 개발도구

a8d8ff7

구조와 기능

Slidev는 마크다운으로 작성한 문서를 Vue 3 + Vite 기반 런타임에서 슬라이드로 렌더링하는 개발자용 프레젠테이션 도구다. 확장자별 분포를 보면 ts 파일이 284개(24,104줄)로 가장 많고 vue 파일이 147개(10,039줄)로 뒤를 잇는다. 로직은 TypeScript로, 슬라이드 UI와 편집기 화면은 Vue 컴포넌트로 짜여 있다는 구조가 그대로 드러난다.

가장 큰 파일은 pnpm-lock.yaml로 19,921줄이다. 반면 루트 package.json에는 직접 dependencies가 0개, devDependencies만 45개 등록되어 있다. 이 둘을 나란히 놓고 보면 pnpm 워크스페이스 형태의 모노레포임을 알 수 있다. 실제 기능별 의존성(마크다운 파서, 코드 하이라이터, 익스포트용 헤드리스 브라우저 연동 등)은 루트가 아니라 workspace 하위 패키지 각각에 걸려 있을 가능성이 높다.

커밋 이력은 shallow clone(depth 1000) 기준으로 1,046건이 잡히는데 이는 하한값이고, range 내 첫 커밋은 2023-09-23, 마지막 커밋은 2026-08-25다. 최근 90일 63커밋, 저자 194명, 원격 태그 446개로 릴리스가 빈번하게 나가는 프로젝트임을 보여준다. 상위 기여자로 리포 소유 조직과 함께 공개적으로 알려진 Anthony Fu가 이름을 올리고 있다.

하이라이트

모노레포 의존성 분리 구조. 루트 package.json의 dependencies가 0인 수치만 보면 "의존성 없는 가벼운 도구"로 오해하기 쉽지만, 같은 리포에서 가장 긴 파일이 19,921줄짜리 pnpm-lock.yaml이라는 점이 바로 반증이다(pnpm-lock.yaml). devDependencies 45개는 루트에서 관리하는 빌드/린트/테스트 툴체인이고, 실제 무거운 의존성은 워크스페이스 하위 패키지 쪽에 있다고 보는 게 맞다. 모노레포 도구를 평가할 때 루트 매니페스트만 보고 의존성 규모를 판단하면 안 된다는 걸 보여주는 사례다.

TS 대 Vue 파일 비율. ts 284개 파일(24,104줄)과 vue 147개 파일(10,039줄)의 비율은 대략 2:1이다. 슬라이드 렌더링·파서·CLI 같은 로직이 TypeScript 패키지로 분리되어 있고, 실제 화면(프레젠터 모드, 편집기, 슬라이드 레이아웃)만 Vue 컴포넌트로 얇게 얹힌 구조로 읽힌다. UI 프레임워크 위에서 코어 로직을 프레임워크 비의존적으로 분리해두면 향후 다른 렌더러로 포팅하거나 로직만 테스트하기 쉬워진다는 점에서 참고할 만하다.

활동 지속성과 저자 폭. 3년이 채 안 되는 범위(2023-09-23 ~ 2026-08-25)에서 저자 194명, 원격 태그 446개가 쌓였고 최근 90일에도 63커밋이 붙었다. 태그 수가 커밋 수(1,046, 하한값)에 비해 상당히 많은 편인데, 이는 세분화된 버전 릴리스 주기를 시사한다. CI 워크플로가 5개 구성되어 있어 릴리스 전 자동 검증 파이프라인이 최소한의 형태로는 갖춰져 있다.

주의점

수치는 shallow clone(depth 1000) 기준이라 커밋 수 1,046은 하한값이고, "range 내 첫 커밋(2023-09-23)"은 실제 프로젝트 시작일이 아니라 depth 제한으로 잘린 지점일 뿐이다. 프로젝트의 전체 이력 길이를 판단하는 근거로 이 날짜를 쓰면 안 된다.

테스트 파일은 774개 파일 중 60개(약 7.7%)로, 파일 수 대비 비중이 크지 않다. 마크다운 파싱이나 슬라이드 렌더링처럼 핵심 경로는 스냅샷 테스트(snap 확장자 2개 파일, 2,887줄)로 일부 커버되는 것으로 보이나, PDF/PNG 익스포트처럼 외부 헤드리스 브라우저에 의존하는 기능의 테스트 커버리지는 별도로 확인이 필요하다. 라이선스는 MIT로 상업적 사용에 제약이 없다. hasAgentDocs가 false로 잡혀 있어, AI 코딩 에이전트를 통한 기여나 자동화를 계획한다면 리포에 명시된 별도 가이드 없이 기존 컨트리뷰션 문서만으로 컨벤션을 파악해야 한다.

실측 정보

헤드 커밋: a8d8ff7
커밋 수(shallow, depth 1000): 1,046 (하한값)
최근 90일 커밋: 63
저자 수: 194
원격 태그 수: 446
총 파일 / 텍스트 LOC: 774 / 80,261
테스트 파일 / CI 워크플로: 60 / 5

적용점

P0 · 비용 낮음루트 package.json의 dependencies가 0, devDependencies가 45인 것은 pnpm 워크스페이스 구조 때문이다. 실제 런타임 의존성은 packages/* 하위 각 패키지에 분산되어 있으니 도입 전 실제로 설치되는 하위 패키지의 의존성 트리를 별도로 확인할 것.
P1 · 비용 중간테스트 파일 60개 / 전체 774개 파일 (약 7.7%)로 비중이 낮다. 프레젠테이션 렌더링, PDF/PNG 익스포트처럼 발표 당일 실패가 치명적인 기능은 커버리지를 직접 확인 후 사용할 것.
P2 · 비용 낮음hasAgentDocs: false — AGENTS.md류 에이전트 안내 문서가 없다. AI 코딩 어시스턴트로 기여하거나 자동화를 붙일 계획이면 컨벤션을 컨트리뷰션 가이드에서 직접 파악해야 한다.

◆ 도입 후보

3년 가까운 이력에 걸쳐 저자 194명이 태그 446개를 찍었고 최근 90일에도 63커밋이 붙어 활동이 끊기지 않았다. CI 워크플로 5개, MIT 라이선스로 도입 장벽이 낮고, 마크다운 기반 슬라이드 작성이라는 워크플로 자체가 git diff 친화적이라 팀 문서·발표 자료를 코드처럼 버전관리하려는 팀에 바로 시도해볼 만하다. 다만 테스트 파일이 774개 파일 중 60개로 비중이 낮아, 특정 익스포트·플러그인 기능을 프로덕션에 걸기 전에는 해당 경로의 커버리지를 직접 확인해야 한다.

원문 README

아래는 slidevjs/slidev 저장소의 README 원문입니다(GitHub 렌더, 수집 시점 기준). 저작권은 원 프로젝트에 있으며 원 저장소의 라이선스를 따릅니다. GitHub에서 보기

README 전문 펼치기

Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

_{Made possible by my Sponsor Program 💖}

Features

📝 Markdown-based - focus on content and use your favorite editor
🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
🎨 Themable - theme can be shared and used with npm packages
🌈 Stylish - on-demand utilities via UnoCSS.
🤹 Interactive - embedding Vue components seamlessly
🎙 Presenter Mode - use another window, or even your phone to control your slides
🎨 Drawing - draw and annotate on your slides
🧮 LaTeX - built-in LaTeX math equations support
📰 Diagrams - creates diagrams using textual descriptions with Mermaid
🌟 Icons - access to icons from any icon set directly
💻 Editor - integrated editor, or the VSCode extension
🎥 Recording - built-in recording and camera view
📤 Portable - export into PDF, PNGs, or PPTX
⚡️ Fast - instant reloading powered by Vite
🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Getting Started

Try it Online ⚡️

sli.dev/new

Init Project Locally

Install Node.js >= 20.12.0 and run the following command:

npm init slidev

Discord: chat.sli.dev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

Vite - An extremely fast frontend tooling
Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
UnoCSS - On-demand utility-first CSS engine, style your slides at ease
Shiki, Monaco Editor - First-class code snippets support with live coding capability
RecordRTC - Built-in recording and camera view
VueUse family - @vueuse/core, @vueuse/motion, etc.
Iconify - Icon sets collection.
Drauu - Drawing and annotations support
KaTeX - LaTeX math rendering.
Mermaid - Textual Diagrams.