B2B 제안서 자동 생성을 위해 슬라이드 스킬 3개를 써봤는데, 아직 갈 길이 멀다

📝 한줄 요약

B2B 제안/정부과제용 슬라이드를 AI로 자동 생성하려고 Claude Code의 슬라이드 스킬 3종을 비교해봤다. 디자인 시스템 적용은 잘 되지만, 정보 밀도 높은 슬라이드의 레이아웃과 텍스트 배치는 아직 갈 길이 멀었다.

🎯 이런 분들께 도움돼요

• AI로 제안서나 발표 자료를 자동으로 만들어보고 싶은 마케터, 기획자, 영업 담당자

• Claude Code, Codex 등 AI 코딩 도구로 문서 자동화를 시도하려는 분

• 슬라이드 생성 자동화의 현실적인 수준이 궁금한 분

😫 문제 상황 (Before)

B2B 교육 제안이나 정부과제 제안을 할 때마다 비슷하지만 내용이 조금씩 다른 슬라이드를 만들어야 했다. 회사 소개, 문제 정의, 제공 서비스 구성은 매번 비슷한데, 제안 대상에 따라 강조점이 달라지니 매번 수동으로 수정하고 있었다.

"이걸 자동으로 만들 수 있으면 좋겠다"는 생각에 Claude Code에서 쓸 수 있는 슬라이드 생성 스킬 3가지를 직접 비교해보기로 했다.

이전에 채용 자동화 작업기는 여기에 작성했다.

🛠️ 사용한 도구

• 도구명: Claude Code

• 모델: Claude Opus 4.6

• 비교 대상 스킬: html-slides (HTML 기반), OpenAI slides 스킬 (pptxgenjs), Anthropic pptx-creator 스킬 (pptxgenjs)

• 기타: LibreOffice (PDF 변환), PyMuPDF (시각 QA)

🔧 작업 과정

디자인 시스템부터 만들자 — 뽀짝이 카드가 예뻤던 이유

우리 팀에는 "뽀짝이"라는 OpenClaw 에이전트가 있다. 매일 업무 일지를 작성하면서 카드 이미지를 첨부하는데, 이 카드 디자인이 꽤 괜찮다. HTML로 카드를 만든 뒤 Playwright로 스크린샷을 찍어 이미지화하는 방식인데, 이 카드들의 디자인이 일관되게 예쁜 이유는 design-system.md라는 디자인 시스템 파일이 있기 때문이다.

<뽀짝이(오픈클로 에이전트)가 만든 업무 일지 내의 이미지>

"이 디자인 시스템을 슬라이드에도 적용하면 되지 않을까?" 하는 생각에서 작업이 시작됐다.

@design-system.md 는 웹에서 블로그 글과 같은 것을 쓸때 중간에 삽입할 카드 이미지를 생성하기 위한 디자인 시스템이야. 이걸 활용하는 슬라이드 디자인 시스템을 만들고 싶어.

Claude Code에 이렇게 요청하니, 먼저 사용 가능한 슬라이드 스킬들을 조사해주었다.

슬라이드 스킬 3종 비교 — 어떤 걸 써야 하나

Claude Code에서 쓸 수 있는 슬라이드 생성 스킬은 크게 세 가지였다:

핵심 차이는 HTML vs pptxgenjs였다. HTML은 CSS를 완전히 쓸 수 있어서 glassmorphism이나 그라데이션 같은 디자인이 가능하지만, pptxgenjs는 flat 색상과 테두리 정도만 쓸 수 있다.

slides 와 pptx-creator 스킬: 디자인 시스템 변환 — CSS를 pptxgenjs로 옮기기

기존 design-system.md의 베이지 톤 컬러 팔레트와 타이포그래피를 pptxgenjs에서 쓸 수 있는 형태로 변환했다.

pptx-creator 스킬을 써서 @design-system.md 의 카드 디자인 시스템을 적용해서 슬라이드를 만들 수 있게 slide-design-cc.md 파일로 작성해줘.

Claude Code가 만들어준 slide-design-cc.md에는 이런 것들이 들어갔다:

• 배경색, 텍스트색, 액센트색 등 컬러 팔레트 (HEX + pptxgenjs 값)

• 폰트 크기와 굵기 규칙

• 카드, 배지, 하단 바 등의 pptxgenjs 코드 패턴

• 타이틀/콘텐츠/Before-After/KPI 등 레이아웃 패턴

디자인 시스템 파일을 만들어두면, 이후에 슬라이드를 만들 때 @slide-design-cc.md로 컨텍스트에 포함하기만 하면 색상과 폰트가 일관되게 적용된다. 이 부분은 확실히 잘 작동했다.

실제 슬라이드 생성 — 콘텐츠 마크다운 → .pptx

회사 소개 슬라이드 내용을 01-overview.md에 정리해두고, 디자인 시스템과 함께 넘겼다.

@01-overview.md 에 나와있는 슬라이드 내용을 @slide-design-cc.md 의 디자인시스템을 따라서 pptx-creator 스킬로 슬라이드 덱으로 만들어줘.

Claude Code가 pptxgenjs 스크립트를 작성하고 실행해서 3장짜리 .pptx 파일을 생성했다:

• 표지: 회사 소개 + 3가지 핵심 제공 항목

• WHY NOW: 78% vs 30% 막대 차트 + 기존 대안 비교표

• WHAT WE OFFER: AI 교육 서비스 KPI + Rona 기능 소개

OpenAI slides 스킬 결과물

