프레젠테이션을 만들 때마다 슬라이드 정렬, 폰트 통일, 디자인 일관성 유지... 생각보다 발표자료 하나를 만드는 데에는 손이 많이 갑니다. 최근에 주기적으로 발표 자료를 만들 일이 있어서 빠르고 깔끔하게 만들 수 있는 방법이 없을까 고민하다가 Marp를 활용하면 claude code로 작성할 수 있겠다라는 것을 떠올렸습니다.
이 글에서는 Claude Code와 Marp를 활용해서 마크다운으로 깔끔한 프레젠테이션을 만드는 방법을 소개합니다. 코드 작성하듯 PPT를 만들 수 있어서 개발자분들께 특히 유용합니다. 특히, 문법이라던가 특정 기능을 구현하는 방법을 모른다면 Claude code에게 물어보시면 됩니다. 아래 내용은 아주 간단하게 시작할 수 있도록 기본적인 것만 작성하였습니다.
Marp란?
Marp는 Markdown Presentation Ecosystem의 약자로, 마크다운 문법으로 프레젠테이션을 만들 수 있는 도구입니다.
주요 장점
- 마크다운 기반: 익숙한 문법으로 빠르게 작성
- 버전 관리 가능: Git으로 PPT 변경 이력 관리
- 일관된 디자인: CSS 테마로 스타일 통일
- 다양한 출력 포맷: HTML, PDF, PPTX로 내보내기 가능
프로젝트 구조
Claude Code로 Marp 프레젠테이션을 만들 때 권장하는 디렉토리 구조입니다:
project/
├── .marprc.yml # Marp 설정 파일
├── academic-theme.css # 커스텀 테마
├── presentation.md # 프레젠테이션 본문
└── images/ # 이미지 폴더 (필요시)
1단계: Marp 설치
먼저 Marp CLI를 설치합니다.
# npm으로 설치
npm install -g @marp-team/marp-cli
# 또는 npx로 바로 실행
npx @marp-team/marp-cli
VS Code 사용자라면 Marp for VS Code 확장 프로그램을 설치하면 실시간 미리보기가 가능합니다. 확장 프로그램 사용을 추천드립니다. 가장 편리합니다!
2단계: 설정 파일 만들기
.marprc.yml 파일로 Marp의 기본 설정을 정의합니다:
# .marprc.yml
theme: ./academic-theme.css
themeSet:
- ./academic-theme.css
options:
html: true
pdf:
format: A4
margin: 10mm
설정 항목 설명
| 항목 | 설명 |
|---|---|
theme |
사용할 테마 파일 경로 |
themeSet |
사용 가능한 테마 목록 |
html |
HTML 태그 사용 허용 여부 |
pdf.format |
PDF 출력 시 용지 크기 |
pdf.margin |
PDF 여백 설정 |
3단계: 커스텀 테마 만들기
Marp는 CSS로 테마를 커스터마이징할 수 있습니다. 아래는 학술 발표용 테마의 핵심 구조입니다:
/* academic-theme.css */
/* @theme academic */
@import 'gaia'; /* 기본 테마 상속 */
/* 색상 변수 정의 */
:root {
--primary-color: #003366; /* 메인 컬러 */
--secondary-color: #0066cc; /* 보조 컬러 */
--accent-color: #ff6600; /* 강조 컬러 */
--bg-color: #ffffff; /* 배경색 */
--text-color: #333333; /* 본문 색상 */
}
/* 기본 섹션 스타일 */
section {
font-family: 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
background: var(--bg-color);
color: var(--text-color);
font-size: 20px;
padding: 90px 80px 80px 80px;
}
/* 제목 슬라이드 (그라데이션 배경) */
section.lead {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
text-align: center;
justify-content: center;
}
/* 일반 슬라이드 제목 */
section h1 {
color: var(--primary-color);
font-size: 42px;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 12px;
}
4단계: 마크다운으로 PPT 작성하기
기본 구조
---
marp: true
theme: academic
paginate: true
header: '발표 제목'
footer: '발표자 | 날짜'
---
<!-- _class: lead -->
# 메인 제목
### 부제목
발표자 이름
날짜
---
# 목차
1. 첫 번째 주제
2. 두 번째 주제
3. 세 번째 주제
---
# 첫 번째 슬라이드
## 소제목
- 항목 1
- 항목 2
- 항목 3
---
Front Matter 옵션
| 옵션 | 설명 | 예시 |
|---|---|---|
marp |
Marp 활성화 | true |
theme |
사용할 테마 | academic |
paginate |
페이지 번호 표시 | true |
header |
헤더 텍스트 | '발표 제목' |
footer |
푸터 텍스트 | '2025년' |
backgroundColor |
배경색 | #fff |
슬라이드 구분
슬라이드는 --- (수평선)으로 구분합니다.
5단계: Claude Code에 작성 요청하기
Claude Code에 프레젠테이션 작성을 요청할 때 효과적인 프롬프트 예시입니다:
프롬프트 예시 1: 새 프레젠테이션 생성
Marp 형식으로 "프로젝트 제안서" PPT를 만들어줘.
- 10페이지 분량
- 제목 슬라이드, 목차, 본론, Q&A 포함
- academic-theme.css 테마 사용
프롬프트 예시 2: 기존 자료 변환
이 보고서를 Marp 프레젠테이션으로 변환해줘.
핵심 내용만 추려서 15페이지로 요약.
프롬프트 예시 3: 테마 수정
academic-theme.css에서 메인 컬러를 초록색 계열로 바꿔줘.
회사 CI 색상은 #2E7D32야.
6단계: 출력 파일 생성
작성이 완료되면 원하는 형식으로 내보냅니다.
HTML로 변환
marp presentation.md -o presentation.html
PDF로 변환
marp presentation.md --pdf -o presentation.pdf
PPTX로 변환
marp presentation.md --pptx -o presentation.pptx
실시간 미리보기
marp -s presentation.md
# 브라우저에서 localhost:8080 접속
참고 자료
'Vibe coding' 카테고리의 다른 글
| Claude Sonnet 5 (Fennec) 출시 임박 총정리 (2) | 2026.02.05 |
|---|---|
| Oh-My-ClaudeCode 설치 및 사용법 (0) | 2026.02.02 |
| OpenCode와 Oh-my-opencode 설치 가이드 (0) | 2026.01.29 |
| Vibe coding으로 30분만에 게임 만들기 (하와이안 피자 게임) (0) | 2026.01.24 |
| Claude 권한 부여 (--dangerously-skip-permissions) (1) | 2025.11.07 |