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>

figma_to_html_agent/blocks/1171281209/_render.py

@@ -0,0 +1,42 @@
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from PIL import Image
+import os, time
+
+here = os.path.dirname(os.path.abspath(__file__))
+renders = os.path.join(here, '_renders')
+os.makedirs(renders, exist_ok=True)
+
+opts = Options()
+opts.add_argument('--headless=new')
+opts.add_argument('--hide-scrollbars')
+opts.add_argument('--force-device-scale-factor=1')
+opts.add_argument('--window-size=1600,900')
+d = webdriver.Chrome(options=opts)
+
+p = os.path.join(here, 'index.html').replace(os.sep, '/')
+d.get('file:///' + p)
+time.sleep(2.0)
+full_png = os.path.join(renders, '_full.png')
+d.save_screenshot(full_png)
+
+r = d.execute_script(
+  'const r=document.querySelector(".slide").getBoundingClientRect();'
+  'return [r.x,r.y,r.width,r.height];'
+)
+print('slide bounds:', r)
+Image.open(full_png).crop(
+  (int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3]))
+).save(os.path.join(renders, 'slide.png'))
+
+b = d.execute_script(
+  'const r=document.querySelector(".block").getBoundingClientRect();'
+  'return [r.x,r.y,r.width,r.height];'
+)
+print('block bounds:', b)
+Image.open(full_png).crop(
+  (int(b[0]), int(b[1]), int(b[0]+b[2]), int(b[1]+b[3]))
+).save(os.path.join(renders, 'block.png'))
+
+d.quit()
+print('OK')

figma_to_html_agent/blocks/1171281209/analysis.md

@@ -0,0 +1,60 @@
+# Frame 1171281209 — 현존 상용 S/W의 현실
+
+## 내용 설명
+
+현실/문제 진단을 3개 강조 포인트로 정리하는 디자인.
+타이틀 아래 우측에 강조 키워드 라벨 3개를 나열하고
+각 항목에 설명을 붙인다. 토목 실무 전문성 부족, 비효율성,
+실무 적용 한계 같은 3가지 문제·약점·한계 진단에 적합.
+장점 나열이나 시간 순서·4개 이상 항목에는 부적합.
+
+## 후보 키워드
+
+상용, S/W, Engineering, Engn, 전문성, 비효율, 한계, 실무적용, 현실, 토목, 토목실무, 실무
+
+## 정제 Anchor Sets
+
+- **sw_reality**: 상용, S/W, Engineering, Engn
+- **three_problems**: 전문성, 비효율, 한계, 실무적용, 현실
+- **domain_civil**: 토목, 토목실무, 실무
+
+## 구조 매칭 정보
+
+- **family**: cards
+- **layout**: title-plus-3-emphasis
+- **axis**: horizontal
+- **relation_type**: parallel
+- **cardinality**: ideal 3 / min 3 / max 3
+- **slots** (7개, required 7개): title, emphasis_1_label, emphasis_1_body, emphasis_2_label, emphasis_2_body, emphasis_3_label, emphasis_3_body
+- **source title**: 현존 상용 S/W의 현실
+- **original layout**: 3-emphasis
+
+## 적합/부적합 기준
+
+### suits
+- 현실·문제 3가지 강조
+- 3가지 한계·약점 진단
+- 3포인트 문제 제기
+
+### not_suits
+- 장점 나열 (긍정형)
+- 시간 순서
+- 원인-결과 흐름
+- 4개 이상 항목
+- 2개 비교
+
+## 재구성 허용
+
+- **split**: True
+- **merge**: True
+- **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

figma_to_html_agent/blocks/1171281209/analysis.md.pre_milestone2.bak

@@ -0,0 +1,17 @@
+# Frame 1171281209 — 현존 상용 S/W의 현실
+
+## 구조
+- **layout**: 3-emphasis
+- **detail**: 타이틀("현존 상용 S/W의 현실") + 우측 강조 키워드 라벨 3개 + 각 항목 설명
+
+## 내용
+현존 상용 Engineering S/W의 현실 비판 — 토목 실무 전문성 부족, 비효율성, 토목 실무 적용 한계를 3개 강조 포인트로 정리.
+
+## 후보 키워드
+상용S/W, 상용, 토목, 토목실무, 전문성, 전문성부족, 비효율성, 실무적용, 3강조, 현실, 한계
+
+## 메타
+- source: texts.md + flat.md
+- schema_version: analysis-v1
+- tagged_by: claude-opus-4-7
+- tagged_at: 2026-04-21

figma_to_html_agent/blocks/1171281209/flat.md

