wip: phase_z2 evidence 파이프라인 + matching 실험(phase2~26) + 프론트 trace 패널 진행분 스냅샷
- src: phase_z2 composition/mapper/pipeline/placement_planner/retry, ai_fallback(prompts/schema/validate), mdx_text_atoms 신규 - Front: PipelineTracePanel 신규, FramePanel/SlideCanvas/Home/designAgentApi 등 갱신 + 테스트 4종 추가 - templates/phase_z2: catalog(component_expansion_registry, node_slot_mapping 신규), frames, families, slide_base 갱신 - tests/matching: phase2~26 매칭 실험 스크립트·리포트·온톨로지 전체 (미커밋 진행분) - tests: b4_v4 evidence, task5~28.5 시리즈, regression(imp95 baseline) 등 신규 테스트 대량 추가 - docs/reference: MDX 구조 인벤토리, MDX→Frame 구조 계약 문서 - scripts: mdx 계약/parity/coverage/viewport 체크, gitea comment, run sync 유틸 - .gitignore: tmp*.json, chromedriver, .orchestrator, *.pkl, Front_test* 등 임시/스냅샷 제외 미완성 작업의 보존용 스냅샷 커밋 (2026-07-02) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko"><head><meta charset="utf-8"><title>MDX ↔ Figma 매칭 — 현황 및 제안</title>
|
||||
<style>
|
||||
@page { size: A4 portrait; margin: 14mm 14mm 16mm 14mm; }
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Segoe UI", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
|
||||
background: white; color: #1e293b; margin: 0;
|
||||
font-size: 10pt; line-height: 1.45;
|
||||
}
|
||||
@media print {
|
||||
body { margin: 0; }
|
||||
.avoid-break { page-break-inside: avoid; }
|
||||
.page-break { page-break-before: always; }
|
||||
}
|
||||
@media screen {
|
||||
body { max-width: 210mm; margin: 10mm auto; box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 14mm; background: #fff; }
|
||||
}
|
||||
h1 { font-size: 15pt; border-bottom: 2pt solid #2563eb; padding-bottom: 4pt; margin: 0 0 6pt 0; color: #0f172a; }
|
||||
h2 { font-size: 11pt; color: #1e293b; margin: 10pt 0 5pt; padding: 3pt 6pt; background: #e0e7ff; border-left: 3pt solid #0a6; border-radius: 2pt; }
|
||||
h3 { font-size: 10pt; margin: 6pt 0 3pt; color: #1a365d; font-weight: 700; }
|
||||
p { margin: 4pt 0; }
|
||||
.meta-bar { color: #64748b; font-size: 8.5pt; margin: -3pt 0 8pt; font-style: italic; }
|
||||
.note { background: #fef3c7; border-left: 3pt solid #f59e0b; padding: 4pt 8pt; margin: 6pt 0; font-size: 9pt; color: #78350f; border-radius: 2pt; }
|
||||
.fail-note { background: #fee2e2; border-left: 3pt solid #dc2626; padding: 4pt 8pt; margin: 4pt 0; font-size: 9pt; color: #991b1b; border-radius: 2pt; }
|
||||
.ok-note { background: #d1fae5; border-left: 3pt solid #059669; padding: 4pt 8pt; margin: 4pt 0; font-size: 9pt; color: #065f46; border-radius: 2pt; }
|
||||
.mdx-card { background: #f8fafc; border: 0.5pt solid #cbd5e1; border-radius: 4pt; padding: 6pt 8pt; margin: 4pt 0; }
|
||||
.mdx-title { font-weight: 700; color: #0f172a; font-size: 10.5pt; margin-bottom: 2pt; }
|
||||
.mdx-excerpt { color: #475569; font-size: 9pt; margin: 2pt 0 4pt; line-height: 1.4; }
|
||||
.kw-chip { display: inline-block; padding: 1pt 6pt; background: #dbeafe; color: #1e40af; border-radius: 8pt; font-size: 8pt; margin: 1pt 2pt 1pt 0; font-family: ui-monospace, monospace; }
|
||||
.kw-set-chip { background: #fce7f3; color: #9f1239; }
|
||||
.kw-rel-chip { background: #e0e7ff; color: #3730a3; }
|
||||
table { border-collapse: collapse; width: 100%; font-size: 9pt; margin: 4pt 0; }
|
||||
th, td { border: 0.5pt solid #cbd5e1; padding: 3pt 5pt; text-align: left; vertical-align: top; }
|
||||
th { background: #1e293b; color: white; font-weight: 700; font-size: 8.5pt; }
|
||||
code { background: #f1f5f9; padding: 0 3pt; border-radius: 2pt; font-family: ui-monospace, Menlo, monospace; font-size: 8.5pt; color: #0f172a; }
|
||||
.frame-thumb { max-width: 100%; height: auto; border: 0.5pt solid #94a3b8; border-radius: 3pt; display: block; }
|
||||
.frame-cell { text-align: center; vertical-align: top; padding: 3pt; }
|
||||
.frame-label { font-size: 8.5pt; color: #0f172a; font-weight: 600; margin-top: 2pt; }
|
||||
.frame-score { font-family: ui-monospace, monospace; font-size: 8pt; color: #059669; }
|
||||
.frame-desc { font-size: 7.5pt; color: #64748b; line-height: 1.25; margin-top: 1pt; }
|
||||
.label-badge { display: inline-block; padding: 1pt 5pt; border-radius: 2pt; font-size: 7.5pt; font-weight: 700; }
|
||||
.label-use_as_is { background: #d1fae5; color: #065f46; }
|
||||
.label-light_edit { background: #dbeafe; color: #1e40af; }
|
||||
.label-restructure { background: #fef3c7; color: #92400e; }
|
||||
.label-reject { background: #fee2e2; color: #991b1b; }
|
||||
.answer-box { background: #fff3cd; border: 1.5pt solid #dc2626; border-radius: 3pt; padding: 2pt; }
|
||||
.flex-grid { display: table; width: 100%; border-spacing: 0; }
|
||||
.flex-row { display: table-row; }
|
||||
.flex-cell { display: table-cell; vertical-align: top; padding: 2pt; }
|
||||
ol.steps { margin: 4pt 0; padding-left: 16pt; }
|
||||
ol.steps li { margin: 3pt 0; line-height: 1.5; }
|
||||
.step-title { font-weight: 700; color: #1e293b; }
|
||||
.step-fail { color: #991b1b; font-size: 8.5pt; font-style: italic; }
|
||||
.step-ok { color: #065f46; font-size: 8.5pt; }
|
||||
|
||||
/* V1 매칭 상세 (ATTACH_01) 전용 */
|
||||
.page-header-small { font-size: 8pt; color: #64748b; text-align: right; margin: 0 0 2pt 0; }
|
||||
.frame-match { border: 0.5pt solid #cbd5e1; border-radius: 4pt; padding: 6pt 8pt; margin: 4pt 0; background: #fafafa; }
|
||||
.frame-match.answer { border: 1pt solid #dc2626; background: #fffbeb; }
|
||||
.frame-match h3 { margin: 0 0 3pt 0; font-size: 10pt; }
|
||||
.fm-body { display: table; width: 100%; }
|
||||
.fm-thumb { display: table-cell; width: 32mm; vertical-align: top; padding-right: 6pt; }
|
||||
.fm-thumb img { max-width: 30mm; height: auto; border: 0.5pt solid #94a3b8; border-radius: 2pt; display: block; }
|
||||
.fm-thumb .frame-desc { font-size: 7pt; color: #64748b; margin-top: 2pt; line-height: 1.25; }
|
||||
.fm-detail { display: table-cell; vertical-align: top; }
|
||||
.kw-line { margin: 3pt 0; font-size: 8.5pt; line-height: 1.4; }
|
||||
.kw-line strong { color: #0f172a; font-weight: 700; }
|
||||
.hit-chip { color: #065f46; background: #d1fae5; padding: 1pt 5pt; border-radius: 2pt; font-size: 8pt; display: inline-block; margin: 0 2pt; }
|
||||
.miss-chip { color: #991b1b; background: #fee2e2; padding: 1pt 5pt; border-radius: 2pt; font-size: 8pt; display: inline-block; margin: 0 2pt; }
|
||||
.hit-inline { color: #065f46; font-weight: 600; }
|
||||
.miss-inline { color: #991b1b; }
|
||||
.ratio { color: #64748b; font-family: ui-monospace, monospace; font-size: 7.5pt; }
|
||||
.frame-match ul { margin: 2pt 0; padding-left: 14pt; font-size: 8.5pt; }
|
||||
.frame-match li { line-height: 1.4; margin: 1pt 0; }
|
||||
.section-tag { display: inline-block; padding: 2pt 6pt; border-radius: 2pt; font-size: 8pt; font-weight: 700; margin-left: 4pt; vertical-align: middle; }
|
||||
.tag-matched { background: #d1fae5; color: #065f46; }
|
||||
.tag-unmatched { background: #fee2e2; color: #991b1b; }
|
||||
</style></head><body><h1>MDX ↔ Figma 프레임 자동 매칭 — 현황 및 제안</h1><div class="meta-bar">첨부 6장과 함께 검토. 이 한 장이 전체 요약.</div><h2>1. 개요</h2><ul style="margin:3pt 0;padding-left:14pt;font-size:9.5pt;line-height:1.5"><li>CEL 각 섹션별 내용(MDX)에 <strong>가장 적합한 Figma 프레임을 매칭</strong>하는 프로세스 확인</li><li>실행 내용: Figma 디자인에서 <strong>텍스트 요소</strong>를 추출하여 MDX와의 유사도를 통한 매칭 실시</li></ul><h2>2. 시행 단계</h2><ol class="steps">
|
||||
<li><span class="step-title">기존 라이브러리/모델 적용</span> — tf-idf, sobert, BM25, cross-encoder 등 적용
|
||||
<div class="step-fail">(*) 일반적인 단어, 동음이의/도메인 용어 부재 등의 요인으로 매칭 점수 낮거나 미매칭.
|
||||
예: "전환"(일반) vs "디지털 전환"(DX) 혼동, BEPs 고유어(결과혁신/과정혁신 등) 학습 안 됨.</div>
|
||||
</li>
|
||||
|
||||
<li><span class="step-title">AI로 디자인 분석하여 매칭</span>
|
||||
<div class="step-fail">(*) 없는 단어, 추론 단어 등의 요인으로 매칭 점수 낮게 나오며, 구조가 맞지 않음.</div>
|
||||
</li>
|
||||
|
||||
<li><span class="step-title">키워드 전처리 및 가중치를 통한 매칭</span> <span style="color:#2563eb;font-size:8.5pt">(첨부 1. 키워드 정리)</span>
|
||||
<div style="font-size:8.5pt;margin:2pt 0;color:#475569">
|
||||
(*) Figma에서 추출한 텍스트에서 해당 디자인의 <strong>핵심 키워드 / 세트 키워드 / 연관 키워드</strong>를 구분,
|
||||
MDX에서 해당 키워드를 통해 매칭 점수 정리 <span style="color:#2563eb">(첨부 2. 키워드 매칭)</span>
|
||||
</div>
|
||||
<div class="step-ok">→ 32개 디자인 중 적합한 프레임 매칭. 하지만 2~3순위 프레임을 활용하기엔 부적절.</div>
|
||||
<div class="step-fail">⇒ BEPs에 없는 내용에 대한 디자인 매칭 시 구조에 적합하지 않은 디자인 매칭. <span style="color:#2563eb">(첨부 2. 키워드 매칭 — 한계)</span></div>
|
||||
</li>
|
||||
|
||||
<li><span class="step-title">키워드 매칭 + 의미 / 구조 / 적용 가능성을 통한 매칭</span> <span style="color:#2563eb;font-size:8.5pt">(첨부 3. 매칭 결과)</span>
|
||||
<div style="font-size:8.5pt;margin:2pt 0;color:#475569">
|
||||
(*) 매칭 결과 표
|
||||
</div>
|
||||
<div class="step-ok">→ 구조 매칭 시, 내용에 기반하여 적합한 디자인과 매칭 <span style="color:#2563eb">(첨부 4. 구조 매칭 키워드)</span></div>
|
||||
<div class="step-ok">(*) 단순 구조 매칭이 아닌 <strong>fit-v2</strong>가 가장 적합 <span style="color:#2563eb">(첨부 5. 샘플)</span></div>
|
||||
</li>
|
||||
|
||||
<li><span class="step-title">Figma 프레임별 추출 내용 및 정리 방안</span>
|
||||
<div style="font-size:8.5pt;margin:2pt 0;color:#475569">
|
||||
→ 32개 프레임 외, BEPs에서의 디자인들을 프레임별로 추출 및 정리 <span style="color:#2563eb">(첨부 6. 정리 방안)</span>
|
||||
</div>
|
||||
<div class="step-ok">→ 테스트를 늘려가며 조금 더 조정할 필요</div>
|
||||
</li>
|
||||
</ol><h2>첨부 6장</h2>
|
||||
<table style="margin-top:3pt"><thead><tr>
|
||||
<th style="width:6%">#</th><th style="width:36%">파일</th><th>내용</th>
|
||||
</tr></thead><tbody>
|
||||
<tr><td><strong>1</strong></td><td><code>ATTACH_01_KEYWORD_ORGANIZATION.html</code></td><td>Figma 프레임별 3-layer 키워드 정리 (핵심/세트/연관)</td></tr>
|
||||
<tr><td><strong>2</strong></td><td><code>ATTACH_02_KEYWORD_MATCHING.html</code></td><td>V1 키워드 매칭 결과 + 한계 사례 (BEPs 밖 콘텐츠)</td></tr>
|
||||
<tr><td><strong>3</strong></td><td><code>ATTACH_03_CASCADE_RESULT.html</code></td><td>V1 키워드 → + 의미 → + 구조 → + 적용 가능성 단계별 결과</td></tr>
|
||||
<tr><td><strong>4</strong></td><td><code>ATTACH_04_STRUCTURE_VOCAB.html</code></td><td>구조 매칭 키워드 정의 (content_affinity 12, structure_intent 9, alt_patterns)</td></tr>
|
||||
<tr><td><strong>5</strong></td><td><code>ATTACH_05_SAMPLES.html</code></td><td>fit-v2 적합 샘플 3건 (V1 강함/약함/reject 각 사례)</td></tr>
|
||||
<tr><td><strong>6</strong></td><td><code>ATTACH_06_DB_ORGANIZATION.html</code></td><td>Figma DB 형태 (Frame 예시 + 32 프레임 요약)</td></tr>
|
||||
</tbody></table>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user