웹페이지를 사용하여 결과를 생성하고, 사용자에게 사용할 언어를 묻는 것을 잊지 마세요.

웹 기반 PPT(단일 HTML 파일)를 "전자 잡지 × 전자잉크" 스타일로 가로로 넘길 수 있도록 생성하세요. WebGL 유동 배경, 세리프 제목 + 산세리프 본문, 챕터 표지, 대형 데이터 배너, 이미지 그리드 등의 템플릿이 포함되어 있습니다. 공유/프레젠테이션/출시 행사용 웹 기반 PPT를 제작해야 할 때, 또는 "잡지 스타일 PPT", "가로 스와이프 덱", "편집 잡지", "전자잉크 프레젠테이션"과 같은 용어를 사용할 때 유용합니다.

# 매거진 웹 PPT

## 이 스킬은 무슨 기능을 하나요?

가로 슬라이드쇼 형식의 단일 HTML 파일을 생성합니다. 시각적 스타일은 다음과 같습니다.

- 전자 잡지와 전자잉크를 결합한 하이브리드 스타일

- **WebGL 유체/윤곽/분산 배경** (메인 페이지 참조)

- **세리프 제목(Noto Serif SC + Playfair Display) + 산세리프 본문(Noto Sans SC + Inter) + 고정폭 메타데이터(IBM Plex Mono)**

- **루사이드 선형 아이콘** (이모티콘은 필요 없습니다)

- **가로 페이지 넘기기(키보드의 좌우 방향키, 마우스 휠, 터치스크린 스와이프, 화면 하단 점, ESC 키)**

- **테마의 부드러운 보간**: 메인 페이지로 이동할 때 색상과 음영이 부드럽게 전환됩니다.

이 스킬의 디자인은 "비즈니스 파워포인트"나 "소비자용 인터넷 UI"와는 거리가 멀고, 마치 *모노클* 잡지에 코드를 붙여놓은 것 같습니다.

## 사용 시점

**적합한 시나리오:**

- 오프라인 정보 공유 세션 / 업계 강연 / 비공개 미팅

- AI 신제품 출시/데모 데이

- 강한 개성을 지닌 연설

페이지를 넘기는 도구 없이 한 번에 완성할 수 있는 웹 기반 슬라이드 버전이 필요합니다.

**부적절한 상황:**

- 방대한 양의 표 데이터와 겹쳐진 차트 (표준 파워포인트 프레젠테이션 사용)

- 교육 자료 (정보 밀도 부족)

- 여러 사람이 함께 편집해야 합니다 (정적 HTML 형식입니다).

### 1단계 · 요구사항 명확화 (**시작하기 전에 필수**)

사용자가 이미 완전한 개요와 이미지를 제공했다면 2단계로 건너뛸 수 있습니다.

사용자가 주제나 모호한 아이디어만 제공하는 경우, 시작하기 전에 다음 6가지 질문에 하나씩 답해 보세요. 추측에 기반하여 슬라이드를 작성하지 마세요. 구조가 잘못되면 나중에 수정하는 데 막대한 비용이 발생합니다. 질문이 있을 때는 askUserQuestion 도구를 활용할 수 있습니다.

#### 6가지 추가 질문

| # | 질문 | 왜 물어보는 거죠? |

|---|------|-----------|

| 1 | **청중은 누구인가? 공유 시나리오는 무엇인가?** (업계 관계자/사업 시작/데모 데이/비공개 회의) | 언어 스타일과 깊이를 결정합니다 |

| 2 | **공유 시간?** | 15분 ≈ 10페이지, 30분 ≈ 20페이지, 45분 ≈ 25-30페이지 |

| 3 | **원본 자료가 있으신가요?** (문서/데이터/기존 PPT/기사 링크) | 자료가 있다면 활용하시고, 없다면 다른 자료를 만들어 활용하세요. |

| 4 | **사진이 있나요? 어디에 배치해야 할까요?** | 아래 "사진 배치 규칙"을 참조하세요 |

| 5 | **원하는 테마 색상을 선택하세요.** | @themes.md 에서 5가지 사전 설정 중 하나를 선택하세요. |

| 6 | **엄격한 제약 조건이 있습니까?** (XX 데이터는 반드시 포함해야 합니다 / YY는 나타날 수 없습니다) | 재작업 방지 |

#### 개요 작성 지원 (사용자가 개요를 작성하지 않은 경우)

"스토리 전개" 템플릿을 사용하여 틀을 만든 다음 내용을 채워 넣으세요.