@@ -0,0 +1,86 @@
+# Frame 1171281209 — 실측 기록 (flat)
+
+> 원본: 1697 × 582 px (node 145:8523, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
+> 패턴: bordered-3paragraphs-with-3emphasis-labels (외곽 빨간 테두리 + 상단 타이틀 pill + 좌 본문 3단 + 우 강조 라벨 3개)
+> Scale: **min(1280/1697, 720/582) = 1280/1697 = 0.75427** (width fit, 1280×439 block)
+
+## 구조 (bottom-up)
+
+```
+Frame 145:8523 "Frame 1171281209" (1697 × 582)
+│
+├─ ① 145:8524 우측 그라디언트 패널 (752, 16) 941×564
+│       border-tr-radius 20, border-br-radius 20
+│       bg: linear-gradient(to-l, #F5D4C7 33% → white 91%) — 우측 핑크 → 좌측 흰
+│
+├─ ② 145:8536 외곽 테두리 박스 (0, 12.43) 1697×569.573
+│       border: 10px solid #9C0E0E, rounded 20, fill 투명
+│       (전체 콘텐츠 둘러싸는 강조 프레임)
+│
+├─ ③ 145:8537 image 4014 (타이틀 pill bg) (527, 0) 628×97.345  ← title_pill.png
+├─ ④ 145:8538 TEXT "현존 상용 S/W의 현실"
+│       center=(841, 42.46), w=540, h=66.278 → top-left=(571, 9.32)
+│       50px Bold white, 가운데 정렬
+│
+├─ ⑤ 좌 본문 3단 (각 단: bullet icon + paragraph)
+│  │
+│  ├─ 145:8531 bullet icon (39, 130.48) 30×31  ← bullet_arrow.png (▶)
+│  └─ 145:8530 단락1 (80, 130.48) 883×124.27 — 30px Regular black + 30px Bold #CC5200
+│        "토목 분야는 [각 영역이 고도로 세분화]되어 있음에도,
+│         현재는 건축용으로 개발된 S/W를 일부 수정하여 적용하는 수준에 그침.
+│         이는 각 분야의 특수성을 반영한 [전문성 및 효율성 확보에 큰 걸림돌]이 됨."
+│
+│  ├─ 145:8528 bullet icon (39, 306.54) 30×31  ← 동일 src
+│  └─ 145:8527 단락2 (80, 302.39) 1076×82.847
+│        "[현존 상용 소프트웨어]는 사용자 확보 및 판매 수입이라는 한계로 인해 [범용적 개발에 집중]
+│         이 때문에 특정 분야에 최적화된 전문가용 수준의 [전용 소프트웨어 개발에는 한계]가 따름."
+│
+│  ├─ 145:8534 bullet icon (39, 437.02) 30×31
+│  └─ 145:8533 단락3 (80, 432.88) 1021×82.847
+│        "각 분야의 시장 주도업체 소프트웨어조차 [시공 및 유지관리 기능은 개념적인 수준]임.
+│         결과적으로 [실무에 직접 적용할 수 있는 프로그램은 전무]한 실정임."
+│
+└─ ⑥ 우 강조 라벨 3개 — bg-clip-text 그라디언트 (red → #711E1E to-top 79.5%)
+        60px Black, text-shadow 0 10px 6px rgba(0,0,0,0.25)
+        translate-x-1/2 → 박스 left = stated_left - w/2
+
+   ├─ 145:8539 "토목 전문성 부족" center_left=1443.99, w=414, top=124.27 → top-left=(1237, 124)
+   ├─ 145:8540 "비효율성"        center_left=1443.49, w=221, top=259.93 → top-left=(1333, 260)
+   └─ 145:8541 "실무 적용 불가능" center_left=1443.99, w=414, top=395.59 → top-left=(1237, 396)
+```
+
+## 에셋 (2개)
+
+| 파일 | 의미 | 크기 | 사용 |
+|------|------|------|------|
+| `assets/bullet_arrow.png` | ▶ 화살표 모양 불릿 아이콘 | 30×31 | **3×** (재사용) |
+| `assets/title_pill.png` | 상단 타이틀 빨간 pill 배경 | 628×97 | 1× |
+
+## 이상 탐지 결과
+
+| 검사 | 결과 |
+|------|------|
+| 회전 단일문자 | 없음 |
+| 좁은 박스 세로 텍스트 | 없음 |
+| 중복 노드 | bullet_arrow.png 동일 src 3× — 정상 |
+| Vector 좌표 metadata vs design_context | 일치 |
+| 회전 적용 | 없음 |
+| **z-order 비정상** | 우측 gradient 패널(145:8524)이 본문/라벨 BEFORE 그려짐 → 시각 영향 OK (BG 역할) |
+| **타이틀 pill 위치** | top=0이고 외곽 border top=12.43이라, pill이 border 위에 살짝 걸침. 의도된 디자인 |
+
+## 변형 가능 축
+
+- **paragraphs[N=3] (required)** — cardinality 3 고정
+  - `body` (required) — 30px Regular + 30px Bold #CC5200 강조 (인라인)
+  - `bullet_icon` (required, ▶ 모양 PNG)
+- **emphasis_labels[N=3] (required)** — 우측 강조 라벨, paragraphs와 1:1 매핑
+  - `text` (required, 60px Black gradient)
+- `title` (required) — 50px Bold white on red pill
+- `outer_border_color` — #9C0E0E (red, 정책/문제 진단 톤)
+- `right_panel_gradient` — 핑크→흰 (분위기)
+
+## Sub-patterns
+
+- `bordered-frame-with-title-pill-overlap` — 외곽 테두리 + 상단 타이틀 pill 일부 위 걸침 패턴
+- `bullet-paragraph-with-inline-highlight` — ▶ 아이콘 + 본문 인라인 색상 강조 (1171281179와 다른 스타일: 강조 폰트 사이즈 동일, 색만 변경)
+- `right-emphasis-labels-gradient-text` — bg-clip-text 그라디언트 + 큰 강조 라벨 (red → dark)

figma_to_html_agent/blocks/1171281209/index.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>현존 상용 S/W의 현실 (Frame 1171281209)</title>
+<!--
+  Frame: 145:8523, 1697 × 582 px (Frame 1171281209)
+  Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
+  Scale: min(1280/1697, 720/582) = 1280/1697 = 0.75427 (width fit)
+  Block in slide: 1280 × 439 px
+  패턴: bordered-3paragraphs-with-3emphasis-labels
+  구조: 외곽 빨간 테두리 + 상단 타이틀 pill + 좌(본문 3단 with 화살표 불릿) / 우(강조 라벨 3개, gradient text)
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;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; height: 720px;
+  background: #fff;
+  position: relative; overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+  display: flex; align-items: center; justify-content: center;
+}
+.block {
+  width: 1280px;
+  position: relative;
+  overflow: hidden;
+}
+.inner {
+  width: 1697px; height: 582px;
+  position: relative;
+  zoom: 0.75427;
+}
+
+/* ① 우측 그라디언트 패널 (BG, behind everything) */
+.right-panel {
+  position: absolute;
+  left: 752px; top: 16px;
+  width: 941px; height: 564px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  background-image: linear-gradient(to left, #F5D4C7 33.032%, white 91.365%);
+}
+
+/* ② 외곽 빨간 테두리 */
+.outer-border {
+  position: absolute;
+  left: 0; top: 12.43px;
+  width: 1697px; height: 569.573px;
+  border: 10px solid #9C0E0E;
+  border-radius: 20px;
+  background: transparent;
+  pointer-events: none;
+}
+
+/* ③ 상단 타이틀 pill BG */
+.title-pill {
+  position: absolute;
+  left: 527px; top: 0;
+  width: 628px; height: 97.345px;
+}
+.title-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* ④ 타이틀 텍스트 */
+.title-text {
+  position: absolute;
+  left: 571px; top: 9.32px;
+  /* center=(841, 42.46), w=540, h=66.278 */
+  width: 540px; height: 66.278px;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  font-size: 50px;
+  color: white;
+  text-align: center;
+  line-height: 66.278px;
+  white-space: nowrap;
+}
+
+/* ⑤ 좌 본문 3단 — bullet icon + paragraph */
+.bullet-icon {
+  position: absolute;
+  left: 39px;
+  width: 30px; height: 31.068px;
+}
+.bullet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.icon-1 { top: 130.48px; }
+.icon-2 { top: 306.54px; }
+.icon-3 { top: 437.02px; }
+
+.body {
+  position: absolute;
+  left: 80px;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 400;
+  font-size: 30px;
+  color: black;
+  line-height: 40px;
+  letter-spacing: -1px;
+}
+.body p { margin: 0; line-height: 40px; }
+.body .accent {
+  font-weight: 700;
+  color: #CC5200;
+  letter-spacing: -1px;
+}
+.body-1 { top: 130.48px; width: 883px; height: 124.27px; }
+.body-2 { top: 302.39px; width: 1076px; height: 82.847px; }
+.body-3 { top: 432.88px; width: 1021px; height: 82.847px; }
+
+/* ⑥ 우 강조 라벨 — bg-clip-text 그라디언트 */
+.emphasis {
+  position: absolute;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 900;
+  font-size: 60px;
+  height: 74.562px;
+  text-align: center;
+  line-height: 74.562px;
+  text-shadow: 0 10px 6px rgba(0,0,0,0.25);
+  background-image: linear-gradient(to top, red 0%, #711E1E 79.5%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  white-space: nowrap;
+}
+.em-1 { left: 1237px; top: 124.27px; width: 414px; }   /* center=1443.99 - w/2=1237 */
+.em-2 { left: 1333px; top: 259.93px; width: 221px; }   /* center=1443.49 - w/2=1333 */
+.em-3 { left: 1237px; top: 395.59px; width: 414px; }
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- ① 우측 그라디언트 BG 패널 -->
+      <div class="right-panel"></div>
+
+      <!-- ② 외곽 빨간 테두리 -->
+      <div class="outer-border"></div>
+
+      <!-- ③ 타이틀 pill 배경 -->
+      <div class="title-pill"><img src="assets/title_pill.png" alt=""></div>
+
+      <!-- ④ 타이틀 텍스트 -->
+      <div class="title-text">현존 상용 S/W의 현실</div>
+
+      <!-- ⑤ 좌 본문 3단 (bullet icon + paragraph) -->
+      <div class="bullet-icon icon-1"><img src="assets/bullet_arrow.png" alt="▶"></div>
+      <div class="body body-1">
+        <p><span>토목 분야는 </span><span class="accent">각 영역이 고도로 세분화</span><span>되어 있음에도,</span></p>
+        <p><span>현재는 건축용으로 개발된 S/W를 일부 수정하여 적용하는 수준에 그침.</span></p>
+        <p><span>이는 각 분야의 특수성을 반영한 </span><span class="accent">전문성 및 효율성 확보에 큰 걸림돌</span><span>이 됨.</span></p>
+      </div>
+
+      <div class="bullet-icon icon-2"><img src="assets/bullet_arrow.png" alt="▶"></div>
+      <div class="body body-2">
+        <p><span class="accent">현존 상용 소프트웨어</span><span>는 사용자 확보 및 판매 수입이라는 한계로 인해 </span><span class="accent">범용적 개발에 집중</span></p>
+        <p><span>이 때문에 특정 분야에 최적화된 전문가용 수준의 </span><span class="accent">전용 소프트웨어 개발에는 한계</span><span>가 따름.</span></p>
+      </div>
+
+      <div class="bullet-icon icon-3"><img src="assets/bullet_arrow.png" alt="▶"></div>
+      <div class="body body-3">
+        <p><span>각 분야의 시장 주도업체 소프트웨어조차 </span><span class="accent">시공 및 유지관리 기능은 개념적인 수준</span><span>임.</span></p>
+        <p><span>결과적으로 </span><span class="accent">실무에 직접 적용할 수 있는 프로그램은 전무</span><span>한 실정임.</span></p>
+      </div>
+
+      <!-- ⑥ 우 강조 라벨 3개 -->
+      <p class="emphasis em-1">토목 전문성 부족</p>
+      <p class="emphasis em-2">비효율성</p>
+      <p class="emphasis em-3">실무 적용 불가능</p>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

figma_to_html_agent/blocks/1171281209/texts.md

@@ -0,0 +1,42 @@
+# Frame 1171281209 — 텍스트 (TF-IDF 매칭용)
+
+> 프레임 안의 모든 텍스트를 빠짐없이 추출.
+
+## 타이틀
+
+현존 상용 S/W의 현실
+
+## 우측 키워드 라벨 (강조 텍스트)
+
+### 라벨1
+토목 전문성 부족
+
+### 라벨2
+비효율성
+
+### 라벨3
+실무 적용 불가능
+
+## 본문 (좌측 불릿 3단)
+
+### 단락1 — 토목 전문성 부족
+
+토목 분야는 각 영역이 고도로 세분화되어 있음에도,
+현재는 건축용으로 개발된 S/W를 일부 수정하여 적용하는 수준에 그침.
+이는 각 분야의 특수성을 반영한 전문성 및 효율성 확보에 큰 걸림돌이 됨.
+
+> "각 영역이 고도로 세분화", "전문성 및 효율성 확보에 큰 걸림돌" 부분은 주황색(#cc5200) 볼드 강조
+
+### 단락2 — 비효율성
+
+현존 상용 소프트웨어는 사용자 확보 및 판매 수입이라는 한계로 인해 범용적 개발에 집중
+이 때문에 특정 분야에 최적화된 전문가용 수준의 전용 소프트웨어 개발에는 한계가 따름.
+
+> "현존 상용 소프트웨어", "범용적 개발에 집중", "전용 소프트웨어 개발에는 한계" 부분은 주황색(#cc5200) 볼드 강조
+
+### 단락3 — 실무 적용 불가능
+
+각 분야의 시장 주도업체 소프트웨어조차 시공 및 유지관리 기능은 개념적인 수준임.
+결과적으로 실무에 직접 적용할 수 있는 프로그램은 전무한 실정임.
+
+> "시공 및 유지관리 기능은 개념적인 수준", "실무에 직접 적용할 수 있는 프로그램은 전무" 부분은 주황색(#cc5200) 볼드 강조