지난주, 저는 리지강(李继刚) 선생님의 초청을 받아 AI와 조직에 관한 비공개 공유 세션 인터뷰를 진행했습니다.
세션이 끝난 후 가장 많이 받은 질문은 "그 PPT는 뭘로 만든 거예요? 오픈소스로 공개해 주실 수 있나요?"였습니다.
부산물이 주인공이 될 줄은 몰랐습니다.
그래서 오픈소스로 공개하기로 결정했고, 이름은 guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill))로 지었습니다.
오늘 글에서는 이 Skill이 어떻게 생겼는지, 그리고 10년 차 디자이너인 제가 왜 이 Skill이 예쁘다고 생각하는지에 대해 이야기해 보겠습니다.
어떻게 생겼나
Skill로 생성된 PPT를 열었을 때 첫인상은 아마 이럴 겁니다: "이거 AI가 만든 거 같지 않은데?"
몇 가지 직관적인 특징:
- 표지: 먹물 색감의 배경 + 세리프체 메인 타이틀, 뒤에서 은은하게 흐르는 WebGL 유체 효과.
- 본문: 배경색이 종이처럼 하얗게 바뀌고 그 위에 먹물색 텍스트가 인쇄된 듯, 마치 펼쳐진 인쇄 잡지 같습니다.
- 페이지 넘기기: 가로 좌우 슬라이드, 키보드, 스크롤 휠, 터치 제스처 지원—표준 PowerPoint의 "다음 슬라이드"와는 다릅니다.
- 메타데이터: 각 페이지 모서리에는 "Act II · 15 / 25"와 같은 신문 페이지 번호처럼 작은 고정폭 글꼴 텍스트가 있습니다.
이 비주얼 톤에 이름을 붙였습니다: "전자 잡지 × E-Ink."
영감은 Monocle, The Guardian, NYT 같은 인쇄 잡지의 레이아웃 전통에서 얻었고, Kindle 전자책의 독서 미학을 더했으며, 현대적인 Web 인터랙션 문법으로 마무리했습니다.
무엇을 할 수 있나
이 Skill은 현재 10가지 페이지 레이아웃, 5가지 테마 색상 프리셋, 그리고 완전한 페이지 넘기기 인터랙션 세트를 제공합니다.
10가지 레이아웃은 15-30페이지 분량의 공유 세션에서 사용되는 거의 모든 페이지 유형을 다룹니다:
오프닝 커버, 챕터 구분, 데이터 포스터, 텍스트-좌측-이미지-우측, 이미지 그리드, 파이프라인 프로세스, 서스펜스 질문, 큰 인용문, Before/After 비교, 텍스트-이미지 혼합 레이아웃.
각각은 바로 붙여넣을 수 있는 HTML 스켈레톤입니다. 텍스트와 이미지만 바꾸면 사용할 수 있습니다.
5가지 테마는 각각 다른 시나리오에 대응합니다:
- Ink Classic — 비즈니스 발표, 일반 기본값
- Indigo Porcelain — 기술, 연구, AI 컨퍼런스
- Forest Ink — 자연, 지속 가능성, 인문학
- Kraft Paper — 향수, 문학, 독립 잡지
- Dune — 예술, 디자인, 창의성
각 테마는 단지 6개의 CSS 변수 값 세트가 다를 뿐입니다. 테마를 전환하려면 :root에서 그 6줄의 코드만 바꾸면 됩니다.
사용자는 16진수 색상 코드를 직접 지정할 수 없습니다. 이유는 나중에 설명하겠습니다.
페이지 넘기기 인터랙션은 키보드 좌/우 화살표, 마우스 휠, 터치 슬라이딩, 하단 점프 버튼, ESC 키로 썸네일 인덱스 열기를 지원합니다.
목표는 브라우저에서 실제 잡지를 넘기는 경험에 최대한 가깝게 하는 것입니다.
출력물은 단일 파일 HTML입니다. 더블클릭하면 브라우저에서 볼 수 있습니다. 다른 사람에게 보낼 때도 파일 하나면 되므로, 다른 컴퓨터에서 글꼴이나 애니메이션이 깨질 걱정을 할 필요가 없습니다.
사용 방법
사실 이 Skill의 진정한 가치는 템플릿 자체가 아니라, 인간 × AI 협업으로 PPT를 만드는 인터페이스를 정의했다는 점에 있습니다.
제가 일주일 동안 직접 사용해보고 다른 사람들에게 가장 알려줄 가치가 있다고 생각하는 세 가지가 있습니다.
먼저 AI와 이 6가지를 명확히 하세요
Skill이 설치되면 "잡지 스타일 PPT 만들어 줘"라고 말하기만 하면 Claude가 능동적으로 6가지 질문을 합니다:
- 청중과 시나리오는 무엇인가요? (내부 업계 / 비즈니스 발표 / 비공개 공유)
- 공유 시간은 얼마인가요? (15분 ≈ 10페이지, 30분 ≈ 20페이지)
- 원본 자료가 있나요? (문서, 데이터, 기존 PPT, 기사 링크)
- 이미지가 있고, 어디에 있나요?
- 어떤 테마 색상을 원하시나요? (5가지 프리셋 중 선택)
- 하드 제약 조건이 있나요? (XX 데이터 반드시 포함 / YY 표시 불가)
한 번에 다 말할 필요 없고, 하나씩 물어볼 것입니다. 답변을 마치면 먼저 개요와 테마 리듬 표를 제공합니다. 코드를 작성하기 전에 먼저 정렬하세요—이 단계는 제 재작업의 80%를 방지해 줍니다.
예전에 AI로 PPT를 만들 때 가장 큰 문제점은 AI가 바로 쓰기 시작해서 10페이지쯤 가서야 방향이 잘못되었다는 것을 깨닫는 것이었습니다. 이 명확화 과정은 "정렬"을 맨 처음으로 옮깁니다.
이미지 삽입 방법
이미지는 index.html과 같은 레벨의 images/ 폴더에 특정 명명 규칙으로 배치됩니다:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- 0으로 채워진 페이지 번호 + 영어 의미—1 대신 01, fengmian 대신 cover. 이렇게 하면 정렬이 쉽고 AI 참조가 명확해집니다.
- 사진은 JPG, 스크린샷은 PNG 사용—스크린샷에는 텍스트가 포함되어 있으므로 PNG가 선명도를 유지합니다.
- 단일 이미지 너비 ≥ 1600px—대형 스크린 프로젝션에서 흐릿하지 않도록 합니다.
Claude에게 "3페이지는 Figma 인터페이스 스크린샷이야"라고 말하기만 하면 자동으로 images/03-figma.png라고 씁니다. 같은 이름의 파일을 폴더에 넣기만 하면 됩니다.
무손실 이미지 교체의 비결: 같은 이름으로 덮어쓰기
이것은 제가 겪은 가장 큰 함정입니다—카피가 끝난 후 이미지를 바꾸고 싶어서 전체 경로를 찾아 바꾸면 HTML이 자주 깨집니다.
올바른 방법은 단 한 문장입니다: 새 이미지로 같은 이름의 기존 이미지를 덮어쓰고, HTML의 문자 하나도 바꾸지 마세요.
왜 이렇게 생겼나
사용 방법을 이야기했으니, 이제 왜 이렇게 생겼는지에 대해 이야기해 보겠습니다.
좋은 디자인은 신비로운 것이 아닙니다. 분해 가능한 결정들의 집합입니다. 제가 한 것은 본질적으로 잡지 업계가 100년 넘게 축적해 온 레이아웃 언어를 HTML로 옮긴 것입니다.
타이포그래피의 3단계 구분
- 세리프체 → "의견". 메인 타이틀에 세리프체를 사용하면 독자는 즉시 "이것은 진지하게 받아들여야 할 문장이다"라고 느낍니다.
- 산세리프체 → "정보". 본문 텍스트는 고밀도로, 읽기 쉽습니다.
- 고정폭 글꼴 → "메타데이터". 머리글과 바닥글의 챕터 번호, 날짜, 페이지 번호는 잡지 바닥글이나 터미널의 코드와 같습니다.
독자는 깊이 생각할 필요 없이, 눈이 자동으로 어떤 문장이 본문인지 각주인지 알 수 있습니다.
색상 규율
종이처럼 하얀색, 먹물색, 그리고 하나의 강조 색상이면 충분합니다.
순수한 흰색은 눈부시고, 순수한 검은색은 공격적입니다. 인쇄 업계는 절대 그렇게 하지 않으며, Kindle도 마찬가지입니다.
Skill의 5가지 테마 중 어느 것도 배경색이 #FFFFFF가 아니며, 텍스트 색상이 #000000인 경우도 없습니다.
각 세트는 6개의 CSS 변수만 노출하며, SKILL.md에는 명시적으로 명시되어 있습니다: 사용자는 16진수 색상 코드를 직접 지정할 수 없으며, 다섯 가지 중 하나를 선택해야 합니다.
제약 조건이 엄격할수록 스타일은 더 안정적입니다. 미학을 보호하는 것이 사용자에게 자유를 주는 것보다 더 중요합니다.
그리드와 리듬
7:5, 6:6, 8:4와 같은 고정 그리드는 한 페이지 내에서 질서를 보장합니다.
히어로 페이지와 비히어로 페이지는 번갈아 가며 전체 덱의 리듬을 보장해야 합니다.
한 페이지는 빽빽하고, 다음 페이지는 여유롭게—이것이 잡지를 넘길 때 느껴지는 "숨 쉬는" 감각입니다.
Skill에는 하드 규칙이 하나 있습니다: 동일한 테마의 페이지가 3페이지 연속으로 이어지면 P0 오류로 간주합니다.
리듬이 없는 PPT는 그저 PDF로 쌓아 올린 슬라이드 더미에 불과합니다.
마지막 말
위의 규칙 중 어느 것도 제가 발명한 것이 아닙니다.
저는 10년 동안 디자이너로 일하며 UI, 인터랙션, AI 효과를 해왔습니다. 이것들은 사실 업계의 상식입니다.
저는 단지 그것들을 하나씩 SKILL.md와 checklist.md에 작성하여 AI가 저를 위해 실행할 수 있도록 한 것뿐입니다.
다시 말해, 이 Skill은 제 10년 미학의 압축 패키지입니다.
예전에는 괜찮은 PPT를 만들기 위해 이틀 동안 수동으로 그리드를 조정하고, 글꼴 크기를 선택하고, 색상 값을 골라야 했습니다.
이제는 자료를 AI에 던져주기만 하면 AI가 이 규칙에 따라 조립하고, 저는 확인만 하면 됩니다.
그렇기 때문에 감히 오픈소스로 공개하는 것입니다.
규칙은 저만의 독점물이 아니었습니다. Monocle 디자이너들은 저보다 수십 년 전에 이미 사용했습니다. 저는 그것들을 2026년 HTML로 복사했을 뿐입니다.
Skill은 이미 GitHub에 있습니다: github.com/op7418/guizang-ppt-skill
README에는 "AI 설치 프롬프트"가 포함되어 있습니다. 복사하여 Claude Code나 다른 AI Agent에 붙여넣으면 자동으로 설치가 완료됩니다. 설치가 완료되면 "잡지 스타일 PPT 만들어 줘"라고 말하면 실행됩니다.
Bloome Agent 내에서도 사용할 수 있으며, 현재 무료입니다:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
이 내용이 도움이 되셨다면, 좋아요를 눌러 주시거나 필요로 하는 친구들에게 공유해 주세요.
댓글로 이 Skill로 만든 PPT를 공유해 주셔도 좋습니다.
