add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신

전체 401 files (397 추가 + 4 수정), 14304 insertions. 추가: - figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB). 각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/, _renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md (일부 frame)}. Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract / partial / builder adapter (미래 axis A) 의 source. - figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록. - figma_to_html_agent/HARNESS.md — 변환 검증 harness. - figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집. 수정: - figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md — 변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등). - figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신. Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog + templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 09:41:05 +09:00
parent cc2f434000
commit 9fbe3ac90c
401 changed files with 14304 additions and 2 deletions
--- a/figma_to_html_agent/blocks/1171281190/analysis.md
+++ b/figma_to_html_agent/blocks/1171281190/analysis.md
@@ -0,0 +1,58 @@
+# Frame 1171281190 — 필수조건
+
+## 내용 설명
+
+DX 시행을 위한 3대 필수조건을 3열 병렬 구조로 설명하는 디자인.
+기술, 사람, 자연이라는 3개 동등 요소를 각 세로 카드로 나누어 설명한다.
+3개 병렬 조건·3대 요소·3개 축의 균형 설명에 적합.
+시간 순서나 인과관계·2개 비교·4개 이상 항목에는 부적합.
+
+## 후보 키워드
+
+기술, 사람, 자연, 디지털기술, 역량, 여건, 필수조건, 필수요건, 요건, 조건
+
+## 정제 Anchor Sets
+
+- **three_pillars**: 기술, 사람, 자연
+- **capability_context**: 디지털기술, 역량, 여건
+- **prerequisites**: 필수조건, 필수요건, 요건, 조건
+
+## 구조 매칭 정보
+
+- **family**: list
+- **layout**: 3-column
+- **axis**: horizontal
+- **relation_type**: parallel
+- **cardinality**: ideal 3 / min 3 / max 3
+- **slots** (7개, required 7개): title, pillar_1_label, pillar_1_body, pillar_2_label, pillar_2_body, pillar_3_label, pillar_3_body
+- **source title**: 필수조건
+- **original layout**: 3col-parallel
+
+## 적합/부적합 기준
+
+### suits
+- 3개 병렬 조건
+- 3대 요소
+- 3개 축의 균형 설명
+
+### not_suits
+- 시간 순서
+- 원인-결과 흐름
+- 2개 비교
+- 4개 이상 항목
+
+## 재구성 허용
+
+- **split**: True
+- **merge**: False
+- **infer_missing_slot**: False
+- **rewrite_label**: True
+- **rewrite_body**: True
+
+## 메타
+
+- schema_version: template-fit-v1 mirror
+- source_of_truth: structure_ontology.yaml + keyword_base.yaml
+- structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
+- keyword_base_sync_at: 2026-04-22
+- anchor_sets_cleaned_at: 2026-04-22
--- a/figma_to_html_agent/blocks/1171281190/analysis.md.pre_milestone2.bak
+++ b/figma_to_html_agent/blocks/1171281190/analysis.md.pre_milestone2.bak
@@ -0,0 +1,17 @@
+# Frame 1171281190 — 필수조건
+
+## 구조
+- **layout**: 3col-parallel
+- **detail**: 기술/사람/자연 3열 세로 카드 — 각 카드 세로 라벨(技/人材/자연) + 부제(디지털/역량/여건) + 본문 블록
+
+## 내용
+DX 시행을 위한 3대 필수조건 — 기술(디지털) · 사람(역량) · 자연(여건)의 조화. 각 요소의 세부 조건 설명.
+
+## 후보 키워드
+필수조건, 기술, 디지털기술, 사람, 역량, 자연, 여건, 기반, 기반지식, 창의성, 3요소, 전문지식, 경험, 투자, DX, BIM, 건설산업, 토목, 디지털
+
+## 메타
+- source: texts.md + flat.md
+- schema_version: analysis-v1
+- tagged_by: claude-opus-4-7
+- tagged_at: 2026-04-21
--- a/figma_to_html_agent/blocks/1171281190/flat.md
+++ b/figma_to_html_agent/blocks/1171281190/flat.md
@@ -0,0 +1,83 @@
+# Frame 1171281190 — 실측 기록 (flat)
+
+> 원본: 2123.13 × 724 px (node 51:99)
+> 패턴: prerequisites-3col (필수요건 3열 비교)
+
+## 구조
+
+```
+Frame 51:99 (2123 × 724)
+├── 51:164 TEXT "필수조건" (75, 0) 984×98 — 70px Bold gradient(#000→#883700)
+├── 51:165 ICON (0, 13) 50×61 — 아이콘 이미지
+│
+├── 51:102 "기술" (0, 129) 690×595
+│   ├── 51:103 BAR (0, 129) 152.5×595 — gradient(#0D78D0→#023056)
+│   ├── 51:118 TEXT "技" (111.83, 274.36) 42×217 — 50px Bold white
+│   ├── 51:117 TEXT "術" (111.83, 578.10) 42×217 — 50px Bold white
+│   ├── 51:104 TEXT "깊은 기반 (건설산업, 토목) 지식" (171.89, 159.01) 488×93 — 45px Bold gradient(#0D78D0→#134D7F)
+│   ├── 51:109 TEXT "건설단계별 근본적인..." (171.90, 286.29) 518×145 — 35px Medium #3E3523
+│   ├── 51:105 TEXT "높은 S/W 기술 (Digital Technology)" (171.89, 451.34) 488×93 — 45px Bold gradient(#0D78D0→#023056)
+│   └── 51:111 TEXT "다양한 기술적도구..." (171.90, 569.82) 518×145 — 35px Medium #3E3523
+│
+├── 51:134 "사람" (715.04, 129) 690×595
+│   ├── 51:135 BAR (715.04, 129) 152.5×595 — gradient(#FF9A23→#CC5200)
+│   ├── 51:148 TEXT "人" (826.87, 274.36) — 50px Bold white
+│   ├── 51:147 TEXT "材" (826.87, 578.10) — 50px Bold white
+│   ├── 51:136 TEXT "분야별 전문지식 역량을 갖춘 기술자" (886.92, 159.01) — 45px Bold gradient(#FE900C→#D18B37)
+│   ├── 51:139 TEXT "엔지니어의 Know-how와..." (886.94, 286.29) — 35px Medium #3E3523
+│   ├── 51:137 TEXT "디지털화 역량 및 개발경험 많은 개발자" (886.92, 451.34) — 45px Bold gradient(#F58806→#CE7914)
+│   └── 51:141 TEXT "다양한 형태의 Solution S/W..." (886.94, 569.76) — 35px Medium #3E3523
+│
+├── 51:119 "자연" (1429, 129) 694×595
+│   ├── 51:120 BAR (1429, 129) 152.5×595 — gradient(#39BE49 21%→#23742C)
+│   ├── 51:133 TEXT "天" (1540.83, 274.36) — 50px Bold white
+│   ├── 51:132 TEXT "地" (1540.83, 578.10) — 50px Bold white
+│   ├── 51:121 TEXT "받아들일 수 있는 사회ㆍ기업ㆍ제도..." (1600.89, 159.01) — 45px Bold gradient(#3CA649 21%→#23742C)
+│   ├── 51:124 TEXT "목표설정형 지침에서 탈피..." (1600.90, 286.29) — 35px Medium #3E3523
+│   ├── 51:122 TEXT "지속적ㆍ장기적 투자를..." (1600.89, 451.34) — 45px Bold gradient(#3CA649→#23742C)
+│   └── 51:126 TEXT "기술 개발을 위한 대규모..." (1600.90, 569.82) — 35px Medium #3E3523
+│
+├── 세로 라벨 (바 좌측)
+│   ├── 51:150 "기/술" + 51:151 "디지털" + 괄호 (rotate 90°/-90°)
+│   ├── 51:155 "사/람" + 51:156 "역량" + 괄호
+│   └── 51:160 "자연" + 51:161 "여건" + 괄호
+│
+└── 테두리선 (Vector SVG)
+    ├── 상단/하단 실선 (각 열)
+    ├── 중간 점선 (각 열, 바 밖 영역)
+    └── 세로 점선 (바 내부, 좌우 분할)
+
+## 색상 (MCP 확인)
+
+| 요소 | gradient |
+|------|----------|
+| 기술 bar | linear-gradient(#0D78D0→#023056) |
+| 사람 bar | linear-gradient(#FF9A23→#CC5200) |
+| 자연 bar | linear-gradient(180deg, #39BE49 21%→#23742C) |
+| 기술 heading top | gradient(#0D78D0→#134D7F) |
+| 기술 heading bottom | gradient(#0D78D0→#023056) |
+| 사람 heading top | gradient(#FE900C→#D18B37) |
+| 사람 heading bottom | gradient(#F58806→#CE7914) |
+| 자연 heading top | gradient(180deg, #3CA649 21%→#23742C) |
+| 자연 heading bottom | gradient(#3CA649→#23742C) |
+| 설명 텍스트 | #3E3523 |
+| 타이틀 | gradient(#000→#883700) |
+
+## 이미지 에셋
+
+| hash | 의미 |
+|------|------|
+| b0e9fad5... | 아이콘 (타이틀 좌측) |
+| 9b226a99... | 상/하단 실선 SVG |
+| 60b0ef47... | 중간 점선 SVG |
+| 기타 Vector SVG | 세로 점선, 바 내부 점선 |
+
+## 수학적 계산
+
+- Scale: 1280 / 2123.13 = 0.60290
+- 열 너비: 690 × S = 416px
+- 바 너비: 152.5 × S = 92px
+- 제목 font: 45px × S = 27px
+- 설명 font: 35px × S = 21px
+- 한자 font: 50px × S = 30px
+- 타이틀 font: 70px × S = 42px
--- a/figma_to_html_agent/blocks/1171281190/index.html
+++ b/figma_to_html_agent/blocks/1171281190/index.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>필수조건 3열 비교 (Frame 1171281190)</title>
+<!--
+  Frame: 51:99, 2123×724 px
+  Scale: 1280 / 2123 = 0.60290
+  패턴: prerequisites-3col
+  구조: R17 콘텐츠 주도형 (3열 flex + 각 열 내부 flow)
+    - 텍스트 늘면 → 열 섹션이 늘고 → 전체가 자연 확장
+    - R19 zoom, R1 descender
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
+<style>
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: #e8ecf0;
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; word-break: keep-all;
+}
+.slide {
+  width: 1280px;
+  background: #fff; position: relative;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block { width: 1280px; position: relative; overflow: hidden; }
+.inner {
+  width: 2123px;
+  height: 724px; /* 원본 Figma 프레임 높이 (누락 복원) */
+  zoom: 0.60290; /* R19 */
+}
+
+/* 타이틀 */
+.title-text {
+  font-weight: 700; font-size: 70px; line-height: 1.4;
+  background: linear-gradient(180deg, #000 0%, #883700 100%);
+  -webkit-background-clip: text; background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 4px #322c1e);
+  padding: 0 0 10px 75px;
+}
+
+/* 3열 컨테이너 (flex row) */
+.cols {
+  display: flex;
+  gap: 25px;
+}
+
+/* 각 열 */
+.col {
+  flex: 1;
+  position: relative;
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+}
+
+/* 색상 바 (좌측, flex none) */
+.col-inner {
+  display: flex;
+  min-height: 500px;
+}
+.bar {
+  flex: none;
+  width: 152.5px;
+  position: relative;
+}
+.col--tech .bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
+.col--people .bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
+.col--nature .bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
+
+/* 바 안 한자 + 세로 라벨 */
+.bar-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #fff;
+  font-weight: 700;
+  font-size: 50px;
+  text-align: center;
+}
+.bar-content .kanji {
+  line-height: 1;
+  margin: 20px 0;
+}
+
+/* 본문 영역 (flex:1, 2섹션 flow) */
+.col-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.col-section {
+  flex: 1;
+  padding: 15px 20px;
+}
+.col-section + .col-section {
+  border-top: 2px dashed #000;
+}
+
+/* 제목 (gradient text) */
+.heading {
+  font-weight: 700; font-size: 45px; line-height: 45px;
+  -webkit-background-clip: text; background-clip: text;
+  -webkit-text-fill-color: transparent;
+  padding-bottom: 11px; /* R1 */
+  margin-bottom: 10px;
+}
+
+/* 설명 */
+.desc {
+  font-weight: 500; font-size: 35px; line-height: 45px;
+  color: #3E3523;
+  padding-bottom: 3px; /* R1 */
+}
+
+/* 열별 gradient */
+.col--tech .heading { background: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); -webkit-background-clip: text; background-clip: text; }
+.col--people .heading { background: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); -webkit-background-clip: text; background-clip: text; }
+.col--nature .heading { background: linear-gradient(180deg, #3CA649 21%, #23742C 100%); -webkit-background-clip: text; background-clip: text; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <div class="title-text">필수조건</div>
+
+      <div class="cols">
+
+        <!-- 열1: 기술 -->
+        <div class="col col--tech">
+          <div class="col-inner">
+            <div class="bar">
+              <div class="bar-content">
+                <span class="kanji">技</span>
+                <span style="font-size:35px;">기술<br>(디지털)</span>
+                <span class="kanji">術</span>
+              </div>
+            </div>
+            <div class="col-body">
+              <div class="col-section">
+                <div class="heading">깊은 기반<br>(건설산업, 토목) 지식</div>
+                <div class="desc">건설단계별 근본적인 이해와<br>경험이 기반된 높은 전문지식 보유</div>
+              </div>
+              <div class="col-section">
+                <div class="heading">높은 S/W 기술<br>(Digital Technology)</div>
+                <div class="desc">다양한 기술적도구(S/W,H/W)와<br>Process의 효과적인 통합</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 열2: 사람 -->
+        <div class="col col--people">
+          <div class="col-inner">
+            <div class="bar">
+              <div class="bar-content">
+                <span class="kanji">人</span>
+                <span style="font-size:35px;">사람<br>(역량)</span>
+                <span class="kanji">材</span>
+              </div>
+            </div>
+            <div class="col-body">
+              <div class="col-section">
+                <div class="heading">분야별 전문지식<br>역량을 갖춘 기술자</div>
+                <div class="desc">엔지니어의 Know-how와<br>디지털지식이 융합된 지식의 축적</div>
+              </div>
+              <div class="col-section">
+                <div class="heading">디지털화 역량 및<br>개발경험 많은 개발자</div>
+                <div class="desc">다양한 형태의 Solution S/W<br>개발 역량 Programmer</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 열3: 자연 -->
+        <div class="col col--nature">
+          <div class="col-inner">
+            <div class="bar">
+              <div class="bar-content">
+                <span class="kanji">天</span>
+                <span style="font-size:35px;">자연<br>(여건)</span>
+                <span class="kanji">地</span>
+              </div>
+            </div>
+            <div class="col-body">
+              <div class="col-section">
+                <div class="heading">받아들일 수 있는<br>사회ㆍ기업ㆍ제도 등의 여건</div>
+                <div class="desc">목표설정형 지침에서 탈피하여<br>수행사례, 효과검증을 통해 시행</div>
+              </div>
+              <div class="col-section">
+                <div class="heading">지속적ㆍ장기적 투자를<br>수행할 능력과 의지</div>
+                <div class="desc">기술 개발을 위한 대규모 투자 및<br>Process 혁신을 위한 지속적인 투자</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>
--- a/figma_to_html_agent/blocks/1171281190/texts.md
+++ b/figma_to_html_agent/blocks/1171281190/texts.md
@@ -0,0 +1,90 @@
+# Frame 1171281190 — 텍스트 목록 (TF-IDF 매칭용)
+
+> 프레임 안의 모든 텍스트를 빠짐없이 추출. MCP get_design_context 전수 대조 완료.
+> 실질 텍스트 36개 + 괄호 6개 = 총 42개 텍스트 노드.
+
+## 타이틀
+- 필수조건
+
+## 열1: 기술 (디지털)
+
+### 세로 라벨
+- 기술
+- 디지털
+- (
+- (
+
+### 한자
+- 技
+- 術
+
+### 상단 제목
+- 깊은 기반
+- (건설산업, 토목) 지식
+
+### 상단 설명
+- 건설단계별 근본적인 이해와
+- 경험이 기반된 높은 전문지식 보유
+
+### 하단 제목
+- 높은 S/W 기술
+- (Digital Technology)
+
+### 하단 설명
+- 다양한 기술적도구(S/W,H/W)와
+- Process의 효과적인 통합
+
+## 열2: 사람 (역량)
+
+### 세로 라벨
+- 사람
+- 역량
+- (
+- (
+
+### 한자
+- 人
+- 材
+
+### 상단 제목
+- 분야별 전문지식
+- 역량을 갖춘 기술자
+
+### 상단 설명
+- 엔지니어의 Know-how와
+- 디지털지식이 융합된 지식의 축적
+
+### 하단 제목
+- 디지털화 역량 및
+- 개발경험 많은 개발자
+
+### 하단 설명
+- 다양한 형태의 Solution S/W
+- 개발 역량 Programmer
+
+## 열3: 자연 (여건)
+
+### 세로 라벨
+- 자연
+- 여건
+- (
+- (
+
+### 한자
+- 天
+- 地
+
+### 상단 제목
+- 받아들일 수 있는
+- 사회ㆍ기업ㆍ제도 등의 여건
+
+### 상단 설명
+- 목표설정형 지침에서 탈피하여
+- 수행사례, 효과검증을 통해 시행
+
+### 하단 제목
+- 지속적ㆍ장기적 투자를
+- 수행할 능력과 의지
+
+### 하단 설명
+- 기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자