브라우저에서 열면 넘기기·자습이 동작합니다
EDU-DECK SKILLS · 30초 오프닝 쇼
단일 HTML ~3MB
외부 의존 0
코드 실시간 재생
교육 워크숍 · SI 아키텍처 · 경영 컨설팅 보고서까지
조사·조립·이중 검수를 거쳐 브라우저에서 바로 열립니다
"생성형 AI 업무 도입 찬반 토론 워크숍 14장 만들어줘"
"차세대 업무포털 3권역 망분리·이중화 인수인계 구성도"
"IT 비용 구조 전환 — 연 370억 절감 이사회 보고서"
[01] SI 아키텍처 청사진
arch_layout.mjs
[02] 컨설팅 차트 + 사이드카
chart_gen.mjs
[03] 리소스팩 8×8 지면
64조합 전수 검증
[04] 퀴즈 판정 · 자습 · 노트
단일 HTML 6층위
52계열 253변형
장 배치 조각
8×8 = 64조합
리소스팩 전수 검증
8종 테마
표지 16종 · arc 6종
42 + 기법 5
실시간 코드 모션
생성기 3종
아키텍처 + blueprint
차트 11종
컨설팅 + 사이드카
실물 378점
자산 갤러리 재생
다양성 엔진 · 4대 조형 경로와 재료 규모
52계열 · 253변형
장 배치 조각
64조합 · 8×8
리소스팩 설계×흐름
8테마 · 16표지
색·반경·arc 6종
42+ 기법 5종
실시간 모션 이름
① 리소스팩 8×8
64/64 검증
배치 문법 자체가 다른 8개 설계와 8개 수업 흐름의 64조합
② 253변형 · 8테마
표지 16 · arc 6
52계열 253변형 조각과 8종 테마·16종 표지·6종 arc 결합
③ 아키텍처 생성기 3종
blueprint
직교 2D · 입체 HW · 레인/시퀀스 3종 생성기와 SI 10유형
④ 컨설팅 차트 11종
헤어라인 4방향
워터폴·사분면 등 11종 차트 생성기와 .consult 4방향 헤어라인
Consulting Kit · chart_gen.mjs 11종 실연
방법론·한계 — 단일 JSON 모델에서 막대·연결선·콜아웃·우측 시사점 칼럼·하단 원장 각주를 일괄 렌더
Source: consulting-deck 실연 (it-cost 데모 시나리오) · chart_gen.mjs 자동 생성 · 기준 2026-11
가상 데이터
만드는 경로 · 이중 검수 게이트
STEP 01
프롬프트 요청
주제·대상 한 줄 입력
STEP 02
경로 라우팅
팩64·자유·SI·컨설팅
STEP 03
조사 · 원장
사실 수집·data-src 채번
STEP 04
조립 · 생성
253조각·생성기 렌더
STEP 05
이중 검수
계약 검사 + 심미 QA
STEP 06
단일 HTML
외부 의존 0 · 즉시 재생
GATE 01 · 기계가 강제하는 기술 계약
check_deck.py
본문 4.5:1 · 큰 글자 3.0:1 · 238셀 테마 대비 매트릭스 검증
Playwright 1920×1080 전 단계 측정 — 넘침·겹침·참조 오류 0건
글자 하한(≥18px) · 발표자 노트(≥60자) · data-src 출처 대조
단위 테스트 505개 · 리소스팩 브라우저 64/64 전수 PASS
✓ 안전 가드(ERROR = 0) 미통과 시 배포 차단 — 기술 무결성 보장
GATE 02 · 눈으로 거르는 9항목 심미 크리틱
design-critique.md
① 시각 위계·초점
② 정렬·여백 균형
③ 타이포 스케일
④ 색채 시맨틱
⑤ 정보 밀도·호흡
⑥ 도식·차트 완결
⑦ 컨테이너 조형
⑧ 장 간 리듬 설계
⑨ 실물 캡처 검수
전 장 캡처(capture_deck.py)를 육안 대조해 가짜 도식·공백 방치 퇴출
✓ 검사 통과 ≠ 좋은 디자인 — Blocker·Major 0건이어야 최종 PASS
06 · 단일 HTML 6층 단면 & 인터랙티브 판정
SINGLE HTML 6-LAYER STACK
외부 의존성 0 · 오프라인 완결
LAYER 01
1920×1080 고정 캔버스
--ed-s 뷰포트 자동 스케일 · 줄바꿈 불변
LAYER 02
8 테마 · 64 팩 · 청사진 CSS
외부 웹폰트·CDN 호출 없이 전수 인라인
LAYER 03
스텝 엔진 & 42+5 모션
data-step · data-only · data-lit 시선 유도
LAYER 04
실시간 OX · 객관식 판정
최종 스텝에서 .ox.o 점등 · judgment-stamp
LAYER 05
자습 계층 (EDU_STUDY)
localStorage 진도 · 북마크 · 하이라이트 · 메모
LAYER 06
발표자 보조 창 & 인쇄
aside.notes 분리 창(P) · ?sheet 전 장 인쇄
실물 엔진 동작 검증 · QUIZ-OX (JUDGMENT-STAMP)
정답 O — 완전 독립 단일 파일(Self-Contained Single HTML). CSS 토큰·인라인 SVG 도식·스텝 엔진·자습 모듈이 파일 하나에 패킹되어 별도 서버 없이 즉시 실행됩니다.
Space / →다음 스텝
DblClick장 끝까지
P / N발표자 노트
S 키자습 패널
G / ?장 이동·도움
?sheetA4 인쇄뷰
07 · LIVE SHOWCASE & ASSET GALLERY
실물 덱 6종 즉시 실행
자산 갤러리 378점
아래 카드들은 정적 이미지가 아니라 실제로 작동하는 단일 HTML 덱과 전체 자산 카탈로그로 연결됩니다.
ARCH · BLUEPRINT
실물 13장 열기 →
차세대 SI 시스템 아키텍처 제안
중첩 보안존 · 직교 10G 백본 · 입체 HW · HA 페일오버
CONSULT · TECH
실물 12장 열기 →
전사 AI 전환 전략 & ROI 로드맵
헤어라인 표 · 워터폴 브리지 · 우측 SO WHAT 사이드카
PACK · SEMINAR
실물 14장 열기 →
생성형 AI 개인정보 딜레마 토론
인용 앵커 표지 · 대칭 쟁점 구도 · 전폭 스펙트럼 · 퀴즈
PACK · KIDS-BOARD
실물 덱 열기 →
초등 과학 — 물질의 세 가지 상태
칠판 분필 질감 · 단계별 빈칸 퀴즈 · 분자 배열 도식
PACK · EXAM-CRAM
실물 덱 열기 →
중등 수학 — 비와 비율 핵심 공식
모눈종이 워크시트 · 공식 카드 · 오답 함정 대조
PACK · SAFETY
실물 덱 열기 →
산업안전 — 밀폐공간 질식재해 케이스북
사고 타임라인 · 산소농도 경보 · 필수 수칙 체크리스트
COMPLETE VISUAL CATALOG
378점 실물 카탈로그
전체 자산 갤러리 & 모션 쇼케이스
슬라이드 253변형 · 리소스팩 64조합 · 모션 47종 GIF · 아키텍처 · 컨설팅 썸네일을 한눈에 탐색하고 코드를 확인합니다.
52계열 · 253변형전 아키타입 카탈로그
8×8 = 64조합리소스팩 × 팔레트
42 실행 + 5 기법모션 GIF 전수 수록
11 차트 · 3 생성기컨설팅 · 아키텍처