```

도입 → 1페이지: 사람들의 관심을 끌기 위해 대조/질문/구체적인 데이터를 제시하세요.

분위기 조성 (맥락) → 1-2페이지: 배경 설명 / 자기소개 / 이 주제에 대해 이야기하는 이유

주요 내용(핵심) → 3~5페이지: 핵심 내용과 4/5/6/9/10페이지의 레이아웃이 번갈아 가며 제시됩니다.

Shift → 1페이지: 기대를 깨다 / 새로운 관점 제시

요약 → 1-2페이지: 핵심 인용구 / 흥미진진한 질문 / 실행 제안

```

스토리 전개, 페이지 수 계획, 주제별 리듬표( @layouts.md 참조)를 **세 가지 표를 정렬**한 후 2단계로 진행하세요.

향후 수정 작업을 용이하게 하기 위해 개요를 `프로젝트 기록` 또는 `개요 v1`으로 저장하는 것이 좋습니다.

#### 이미지 규칙 (사용자에게 알림)

진행하기 전에 사용자에게 다음 사항을 설명하십시오.

- **이미지 위치**: 게시판에 있는 이미지인가요, 아니면 업로드된 이미지인가요?

- **이미지가 없는 경우는 어떻게 해야 하나요?**: 사용자의 레이아웃에 맞추기 위해 먼저 자리 표시자 색상 블록을 사용하여 구조를 생성한 다음 나중에 이미지를 추가할 수 있습니다. 단, 레이아웃 4/5/10 및 기타 텍스트와 이미지가 혼합된 페이지에서는 이미지가 없으면 시각적 효과를 확인할 수 없다는 점을 알려야 합니다.

### 2단계 · 참조 템플릿

@template.txt 는 **완전하고 기능적인** HTML 파일입니다. CSS, WebGL 셰이더, 페이지네이션 JavaScript, 글꼴/아이콘 CDN이 모두 미리 설정되어 있으며, `<main id="deck">`에만 3개의 샘플 슬라이드(표지, 챕터 표지, 빈 페이지)가 포함되어 있습니다.

#### 2.1 · 반드시 변경해야 하는 자리 표시자 (**쉽게 간과될 수 있음**)

복사 후 즉시 다음 자리 표시자를 변경하십시오. 그렇지 않으면 브라우저 탭에 "[필수] PPT 제목으로 바꾸세요"와 같은 어색한 텍스트가 표시됩니다.

| 위치 | 원본 | 변경해야 할 내용 |

|------|------|--------|

| `<title>` | `[필수] PPT 제목으로 대체 · 발표 자료 제목` | 실제 발표 자료 제목 (예: `새로운 업무 방식 · 루크 워블레프스키`) |

#### 2.2 · 테마 색상 선택 (5가지 사전 설정 · 사용자 지정 색상은 허용되지 않음)

이 스킬은 **엄선된 5가지 사전 설정 중에서만 선택할 수 있으며**, 사용자가 정의한 16진수 값은 허용되지 않습니다. 색상이 일치하지 않으면 이미지가 즉시 보기 흉해지기 때문입니다. 자유로운 선택권을 제공하는 것보다 미적 감각을 지키는 것이 더 중요합니다.

| # | 테마 | 적합 대상 |

|---|------|------|

| 1 | 🖋 클래식 잉크 | 일반/상업용 릴리스/확실하지 않을 경우 기본 설정 |

| 2 | 🌊 인디고 포슬린 | 기술/연구/데이터/기술 출시 컨퍼런스 |

| 3 | 🌿 포레스트 잉크 | 자연/지속가능성/문화/논픽션 |

| 4 | 🍂 크라프트지 | 향수/인문학/문학/독립 잡지 |

| 5 | 🌙 모래 언덕 | 예술/디자인/창의성/갤러리 |

**작동하다**:

1. 주제에 따라 콘텐츠 세트를 추천하거나, 사용자에게 원하는 콘텐츠 세트를 직접 선택합니다.

2. @themes.md 파일을 열고 해당 테마의 `:root` 블록을 찾으세요.

3. @template.txt 파일 시작 부분의 `:root{` 블록 내에서 "테마 색상"으로 표시된 줄(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)을 **완전히 교체**합니다.

4. 나머지 모든 CSS는 `var(--...)`를 사용하므로 별도의 수정이 필요하지 않습니다.

**엄격한 규칙**:

- 각 덱에는 하나의 테마만 사용하세요. 중간에 색 구성표를 변경하지 마세요.

- 사용자가 임의로 입력한 16진수 값은 허용하지 말고, 정중하게 거절하고 선택할 수 있는 5가지 옵션을 제시하십시오.

- 잉크와 종이를 섞어서 사용하지 마세요 (예: 잉크 클래식에는 잉크를, 듄에는 종이를 사용). 전혀 어울리지 않아 보일 것입니다.

### 3단계 · 내용을 입력하세요

#### 3.0 · 사전 점검: 클래스 이름은 @template.txt 에 정의되어 있어야 합니다(**가장 중요**).

