slidev-master

Slidev Master Skill

개발자를 위한 마크다운 기반 프레젠테이션 프레임워크 Slidev의 완벽 가이드.

활성화 조건

다음 요청 시 이 스킬 사용:

• Slidev 프레젠테이션 생성/수정
• 기술 발표자료, 컨퍼런스 슬라이드
• 코드 데모가 포함된 워크샵 자료
• 마크다운 기반 슬라이드 제작

핵심 원칙 (Critical Rules)

1. 마크다운린트 설정 (필수)

슬라이드 작성 전 반드시 .markdownlint.json 생성:

{
  "MD003": false,
  "MD024": false,
  "MD025": false,
  "MD026": false,
  "MD033": false,
  "MD041": false
}

규칙	비활성화 이유
MD003	frontmatter 손상 방지 (setext→ATX 변환 차단)
MD024	슬라이드간 중복 제목 허용
MD025	각 슬라이드별 H1 허용
MD026	제목에 문장부호 허용
MD033	Slidev 인라인 HTML 허용
MD041	첫 줄이 YAML frontmatter

2. 접근성 기반 디자인 (Critical)

폰트 크기 (연구 기반):

• 본문: 최소 18pt, 권장 18-24pt
• 제목: 최소 24pt 이상
• Sans-serif 글꼴 사용 (Arial, Helvetica, Inter)
• 이탤릭, 밑줄, ALL CAPS 본문 사용 금지

색상 대비:

• 일반 텍스트: 최소 4.5:1 대비율
• 큰 텍스트 (>24pt): 최소 3:1 대비율
• 색맹 친화적 팔레트 사용 (ColorBrewer 검증)
• 색상만으로 정보 전달 금지 (패턴/라벨 병행)

기본 스타일 설정:

---
theme: default
---

<style>
h1 { font-size: 3rem; }      /* ~48pt */
h2 { font-size: 2rem; }      /* ~32pt */
h3 { font-size: 1.5rem; }    /* ~24pt */
p, li { font-size: 1.25rem; } /* ~20pt */

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
</style>

3. 콘텐츠 원칙

슬라이드당 하나의 아이디어:

• 설명에 2분 이상 필요하면 분할
• 제목은 명확한 주장 형태 ("성능" X → "API가 10K req/sec 처리" O)
• 제목만 읽어도 스토리가 전달되어야 함

최소 텍스트:

• 슬라이드당 50단어 미만
• 완전한 문장 대신 키워드/구문
• 상세 설명은 발표자 노트에

인지 부하 관리:

• 슬라이드당 최대 6개 요소 (제목 + 다이어그램 + 불릿 등)
• 6개 초과 시 v-click으로 점진적 공개

프로젝트 구조

기본 구조

project/
├── slides.md              # 메인 프레젠테이션
├── .markdownlint.json     # 린트 설정 (필수!)
├── package.json
├── components/            # 커스텀 Vue 컴포넌트
├── layouts/               # 커스텀 레이아웃
├── pages/                 # 외부 슬라이드 파일
├── public/                # 정적 에셋 (이미지 등)
│   └── images/
└── styles/                # 커스텀 CSS

모듈화된 구조 (30+ 슬라이드)

presentation/
├── slides.md                      # 마스터 파일
├── .markdownlint.json
├── slides/
│   ├── 01-title.md
│   ├── 02-hook.md
│   ├── 03-problem-statement.md
│   ├── 04-architecture-overview.md
│   └── ...
└── public/images/