본문 바로가기

Vibe coding

Claude code로 발표자료 만들기

프레젠테이션을 만들 때마다 슬라이드 정렬, 폰트 통일, 디자인 일관성 유지... 생각보다 발표자료 하나를 만드는 데에는 손이 많이 갑니다. 최근에 주기적으로 발표 자료를 만들 일이 있어서 빠르고 깔끔하게 만들 수 있는 방법이 없을까 고민하다가 Marp를 활용하면 claude code로 작성할 수 있겠다라는 것을 떠올렸습니다.

이 글에서는 Claude CodeMarp를 활용해서 마크다운으로 깔끔한 프레젠테이션을 만드는 방법을 소개합니다. 코드 작성하듯 PPT를 만들 수 있어서 개발자분들께 특히 유용합니다. 특히, 문법이라던가 특정 기능을 구현하는 방법을 모른다면 Claude code에게 물어보시면 됩니다. 아래 내용은 아주 간단하게 시작할 수 있도록 기본적인 것만 작성하였습니다.


Marp란?

MarpMarkdown 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 접속

 

 

참고 자료