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

Featured by
淡苍
Why we love this skill
이 기능은 전자 잡지와 전자잉크 스타일을 결합하여 독창적이고 예술적인 가로 페이지 넘김 방식의 웹 기반 파워포인트 프레젠테이션을 제작합니다. 기존의 비즈니스 템플릿에서 벗어나 우아한 글꼴, 유려한 배경, 세련된 레이아웃을 사용하여 모노클(Monocle) 잡지를 연상시키는 고급스러운 시각적 경험을 선사합니다.
지시사항
웹페이지 생성 기능을 꼭 사용하세요.
웹 기반 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이 모두 미리 설정되어 있으며, `
#### 2.1 · 반드시 변경해야 하는 자리 표시자 (**쉽게 간과될 수 있음**)
복사 후 즉시 다음 자리 표시자를 변경하십시오. 그렇지 않으면 브라우저 탭에 "[필수] 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`의 `