Markdown과 MCP로 AI에게 '비즈니스 슬라이드'를 만들게 하는 OSS 공개 (Marp / 편집 가능한 PPTX에 도전 중)

먼저, 이번에 소개하는 환경(marp-slide-mcp)을 사용해서 Markdown으로 생성한 실제 프레젠테이션 자료를 봐주세요.

이 슬라이드의 디자인(색상 조합, 제목 바, 글꼴 크기, 배치)은 모두 Markdown을 규약대로 작성했을 뿐만 아니라 자동으로 생성되었습니다.

게다가 제작 과정은 첨부된 MCP를 거쳐 모두 자연어로 진행했습니다!!!

엔지니어 여러분, 프레젠테이션 자료나 사내 보고 슬라이드 작성에 지치고 계시진 않나요?

PowerPoint를 열어 텍스트 상자의 위치를 마우스로 조금씩 맞추고, 글꼴 크기를 맞추고, 도형의 색을 조정하는... **'이런 작업을 할 바에는 코드를 한 줄이라도 더 쓰고 싶다'**라고 생각한 적이 누구나 있을 겁니다.

'그럼 Markdown으로 슬라이드가 작성되는 Marp를 사용하면 되지 않을까?'

이렇게 생각하고 Marp를 도입한 엔지니어들도 많을 것입니다. Markdown으로 술술 쓸 수 있는 경험은 훌륭하지만, 막상 비즈니스 실무(사내 제안, 임원 보고, 클라이언트 대상 제안)에 사용하려고 하면 다음의 '4가지 벽'에 직면합니다.

• 디자인이 비즈니스에 적합하지 않음: 기본 테마로는 '전략 컨설팅이나 대기업 같은 세련된 디자인'을 구현하기 어려워 글꼴이나 색상 조합 조정에 시간이 걸립니다. - 문자나 다이어그램이 금방 프레임에서 벗어남: 표나 코드 블록, 긴 문장을 넣으면 슬라이드 틀을 뚫고 화면 밖으로 사라집니다. 수동으로 글꼴 크기를 만지거나 줄 바꿈을 자르는 무의미한 미세 조정이 발생합니다. - 'PPT로 편집할 수 있게 전달해 달라'는 요구에 어려움을 느낌: Marp 표준 PPTX 내보내기는 슬라이드를 이미지화해서 붙여넣기만 한 것입니다. 클라이언트나 비엔지니어 상사에게 '나중에 텍스트를 수정하고 싶다'고 하면 대응하기 어렵습니다. - 생성 AI에 의존해도 레이아웃이 무너짐: Claude나 ChatGPT에게 '슬라이드를 만들어 달라'고 요청해도, 슬라이드 프레임의 크기 감각을 이해하지 못해 글자 수 초과로 레이아웃이 붕괴됩니다.

이러한 문제점(pain)들을 해소하고, 보다 실용적인 슬라이드 작성을 목표로 개발한 것이 이번에 오픈 소스(Source-Available)로 공개한 marp-slide-mcp입니다.

marp-slide-mcp는 Markdown에서 세련된 비즈니스 표준 디자인의 슬라이드를 생성하는
Marp 확장 환경과, Claude Desktop이나 Cursor 같은 AI 어시스턴트와 연동하여 슬라이드를 완전 자동 조작하는
MCP(Model Context Protocol) 서버를 통합한 솔루션입니다.

단순히 Marp 테마 배포에 그치지 않고, 'AI 에이전트가 프로 품질의 슬라이드를 만들고, 인간은 내용 검토와 발표에만 집중하는' 경험을 목표로 합니다.

