매거진 웹 PPT은(는) 무엇을 하나요?
이 스킬이 하는 일
다음과 같은 비주얼 톤의 단일 HTML 파일 가로 스와이프 데크를 생성합니다:
- 전자 매거진 + 전자 잉크 하이브리드 스타일
- WebGL 유체/컨투어/분산 배경 (히어로 페이지에서 표시)
- 세리프 헤드라인 (Noto Serif SC + Playfair Display) + 산세리프 본문 (Noto Sans SC + Inter) + 고정폭 메타데이터 (IBM Plex Mono)
- Lucide 라인 아이콘 (이모지 사용 금지)
- 가로 좌/우 페이지 이동 (키보드 ← →, 스크롤 휠, 터치 스와이프, 하단 도트, ESC 인덱스)
- 부드러운 테마 전환: 히어로 페이지로 넘어갈 때 색상과 셰이더가 부드럽게 전환됨
이 스킬의 미학은 "기업용 PPT"도, "소비자 인터넷 UI"도 아닙니다: Monocle 매거진에 코드가 덧붙여진 느낌입니다.
사용 시기
적합한 시나리오:
- 오프라인 강연 / 내부 업계 발표 / 프라이빗 살롱
- AI 신제품 런칭 / 데모 데이
- 개인 스타일이 강한 발표
- "한 번 만들어서 추가 도구 없이 사용할" 웹 버전 슬라이드
부적합한 시나리오:
- 긴 표 데이터, 누적 차트 (일반 PPT 사용)
- 교육 과정 자료 (정보 밀도가 너무 낮음)
- 여러 명의 협업 편집 (정적 HTML임)
워크플로우
0단계 · 방향 추론; 비교 요청 시에만 질문
브리핑, 청중, 콘텐츠 및 알려진 컨텍스트에서 5가지 매거진 방향 중 하나를 추론합니다. 각 방향은 테마 색상, 권장 레이아웃, 크롬 스타일 및 슬라이드 수를 패키지합니다. 가장 가까운 것을 사용하고 질문 없이 계속 진행합니다.
사용자가 방향 옵션을 보거나 비교하도록 명시적으로 요청하는 경우에만 references/styles.md를 열고 direction-cards 질문 양식에 1줄 요약을 제시합니다:
1. Monocle Editorial · 국제 매거진 스타일 ✦ 기본값
2. WIRED Tech · 데이터 + 엔지니어링
3. Kinfolk Slow · 슬로우 라이프 / 휴머니스트
4. Domus Architectural · 건축 / 공간감
5. Lab / Reference · 학술 + 장인 매뉴얼
사용자가 "잘 모르겠으니 추천해 달라"고 하거나 방향 신호를 제공하지 않는 경우: Monocle Editorial을 기본값으로 선택하고 질문하지 않습니다. 실패 확률이 가장 낮기 때문입니다. 사용자가 "AI / 벤치마크 / 기술 런칭"을 언급하면 WIRED를 선택합니다. "독서 / 프라이빗 / 사교계"를 언급하면 Kinfolk를 선택합니다. "디자인 / 건축 / 포트폴리오"를 언급하면 Domus를 선택합니다. "연구 / 학술 / 방법론"을 언급하면 Lab을 선택합니다.
방향을 선택한 후, 프로젝트 폴더에 项目记录.md (프로젝트 기록)을 생성 또는 업데이트하고, 첫 줄에 방향 + 테마 색상 + 청중 + 시간을 명확히 기재합니다 (styles.md 끝에 있는 템플릿 참조). 어떤 경우에도 방향을 변경하지 마십시오: 중간에 변경하면 이전 모든 작업이 무효화됩니다.
1단계 · 의도 파악
사용자가 이미 완전한 개요와 이미지를 제공한 경우 2단계로 바로 건너뜁니다.
브리핑, 프로젝트 메타데이터, 제공된 콘텐츠 및 대화에서 아래 체크리스트를 추론합니다. 누락된 답변이 데크를 실질적으로 변경하고 안전한 기본값이 없는 경우에만, 통합된 질문 양식에서 해결되지 않은 필드에 대해서만 질문합니다. 체크리스트를 하나씩 묻지 마십시오.
명확화 6문항 체크리스트
방향 및 테마 색상은 사용자가 명시적으로 옵션 비교를 요청하지 않는 한 0단계에서 추론됩니다.
| # | 질문 | 질문하는 이유 |
|---|---|---|
| 1 | 청중은 누구인가요? 공유 시나리오는 무엇인가요? (내부 업계 / 상업 런칭 / 데모 데이 / 프라이빗 살롱) | 언어 스타일과 깊이 결정 |
| 2 | 발표 시간은 얼마인가요? | 15분 ≈ 10페이지, 30분 ≈ 20페이지, 45분 ≈ 25-30페이지 (styles.md에서 각 방향의 권장 범위 참조) |
| 3 | 출처 자료가 있나요? (문서 / 데이터 / 기존 PPT / 기사 링크) | 자료가 있으면 이를 기반으로 구축하고, 없으면 구축을 도움 |
| 4 | 이미지가 있나요? 어디에 있나요? | 아래 "이미지 규칙" 참조 |
| 5 | ✓ 0단계에서 방향에 의해 이미 결정됨 | |
| 6 | 어려운 제약 조건이 있나요? (XX 데이터를 반드시 포함 / YY를 표시하지 않음) | 재작업 방지 |
개요 지원 (사용자에게 개요가 없는 경우)
"내러티브 아크" 템플릿을 사용하여 골격을 구축한 다음 콘텐츠를 채웁니다:
훅(Hook) → 1페이지 : 사람들을 멈추게 하는 대비 / 질문 / 확실한 숫자를 던짐
컨텍스트 → 1-2페이지 : 배경 설명 / 자신 소개 / 이 주제를 다루는 이유
핵심 → 3-5페이지 : 핵심 콘텐츠, 레이아웃 4/5/6/9/10 혼합
전환(Shift) → 1페이지 : 기대를 깨고 / 새로운 관점 제시
요점(Takeaway)→ 1-2페이지 : 결정적 한마디 / 긴장감 넘치는 질문 / 행동 촉구
내러티브 아크 + 페이지 수 계획 + 테마 리듬 표 (layouts.md 참조); 2단계로 이동하기 전에 세 표를 모두 정렬합니다.
개요를 项目记录.md (프로젝트 기록) 또는 大纲-v1.md (개요 v1)으로 저장하여 나중에 반복 작업할 수 있도록 하는 것이 좋습니다.
이미지 규칙 (사용자에게 알림)
시작하기 전에 다음 사항을 사용자에게 명확히 알리십시오:
- 폴더 위치:
项目/XXX/ppt/images/아래 (index.html과 동일한 레벨) - 명명 규칙:
{페이지 번호}-{의미}.{확장자}, 예:01-cover.jpg/03-figma.jpg/05-dashboard.png- 페이지 번호를 0으로 채워 쉽게 정렬
- 의미 부분은 영어로, 짧고 구체적이며 내용과 일치
- 권장 사양:
- 각 이미지 ≥ 1600px 너비 (대형 화면에서 흐려짐 방지)
- 사진/스크린샷은 JPG, 투명 UI/차트는 PNG
- 총 크기 10MB 미만 유지 (페이지 전환 부드러움에 영향)
- 교체 방법: 동일 이름 덮어쓰기가 가장 안정적입니다 (HTML에서 경로를 변경할 필요 없음). 파일 이름이 변경된 경우 HTML 전체에서
images/oldname을 검색하여 새 이름으로 변경하는 것을 잊지 마십시오. - 이미지가 없는 경우: 사용자와 협의하십시오. 먼저 자리 표시자 색상 블록으로 구조를 생성하고 나중에 이미지를 채울 수 있지만, 레이아웃 4/5/10과 같은 이미지-텍스트 혼합 페이지는 이미지 없이 비주얼을 확인할 수 없다고 알리십시오.
2단계 · 템플릿 복사
assets/template.html을 대상 위치(일반적으로 项目/XXX/ppt/index.html)에 복사하고, 동일한 레벨에 images/ 폴더를 생성하여 이미지를 받을 준비를 합니다.
mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"
template.html은 완전하고 실행 가능한 파일입니다: CSS, WebGL 셰이더, 페이지 이동 JS, 글꼴/아이콘 CDN이 모두 사전 설정되어 있습니다. <main id="deck"> 내부에만 3개의 예제 슬라이드(커버, 액트 구분선, 빈 채움 페이지)가 있습니다.
2.1 · 변경해야 할 자리 표시자 (놓치기 쉬움)
복사 직후 아래 자리 표시자를 변경하지 않으면 브라우저 탭에 "[필수] PPT 제목으로 바꾸기"와 같은 어색한 텍스트가 표시됩니다:
| 위치 | 원본 | 변경할 내용 |
|---|---|---|
<title> | [필수] PPT 제목으로 바꾸기 · Deck Title | 실제 데크 제목 (예: 새로운 업무 방식 · Luke Wroblewski) |
template.html을 복사할 때마다 가장 먼저 해야 할 일: "[필수]"를 grep하여 모든 것이 대체되었는지 확인합니다.
2.2 · 테마 색상 선택 (5가지 사전 설정 · 사용자 정의 불가)
이 스킬은 신중하게 조정된 5가지 사전 설정 중 하나만 선택할 수 있습니다. 사용자 정의 16진수 값을 허용하지 않습니다: 잘못된 색상 조합은 순식간에 비주얼을 망치며, 미학을 보호하는 것이 자유를 제공하는 것보다 중요합니다.
| # | 테마 | 최적 대상 |
|---|---|---|
| 1 | 🖋 잉크 클래식 | 일반 / 상업 런칭 / 무엇을 선택해야 할지 모를 때 기본값 |
| 2 | 🌊 인디고 포슬린 | 기술 / 연구 / 데이터 / 기술 기조연설 |
| 3 | 🌿 포레스트 잉크 | 자연 / 지속 가능성 / 문화 / 논픽션 |
| 4 | 🍂 크래프트 페이퍼 | 향수 / 휴머니스트 / 문학 / 인디 매거진 |
| 5 | 🌙 둔 | 예술 / 디자인 / 창의성 / 갤러리 |
수행 방법:
- 콘텐츠 테마에 따라 하나를 추천하거나, 사용자에게 선택하도록 요청합니다.
references/themes.md를 열고 해당 테마의:root블록을 찾습니다.assets/template.html(복사된 버전)의 여는:root{블록에서 "테마 색상" 주석으로 표시된 줄을 전체적으로 교체합니다:--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint- 다른 모든 CSS는
var(--...)를 통해 흐르므로 다른 변경이 필요하지 않습니다.
엄격한 규칙:
- 하나의 데크는 하나의 테마만 사용합니다. 중간에 색상을 변경하지 마십시오.
- 사용자의 임의 16진수 값을 수락하지 마십시오: 정중히 거절하고 5가지 사전 설정을 보여주고 선택하도록 하십시오.
- 혼합하지 마십시오 (예: Ink Classic에서 잉크를 가져오고 Dune에서 종이를 가져오는 경우): 완전히 충돌합니다.
3단계 · 콘텐츠 채우기
3.0 · 사전 확인: 클래스 이름이 template.html에 정의되어야 함 (가장 중요)
이것이 모든 생성 문제의 근원입니다. layouts.md 스켈레톤은 많은 클래스 이름(h-hero / h-xl / stat-card / pipeline / grid-2-7-5 등)을 사용합니다. assets/template.html의 <style>에 해당 정의가 없으면 브라우저는 기본 스타일로 대체됩니다: 큰 제목이 산세리프로 바뀌고, 데이터 카드가 덩어리로 줄어들고, 파이프라인이 한 줄로 뭉개지고, 이미지가 페이지 아래에 쌓입니다.
슬라이드 코드를 작성하기 전에:
- 먼저
assets/template.html을 읽습니다 (적어도<style>블록 끝까지) - layouts.md의 사전 비행 목록과 대조하여, 사용하려는 모든 클래스가
<style>에 존재하는지 확인합니다. - 클래스가 누락된 경우: template.html의
<style>에 추가하고, 모든 슬라이드에 인라인으로 다시 작성하지 마십시오. - template.html은 클래스 이름의 단일 소스입니다: 새 클래스 이름을 만들지 마십시오. 사용자 정의가 필요한 경우 인라인
style="..."를 사용하십시오.
일반적으로 누락되는 클래스 (사전에 존재하는지 확인해야 함):
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
3.0.5 · 테마 리듬 계획 (클래스 사전 확인만큼 중요)
레이아웃을 선택하기 전에, 먼저 각 페이지의 테마 클래스(hero dark / hero light / light / dark)를 나열하고 문서 또는 초안에 기록하여 정렬해야 합니다. 자세한 규칙은 references/layouts.md 상단의 "테마 리듬 계획" 섹션을 참조하십시오.
필수 규칙:
- 모든 페이지 섹션은
light/dark/hero light/hero dark중 하나를 가져야 합니다.hero만 쓰지 마십시오. - 동일한 테마의 3페이지 이상 연속 = 시각적 피로, 허용되지 않습니다.
- 8페이지 이상인 경우 ≥1개의
hero dark+ ≥1개의hero light가 있어야 합니다. - 전체 데크가
light본문 페이지만 가질 수 없습니다. 숨 쉴 공간을 만들기 위해dark본문 페이지가 있어야 합니다. - 3-4페이지마다 1개의 히어로 페이지(커버/구분선/질문/큰 인용문)를 삽입하십시오.
생성 후 자체 점검: grep 'class="slide' index.html로 모든 테마를 나열하고 전달하기 전에 리듬이 합리적인지 수동으로 확인하십시오.
3.1 · 레이아웃 선택
처음부터 슬라이드를 작성하지 마십시오. references/layouts.md를 엽니다. 10개의 기성 레이아웃 스켈레톤이 있으며, 각각 완전하고 붙여넣기 준비가 된 <section> 코드 블록입니다:
| 레이아웃 | 용도 |
|---|---|
| 1. 커버 | 1페이지 |
| 2. 액트 구분선 | 각 액트의 시작 |
| 3. 큰 숫자 | 확실한 데이터 제시 |
| 4. 리드 이미지 + 텍스트 (인용문 + 이미지) | 정체성 대비 / 스토리 |
| 5. 이미지 그리드 | 여러 이미지 비교 / 스크린샷 증거 |
| 6. 2열 파이프라인 (Pipeline) | 워크플로우 프로세스 |
| 7. 서스펜스 종료 / 질문 페이지 | 액트 종료 / 마무리 |
| 8. 큰 인용문 페이지 (Big Quote) | 세리프 결정적 한마디 / 요점 |
| 9. 나란히 비교 (Before / After) | 이전 모델 vs 새 모델 |
| 10. 이미지 + 텍스트 혼합 (리드 이미지 + 사이드 텍스트) | 정보 밀도가 높은 이미지-텍스트 페이지 |
해당 레이아웃을 선택하고 붙여넣은 다음, 텍스트와 이미지 경로를 변경하십시오. 먼저 3.0 사전 확인을 완료하십시오.
3.2 · 이미지 비율 규칙
항상 표준 비율을 사용하고, 원본 이미지의 잘못된 비율(예: 2592/1798)을 사용하지 마십시오:
| 시나리오 | 권장 비율 |
|---|---|
| 리드 이미지 + 텍스트, 메인 이미지 | 16:10 또는 4:3 + max-height:56vh |
| 이미지 그리드 (여러 이미지 비교) | 고정 height:26vh, aspect-ratio 사용 금지 |
| 작은 이미지 왼쪽 + 텍스트 오른쪽 | 1:1 또는 3:2 |
| 전체 화면 히어로 비주얼 | 16:9 + max-height:64vh |
| 이미지 + 텍스트 혼합, 작은 삽입 이미지 | 3:2 또는 3:4 |
이미지에 align-self:end를 절대 사용하지 마십시오: 이미지가 셀 아래로 밀려나 브라우저 도구 모음에 가려집니다. 그리드 컨테이너 + align-items:start(템플릿에 이미 사전 설정됨)를 사용하여 이미지가 위쪽에 고정되도록 하십시오. 왼쪽 열을 아래쪽에 고정하려면 flex column + justify-content:space-between을 사용하십시오.
구성 요소 세부 정보(글꼴, 색상, 그리드, 아이콘, 콜아웃, 통계 카드 등)는 references/components.md에 있습니다.
4단계 · 체크리스트에 따른 자체 점검
생성 후, 항상 references/checklist.md를 열고 항목별로 확인하십시오. 실제 반복 중에 밟힌 모든 함정을 요약합니다. P0 수준 문제(이모지, 이미지 튀어나옴, 제목 줄바꿈, 유형 분업)는 모두 통과해야 합니다.
특히 주의해야 할 몇 가지 항목:
- 큰 제목은 세리프여야 합니다: 산세리프로 표시되는 경우 99%는 3.0단계 사전 확인이 수행되지 않아
h-hero클래스가 template.html에 누락된 것입니다. - 이미지 그리드에서는
height:Nvh만 사용하고aspect-ratio는 사용하지 마십시오 (튀어나옴). - 이미지가 페이지 아래에 쌓이지 않아야 합니다:
align-self:end를 사용하지 말고 grid +align-items:start를 사용하십시오 (3.2단계 참조). - 이미지는 표준 비율만 사용해야 합니다 (16:10 / 4:3 / 3:2 / 1:1 / 16:9), 원본 이미지의 잘못된 비율을 복사하지 마십시오.
- 중국어 큰 제목은 5자 이하이고
nowrap을 사용합니다 (한 줄에 한 글자 방지). - Lucide를 사용하고, 이모지를 사용하지 마십시오.
- 제목은 세리프, 본문은 산세리프, 메타데이터는 고정폭을 사용합니다.
5단계 · 로컬 미리보기
브라우저에서 index.html을 직접 엽니다. macOS에서:
open "项目/XXX/ppt/index.html"
로컬 서버가 필요하지 않습니다. 이미지는 상대 경로 images/xxx.png를 사용합니다.
6단계 · 반복
사용자 피드백에 따라 수정합니다. 템플릿의 CSS는 고도로 매개변수화되어 있으며, 조정의 90%는 이미지 변경, 텍스트 자르기, 콜아웃 박스 추가 등입니다. 템플릿의 CSS를 건드릴 필요가 거의 없습니다.
참조
이 스킬은 다음 문서를 참조합니다:
references/styles.md— 5가지 매거진 방향 개요 (Monocle Editorial, WIRED Tech, Kinfolk Slow, Domus Architectural, Lab / Reference)references/themes.md— 5가지 사전 설정 테마의 CSS 변수 블록references/layouts.md— 10가지 레이아웃 스켈레톤 + 중첩 라이브러리 + 테마 리듬 계획 규칙references/components.md— 구성 요소별 세부 정보 (글꼴, 색상, 그리드, 아이콘, 콜아웃, 통계 카드 등)references/checklist.md— 생성 후 자체 점검 체크리스트assets/template.html— 기본 템플릿 파일