<topic> — 학습자료

` + init 스크립트. 경량 필요 시 Chart.js v4 | | `$…$` / `$$…$$` 수식 | **KaTeX v0.16** + auto-render | CSS+JS+auto-render 3종 | | 코드 블록(` ```lang `) | **highlight.js v11** | 테마 CSS + JS + `hljs.highlightAll()` | | 단계적 등장 효과 | **AOS v2** | `data-aos` 속성 + init. 과용 금지 | 순수 텍스트·표만 있는 자료는 어떤 JS도 주입하지 않는다. 라이브러리가 로드되지 않아도(오프라인) 본문·코드·표는 정상 표시되도록 폴백을 둔다(도식은 mermaid 소스가 `

`로 보임).

### mermaid 통합(예)

```html
flowchart TD; A[질문]-->B[병렬 리서치]; B-->C[학습자료]

```

전체 CDN URL·초기화 스니펫(ECharts/KaTeX/highlight.js/AOS/대안)은 `references/cdn-libraries.md` 참조.

## 출력

- 단일 `.html` 학습자료 (`/materials/-.html`)
- 브라우저에서 바로 열람·인쇄·PDF 저장 가능
- 사용한 라이브러리·출처를 자료 하단에 명시

## 사용 예시

**예시 1**: "방금 조사한 서브에이전트 내용으로 HTML 학습자료 만들어줘"
→ 시퀀스 도식(mermaid) + 코드 하이라이트 + 복습 질문 포함 HTML

**예시 2**: "영어 가정법, 표랑 예문으로 학습자료 만들어줘"
→ 규칙 비교 표 + 예문 + 복습 (JS 미주입 — 순수 텍스트·표)

**예시 3**: "이 데이터 추이를 차트로 보여주는 학습자료로 만들어줘"
→ ECharts 라인 차트 + 해설 + 핵심 개념

## 주의사항

- **조건부 로딩 준수** — 안 쓰는 라이브러리는 절대 주입하지 않는다(불필요한 무게·외부 의존 방지).
- **CDN URL은 references/cdn-libraries.md를 인용** — 임의 버전·URL을 지어내지 않는다(메이저 핀: `@11`, `@5`, `@0.16`, `@2`).
- **접근성**: 본문 대비 WCAG AA 유지(design-tokens.md 대비표), 도식·차트에 대체 텍스트·캡션 제공.
- **doc-html-report를 오염시키지 않는다** — 이 렌더러는 별도이며, 업무 보고서는 0-JS인 doc-html-report를 사용한다.
- 학습 내용의 정확성은 입력(education-tutor-research 출처)에 의존한다. 출처 미검증 내용은 자료에 "확인 필요"로 표기한다.

## 관련 스킬

- **moai-tutor:education-tutor-research**: 이 스킬의 입력 종합본을 만든다
- **moai-tutor:education-learning-project**: 생성된 자료를 materials/에 보관하고 진도를 갱신한다
- **참고**: `references/cdn-libraries.md` — CDN 라이브러리 스택 SSOT

## 이 스킬을 사용하지 말아야 할 때

- **0-JS 단일파일 업무 보고서**(현황·재무·인시던트·PR) → `moai-officer:doc-html-report`
- **발표용 슬라이드** → `moai-officer:doc-pptx`
- **인쇄·제출용 문서(.docx)** → `moai-officer:doc-docx`


## 한국어 카피 품질 게이트 (필수)

본 스킬이 산출하는 한국어 텍스트는 배포 전 의무 게이트를 통과합니다:

1. `moai-coworker:ai-slop-reviewer` — 1차 일반 AI 슬롭 검수 (금지어, 구조 패턴, 리듬)
2. `moai-writer:korean-humanize` — 2차 한국어 정밀 윤문 (40+ 패턴 SSOT, 의미 불변)

두 게이트는 대시 대비 헤드라인·조사·체언 종결 조각문·"A에서 B로" 전환 공식 S1 패턴을 잡아냅니다. 게이트 통과 없이 산출물을 바로 배포하지 않습니다.

## 시각 품질 게이트 (필수)

**[HARD] 렌더가 끝나면 산출 HTML을 브라우저에서 열어 아래 4축을 실측하고 PASS/FAIL을 보고한다.** 위 한국어 카피 게이트와 같은 등급의 필수 단계다 — 글이 좋아도 읽히지 않으면 학습자료가 아니다.

**공통 4축** — 렌더 후 DOM 실측으로 판정한다. 눈으로 훑는 것으로 갈음하지 않는다.

| 축 | 측정 | 기준 | 등급 |
|---|---|---|---|
| **본문 크기** | 본문 노드 computed `font-size` | ≥16px (화면 읽기 기준). 부연·캡션 ≥14px | hard |
| **명도대비** | 상대 휘도 기반 WCAG 대비비 | 본문 ≥4.5:1 · 큰 텍스트 ≥3:1 | hard |
| **텍스트 오버플로** | `scrollHeight > clientHeight` | 0건 | hard |
| **산출물 밖 요소** | 본문 컨테이너 바깥의 렌더되는 텍스트 노드 | 0개 — 장수·해상도·사용 폰트 같은 **제작 메타는 화면에 찍지 않는다**(HTML 주석으로) | hard |

**아이콘을 쓸 때** — 아이콘은 레이아웃상 빈 자리로 보여서, 근거를 요구하지 않으면 손에 잡히는 몇 개를 돌려쓰게 된다.

- 문구의 **동사**에서 고른다 (적는다 → 메모, 멈춘다 → 정지). 명사가 아니라 그 자리가 시키는 행동에 맞춘다.
- 한 문서에서 같은 아이콘을 **3회 넘게 쓰지 않는다**.
- 마땅한 것이 없으면 **비운다**. 빈 자리가 틀린 아이콘보다 낫다.
- **[HARD] 아이콘을 썼으면 PASS/FAIL 증거표에 넣는다.** 슬롯 문구·아이콘·고른 이유를 나란히 적어 보고한다. "아이콘이 필요해서" 같은 동어반복은 근거가 아니며, 근거를 한 줄로 못 쓰면 비운다.

> 이 4축은 [`doc-html-slide/references/deck-quality-rubric.md`](../../../moai-officer/skills/doc-html-slide/references/deck-quality-rubric.md)의 hard-fail에서 **문서형(연속 스크롤)에 해당하는 것만** 옮겨온 것이다. 프로젝터 투사 기준인 pt 하한(24pt)은 문서형에 적용하지 않고 화면 읽기 기준(16px)으로 대체한다.