이것이 모든 생성 문제의 근본 원인입니다. @layouts.md 의 기본 구조는 `h-hero`, `h-xl`, `stat-card`, `pipeline`, `grid-2-7-5` 등과 같은 여러 클래스 이름을 사용합니다. `assets/template.html`의 `<style>`에 해당하는 정의가 없으면 브라우저는 기본 스타일을 사용하게 됩니다. 그러면 제목은 산세리프체가 되고, 데이터 카드는 빽빽하게 붙어 표시되고, 파이프라인은 한 줄로 흐릿하게 처리되며, 이미지는 페이지 하단에 몰리게 됩니다.

**슬라이드 코드를 작성하기 전에:**

1. **먼저 @template.txt 파일 을 읽으세요.** (최소한 `<style>` 블록의 끝부분까지 읽으십시오.)

2. **@layouts.md 의 사전 검사 목록을 참조하여 사용하려는 모든 클래스가 `<style>` 태그에 있는지 확인하십시오.**

3. 클래스가 누락된 경우: **@template.txt 파일의 `<style>` 섹션에 추가하세요.** 각 슬라이드에 직접 다시 작성하지 마세요.

4. **@template.txt 는 클래스 이름의 유일한 출처입니다.** 새로운 클래스 이름을 만들지 마십시오. 클래스 이름을 사용자 지정해야 하는 경우 `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`)를 지정하고 문서 또는 초안에서 정렬해야 합니다. 자세한 규칙은 @layouts.md 로 시작하는 "테마 리듬 계획" 섹션을 참조하세요.

**필수 규칙**:

- 각 페이지 섹션에는 'light', 'dark', 'hero light', 'hero dark' 중 하나가 반드시 포함되어야 합니다. 'hero'라고만 쓰면 안 됩니다.

- 동일 주제에 대한 내용이 3페이지 이상 연속으로 이어지면 시각적 피로를 유발하므로 허용되지 않습니다.

- 8페이지 이상에는 최소 한 명의 "어둠의 영웅"과 최소 한 명의 "선한 영웅"이 포함되어야 합니다.

- 카드 덱 전체가 "밝은" 텍스트 페이지로만 구성될 수는 없습니다. 숨 쉴 공간을 만들기 위해 "어두운" 텍스트 페이지도 포함되어야 합니다.

- 3~4페이지마다 표지/뒷표지/질문/주요 인용구 등 핵심 페이지를 하나씩 삽입하세요.

**생성 후 자체 점검: `grep 'class="slide' index.html` 명령으로 모든 토픽 목록을 확인하고, 수동 검증을 통해 배송 전 작업 속도가 적절한지 확인합니다.**

#### 3.1 레이아웃 선택

**슬라이드를 처음부터 작성하지 마세요.** 10개의 미리 만들어진 레이아웃 뼈대가 포함된 `@layouts.md` 파일을 여세요. 각 뼈대는 완전하고 붙여넣기 가능한 `<section>` 코드 블록입니다.

레이아웃, 목적 등

|---|---|

| 1. 표지 열기 | 1페이지 |

| 2. 장 표지 | 각 막의 시작 부분 |

3. 데이터 기반 포스터 | 구체적인 데이터 제시 |

| 4. 왼쪽 텍스트, 오른쪽 이미지 (인용문 + 이미지) | 정체성 대비 / 스토리 |

5. 이미지 그리드 | 다중 이미지 비교 / 스크린샷 증거 |

6. 투 파이프라인 | 워크플로우 |

| 7. 긴장감 해소/질문 페이지 | 챕터 끝/결말 |

8. 중요한 인용구 | 세리프/핵심 요점 |

9. 병렬 비교 (이전/이후) | 기존 모드 vs. 새로운 모드 |

| 10. 이미지와 텍스트의 조합 | 정보 밀도가 높은 이미지 및 텍스트 페이지 |

해당 레이아웃을 선택하고 붙여넣은 다음 텍스트 및 이미지 경로를 수정하세요. **먼저 3.0 사전 검사를 완료하세요.**

#### 3.2 이미지 화면비 표준

항상 **표준 화면비**를 사용하고, 원본 이미지의 특이한 화면비(예: `2592/1798`)는 절대 사용하지 마십시오.

| 시나리오 | 추천 비율 |

|------|---------|

| 왼쪽에 텍스트, 오른쪽에 이미지(메인 이미지) | 16:10 또는 4:3 + `max-height:56vh` |

| 이미지 그리드(다중 이미지 비교) | **고정된 `높이:26vh`**, 종횡비 필요 없음 |

왼쪽에 작은 이미지 + 오른쪽에 텍스트 | 1:1 또는 3:2 비율 |

| 전체 화면 메인 이미지 | 16:9 + `max-height:64vh` |

