docs + V4 catalog + samples + Phase Q legacy 보존

전체 26 files (20 추가 + 6 수정), 10507 insertions.

Phase Z 문서 :
- docs/architecture/PHASE-Z-CHANGE-LOG.md (신설) — axis-by-axis 의사결정 history
  (newest-on-top). Step 7-A 부터 6 entry 박힘 + 2026-05-08 / 2026-05-08 #2
  (compat 매트릭스 폐기 / 6-B 폐기 / F14 표현 정정 / label gate policy 분리).
- docs/architecture/PHASE-Z-PIPELINE-OVERVIEW.md (수정) — Step 5/6/9 Gap note
  append (구조 무변, append-only). 6-B 폐기 사실 + Refinement F.
- docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md (수정) — snapshot date
  2026-05-08 갱신. §3 핵심 missing item 5 (Step 5/6/9 boundary axis breakdown
  + 폐기 기록). §6 한 줄 갱신 — 다음 axis 후보 A~F.

Project root docs :
- PLAN.md / PROGRESS.md / README.md (수정) — 토큰 체계 / 폴더 구조 / 설계 문서 /
  역할 분리 반영.
- IMPROVEMENT-REDESIGN.md (신설) — Phase Z 설계 핵심 문서.
- PROCESS_OVERVIEW.html (신설) — 파이프라인 개요 시각.
- docs/tasks/* (신설) — Phase Z task 문서.

V4 catalog (Phase Z runtime 필수 의존성) :
- tests/matching/v4_full32_result.yaml (신설, 4888 줄) — V4 매칭 결과 32 frame
  × 10 MDX section. lookup_v4_match() / lookup_v4_candidates() 가 본 파일 read.
  Phase Z runtime 이 *없으면 즉시 abort* — clone 후 즉시 동작 가능 보장.

Samples :
- samples/mdx_batch/04.mdx (신설) — MDX04 기본 sample.
- samples/mdx/04. DX 지연 요인.mdx (신설) — MDX04 원본.

Phase Q legacy 보존 (별 axis "Phase Q audit & salvage" 영역) :
- src/block_matcher_tfidf.py / catalog_blocks.py / frame_extractor.py /
  pipeline_v2.py — Phase Q (옛 파이프라인) src 신규 untracked 파일들.
  Phase Z runtime 와 의존성 0. Phase Q audit axis 에서 검토 예정.
- scripts/eval_block_matcher.py / fetch_all_frame_screenshots.py /
  match_17_units_my_matcher.py / match_mdx_strict.py / match_mdx_to_frames_tfidf.py /
  ocr_augment_texts.py / run_pipeline_v2.py / previews/ — Phase Q 작업 시
  사용한 옛 script. 같이 보존.
- run_mdx03_pipeline.py (수정) — Phase Q 진입점 (no flag) + Phase Z 진입점
  (--phase-z2 flag) 동시 wrapper. Phase Z 만 사용 시 `python -m
  src.phase_z2_pipeline samples/mdx_batch/03.mdx <run_id>` 직접 호출.

비-scope :
- tests/matching/ (v4_full32_result.yaml 외 ~63MB) — V4 진화 history /
  reports / DECK / ATTACH. Phase Q audit axis 에서 검토.
- tests/pipeline/ (~15MB) — pipeline data. Phase Q audit 영역.
- templates/catalog/blocks.yaml — 옛 block catalog. Phase Q audit.
- templates/phase_z2/frames/ — 옛 frame partial 위치. Phase Q audit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kmlee1andClaude Opus 4.7 committed 2026-05-08 09:47:58 +09:00
1 parent ec83405770
commit 85c680f02a
26 files changed
+10507 -46

No files matched your search

+631
View File
@@ -0,0 +1,631 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>슬라이드 자동 생성 — 프로세스 개요</title>
<style>
@page { size: A4 portrait; margin: 13mm; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, "Segoe UI", Pretendard, "Malgun Gothic", sans-serif;
background: white;
color: #1e293b;
font-size: 10pt;
line-height: 1.55;
}
@media screen {
body { background: #f1f5f9; padding: 20px 0; }
.page { max-width: 210mm; margin: 0 auto 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 13mm; background: #fff; min-height: 297mm; }
}
.page { page-break-after: always; }
.page:last-child { page-break-after: auto; }
h1 { font-size: 17pt; color: #0f172a; margin: 0 0 4pt; padding-bottom: 5pt; border-bottom: 2pt solid #1e293b; font-weight: 700; }
.subtitle { font-size: 10pt; color: #475569; margin-bottom: 9pt; }
.intro {
background: #fafafa;
border-left: 3pt solid #1e293b;
padding: 6pt 10pt;
font-size: 9pt;
color: #475569;
margin-bottom: 10pt;
line-height: 1.55;
}
.intro b { color: #1e293b; }
/* ─── P1: 단계 ─── */
.step {
display: table;
width: 100%;
margin-bottom: 7pt;
border: 0.5pt solid #cbd5e1;
border-radius: 3pt;
overflow: hidden;
}
.step > .row { display: table-row; }
.step > .row > div { display: table-cell; vertical-align: top; padding: 9pt 12pt; }
.col-num {
width: 5%;
background: #1e293b;
color: white;
text-align: center;
font-size: 20pt;
font-weight: 800;
vertical-align: middle !important;
padding: 0 !important;
}
.col-text {
width: 35%;
background: #ffffff;
border-right: 0.5pt solid #cbd5e1;
}
.col-text h2 { font-size: 11pt; color: #0f172a; margin: 0 0 4pt; font-weight: 700; }
.col-text p { margin: 3pt 0; font-size: 9pt; color: #1e293b; line-height: 1.55; }
.col-text p b { color: #0f172a; }
.col-vis {
width: 60%;
background: #fafafa;
padding: 9pt 11pt !important;
}
.vis-cap {
font-size: 7.5pt;
color: #64748b;
font-weight: 700;
letter-spacing: 0.5pt;
margin-bottom: 5pt;
text-transform: uppercase;
}
/* ─── 슬라이드 모형 ─── */
.slide {
background: white;
border: 0.7pt solid #1e293b;
aspect-ratio: 16/9;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.slide .head {
background: #1e293b;
color: white;
padding: 4pt 9pt;
font-size: 9pt;
font-weight: 700;
}
.slide .head .num { color: #94a3b8; font-size: 7pt; margin-right: 5pt; font-weight: 600; }
.slide .content {
padding: 6pt 9pt;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6pt;
}
.slide .col {
border: 0.5pt solid #cbd5e1;
padding: 4pt 6pt;
background: #fafafa;
}
.slide .col .col-title {
font-size: 7.8pt;
font-weight: 700;
color: #0f172a;
padding-bottom: 2pt;
border-bottom: 0.5pt solid #94a3b8;
margin-bottom: 2pt;
}
.slide .col .item { font-size: 7pt; color: #475569; padding: 1pt 0; line-height: 1.45; }
.slide .col .item b { color: #0f172a; }
.slide .foot {
background: #1e293b;
color: white;
padding: 3pt 9pt;
font-size: 7.5pt;
text-align: center;
font-weight: 700;
}
/* 1단계: 빈 슬라이드 + 트리 (콘텐츠 분석 단계) */
.slide-empty {
background: white;
border: 0.7pt dashed #475569;
aspect-ratio: 16/9;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.slide-empty .head { background: #f1f5f9; color: #475569; padding: 4pt 9pt; font-size: 8pt; border-bottom: 0.5pt dashed #94a3b8; }
.slide-empty .content { padding: 6pt 9pt; display: grid; grid-template-columns: 1fr 1fr; gap: 6pt; }
.slide-empty .col { border: 0.5pt dashed #94a3b8; background: #fafafa; }
.slide-empty .foot { background: #f1f5f9; color: #475569; padding: 3pt 9pt; font-size: 7.5pt; text-align: center; border-top: 0.5pt dashed #94a3b8; }
/* 2단계 — 빈 프레임 (선택된 Frame 18) */
.slide-skel { aspect-ratio: 16/9; background: white; border: 0.7pt solid #1e293b; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.slide-skel .head { background: #1e293b; color: white; padding: 4pt 9pt; font-size: 8.5pt; font-weight: 700; }
.slide-skel .content { padding: 6pt 9pt; display: grid; grid-template-columns: 1fr 1fr; gap: 6pt; }
.slide-skel .col { border: 0.5pt solid #cbd5e1; background: #f1f5f9; padding: 4pt 6pt; display: flex; align-items: flex-start; flex-direction: column; }
.slide-skel .col .placeholder { font-size: 7pt; color: #94a3b8; }
.slide-skel .col .placeholder.title { color: #475569; font-weight: 700; padding-bottom: 2pt; border-bottom: 0.5pt solid #cbd5e1; margin-bottom: 3pt; width: 100%; }
.slide-skel .col .placeholder.row { padding: 1pt 0; }
.slide-skel .foot { background: #475569; color: white; padding: 3pt 9pt; font-size: 7.5pt; text-align: center; }
/* MDX 03 — 상단(3카드) + 하단(좌우비교) 슬라이드 */
.slide-tb {
background: white;
border: 0.7pt solid #1e293b;
aspect-ratio: 16/9;
display: grid;
grid-template-rows: auto 1fr 1fr auto;
overflow: hidden;
}
.slide-tb .head {
background: #1e293b;
color: white;
padding: 4pt 9pt;
font-size: 9pt;
font-weight: 700;
}
.slide-tb .head .num { color: #94a3b8; font-size: 7pt; margin-right: 5pt; font-weight: 600; }
.slide-tb .top-area {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5pt;
padding: 6pt 9pt;
}
.slide-tb .card-3 {
border: 0.5pt solid #cbd5e1;
background: #fafafa;
padding: 4pt 6pt;
}
.slide-tb .card-3 .ct {
font-size: 7.5pt;
font-weight: 700;
color: #0f172a;
padding-bottom: 2pt;
border-bottom: 0.5pt solid #94a3b8;
margin-bottom: 2pt;
}
.slide-tb .card-3 .cd { font-size: 6.5pt; color: #475569; line-height: 1.45; }
.slide-tb .bottom-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5pt;
padding: 6pt 9pt;
border-top: 0.5pt dashed #cbd5e1;
}
.slide-tb .compare-col {
border: 0.5pt solid #cbd5e1;
background: #fafafa;
padding: 4pt 6pt;
}
.slide-tb .compare-col .col-h {
font-size: 7.5pt;
font-weight: 700;
color: #0f172a;
padding-bottom: 2pt;
border-bottom: 0.5pt solid #94a3b8;
margin-bottom: 3pt;
text-align: center;
}
.slide-tb .compare-col .seg { display: flex; gap: 3pt; align-items: center; margin: 1.5pt 0; }
.slide-tb .compare-col .seg .lbl {
font-size: 6pt;
background: #1e293b;
color: white;
padding: 0 3pt;
border-radius: 1.5pt;
font-weight: 700;
flex: 0 0 22pt;
text-align: center;
}
.slide-tb .compare-col .seg .v { font-size: 6.5pt; color: #475569; line-height: 1.4; }
.slide-tb .foot {
background: #1e293b;
color: white;
padding: 3pt 9pt;
font-size: 7.5pt;
text-align: center;
font-weight: 700;
}
/* 3단계 — 슬라이드 + 팝업 분리 표시 */
.slide-popup-wrap { position: relative; }
.slide-popup-wrap .pop-mark {
position: absolute;
bottom: -6pt;
right: -6pt;
width: 50%;
background: white;
border: 0.7pt solid #1e293b;
box-shadow: 2pt 2pt 0 0 #94a3b8;
padding: 4pt 7pt;
font-size: 6.5pt;
color: #1e293b;
}
.slide-popup-wrap .pop-mark .pop-h { font-weight: 700; font-size: 7pt; color: #0f172a; padding-bottom: 1pt; border-bottom: 0.5pt solid #1e293b; margin-bottom: 2pt; }
.note {
margin-top: 7pt;
font-size: 7.5pt;
color: #475569;
font-style: italic;
line-height: 1.4;
text-align: center;
}
/* ─── P2: 흑백 구조도 ─── */
.flow-section { margin: 7pt 0; }
.flow-section .sec-title {
font-size: 9pt;
font-weight: 700;
color: #0f172a;
margin-bottom: 5pt;
padding-bottom: 2pt;
border-bottom: 0.5pt solid #1e293b;
}
.flow-section .sec-num { color: #94a3b8; margin-right: 5pt; font-size: 8pt; }
.flow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 5pt;
margin: 4pt 0;
}
.fbox {
background: white;
border: 0.7pt solid #1e293b;
border-radius: 2pt;
padding: 4pt 8pt;
font-size: 8.5pt;
text-align: center;
min-width: 90pt;
color: #0f172a;
position: relative;
}
.fbox .stage { font-size: 6.5pt; color: #94a3b8; font-weight: 700; letter-spacing: 0.5pt; }
.fbox .name { font-weight: 700; color: #0f172a; margin-top: 1pt; font-size: 8pt; }
.fbox .detail { font-size: 6.8pt; color: #475569; margin-top: 1pt; line-height: 1.35; }
.fbox .tech {
display: inline-block;
font-size: 6pt;
color: #1e293b;
font-weight: 700;
padding: 0.5pt 4pt;
background: #e2e8f0;
border-radius: 6pt;
margin-top: 2pt;
border: 0.3pt solid #94a3b8;
}
.fbox .tech.ai { background: #fef3c7; color: #78350f; border-color: #f59e0b; }
.fbox .tech.code { background: #e2e8f0; color: #1e293b; }
.fbox .tech.jinja { background: #dbeafe; color: #1e40af; border-color: #60a5fa; }
.fbox .tech.tool { background: #f3e8ff; color: #6b21a8; border-color: #a855f7; }
.fbox.dashed { border-style: dashed; }
.fbox.bold { background: #1e293b; color: white; }
.fbox.bold .name, .fbox.bold .detail { color: white; }
.fbox.bold .stage { color: #cbd5e1; }
.farrow { color: #475569; font-size: 13pt; }
.farrow-down { text-align: center; font-size: 13pt; color: #475569; margin: 1pt 0; line-height: 1; }
.fbranch {
display: flex;
justify-content: center;
gap: 14pt;
position: relative;
}
.fbranch::before {
content: "";
position: absolute;
top: -6pt;
left: 50%;
width: 0; height: 6pt;
border-left: 0.7pt solid #475569;
}
.bcol { display: flex; flex-direction: column; align-items: center; gap: 3pt; flex: 0 0 auto; }
.btag {
font-size: 6.5pt;
color: #475569;
font-weight: 700;
padding: 1pt 5pt;
background: #f1f5f9;
border-radius: 7pt;
border: 0.3pt solid #cbd5e1;
}
.fcheck {
background: white;
border: 0.5pt solid #94a3b8;
border-style: dashed;
border-radius: 2pt;
padding: 4pt 8pt;
font-size: 7.5pt;
color: #475569;
text-align: center;
}
.callout-bw {
background: #fafafa;
border: 0.5pt solid #475569;
padding: 7pt 11pt;
font-size: 8.5pt;
color: #1e293b;
margin-top: 9pt;
line-height: 1.6;
}
.callout-bw b { color: #0f172a; }
/* 트리 (1단계 좌측 도식 — 작게) */
.mini-tree {
font-family: ui-monospace, monospace;
font-size: 7pt;
color: #475569;
line-height: 1.45;
padding: 4pt 7pt;
background: white;
border: 0.5pt solid #cbd5e1;
border-radius: 2pt;
margin-top: 5pt;
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- P1 -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="page">
<h1>슬라이드 자동 생성 프로세스</h1>
<div class="intro">
<b>전처리</b> · MDX 를 정규화하고, Figma 디자인을 HTML 화하여 DB 에 정리함.
</div>
<!-- 1. MDX 분석 + 레이아웃 -->
<div class="step">
<div class="row">
<div class="col-num">1</div>
<div class="col-text">
<h2>MDX 분석 + 레이아웃 정리</h2>
<p>MDX 의 <b>대 / 중 / 소목차</b> 와 콘텐츠 성격에 따라 4 가지 레이아웃 중 1 개를 정리</p>
</div>
<div class="col-vis">
<div style="max-width: 65%; margin: 0 auto;">
<div style="background: white; border: 0.7pt dashed #475569; aspect-ratio: 16/9; display: grid; grid-template-rows: auto 1fr 1fr auto; overflow: hidden;">
<div style="background: #f1f5f9; color: #475569; padding: 2pt 6pt; font-size: 6.5pt; border-bottom: 0.5pt dashed #94a3b8;">DX 시행 — 필수 요건 + 혁신 방안</div>
<div style="padding: 2pt 5pt; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2pt;">
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 5pt; color: #94a3b8;">상단 3 영역</div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa;"></div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa;"></div>
</div>
<div style="padding: 2pt 5pt; display: grid; grid-template-columns: 1fr 1fr; gap: 2pt; border-top: 0.5pt dashed #cbd5e1;">
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 5pt; color: #94a3b8;">하단 좌</div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 5pt; color: #94a3b8;">하단 우</div>
</div>
<div style="background: #f1f5f9; color: #475569; padding: 1pt 6pt; font-size: 6pt; text-align: center; border-top: 0.5pt dashed #94a3b8;">결론</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2. Figma 매칭 -->
<div class="step">
<div class="row">
<div class="col-num">2</div>
<div class="col-text">
<h2>Figma 매칭</h2>
<p>디자인 프레임 (HTML) 중 적합한 디자인 매칭</p>
<p><b>매칭</b> · 해당 프레임에 텍스트 업데이트</p>
<p><b>미매칭</b> · 가장 유사한 프레임 참고, 재구성</p>
</div>
<div class="col-vis">
<div style="display: flex; gap: 6pt;">
<!-- 매칭 시 - 진짜 Figma 이미지 -->
<div style="flex: 1; min-width: 0;">
<div style="font-size: 7.5pt; font-weight: 700; color: #0f172a; margin-bottom: 3pt;">매칭 — Frame 13 + Frame 29</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div>
<img src="data:image/png;base64,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 truncated
<div style="font-size: 6.5pt; color: #475569; text-align: center; margin-top: 1pt;">Frame 13 — 필수 요건 (기술·사람·자연)</div>
</div>
<div>
<img src="data:image/png;base64,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 truncated
<div style="font-size: 6.5pt; color: #475569; text-align: center; margin-top: 1pt;">Frame 29 — Process / Product 혁신</div>
</div>
</div>
</div>
<!-- 미매칭 시 -->
<div style="flex: 1; min-width: 0;">
<div style="font-size: 7.5pt; font-weight: 700; color: #0f172a; margin-bottom: 3pt;">미매칭 — 유사 프레임 변형</div>
<div style="background: white; border: 0.7pt dashed #475569; aspect-ratio: 16/9; display: grid; grid-template-rows: auto 1fr 1fr auto; overflow: hidden;">
<div style="background: #475569; color: white; padding: 2pt 5pt; font-size: 6pt; font-weight: 700;">DX 시행 — 필수 요건 + 혁신 방안</div>
<div style="padding: 2.5pt 4pt; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2pt;">
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa; padding: 2pt; font-size: 5pt; color: #94a3b8;">유사 카드 차용</div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa;"></div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa;"></div>
</div>
<div style="padding: 2.5pt 4pt; display: grid; grid-template-columns: 1fr 1fr; gap: 2pt; border-top: 0.5pt dashed #cbd5e1;">
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa; padding: 2pt; font-size: 5pt; color: #94a3b8;">유사 비교 차용</div>
<div style="border: 0.5pt dashed #94a3b8; background: #fafafa;"></div>
</div>
<div style="background: #94a3b8; color: white; padding: 1pt 5pt; font-size: 5.5pt; text-align: center;">결론</div>
</div>
<div style="font-size: 7pt; color: #475569; margin-top: 4pt; line-height: 1.4;">
적합 프레임 없음 → 가장 유사한 프레임의 CSS / 구조만 차용 (자유 디자인 X)
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3. 재구성 (공간 + 팝업) -->
<div class="step">
<div class="row">
<div class="col-num">3</div>
<div class="col-text">
<h2>재구성 — 공간 검토 + 팝업 정리</h2>
<p>매칭된 프레임의 영역에 콘텐츠가 들어가도록 검토</p>
</div>
<div class="col-vis">
<div style="max-width: 65%; margin: 0 auto;">
<div class="slide-tb" style="font-size: 6pt;">
<div class="head" style="font-size: 6.5pt; padding: 2pt 5pt;"><span class="num" style="font-size: 5pt;">03</span>DX 시행을 위한 필수 요건 및 혁신 방안</div>
<div class="top-area" style="padding: 3pt 5pt; gap: 3pt;">
<div class="card-3" style="padding: 2pt 3pt;">
<div class="ct" style="font-size: 5.5pt; padding-bottom: 1pt; margin-bottom: 1pt;">기술</div>
<div class="cd" style="font-size: 4.5pt; line-height: 1.3;">핵심 기술 + 도구</div>
</div>
<div class="card-3" style="padding: 2pt 3pt;">
<div class="ct" style="font-size: 5.5pt; padding-bottom: 1pt; margin-bottom: 1pt;">사람</div>
<div class="cd" style="font-size: 4.5pt; line-height: 1.3;">전문 인력 + 교육</div>
</div>
<div class="card-3" style="padding: 2pt 3pt;">
<div class="ct" style="font-size: 5.5pt; padding-bottom: 1pt; margin-bottom: 1pt;">자연</div>
<div class="cd" style="font-size: 4.5pt; line-height: 1.3;">데이터 + 인프라</div>
</div>
</div>
<div class="bottom-area" style="padding: 3pt 5pt; gap: 3pt;">
<div class="compare-col" style="padding: 2pt 3pt;">
<div class="col-h" style="font-size: 5.5pt; padding-bottom: 1pt; margin-bottom: 1pt;">Process 혁신</div>
<div class="seg" style="margin: 0.5pt 0;"><span class="lbl" style="font-size: 4pt;">AS-IS</span><span class="v" style="font-size: 4.5pt;">2D 도면</span></div>
<div class="seg" style="margin: 0.5pt 0;"><span class="lbl" style="font-size: 4pt;">TO-BE</span><span class="v" style="font-size: 4.5pt;">데이터 통합</span></div>
</div>
<div class="compare-col" style="padding: 2pt 3pt;">
<div class="col-h" style="font-size: 5.5pt; padding-bottom: 1pt; margin-bottom: 1pt;">Product 혁신</div>
<div class="seg" style="margin: 0.5pt 0;"><span class="lbl" style="font-size: 4pt;">AS-IS</span><span class="v" style="font-size: 4.5pt;">3D 모델</span></div>
<div class="seg" style="margin: 0.5pt 0;"><span class="lbl" style="font-size: 4pt;">TO-BE</span><span class="v" style="font-size: 4.5pt;">정보 연계</span></div>
</div>
</div>
<div class="foot" style="font-size: 5.5pt; padding: 1pt 5pt;">동시 추진</div>
</div>
</div>
</div>
</div>
</div>
<!-- 4. 출력 -->
<div class="step">
<div class="row">
<div class="col-num">4</div>
<div class="col-text">
<h2>출력</h2>
<p>완성된 슬라이드를 1 장으로 검증 후 HTML 출력</p>
</div>
<div class="col-vis">
<div style="max-width: 65%; margin: 0 auto;">
<img src="data:image/png;base64,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 truncated
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- P2 : 실질 프로세스 구조도 (흑백) -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="page">
<h1>실질 프로세스 구조도</h1>
<!-- 입력 -->
<div class="flow-row">
<div class="fbox bold">
<div class="stage">INPUT</div>
<div class="name">MDX 1 파일</div>
<div class="detail">대목차 1 개 = 슬라이드 1 장</div>
</div>
</div>
<div class="farrow-down">↓</div>
<!-- 1. MDX 분석 + 레이아웃 -->
<div class="flow-section">
<div class="sec-title"><span class="sec-num">STAGE 1</span>MDX 분석 + 레이아웃 정리</div>
<div class="flow-row">
<div class="fbox"><div class="name">정규화</div><div class="detail">외부 컴포넌트 인라인</div><span class="tech code">코드</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">트리 추출</div><div class="detail">대 / 중 / 소목차</div><span class="tech code">코드 (regex)</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">콘텐츠 분석</div><div class="detail">관계 / 항목수 / 성격</div><span class="tech code">코드 (V3 룰)</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">레이아웃 결정</div><div class="detail">Type A / B / B' / B''</div><span class="tech code">코드 (룰 매칭)</span></div>
</div>
</div>
<div class="farrow-down">↓</div>
<!-- 2. Figma 매칭 -->
<div class="flow-section">
<div class="sec-title"><span class="sec-num">STAGE 2</span>Figma 매칭</div>
<div class="flow-row">
<div class="fbox"><div class="name">키워드 매칭</div><div class="detail">3 계층 (핵심·세트·연관)</div><span class="tech code">코드 (V1)</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">의미 매칭</div><div class="detail">임베딩 유사도</div><span class="tech tool">ko-sroberta</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">구조 매칭</div><div class="detail">레이아웃·관계·항목수</div><span class="tech code">코드 (V3)</span></div>
<span class="farrow">→</span>
<div class="fbox bold"><div class="name">종합 판정</div><div class="detail">매칭 / 미매칭</div><span class="tech code">코드 (V4)</span></div>
</div>
<div class="farrow-down">↓</div>
<div class="fbranch">
<div class="bcol">
<div class="btag">매칭</div>
<div class="fbox"><div class="name">콘텐츠 매핑</div><div class="detail">크기에 맞게 재구성</div><span class="tech ai">AI · Sonnet</span></div>
</div>
<div class="bcol">
<div class="btag">미매칭</div>
<div class="fbox dashed"><div class="name">유사 프레임 변형</div><div class="detail">대안 시도 → 변형</div><span class="tech ai">AI · Sonnet</span></div>
</div>
</div>
</div>
<div class="farrow-down">↓ 결과 통합 ↓</div>
<!-- 3. 재구성 -->
<div class="flow-section">
<div class="sec-title"><span class="sec-num">STAGE 3</span>재구성 — 공간 검토 + 팝업 정리</div>
<div class="flow-row">
<div class="fbox"><div class="name">크기 계산</div><div class="detail">컨테이너 px 배분</div><span class="tech code">코드 (space_allocator)</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">영역별 검증</div><div class="detail">적정 / 넘침 / 공란 / 불균형</div><span class="tech code">코드 (fit_verifier)</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">보정</div><div class="detail">팝업 분리 또는 STAGE 1 회귀</div><span class="tech code">코드 + 회귀</span></div>
</div>
</div>
<div class="farrow-down">↓</div>
<!-- 4. 출력 -->
<div class="flow-section">
<div class="sec-title"><span class="sec-num">STAGE 4</span>HTML 조립 + 검증 + 출력</div>
<div class="flow-row">
<div class="fbox"><div class="name">HTML 조립</div><div class="detail">프레임 + 콘텐츠 + 팝업</div><span class="tech jinja">Jinja2</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">실측 검증</div><div class="detail">넘침 차단</div><span class="tech tool">Selenium</span></div>
<span class="farrow">→</span>
<div class="fbox"><div class="name">시각 검증</div><div class="detail">품질 평가</div><span class="tech ai">AI · Opus Vision</span></div>
<span class="farrow">→</span>
<div class="fbox bold"><div class="name">슬라이드 1 장</div><div class="detail">final.html</div></div>
</div>
</div>
<!-- 범례 -->
<div style="margin-top: 6pt; padding: 5pt 9pt; background: white; border: 0.5pt solid #94a3b8; border-radius: 2pt; font-size: 7pt; display: flex; gap: 10pt; flex-wrap: wrap; align-items: center;">
<span style="font-weight: 700; color: #0f172a;">처리 주체</span>
<span><span class="tech code" style="font-size: 6pt;">코드</span> 결정론적 Python 처리</span>
<span><span class="tech ai" style="font-size: 6pt;">AI</span> Anthropic API (Sonnet / Opus)</span>
<span><span class="tech jinja" style="font-size: 6pt;">Jinja2</span> 템플릿 렌더링</span>
<span><span class="tech tool" style="font-size: 6pt;">도구</span> 외부 도구 (Selenium / 임베딩 모델)</span>
</div>
</div>
</body>
</html>