| name | kisas-ip-design-d1 |
| description | KISAS IP D1.0 Modernist Swiss 학습자료 박제 엔진. docx → A4 HTML+PDF. 8축 SSOT·20 컴포넌트·15 시각화·4 variants. 룰 7 — 8축 불변·A4 분할방어·100% verbatim·Lemon BG 본문 ✗·펜 영역 흰 종이·PDF 페이지 일치·입체 시각화 ≥2/페이지. Fraunces·JetBrains Mono·5색 컬러레일·Bauhaus·Oxford 70%×K-Pop 30%. 학생 친화 — 메타 라벨 ✗·기능 라벨만·KS shield 아이콘. P1 키사스디자인, KISAS디자인, KISAS_D1, KISAS_D1.4, kisas d1, 학습자료디자인, 워크북박제, 워크북안전, kisas handout, kisas instruction, modernist swiss, FrauncesSerif, KISAS인쇄, 인쇄안전, 펜안전, 펜영역, 입체시각화, 100%verbatim, IdentityWeb, FlowArrow, CardDeck, Ladder, EmojiScale, ProgressGauge, 가독성보정, 컨트라스트매트릭스, BG동화차단, 풀채도fill, 흰inset, 학생친화, 메타라벨제거, 기능라벨만, 학술지톤제거, 라틴모토제거, 일반워크북, KS아이콘, KSshield, 방패아이콘. P2 박제해줘, 디자인적용해줘, 일괄변환, D1.0으로 박제. P3 KISAS curriculum design, modernist swiss workbook, A4 print PDF, print-safe pen-area, dimensional visualization, student-friendly labels. P5 .html, .pdf. NOT 1page랜딩(→apple-canvas), 화면설계(→ui-designer), 일반docx(→docx skill), 1쪽보고서(→shaper-skill), 사업계획서(→bp-guide). |
KISAS IP Design — D1.1 (Modernist Swiss)
KISAS IP 학습자료 일괄 박제 엔진. 워드(.docx) 원본 → D1.1 디자인 언어 → A4 인쇄 PDF. 콘텐츠 100% verbatim + 펜 영역 흰 종이 + 입체 시각화 ≥2/페이지.
Skill Boundaries
- 하는 것 — KISAS IP D1.0 Modernist Swiss 학습자료 박제 엔진.
- 안 하는 것 — 1page랜딩(→apple-canvas), 화면설계(→ui-designer), 일반docx(→docx skill), 1쪽보고서(→shaper-skill), 사업계획서(→bp-guide).
디자인 본질 — Editorial Magazine + Swiss Grid + Bauhaus 도형 + Oxford 70%/K-Pop 30%. Apple Edu 모던함은 ✗, 격조·여백·격자가 중심. 학생 = 펜으로 쓰는 인쇄 워크북.
외부 SSOT (KISAS IP Design/ 폴더): README_KISAS_DESIGN.md (다른 세션 진입점) · D1.0_SSOT.md (8축·20 컴포넌트·15 시각화 풀명세) · KISAS_Day2_Student_Handouts_D1.0.html (Day 2 시안 박제·12p) · _verify/word_diff.py (룰 #3 자동검증) · _verify/print_safety.py (룰 #5 자동검증)
When to Use
- 사용자가 "박제해줘", "디자인적용해줘", "일괄변환", "D1.0으로 박제." 같은 표현으로 발동
- 도메인 작업이 필요한 시점
- 안 쓸 때 — 1page랜딩(→apple-canvas), 화면설계(→ui-designer), 일반docx(→docx skill), 1쪽보고서(→shaper-skill), 사업계획서(→bp-guide).
Prerequisites
| # | 체크 | 미충족 시 |
|---|
| 1 | 대상·입력 명확 (스킬 발동 의도 확인) | 1줄 확인 후 진입 |
| 2 | references/ 폴더 접근 가능 | inline fallback |
⛔ 절대 규칙 (7)
| # | 규칙 | 검증 |
|---|
| 1 | 8축 SSOT 불변 — 컬러·타이포·레이아웃·인쇄 변경 ✗. 추가만, 수정·삭제 ✗ | 변경 = D2 신규 분기 |
| 2 | A4 인쇄 강제 — 210mm×297mm·페이지 분할 방어·break-inside:avoid·overflow:hidden | pdfinfo |
| 3 | 콘텐츠 100% verbatim — 원본 docx의 단락·테이블·빈칸을 단어 단위 보존. 요약·축약·재구성·번역·교정 ✗ | _verify/word_diff.py |
| 4 | Lemon BG 본문 ✗ — Lemon은 형광펜·sticker·악센트로만. 페이지 전체 BG ✗ | grep |
| 5 | 펜 입력 영역 = 흰 종이 (NEW) — .line·.fline·.write·.write-line·.ln·.cell-line·.starter-row·.box 등 학생이 펜으로 쓰는 모든 영역의 부모 BG = --paper:#FFFFFF 강제. 컬러 BG 안에 입력 슬롯 두려면 흰 카드 inset 구조 | _verify/print_safety.py |
| 6 | PDF 페이지 수 일치 — pdfinfo 페이지 수가 의도와 ±0. 분할 발생 시 break-inside·padding 픽스 후 재변환. 루프 max 2회 | pdfinfo |
| 7 | 입체 시각화 ≥2종/페이지 (NEW) — 평면(표·빈칸·박스) 외 입체(방사형·플로우·사다리·픽토그램·말풍선·deck·다이어그램·이모지·진행 게이지) 중 페이지당 ≥2 도구 | manual review |
🚦 Phase 흐름 (5 phase + 검증 2 게이트)
P0. INPUT docx 경로 + variant 판정
P1. EXTRACT python3-docx 단락·테이블 100% 추출
P2. ROUTE 4 variant 중 1개 (Handout/Instruction/Excerpt/AssetBank)
P3. RENDER template-{variant}.html + 15 시각화 분배
P4. VERIFY-1 word_diff.py — 단어 100% 보존 (룰 #3)
P4. VERIFY-2 print_safety.py — 펜 영역 흰 BG (룰 #5)
P5. CONVERT weasyprint PDF + pdfinfo 페이지 수 (룰 #6)
상세: → references/phases.md
◆ 8축 SSOT (불변)
| 축 | 값 |
|---|
| 컬러 7 | --paper:#FFFFFF --paper-tint:#F7F5F0 --ink:#0A0A0A --ink-soft:#454545 --rule:#0A0A0A --grid:#E0E0E0 --oxford:#002147 |
| K-Pop 5 | --pink:#FF2D87 --blue:#2945E5 --lemon:#FFD400 --mint:#0DBA8A --coral:#E8552A |
| 타이포 | H1=Fraunces 800 / H2=Fraunces 600~800 / H3=Fraunces 600 / Body=Inter 400 / Mono=JetBrains Mono / Caveat=예시·핸드라이팅 (펜 라인 자체 ✗ — 룰 #5) |
| 타이포 사이즈 | H1=80pt / Sec-title=3236pt / H3=1618pt / Body=10.5~11pt / Mono=8.5pt / Footer page-num=12pt italic |
| 레이아웃 | A4 (210mm×297mm) · 18mm padding · 12-grid · top header 10mm · bottom footer 14mm · color-rail 4mm 좌측 세로 |
| 인쇄 | A4 단일 / 페이지별 height 고정 / break-inside:avoid 강제 / page-break-after:always |
| 언어 코드 | en (학생용) · 라틴 모토 ("SAPERE AUDE", "PER VERITATEM", "SCRIPTA MANENT", "NOMEN EST OMEN", "FINIS DIEI II") · 학술지 디테일 ("Folio I", "FIG. A", "VOL. 02") |
상세: → references/8-axis-ssot.md
▲ 20 컴포넌트 카탈로그 (12 기존 + 8 신규 입체)
기존 12 (D1 승계)
| # | 컴포넌트 | 클래스 | 용도 |
|---|
| 1 | Top Header | .top-header | Seal·VOL·FOLIO·라틴 모토 |
| 2 | Bottom Footer | .bottom-footer | Folio number + ProgressGauge (v1.1 통합) |
| 3 | Color Rail | .color-rail | 좌측 5색 세로띠 |
| 4 | Cover Title | .cover-title | Fraunces 80pt italic em coral |
| 5 | Bauhaus Shapes | .shapes | 원·삼각·사각 5색 |
| 6 | Module Grid | .module-grid | 5칸 모듈 카드 |
| 7 | Fig Tag | .fig-tag | Lemon BG 섹션 라벨 |
| 8 | Callout | .callout | 좌상 코랄 사각 + Mono 라벨 |
| 9 | Steps | .steps | 4칸 step + 상단 6px 컬러바 |
| 10 | Map Grid | .map-grid | 9칸 워크스페이스 (v1.1: center=흰 BG + 검정 ★ME 라벨 띠) |
| 11 | Starters | .starters | 문장 시작 박스 (v1.1: paper-tint→paper) |
| 12 | ReflectQ | .reflect-q | 좌측 5px 컬러 + 빈 라인 |
신규 8 (입체 시각화 v1.1)
| # | 컴포넌트 | 클래스 | 용도 |
|---|
| 13 | IdentityWeb | .web-wrap | ME 중심 9칸 그리드 시각 박제 |
| 14 | FlowArrow | .flow-arrow | 활동 ①→②→③→④ 가로 화살표 (CSS 삼각형 + SVG picto) |
| 15 | TimerBadge | .timer-badge | 원형 시계 SVG + 시간 라벨 |
| 16 | PictoIcon | .picto | SVG 단색 아이콘 (활동 종류) |
| 17 | CardDeck | .card-deck | 카드 4장 (CHORUS frames). 카드=흰, 좌상 5mm 컬러 띠 |
| 18 | Ladder | .ladder | 세로 사다리 (Music 다중 활동). 막대=컬러, 가로단=흰 |
| 19 | EmojiScale | .emoji-scale | SVG 표정 5단계 (흑백 outline) |
| 20 | ProgressGauge | .progress-gauge | Folio 1/N 도트 + DayRibbon (Day N of 9) |
상세: → references/components.md
● 15 시각화 도구 매뉴얼
페이지마다 ≥2개 입체 도구 사용. 평면(표·빈칸·박스)만 페이지 = 룰 #7 위반.
| # | 도구 | 페이지 추천 | 펜 안전 |
|---|
| 1 | IdentityWeb (방사형) | Identity Map | ME 중심 흰 |
| 2 | FlowArrow (가로 화살표) | 활동 흐름 | 화살표 SVG, 박스 흰 |
| 3 | TimerBadge (시계) | 활동 헤더 | outline coral |
| 4 | PictoIcon | 섹션 헤더 옆 | 검정 outline |
| 5 | VennDiagram | Map→Words | outline only |
| 6 | CardDeck | CHORUS frames | 카드 흰 + 좌띠 |
| 7 | Ladder | Music 5 활동 | 막대 컬러, 가로단 흰 |
| 8 | DottedFlowLine | 연결선 | SVG 점선 |
| 9 | EmojiScale | Exit confidence | outline SVG |
| 10 | PuzzlePiece | 표지 메타포 | outline only |
| 11 | MusicMotif | 워터마크 | 5% opacity |
| 12 | ChecklistCard | Partner Share | 카드 흰 + 좌띠 |
| 13 | SpeechBubble | Teacher 발화 | outline only |
| 14 | ProgressGauge | 모든 footer | 도트 컬러 |
| 15 | TimelineRibbon | 표지 Day N of 9 | 컬러 점 + 회색 점 |
상세: → references/visualization-tools.md
● 4 Variants (콘텐츠 유형별)
| 유형 | 예시 docx | 사용 컴포넌트 |
|---|
| Handout (학생용) | KISAS_DayN_Student_Handouts.docx | Cover · FlowArrow · IdentityWeb · Starters · ReflectQ · ChecklistCard · CardDeck · Ladder · EmojiScale · ExitTicket |
| Instruction (교사용) | KISAS_DayN_Teacher Instruction.docx | Cover · ModuleGrid · FlowArrow · Table · Callout · MusicHeader · SpeechBubble |
| Excerpt (문학 발췌) | KISAS_DayN_{Aesop/Macbeth/Odyssey}_excerpt.docx | Cover · sec-title · Body 문단 (라인넘버 사이드바) · Callout |
| Asset Bank (자산뱅크) | LYRICS-ASSET-BANK / KISAS_Day2_Lyrics Asset Bank.docx | Cover · Table.asset · Picker · Starters |
상세: → references/variants.md
✗ NOT (영토 분리)
| 인접 스킬 | NOT 사유 |
|---|
| apple-canvas | 1page 랜딩·웹 메모 — KISAS는 A4 워크북 |
| ui-designer | 화면설계·앱 UI — KISAS는 인쇄용 학습자료 |
| docx | 일반 워드 처리 — KISAS는 docx → HTML/PDF 박제 |
| shaper-skill | 1쪽 보고서·BIZ_DOC — KISAS는 N-page 워크북 + 디자인 |
| bp-guide | 사업계획서 — 교과 콘텐츠 ✗ |
❌ WRONG / ✅ CORRECT
Case A — Lemon BG 폭주 (룰 #4)
❌ WRONG:
.page { background: var(--lemon); }
.cover-title { color: var(--coral); font-size: 100pt; }
✅ CORRECT (D1 본질):
.page { background: var(--paper); }
.cover-title { color: var(--ink); font-size: 80pt; font-family: 'Fraunces'; font-weight:800; }
.cover-title em { color: var(--coral); font-style: italic; }
Case B — 페이지 분할 무시 (룰 #2)
❌ WRONG:
<div class="map-grid">
✅ CORRECT:
.map-grid { break-inside: avoid; page-break-inside: avoid; }
.page { height: 297mm; overflow: hidden; }
Case C — 펜 영역 컬러 BG (룰 #5 NEW)
❌ WRONG (D1 시안에서 발견된 4건):
.map-cell.center { background: var(--ink); color: var(--paper); }
.map-cell.center .line { border-bottom-color: #3D3D3D; }
.chorus-final { background: var(--lemon); }
.chorus-final .write { ... }
.chorus-lab { background: var(--coral); color: var(--paper); }
.chorus-lab .frame { ... }
.starters { background: var(--paper-tint); }
✅ CORRECT (흰 카드 inset 구조):
.map-cell.center {
background: var(--paper);
border: 2.5px solid var(--ink);
}
.map-cell.center::before {
content: "★ ME"; position: absolute; top: -1px; left: -1px;
background: var(--ink); color: var(--lemon);
padding: 3px 10px;
}
.chorus-final {
background: var(--paper);
border: 2.5px solid var(--ink); border-left: 8px solid var(--lemon);
}
.chorus-lab .lab-head { background: var(--coral); color: var(--paper); }
.chorus-lab .card-deck { background: var(--paper); }
.starters { background: var(--paper); }
상세: → references/print-safety.md
Case D — 평면 시각화만 (룰 #7 NEW)
❌ WRONG: 한 페이지가 표·빈칸·박스 평면만 — 시각 리듬 단조.
✅ CORRECT: 페이지마다 입체 도구 ≥2종 (예: FlowArrow + IdentityWeb · CardDeck + ProgressGauge · Ladder + TimerBadge · EmojiScale + ChecklistCard).
Case E — 박스 컬러링 약함 (NEW v1.2)
❌ WRONG (12% tint 미색):
.module-grid .mod:nth-child(1){background:#FCE3D8}
.callout.tint-pink{background:#FFE5F0}
→ D1 정체성 = 강한 컬러링. 미색 = 격조 ↓ 학생 시각 리듬 ↓.
✅ CORRECT (풀채도 fill + 글씨 자동 보정):
.module-grid .mod:nth-child(1){background:var(--coral);color:var(--paper)}
.module-grid .mod:nth-child(2){background:var(--blue);color:var(--paper)}
.module-grid .mod:nth-child(3){background:var(--mint);color:var(--ink)}
.module-grid .mod:nth-child(4){background:var(--lemon);color:var(--ink)}
.module-grid .mod:nth-child(5){background:var(--pink);color:var(--paper)}
.callout.tint-coral{background:var(--coral);color:var(--paper)}
.callout.tint-coral .label b{color:(--lemon)}
{:(--paper)}
→ 5색 풀채도 + 컨트라스트 글씨 자동 + 펜 영역 inset.
룰:
- 읽기 전용 박스 (ModuleGrid·FlowArrow step·Callout·TomorrowCard·KeepCard·CHORUS Lab head·MusicHeader·Venn·FigTag) = 풀채도 5색 fill OK
- 글씨 자동 보정 = coral/blue/pink/oxford BG →
var(--paper) 흰 글씨, mint/lemon BG → var(--ink) 검정 글씨
- 강조는 레몬 = 진한 BG 위 코랄 라벨 ✗ → 레몬으로 변경 (대비 ↑)
- 펜 영역은 inset = 컬러 BG 안에 빈 라인 두려면 그 라인만
background:var(--paper) 강제 (룰 #5)
- 5색 무차별 ✗ = 1 페이지 = 풀채도 박스 ≤ 5개 (5색 다 쓰는 표지·FlowArrow는 의도적 구조, 그 외는 ≤3색)
Case F — 컨트라스트 매트릭스 (NEW v1.3)
❌ WRONG (BG 동화·같은 계열 충돌):
.callout.tint-coral ul li::before{background:var(--coral)}
.callout.tint-pink ul li::before{background:var(--coral)}
.module-grid .mod:nth-child(3) .num{color:var(--coral)}
.module-grid .mod:nth-child(1) .swatch{background:var(--coral)}
.venn-wrap .venn-center{color:var(--coral)}
→ 가독성 ↓·박스 시각 단조롭게 흐려짐.
✅ CORRECT (컨트라스트 매트릭스 강제):
.callout.tint-coral ul li::before{background:var(--lemon)}
.callout.tint-pink ul li::before{background:var(--lemon)}
.callout.tint-blue ul li::before{background:var(--lemon)}
.module-grid .mod:nth-child(3) .num{color:var(--ink)}
.module-grid .mod:nth-child(4) .num{color:var(--ink)}
.callout.tint-lemon ul li::before{background:var(--ink)}
.callout.tint-mint ul li::before{background:var(--ink)}
{:(--ink) }
{
:(--ink);
: (,,,.);
}
◇ 컨트라스트 매트릭스 (필수 박제)
| BG 색상 | 글씨 | 강조 라벨 (b) | bullet | 아이콘·swatch |
|---|
| coral (어두움) | paper(흰) | lemon | lemon | paper/lemon (자기색 ✗) |
| blue (어두움) | paper(흰) | lemon | lemon | paper/lemon |
| pink (중간) | paper(흰) | lemon | lemon | paper/lemon |
| oxford (어두움) | paper(흰) | lemon | lemon | paper/lemon |
| mint (밝음) | ink(검정) | ink | ink | ink (자기색 ✗) |
| lemon (밝음) | ink(검정) | ink | ink | ink |
| paper (흰) | ink | coral italic | coral 사각 | ink/coral |
| mix-blend (보라 등) | ink + text-shadow:0 0 4px rgba(255,255,255,.8) | — | — | — |
금지 조합 (BG 동화·약함):
- coral BG + coral 자식 = ✗ (자기색 동화)
- pink BG + coral 자식 = ✗ (같은 따뜻한 계열)
- mint BG + coral 자식 = ✗ (색온도 약함)
- lemon BG + coral 자식 = ✗ (약함)
- mix-blend 보라 BG + coral 글씨 = ✗ (약함)
강제 글로우: mix-blend 영역의 모든 텍스트는 text-shadow:0 0 4px rgba(255,255,255,.8) 강제.
radial overlay opacity 룰: SVG overlay 셀 본문 가림 ✗ → opacity ≤ .4 강제.
Case G — 메타 라벨 ✗·기능 라벨만 ✓ (NEW v1.4)
❌ WRONG (학술지 톤·메타 라벨 과잉):
- 페이지 헤더
K seal · KISAS · HUMANITAS · ANNO MMXXVI · VOL. 02 · FOLIO I · SAPERE AUDE
- ModuleGrid
M / 01 M / 02 · Callout FIG. 01 · TODAY'S GOAL
- FigTag
§ 02 — IDENTITY MAP · h3 FIG. A How to Use This Handout
- Asset Bank
A / 01 Team Core Question · Music § MUSIC MINI-SESSION HANDOUT · DAY 02
- 라틴 모토
SAPERE AUDE PER VERITATEM SCRIPTA MANENT NOMEN EST OMEN FINIS DIEI II
→ 중3 학생이 "M/03이 뭐야?" 학술 코드 해독 부담. 워크북 ✗·학술논문 됨.
✅ CORRECT (일반 워크북 톤·기능 라벨만):
- 페이지 헤더
[KS icon] KISAS · Day 2 — Identity Workshop · Page 01 of 12 (1줄)
- ModuleGrid 카드 = 이름만 (
Identity Map)
- Callout =
TODAY'S GOAL 만
- FigTag =
IDENTITY MAP 만 (레몬 BG 띠 유지)
- Asset Bank = 이름만 (
Team Core Question)
- Music =
Music Mini-Session
- 라틴 모토 전수 제거
◇ 메타 vs 기능 분리
| 분류 | 사례 | 처리 |
|---|
| 메타 라벨 (학술 코드·학생 무관) | M/·FIG.·§·A/·VOL./FOLIO·라틴·K seal | 전수 제거 |
| 기능 라벨 (학생 사용·식별) | STEP 14·Q.0103·01~03(Exit)·Page N of 12 | 유지 |
| 시각 정체성 (라벨 ✗·디자인 요소) | 컬러레일·Bauhaus·Fraunces·풀채도 fill·15 시각 도구·KS shield 아이콘 | 유지 |
판단 기준: 학생이 라벨을 읽고 행동하나? YES=기능, NO=메타.
Case I — 위치바 하단정렬 (NEW v1.5)
증상: Locator(DAY N OF 9 — POSITION IN CAMP + 도트 1~9 + Day N — Today · ...) 블록이 페이지 하단(푸터 위)에 정렬되어야 하는데, 본문 끝에 붙어버림. 그 아래로 큰 공백 → 푸터.
원인: .locator{margin-top:auto}의 의도는 flex 컨테이너에서 자동 하단정렬. 그런데 .page는 position:relative만 있고 flex ✗ → margin-top:auto 무력.
❌ WRONG (D1.0 시안 상태):
.page{position:relative; }
.page.has-locator{padding-bottom:14mm;}
.locator{margin-top:auto;margin-bottom:14mm;}
✅ CORRECT (.page.has-locator를 flex column으로):
.page.has-locator{
padding-bottom:14mm;
display:flex;
flex-direction:column;
}
.locator{
margin-top:auto;
margin-bottom:4mm;
z-index:5;
}
룰:
- 위치바(.locator) 있는 페이지 =
.page.has-locator 클래스 강제
.page.has-locator = 반드시 flex column (margin-top:auto 작동 조건).locator margin-bottom = 4mm (푸터에서 적절한 간격. 14mm는 너무 떠 보임)- 본문 absolute 자식(top-header·bottom-footer·color-rail)은 flex layout에서 빠지므로 영향 ✗ (안전)
- 일반 본문 div들만 column으로 쌓이고 .locator가 마지막에 자동 하단정렬
판정: 위치바가 본문 직후에 붙어있으면 = 룰 #I 위반. 페이지 하단 푸터 위 4mm 간격 = 정상.
Case H — KS shield 아이콘 (NEW v1.4)
페이지 좌상단 = KS shield SVG 아이콘. 학교 정체성 시각 식별. K seal (Oxford 동그라미)·라틴 모토 대체.
자산 (재사용 — 모든 KISAS docx 박제 시 verbatim 복사):
→ assets/ks-shield.svg — 단독 SVG 파일 (재사용용)→ assets/ks-shield-snippet.html — top-header inline 삽입 HTML 스니펫→ assets/d1-base.css — .ks-icon·.top-header .left 필수 CSS
적용 (모든 페이지 헤더 12개에 동일 삽입):
<div class="top-header">
<div class="left">
<svg class="ks-icon" viewBox="0 0 24 28" width="20" height="22" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 1 L22 4 V14 C22 20 17.5 25 12 27 C6.5 25 2 20 2 14 V4 Z"/>
<text x="12" y="17" text-anchor="middle" font-family="Fraunces, serif" font-weight="800" font-size="9" fill="currentColor" stroke="none">KS</text>
</svg>
<span style="font-weight:700;letter-spacing:.14em">KISAS</span>
</div>
<div class=>
Day N — Title·Page NN of NN
디자인 본질:
- 방패 outline (path) +
KS 텍스트 (Fraunces 800·9pt·중앙 정렬)
- 단색
currentColor 상속 (default = ink·dark theme 변형 가능)
- viewBox
0 0 24 28 (방패 비율 6:7·세로 살짝 김)
- stroke-width 1.6 (인쇄 시 너무 얇지 않게)
- 흑백 인쇄 안전 (outline + 텍스트만·fill ✗)
- 라벨 ✗·디자인 요소 (메타 라벨 룰 #G 영향 ✗)
금지:
- K seal Oxford 동그라미 (이전 K seal) — 학술지 톤·메타 라벨로 분류 → 제거
- 컬러 fill 방패 (인쇄 시 잉크 폭주)
- 방패 자리에 학교명 풀 텍스트 ("KISAS Korea International ...") — KS 약자만
🔁 사용 흐름
1. INPUT 받음
사용자: "KISAS Day 3 Student Handout 박제해줘"
→ Phase 0: docx 경로 확인
→ Phase 1: python3-docx 추출
→ Phase 2: variant=Handout
→ Phase 3: template-handout.html + 15 시각화 분배
→ Phase 4-1: word_diff.py (룰 #3 PASS)
→ Phase 4-2: print_safety.py (룰 #5 PASS)
→ Phase 5: weasyprint PDF + pdfinfo (룰 #6 PASS)
2. 출력 위치 (파일명 규칙)
- HTML:
KISAS IP Design/{원본 docx 파일명}_D1.0.html
- PDF:
KISAS IP Design/{원본 docx 파일명}_D1.0.pdf
- 예:
KISAS_Day2_Student_Handouts.docx → KISAS_Day2_Student_Handouts_D1.0.html
- 예:
KISAS_Day3_teacher instruction.docx → KISAS_Day3_teacher instruction_D1.0.html
- 예:
KISAS_Day4_Macbeth_excerpt.docx → KISAS_Day4_Macbeth_excerpt_D1.0.html
- 디자인 변이:
D1.0 → D2.0 → D3.0 메이저 분기. v1.1 같은 minor 변이는 D1.0에 흡수
3. 검증 4 게이트
- word_diff: 원문 단어 100% HTML에 존재
- print_safety: 펜 영역 부모 BG 흰 종이
- pdfinfo: 페이지 수 의도와 ±0
- manual: 입체 시각화 ≥2/페이지
상세 워크플로: → references/workflow.md
헤리티지
-
D1 (~2026-04) — Modernist Swiss 첫 박제. 8축 SSOT 정립. Day 2 Student Handout 시안 (8p).
-
D1.1 (2026-05-07) — 형 진단 3축 반영:
- 콘텐츠 100% 보존 위반 — D1은 ~60% 박제 (요약·축약). 룰 #3 신설 +
word_diff.py 자동검증
- 인쇄 안전 위반 — Map center 검정 BG·CHORUS Final 레몬 BG·CHORUS Lab 코랄 BG 위 빈칸 4건. 룰 #5 신설 +
print_safety.py 자동검증
- 입체 시각화 부족 — 표·빈칸·박스 평면 위주. 룰 #7 신설 + 신규 8 컴포넌트 + 15 시각화 도구 카탈로그
→ 8축 SSOT는 그대로 승계 (D1 정체성 보존), 룰 #5·#7만 추가, 컴포넌트 12 → 20 확장. 페이지 수 8 → 12, Day 2 Student Handout 검증 통과 (단어·펜·페이지 3 게이트).
-
D1.2 (2026-05-07 후) — Bauhaus tail decoration p12 위로 튀어나옴 (절대좌표 충돌) → p12 데코 삭제·BauhausShapes 표지 전용 격리. p3·p8·p11 spacious 마이크로 조정. 신규 4 시각 도구 (IdentityWeb radial overlay·Map→Words 변환·Venn diagram·9-Day timeline mini). 12p 유지·콘텐츠 100% 유지.
-
D1.3 (2026-05-07 가독성 보정) — 형 진단: 컬러 fill 박스 안에서 BG 동화·같은 계열 충돌·약함 발생. Case F 컨트라스트 매트릭스 신설:
- mod 3·4 num·FlowArrow step 3·4 num: coral on mint/lemon → ink
- tint-pink/coral/blue callout bullet: coral → lemon
- tint-lemon/mint callout bullet: coral → ink
- swatch: 자기색 → ink 통일 (BG 동화 차단)
- KeepCard "Asset Bank" b: coral on lemon → ink
- Venn "your chorus": coral on 보라(mix-blend) → ink + 흰 글로우 그림자
- p3 IdentityWeb radial overlay opacity .5/.65 → .3/.4 (셀 라벨 가독성 ↑)
→ D1.0 시리즈 = D1·D1.1·D1.2·D1.3·D1.4 통합 (Modernist Swiss). 메이저 분기 시 D2.0으로.
-
D1.4 (2026-05-07 학생 친화 단순화) — 형 진단: "M/01·FIG.04 같은 학술 코드 = 학생한테 노이즈". 메타 라벨 전수 제거 (Case G) + KS shield 아이콘 도입 (Case H):
- 페이지 헤더
K seal · HUMANITAS · ANNO MMXXVI · VOL./FOLIO · 라틴 모토 → [KS icon] KISAS · Day 2 — Title · Page NN of 12 (1줄)
- 페이지 footer →
KISAS Day 2 · Page N of 12
- ModuleGrid M/01
05·Asset Bank A/0106·FigTag § 0207·h3 FIG.AF·Callout FIG.01~04 모두 제거
- 라틴 모토 전수 제거 (SAPERE AUDE·PER VERITATEM·SCRIPTA MANENT·NOMEN EST OMEN·FINIS DIEI II·FINIS)
- K seal Oxford 동그라미 → KS shield SVG 아이콘 (방패 outline + KS Fraunces 800)
- 디자인 정체성 (컬러레일·Bauhaus·Fraunces·풀채도 fill·15 시각 도구) 유지
- 학술지 톤 → 일반 워크북 톤. 학생 친화 ↑↑
- D1.5 (2026-05-08 위치바 하단정렬) — 형 진단: D1.0 시안에서 위치바(
DAY N OF 9 — POSITION IN CAMP + 도트 + Day N — Today · ...)가 본문 끝에 붙어버림. Case I 신설:
- 원인:
.locator{margin-top:auto} 박혀있으나 .page에 flex 설정 ✗ → 작동 ✗
- 처방:
.page.has-locator{display:flex;flex-direction:column} 신설 → margin-top:auto 작동 → 페이지 하단으로 자동 밀림
- margin-bottom: 14mm → 4mm (푸터와 간격 적절화)
- 본문 absolute 자식(top-header·bottom-footer·color-rail)은 flex 영향 ✗ (안전)
- assets/d1-base.css에 .locator·.page.has-locator 정본 박제 + references/components.md C21 신설
Output Path
| 산출물 | 경로 |
|---|
| 주 산출물 | mnt/outputs/kisas-ip-design-d1_{topic}_{YYYY-MM-DD}.md |
| 형식 | .html, .pdf. |
| 리서치 결과 (해당 시) | {VAULT}/_skills research/kisas-ip-design-d1/{YYYY-MM-DD}_{topic}.md |
Reference Index
| 파일 | 내용 | 언제 |
|---|
references/8-axis-ssot.md | 8 axis ssot | 해당 단계 진입 시 |
references/components.md | components | 해당 단계 진입 시 |
references/no-work-label-block.md | no work label block | 해당 단계 진입 시 |
references/phases.md | phases | 해당 단계 진입 시 |
references/print-safety.md | print safety | 해당 단계 진입 시 |
references/variants.md | variants | 해당 단계 진입 시 |
references/visualization-tools.md | visualization tools | 해당 단계 진입 시 |
references/workflow.md | workflow | 해당 단계 진입 시 |
Next Phase
본 스킬 작업 후 자연스럽게 이어지는 흐름:
- 후속 작업 →
apple-canvas
- 후속 작업 →
ui-designer
- 후속 작업 →
docx
- 후속 작업 →
shaper-skill
- 후속 작업 →
bp-guide
Failure Modes (Gotchas)
| 함정 | 대응 |
|---|
min-height 사용 → 콘텐츠 흐를 때 빈 페이지 | height: calc(297mm - {top+bottom}) + overflow:hidden |
:first-letter float:left + weasyprint 충돌 | manual <span class="dc"> 으로 drop-cap 흉내 |
display:flex grid 안에서 .qn/.label이 본문 너비 잡아먹음 | absolute 또는 inline 단순화 |
_thumbs/ 같은 언더바 폴더 GitHub Pages에서 안 보임 | 루트에 .nojekyll 추가 |
| INDEX.html 케이스 — macOS=case-insensitive, GitHub=case-sensitive | 항상 소문자 index.html로 |
| docx 테이블 → HTML 변환 시 빈 셀 누락 | python3-docx로 cell.text 그대로 100% 유지. 빈 셀도 .line × N 으로 |
| Caveat 폰트을 빈 라인 위에 hint로 깔기 | 룰 #5 위반 (펜 영역 = 흰). Caveat은 별도 예시 박스에만 |
| 5색 무차별 사용 = 산만 | 1 페이지 = 5색 중 ≤3색만. 나머지는 ink·paper·tint |
| 콘텐츠 압축 충동 (페이지 줄이려고) | 룰 #3 위반. 페이지 수 늘려라 (8p → 12p OK). 콘텐츠 압축 ✗ |
| 컬러 BG 위 빈칸·라인 (Map center·CHORUS Final·CHORUS Lab) | 룰 #5 위반. 흰 카드 inset 구조 (헤더·라벨·좌띠만 컬러) |
| 단어 단위 검증 우회 (curly apostrophe ’ vs straight ') | word_diff.py에서 replace("’","'") 정규화 후 비교 |
| 컬러 fill 박스 자식 요소 BG 동화 (coral BG + coral bullet 등) | Case F 컨트라스트 매트릭스 강제 적용. 자기색 자식 = ink 또는 lemon |
| pink/coral/mint/lemon BG 위 coral 글씨 (같은 계열·약함) | 어두운 BG → paper + lemon, 밝은 BG → ink |
| mix-blend 교집합 (보라색) 위 텍스트 가독성 ↓ | text-shadow:0 0 4px rgba(255,255,255,.8) 글로우 강제 |
| radial overlay·점선 SVG 셀 본문 가림 | opacity ≤ .4 (.5 이상은 본문 가독성 위협) |
| 메타 라벨 (M/·FIG.·§·A/·VOL./FOLIO·라틴) 본문 박제 | 학생 인지 부담·학술지 톤. 전수 제거. 헤더 = [KS icon] KISAS · Day N — Title · Page NN of 12 |
| K seal 동그라미 (Oxford BG의 K) 사용 | KS shield SVG 아이콘으로 대체. 단색 outline·Fraunces 800·흑백 안전 |
| 기능 라벨 (STEP·Q.·Page N) 도 메타라고 착각·제거 | 기능 라벨은 학생이 사용·유지. 판단: "학생이 라벨 읽고 행동하나?" YES=유지 |
| footer 페이지 번호 글자 너무 큼 (18pt 이상) | .bottom-footer .right = 12pt italic Fraunces 600 강제. 좌측 KISAS Day N·우측 Page N of NN 균형 |
