마크다운쇼 개발기 1편: 기획

대학 특강과 연구 발표에서 Marp를 쓰다가, 결국 직접 에디터를 만들게 된 이야기

배경: 나와 Marp의 인연

나는 대학에서 종종 특강 요청을 받는다. 학부생들에게 개발 이야기도 하고, 내 개인 연구물을 발표할 때도 있다.

처음에는 파워포인트를 썼다. 그런데 발표 자료를 만드는 시간이 발표 준비 시간보다 더 길었다.

• 텍스트 박스 정렬하다가 30분
• 코드 넣으려고 스크린샷 찍고 붙이기
• “이 슬라이드 좀 더 예쁘게…” 하다가 2시간

어느 날 Marp를 발견했다.

---
marp: true
---

# 발표 제목

코드도 그냥 쓰면 됨

\`\`\`python
print("Hello, World!")
\`\`\`

---

# 두 번째 슬라이드

- 리스트도 마크다운 그대로
- 서식 고민 없음

혁명이었다. 마크다운으로 쓰면 알아서 슬라이드가 된다. VS Code에서 바로 작성하고, CLI로 PDF 뽑으면 끝.

그런데 불편한 점들

Marp를 1년 넘게 쓰면서 느낀 불편함:

1. 미리보기가 실시간이 아님

VS Code 확장으로 미리보기를 보는데, 타이핑할 때마다 깜빡거린다. 렌더링이 느려서 작성 흐름이 끊긴다.

2. 비개발자에게 추천하기 어려움

동료 연구원한테 Marp 추천했더니:

“터미널? npm? 그게 뭔데?”

설치부터 막힌다. 웹에서 바로 쓸 수 있으면 이런 진입장벽이 없을 텐데.

3. 빈 슬라이드가 막막함

매번 처음부터 구조를 잡아야 한다. 자주 쓰는 레이아웃 템플릿이 있으면 좋겠다고 생각했다.

결국 내가 만들기로 했다. “웹에서 바로 쓰는 Marp 에디터”

기획: 어떤 걸 만들 건가

와이어프레임

종이에 대충 그려봤다. (진짜 손그림)

PowerPoint 레이아웃을 참고했다:

• 좌측: 슬라이드 목록 (필름스트립)
• 중앙: 마크다운 에디터
• 우측: 실시간 미리보기
• 하단: 서식 툴바

사용자 플로우

핵심 플로우는 단순하게:

1. 마크다운 작성
2. 실시간으로 슬라이드 확인
3. PDF/PPTX로 내보내기

레이아웃 프리셋은 선택 사항이지만, 초보자에게는 핵심 기능이 될 거다.

MVP 범위

Must Have (필수)

• 마크다운 에디터 (신택스 하이라이팅)
• 실시간 슬라이드 미리보기
• 슬라이드 탐색 (좌측 필름스트립)
• PDF / PPTX 내보내기
• 레이아웃 프리셋

Nice to Have (다음에)

• 협업 기능
• 클라우드 저장
• 발표자 노트
• 다크/라이트 테마 전환

기술 스택 선정

왜 Marp Core인가

다른 슬라이드 라이브러리도 있다 (reveal.js, Slidev 등). 그런데:

1. 이미 Marp 문법에 익숙함 - 기존 발표 자료 재활용 가능
2. 마크다운 표준에 가까움 - 학습 곡선 낮음
3. PDF 출력 품질 - 발표용으로 충분히 좋음

컴포넌트 구조 설계

src/
├── app/
│   └── page.tsx          ← 메인 상태 관리
├── components/
│   ├── Toolbar.tsx       ← 상단 메뉴
│   ├── Filmstrip.tsx     ← 좌측 슬라이드 목록
│   ├── Editor.tsx        ← CodeMirror 래퍼
│   ├── Preview.tsx       ← Marp 렌더링 결과
│   └── FloatingFormatBar.tsx  ← 하단 서식 도구
└── lib/
    ├── marp-renderer.ts  ← 렌더링 로직
    ├── layouts.ts        ← 레이아웃 프리셋 정의
    ├── export-pdf.ts     ← PDF 내보내기
    └── export-pptx.ts    ← PPTX 내보내기

상태 관리는 일단 useState로 시작. 복잡해지면 zustand 도입 예정.

UI/UX 방향

다크 테마가 기본

코드 에디터는 다크 테마가 국룰이다. PowerPoint 스타일의 다크 테마를 채택.

:root {
  --mp-bg: #1f1f1f;        /* 배경 */
  --mp-chrome: #2d2d2d;    /* 툴바 영역 */
  --mp-accent: #5a9bd5;    /* 포인트 - 파란색 */
  --mp-coral: #d67d3e;     /* 액센트 - 오렌지 */
  --mp-text: #c8c8c8;      /* 텍스트 */
}

마크다운 모르는 사람도 쓸 수 있게

하단에 플로팅 포맷 바를 띄워서 Bold, Italic, 제목 등을 클릭으로 삽입할 수 있게 한다.

62가지 레이아웃 프리셋

빈 슬라이드 공포증 해결. 6개 카테고리로 분류:

개발 일정 (희망)

(스포일러: 예상보다 오래 걸렸고, Puppeteer 때문에 3일을 날렸다)

다음 편 예고

기획은 끝났다. 이제 코드를 짤 차례.

마크다운쇼 개발기 2편: 개발에서는:

• CodeMirror 6 세팅 삽질기
• Marp 렌더링 성능 최적화
• PDF 내보내기의 고난과 역경

마크다운쇼 개발기 시리즈

1. 기획 ← 현재 글
2. 마크다운쇼 개발기 2편: 개발
3. 마크다운쇼 개발기 3편: 배포