독자적인 테마 business-slide-theme.css는 Markdown의 제목 태그(# ~ ######)를 **레이아웃의 앵커(역할의 눈표)**로 해석합니다.

'한 슬라이드, 한 메시지(Pyramid Principle)'에 기반하여, 누가 작성해도 자연스럽고 설득력 있는 컨설팅 품질의 레이아웃으로 완성됩니다.

게다가 클래스 지정만 한 줄 추가하면 다채로운 레이아웃에 대응할 수 있습니다:

• 목차 슬라이드 자동 생성: <!-- _class: toc -->
  (슬라이드 내 제목을 집계하여 클릭 가능한 목차를 자동 생성) -
  2단 비교: <!-- _class: columns-2 -->
  (좌우 비교・대비) -
  이미지 병렬: <!-- _class: images-2 -->
  ~images-4

（複数グラフや写真の横並び） -
타임라인 대화: <!-- _class: conversation-content -->

（チャット形式のユーザー事例） -
와이드 화면: <!-- _class: wide-content -->

（巨大な図表やアーキテクチャ図用）

Marp 사용자들의 최대 고민이었던 **'글자가 넘쳐서 프레임 밖으로 벗어나는 문제'**를 근본적으로 해결했습니다.

표(Table): 열 수나 글자량에 따라 폰트 크기가 자동 축소됨 -
코드 블록: 줄 수나 자릿수에 따라 자동으로 축소되며 스크롤바가 생기지 않음 -
이미지・Mermaid 다이어그램: 콘텐츠 영역의 높이와 너비에 맞춰 자동 피팅 -
주장 메시지(H2): 목록 항목이 늘어나도 배너 높이 내에서 자동 다운스케일링

이제 '글자를 줄이기 위해 개행을 고안하는' 불필요한 시간은 필요 없습니다.

기존 Marp의 아쉬운 점으로는, PPTX 출력 시 **'슬라이드 전체 화면이 하나의 이미지로 붙여넣어지는 것'**이라는 사양이 있습니다. 이 경우 '나중에 텍스트만 미세 조정하고 싶다' 할 때 다소 불편합니다.

그래서 marp-slide-mcp

을 통해 Puppeteer와 PptxGenJS를 연계한 커스텀 컨버터(pptx_converter/convert.js) 개발에 도전하고 있습니다.

npm run build:pptx-custom

솔직히 고백하자면, 현재는 아직 발전 단계(WIP)이며 레이아웃 깨짐도 있어 '매우 깔끔한 슬라이드가 출력된다'는 단계에는 이르지 못했습니다.

하지만 '제목이나 본문의 텍스트 박스, 도형을 PowerPoint의 네이티브 객체로 출력'하기 위한 발판은 마련되었습니다. 실용적인 품질을 목표로 앞으로 계속 개선해 나갈 예정이니, '이런 구현은 어때요?', '여기 고쳐봤어요'와 같은 피드백이나 풀 리퀘스트를 환영합니다!

Anthropic이 제안하는 **Model Context Protocol (MCP)**에 대응한 TypeScript 서버도 포함하고 있습니다.

아래 7가지 전용 도구를 통해 AI 에이전트가 슬라이드를 자유자재로 조작할 수 있습니다:

generate_slide_deck: 주제 규약에 완벽하게 준수된 신규 슬라이드 일괄 생성 -
get_slide_deck: 기존 슬라이드의 구조 분석 및 로딩 -
insert_slide: 특정 위치에 슬라이드 추가 -
update_slide: 지정 슬라이드의 부분 수정 및 개선 -
delete_slide: 불필요한 슬라이드 삭제 -
update_deck_settings: 전체 테마 색상이나 비율(4:3 / 16:9) 일괄 변경 -
export_to_pdf: Marp CLI를 호출하여 원클릭으로 고품질 PDF 출력

AI에게 '이 리서치 결과를 바탕으로 10장의 슬라이드를 만들어줘'라고 던져주는 것만으로, 규칙에 맞는 아름다운 슬라이드가 순식간에 완성됩니다.

개인 개발의 OSS 레포지토리라면 '일단 작동하는 코드와 간단한 README로 힘이 빠지는' 경우가 많지만, 본 프로젝트에서는 설계 문서 정비에도 상당히 공을 들였습니다.

IPA(정보처리진흥기구)의 시스템 개발 사양서 체계를 참고하여 구성했습니다:

00. 프로젝트 헌장・코딩 규약-
01. 요구사항 정의서(업무 요구사항・기능 요구사항・비기능 요구사항) -
02. 기본 설계서(기능 사양서・외부 I/F 사양서) -
03. 상세 설계서(구조 설계서・내부 I/F 사양서・프로그램 사양서)

'IPA 표준에 완벽하게 준수했다!'라고 자부하기에는 아직 무리가 있지만, 개인 프로젝트로서는 이례적으로 진지하게 문서를 작성했습니다.

무엇보다 설계서가 제대로 갖춰져 있다는 점이 Claude 같은 AI 에이전트에게 코드를 수정・확장시킬 때 '오차 없는 컨텍스트'로서 엄청나게 기능한다는 부수적인 이점도 있었습니다. 꼭 docs/ 디렉토리도 살펴보세요!

레포지토리를 클론합니다:
git clone https://github.com/N-Y-Public/marp-slide-mcp.git cd marp-slide-mcp

• VS Code에서 열고, 확장 기능 Marp for VS Code (marp-team.marp-vscode)을 설치합니다. - VS Code 설정(.vscode/settings.json)에서 테마를 지정합니다: { "markdown.marp.themes": [ "./themes/business-slide-theme.css" ], "markdown.marp.enableHtml": true }

• slides/D01-000001_Marpの使い方/D01-000001_Marpの使い方.md 파일을 열고, 오른쪽 상단의 미리보기 버튼(또는 Ctrl+K V)을 누르면 즉시 비즈니스 디자인이 적용된 슬라이드를 확인할 수 있습니다.

Node.js 22, 헤드리스 Chromium, 일본어 글꼴(fonts-noto-cjk)을 내장한 Docker 환경을 제공하므로, OS에 따른 글꼴 깨짐이나 렌더링 차이가 전혀 없습니다.

# 의존성 설치
docker compose run --rm app npm install
# TypeScript 빌드
...

※ Windows PowerShell의 경우 . un.ps1을, Linux/macOS의 경우 ./dev.sh를 사용해 npm run build:pdf로 실행할 수 있습니다.

AI 어시스턴트로부터 직접 슬라이드를 생성하고 편집할 수 있도록 설정해 봅시다.

npm run build

build/index.js가 생성됩니다.

설정 파일(claude_desktop_config.json)에 다음을 추가합니다:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
"mcpServers": {
"marp-slide-mcp": {
...

리포지토리 내의 prompts/mcp_slide_generator.md에 AI가 고품질 슬라이드를 만들 수 있도록 하는 시스템 프롬프트가 준비되어 있습니다.

Claude나 Cursor에게 다음과 같이 지시하기만 하면 됩니다:

"

prompts/mcp_slide_generator.md의 규칙을 따라, 차세대 AI 에이전트 아키텍처에 관한 제안 슬라이드를 새로 작성해 주세요 (파일명: slides/ai-agent.md). 주요 논점은 3가지로 하고, 마지막에는 PDF로 내보내 주세요."

AI가 자율적으로 레이아웃을 결정하고, 제목 기법을 구축하여 generate_slide_deck 도구를 실행한 후, 마지막으로 export_to_pdf로 PDF를 작성해 줍니다.

본 소프트웨어는 **SaaS 제공 제한 라이선스(Source-Available)**로 공개되어 있습니다.

• 사용 가능한 예시:

  • 회사 업무나 개인에서의 슬라이드 작성 및 발표 (완전 무료・상업적 이용 가능)
  • 위탁 프로젝트 또는 고객 제안의 납품물로서 슬라이드 활용
  • 클라이언트 기업에 대한 도입 지원・환경 구축・지원 업무의 대가 취득
  • 사내용・프로젝트용 테마나 코드 수정

• 사용 불가 예시:

  • 본 툴을 클라우드에 배포하여 일반 사용자에게 '웹상에서 슬라이드를 자동 생성하는 SaaS'로 유료 과금 서비스 제공

기업의 실무나 프리랜서의 제안 업무에서 안심하고 자유롭게 활용할 수 있는 라이선스 체계입니다.

Markdown으로 직관적으로 작성 가능 • 비즈니스 표준 디자인 & 오버플로우 방지 기능으로 외형 걱정 불필요 • 네이티브 편집 가능한 파워포(PPTX) 출력에도 과감히 도전 중 (WIP) • MCP 대응으로 AI 에이전트가 슬라이드 작성을 대행 • 개인 개발이지만 설계 문서도 충실하게 정비됨

'엔지니어가 자료 작성에 할애하는 시간을 최소화하여, 본질적인 개발이나 가치 창출에 집중할 수 있는 세상'을 목표로 개발했습니다.

꼭 사용해 보시고 마음에 드신다면 GitHub에서 Star를 눌러주시면 감사하겠습니다!

GitHub 리포지토리: https://github.com/N-Y-Public/marp-slide-mcp - 이슈나 풀 리퀘스트(Issue / Pull Request)를 통한 요청 및 피드백도 환영합니다!