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/1171281195/index.html
+++ b/figma_to_html_agent/blocks/1171281195/index.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM vs DX 비교 (Frame 1171281195)</title>
+<!--
+  Frame: 106:252, 1868×1908 px
+  Scale: 1280 / 1868 = 0.68524
+  패턴: compare-vs-rows
+  구조: R17 (행 flex column + 각 행 flex row) + R19 (zoom)
+  불릿: list-style disc inside
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;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: 1868px;
+  zoom: 0.68524; /* R19 */
+}
+
+/* 타이틀 */
+.title-row { display: flex; align-items: center; gap: 15px; height: 85px; }
+.title-icon { width: 50px; height: 61px; display: flex; align-items: center; justify-content: center; flex: none; }
+.title-icon img { width: 50px; height: 50px; object-fit: cover; }
+.title-text {
+  font-weight: 700; font-size: 70px; line-height: normal; white-space: nowrap;
+  background: linear-gradient(rgb(204,82,0), rgb(136,55,0));
+  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 4px #322c1e;
+}
+
+/* 서브헤더 바 */
+.subheader {
+  margin: 18px 65px 15px;
+  height: 75px; border-radius: 50px;
+  background: linear-gradient(270deg, rgb(40,91,74) 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, rgb(74,64,38) 100%);
+  display: flex; align-items: center; justify-content: center;
+}
+.subheader span {
+  font-weight: 700; font-size: 55px; color: #fff; line-height: normal;
+  white-space: pre-wrap;
+}
+
+/* 비교 행 컨테이너 (flex column, R17) */
+.compare-rows {
+  display: flex;
+  flex-direction: column;
+  padding: 0 22px;
+  gap: 8px; /* 행 간 여백 */
+}
+
+/* 각 비교 행 (flex row: left | badge | right) */
+.compare-row {
+  display: flex;
+  align-items: stretch; /* badge와 좌우 텍스트가 같은 높이 */
+}
+.compare-row .col-left {
+  flex: 1;
+  font-weight: 700; font-size: 40px; color: #5c3714;
+  text-align: right; line-height: 1.3;
+  padding: 12px 15px 12px 25px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+.compare-row .col-badge {
+  flex: none; width: 242px;
+  border-radius: 10px; padding: 12px 20px;
+  background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
+  display: flex; align-items: center; justify-content: center;
+  align-self: stretch; /* 행 높이에 맞춤 */
+}
+.compare-row .col-badge span {
+  font-weight: 700; font-size: 40px; color: #fff;
+  text-align: center; line-height: normal; white-space: nowrap;
+}
+.compare-row .col-right {
+  flex: 1;
+  font-weight: 700; font-size: 40px; color: #285b4a;
+  line-height: 1.3;
+  padding: 12px 25px 12px 15px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+.compare-row .col-left ul,
+.compare-row .col-right ul { list-style: disc inside; padding: 0; margin: 0; }
+
+/* 결론 영역 — arrow + box + text 한 컴포넌트 */
+.conclusion {
+  margin: 40px 22px 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+}
+.conclusion .arrow {
+  flex: none;
+  width: 192px; height: 169px;
+}
+.conclusion .arrow img { width: 100%; height: 100%; transform: rotate(180deg); }
+.conclusion .content {
+  flex: 1;
+  position: relative;
+  min-height: 170px;
+  display: flex; align-items: center; justify-content: center;
+}
+.conclusion .bg {
+  position: absolute; inset: 0;
+  background: #FAEDCB;
+  mix-blend-mode: multiply;
+}
+.conclusion .text {
+  position: relative; z-index: 1;
+  line-height: 90px;
+  text-align: center;
+  padding: 15px 30px;
+}
+.conclusion .text .normal { font-weight: 700; font-size: 50px; color: #000; }
+.conclusion .text .accent { font-weight: 700; font-size: 55px; color: #ae3607; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 타이틀 -->
+      <div class="title-row">
+        <div class="title-icon"><img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
+        <div class="title-text">BIM과 DX의 이해</div>
+      </div>
+
+      <!-- 서브헤더 -->
+      <div class="subheader">
+        <span> BIM                                     vs.                                     DX</span>
+      </div>
+
+      <!-- 비교 행 (flex column, R17) -->
+      <div class="compare-rows">
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>Only 3D</li></ul></div>
+          <div class="col-badge"><span>BIM/DX</span></div>
+          <div class="col-right"><ul><li>BIM &lt;&lt; DX <span style="font-size:35px;">(ENG. + Management 포함)</span></li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li><span style="font-size:40px;">모델 제작용 상용 S/W</span><br><span style="font-size:35px;">[Civil 3D, Revit, Navisworks, Autocad]</span></li></ul></div>
+          <div class="col-badge"><span>S/W</span></div>
+          <div class="col-right"><ul><li><span style="font-size:40px;">제작 및 운영 (상용 + 전용 40~80개)</span><br><span style="font-size:35px;">[Rhino, Sketchup, Blender ..] + [EG-BIM 등]</span></li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>기존 2D 설계방식 유지</li></ul></div>
+          <div class="col-badge"><span>프로세스</span></div>
+          <div class="col-right"><ul><li>근본적 문제의식을 통한 개선</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>3D 모델 중심</li><li>기존 성과품 유지</li></ul></div>
+          <div class="col-badge"><span>성과물</span></div>
+          <div class="col-right"><ul><li>공학 정보 및 콘텐츠 연계에 집중</li><li>도면, 수량, 시공계획 등 일식</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>3D 모델에 의한 일반적 이해 향상</li></ul></div>
+          <div class="col-badge"><span>활&nbsp;&nbsp;용</span></div>
+          <div class="col-right"><ul><li>설계/시공의 혁신(개념의 재정립)</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>(설계/시공/운영) 분야별 단절</li></ul></div>
+          <div class="col-badge"><span>확장성</span></div>
+          <div class="col-right"><ul><li>전 생애주기 활용 시스템</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>단순화(오류) - 수동적/집단적 동질화</li></ul></div>
+          <div class="col-badge"><span>수행개념</span></div>
+          <div class="col-right"><ul><li>구체화(복잡) - 적극/구체적 실현 방안</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>소극적, 상용 기술에 의존</li></ul></div>
+          <div class="col-badge"><span>CIVIL + IT</span></div>
+          <div class="col-right"><ul><li>적극적, 주체적인 기술 접목/융합</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>S/W 제작사 판매 정책에 의존</li></ul></div>
+          <div class="col-badge"><span>주&nbsp;&nbsp;체</span></div>
+          <div class="col-right"><ul><li>자체 수행능력 - 지속가능성 확보</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>평준화, 국내 중심</li></ul></div>
+          <div class="col-badge"><span>발주처</span></div>
+          <div class="col-right"><ul><li>차별화 및 경쟁력 확보, 해외 진출</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>소규모 BIM팀 운영 + 단순교육에 집중</li></ul></div>
+          <div class="col-badge"><span>설계사</span></div>
+          <div class="col-right"><ul><li>IT + CIVIL ENG 220명 운영 + 기술 개발</li></ul></div>
+        </div>
+
+        <div class="compare-row">
+          <div class="col-left"><ul><li>국내 토목 소극적/해외 토목증가</li></ul></div>
+          <div class="col-badge"><span>시공사</span></div>
+          <div class="col-right"><ul><li>분야 확장 모델 및 시스템</li></ul></div>
+        </div>
+
+      </div>
+
+      <!-- 결론 (arrow + box + text 한 컴포넌트) -->
+      <div class="conclusion">
+        <div class="arrow"><img src="assets/bf1755273910e17f7a012ce2d269a93cca9483ac.svg" alt=""></div>
+        <div class="content">
+          <div class="bg"></div>
+          <div class="text">
+            <span class="normal">BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서</span><br>
+            <span class="accent">가장 기초가 되는 일부분</span><span class="normal">임을 인지하는 것이 매우 중요</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>