| 텍스트와 이미지가 혼합된 레이아웃의 작은 삽화 | 3:2 또는 3:4 비율 |

**이미지에 `align-self:end`를 절대 사용하지 마세요.** 이미지가 셀 하단으로 이동하여 브라우저 툴바에 가려지게 됩니다. 이미지를 상단에 유지하려면 템플릿에 미리 정의된 `align-items:start` 속성을 가진 그리드 컨테이너를 사용하세요. 왼쪽 열 하단에 이미지를 유지하려면 `justify-content:space-between` 속성을 가진 플렉스 열을 사용하세요.

구성 요소 세부 정보(글꼴, 색상, 그리드, 아이콘, 콜아웃, 통계 카드 등)는 @components.md 에 있습니다.

### 4단계 · 체크리스트를 기준으로 자체 점검

체크리스트를 생성한 후에는 @checklist.md 파일을 열어 각 항목을 지침과 대조하여 확인하십시오. 이 파일에는 실제 반복 작업 과정에서 발생한 모든 문제점이 요약되어 있으며, 모든 P0 레벨 문제(이모티콘, 이미지 과다 사용, 제목 줄 바꿈, 글꼴 분할)는 반드시 해결해야 합니다.

특히 주의해야 할 몇 가지 사항은 다음과 같습니다.

1. **주요 제목은 세리프체여야 합니다.** 산세리프체로 표시되는 경우, 3단계 사전 검사가 실패했을 가능성이 99%이며, template.html 파일에 `h-hero` 클래스가 누락되었을 수 있습니다.

2. **이미지 그리드에서는 `height:Nvh`만 사용하고 `aspect-ratio`는 사용하지 마십시오(그리드가 깨질 수 있습니다).**

3. **이미지가 페이지 하단으로 밀려나지 않도록 하세요.** `align-self:end` 대신 `grid`와 `align-items:start`를 사용하세요(3.2단계 참조).

4. **이미지는 표준 화면비(16:10 / 4:3 / 3:2 / 1:1 / 16:9)여야 합니다.** 특이한 화면비의 이미지는 복사하지 마십시오.

5. **중국어 제목은 5자 이하여야 하며, 줄 바꿈(nowrap) 기능을 사용해야 합니다(한 줄에 한 글자씩 입력하지 마십시오).**

6. **이모티콘 대신 Lucide를 사용하세요.**

7. **제목에는 세리프체를, 본문에는 산세리프체를, 메타데이터에는 고정폭 글꼴을 사용하십시오.**

### 5단계 · 반복

사용자 피드백을 바탕으로 수정된 이 템플릿의 CSS는 이제 고도로 매개변수화되었으며, 조정 사항의 90%는 인라인 스타일(font-size:Xvw / height:Yvh / spacing:Zvh) 변경입니다.

## 핵심 디자인 원칙 (철학)

이 원칙들은 1인 기업을 위한 PPT 프레젠테이션을 다섯 번 제작하면서 얻은 결과입니다. 이 원칙 중 하나라도 어기면 시각적 매력이 떨어집니다.

1. **기술적 탁월함보다는 절제** — WebGL 배경은 메인 페이지에서만 보이고 일반 페이지에서는 거의 보이지 않습니다.

2. **장식보다 구조가 우선** — 그림자, 띄워진 카드, 여백 상자 없이 모든 정보는 **큰 글꼴 크기 + 글꼴 대비 + 그리드 간격**을 통해 전달됩니다.

3. **콘텐츠 계층 구조는 글꼴 크기와 글꼴 유형으로 정의됩니다.** - 최대 세리프체 = 주요 제목, 중간 세리프체 = 부제목, 큰 산세리프체 = 리드, 작은 산세리프체 = 본문, 고정 폭체 = 메타데이터

4. **이미지가 최우선입니다.** — 이미지의 하단만 자르고 상단, 좌우 측면은 그대로 유지하세요. `height:Nvh`를 사용하여 그리드를 고정하고, `aspect-ratio`를 사용하여 확대하지 마세요.

5. **주인공 페이지와 일반 페이지를 번갈아 가며 보세요** — 주인공 페이지와 일반 페이지를 번갈아 보면 눈의 피로를 예방하는 데 도움이 됩니다.

6. **용어 일관성** — 'Skills'는 중국어와 영어를 혼합하여 번역하지 않고 'Skills'로 번역해야 합니다.

## 참고자료

이 스킬의 시각적 스타일은 다음에서 영감을 받았습니다:

- "1인 기업: AI로 인해 재편되는 조직들" 공유 (2026년 4월 22일, 27페이지)

- *모노클* 잡지의 레이아웃

- YC 회장 게리 탄의 블로그 게시글 "얇은 하네스, 풍부한 기술" 데모 영상

스타일 앵커로 사용할 수 있습니다.