Claude의 pptx-creator 스킬

Visuals의 html-slides 스킬 (원래 스킬 이름은 slides)

에이전트의 시각 QA — 눈으로 확인해보니

Codex와 Claude Code 에이전트는 시각 QA를 위해서 생성된 pptx를 LibreOffice를 사용해서 PDF로 변환 후 PyMuPDF로 각 페이지를 이미지로 렌더링해서(png로 바꿔서) 확인했다.

AI의 QA
→ 디자인 시스템 적용은 잘 됐다 - 라고 배포. 베이지 배경, 퍼플 액센트, 카드 스타일, 배지 등이 일관되게 들어갔다 -- 라고 판단해서 QA 패스.

사람이 보면
→ 레이아웃이 문제다. 텍스트가 카드 영역을 벗어나거나, 요소들 사이 간격이 어색하거나, 정보가 빽빽한 슬라이드에서 텍스트 크기와 위치가 잘 맞지 않았다. 내가 머릿속에 그린 "한 슬라이드에 차트 + 표 + 핵심 메시지가 깔끔하게 들어간" 정보 밀도 높은 슬라이드와는 거리가 있었다.

왜 뽀짝이 카드는 잘 되는데 슬라이드는 안 될까?

여기서 흥미로운 의문이 생겼다. 같은 디자인 시스템을 쓰는데, 뽀짝이의 카드 이미지는 매번 깔끔하게 나온다. 왜 슬라이드는 그만큼 안 될까?

생각해보면 차이가 있다:

• 카드: 고정된 크기, 단순한 구조 (제목 + 본문 + 아이콘 정도), HTML/CSS로 자유롭게 제어

• 슬라이드: 다양한 레이아웃, 복잡한 정보 구조 (차트 + 표 + 텍스트 조합), pptxgenjs의 좌표 기반 배치

결국 에이전트가 레이아웃을 그릴 수 있는 자유도와 정보 밀도 / 레이아웃 복잡도의 차이다. HTML을 만들 때 훨씬 자유도가 높아서 레이아웃이 잘 배치된 슬라이드를 만든다. 하지만 pptxgenjs는 그 한계가 있고, 결과에 대한 예상을 에이전트가 잘 못하는 것 같다. 또한, 내가 원하는 슬라이드 덱은 한장 한장에 꽤나 복잡한 메시지를 담아야 하는데 그 레이아웃을 HTML이라고 할지라도 잘 담아내지 못하는 것 같았다. 너무 복잡한 것을 하는 것 때문일 수도 있겠다.

그런데 어떻게 뽀짝이는 그렇게 카드를 잘 만들까??? 이 부분은 더 알아봐야 할 부분 같다.

✅ 결과 (After)

Before vs After

3종 비교 결론

HTML로 만들었을 때가 그나마 레이아웃을 가장 잘 잡아주었고, 텍스트 겹침 등의 문제가 전혀 없었다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. pptx보다 HTML로 만드는 게 레이아웃 품질이 훨씬 낫다. CSS의 flexbox, grid 등을 활용할 수 있어서 요소 배치가 자연스럽다. pptxgenjs는 좌표를 직접 지정해야 해서 겹침이나 여백 문제가 발생하기 쉽다.

2. 디자인 시스템 파일을 미리 만들어두면 색상/폰트 일관성은 확실히 잡힌다. 매번 "베이지 톤으로 해줘"라고 말하는 것보다, 컬러 코드와 규칙이 정리된 파일을 컨텍스트로 주는 게 훨씬 정확하다.

이렇게 하면 안 돼요

1. 정보 밀도 높은 슬라이드를 AI에게 한 번에 맡기면 안 된다. 차트 + 표 + 텍스트가 복잡하게 들어가는 슬라이드는 플래닝을 먼저 잘 해야 한다. 각 슬라이드의 레이아웃과 텍스트 배치를 사전에 설계하지 않으면 결과물이 어수선해진다. 이 플래닝이 레이아웃 플래닝도 포함해야 하는데 어떻게 잘 할 수 있을지는 아직 실험이 많이 필요한 것 같다.

🌍 다른 업무에 적용한다면?

• 정기 리포트 자동화: 매주/매월 반복되는 보고서를 HTML 템플릿으로 만들어두고, 데이터만 바꿔 자동 생성

• 교육 자료 생성: 교육 과정별로 콘텐츠 마크다운을 준비해두면, 디자인 시스템 적용된 슬라이드를 빠르게 생성 가능

• 단, 단순한 구조의 슬라이드에 한정: 텍스트 카드, KPI 숫자, 간단한 비교표 정도는 잘 되지만, 복잡한 레이아웃은 수동 보정이 필요

🚀 앞으로의 계획

1. 플래닝 단계 개선: 슬라이드별 레이아웃과 텍스트 배치를 먼저 설계한 뒤 생성하는 워크플로우를 실험해볼 예정이다. AI가 "무엇을 만들지"뿐 아니라 "어떻게 배치할지"까지 계획하게 하면 결과가 달라질 수 있다.

2. HTML 기반 파이프라인 구축: 레이아웃 품질이 가장 좋았던 HTML 방식을 중심으로, 고객별로 내용만 바꿔 자동 생성하는 제안서 파이프라인을 만들 계획이다.

3. 수정 없이 바로 쓸 수 있는 수준까지 도달하려면 상당한 실험이 더 필요하다. 현재는 "80% 자동 + 20% 수동 보정" 정도가 현실적인 수준같아 보인다.