Files
C.E.L_Slide_test2/figma_to_html_agent/blocks/1171281189/flat.md
kyeongmin 9fbe3ac90c 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

7.3 KiB
Raw Blame History

Frame 1171281189 — 실측 기록 (flat)

원본: 2195.205 × 1194.998 px (node 100:65) 패턴: cycle-3way-intersect (3원 교차 다이어그램) Scale: 1280 / 2195.205 = 0.58312

구조

Frame 100:65 (2195 × 1195)
├── 100:131 TEXT "건설산업의 목표 (BIM의 목적)" (75, 0) 984×98 — 70px Bold gradient(#000→#883700)
├── 100:129 ICON (0, 13) 50×61 — 아이콘 이미지
│
├── 장식 요소
│   ├── 100:68 RECT 회전(-90deg) (984, 77) 351×727 — gradient(rgba(217,162,104,0.33)→rgba(220,103,14,0))
│   ├── 100:69 RECT 회전(90deg) (1150, 721) 353×653 — gradient(rgba(96,164,81,0.33)→rgba(37,62,31,0))
│   ├── 100:71 RECT 회전(180deg)+scaleY(-1) (415, 718) 763×351 — gradient(235.162deg, rgba(115,115,115,0) 14.18%→rgba(213,170,137,0.33) 66.964%)
│   └── 100:70 IMG (272, 921) 1768×274 — bg_texture, mix-blend-mode: multiply
│
├── 아크 3개
│   ├── 100:102 IMG 아크 상단 (1059, 372) 209×99 — rotate(180deg), Ellipse599
│   ├── 100:103 IMG 아크 좌측 (760, 787) 99×209 — rotate(90deg), Ellipse597
│   └── 100:112 IMG 아크 우측 (1462, 787) 99×209 — rotate(-90deg), Ellipse600
│
├── 메인 3원
│   ├── 100:76 안전과품질 (986, 444) 350×350
│   │   ├── 100:77 outer Ellipse589 SVG — gradient
│   │   ├── 100:78 inner (1020.06, 478.06) 280×280 — Ellipse590 SVG, inset -5.36%
│   │   └── 100:79 TEXT "안전과\n품질" (1160.92, 625.53) 263×114 — 50px Bold white, text-shadow #cc5200
│   │
│   ├── 100:72 생산성향상 (827, 718) 350×350
│   │   ├── 100:73 outer Ellipse591 SVG
│   │   ├── 100:74 inner (861.06, 752.06) 280×280 — Ellipse592 SVG, inset -3.57%
│   │   └── 100:75 TEXT "생산성\n향상" (1001.92, 899.53) 263×114 — 50px Bold white
│   │
│   └── 100:80 소통과신뢰 (1142, 718) 350×350
│       ├── 100:81 outer Ellipse585 SVG
│       ├── 100:82 inner (1176.06, 752.06) 280×280 — Ellipse586 SVG, inset -3.57%
│       └── 100:83 TEXT "소통과\n신뢰" (1318.09, 892.49) 263×114 — 50px Bold white
│
├── 액센트 6원
│   ├── 100:113 安 outer (992, 260) 130.9 — Ellipse596 SVG
│   │   ├── 100:115 inner (1017.47, 285.47) 79 — Ellipse598 SVG, inset -15.2%
│   │   └── 100:116 TEXT "安" (1057.42, 322.94) 98×43 — 45px Bold white, text-shadow #cc5200
│   │
│   ├── 100:117 質 outer (1204, 260) 130.9 — Ellipse596 SVG
│   │   ├── 100:119 inner (1229.47, 285.47) 79 — Ellipse601 SVG
│   │   └── 100:120 TEXT "質" (1269.42, 322.94) — 45px Bold white, text-shadow #cc5200
│   │
│   ├── 100:104 速 outer (688, 721) 130.9 — Ellipse593 SVG
│   │   ├── 100:106 inner (713.47, 746.47) 79 — Ellipse594 SVG
│   │   └── 100:107 TEXT "速" (753.42, 783.94) — 45px Bold white, text-shadow #cc5200
│   │
│   ├── 100:108 利 outer (688, 927) 130.9 — Ellipse593 SVG
│   │   ├── 100:110 inner (713.47, 952.47) 79 — Ellipse595 SVG
│   │   └── 100:111 TEXT "利" (753.42, 989.94) — 45px Bold white, text-shadow #cc5200
│   │
│   ├── 100:121 通 outer (1505, 721) 130.9 — Ellipse602 SVG
│   │   ├── 100:123 inner (1530.47, 746.47) 79 — Ellipse603 SVG
│   │   └── 100:124 TEXT "通" (1570.42, 783.94) — 45px Bold white, text-shadow #cc5200
│   │
│   └── 100:125 信 outer (1505, 927) 130.9 — Ellipse602 SVG
│       ├── 100:127 inner (1530.47, 952.47) 79 — Ellipse603 SVG
│       └── 100:128 TEXT "信" (1570.42, 989.94) — 45px Bold white, text-shadow #cc5200
│
└── 사이드 라벨 6그룹
    ├── 상단좌 안전성제고
    │   ├── 100:101 TEXT "안전성 제고" (972, 238) — 40px Bold #cc5200, right-align
    │   └── 100:100 TEXT "시설물의 요구성능의 만족,\n건설중 및 운영중 안전확보" (972.48, 316) 508×91 — 30px Medium #525151, right-align
    │
    ├── 상단우 품질향상
    │   ├── 100:98 TEXT "품질 향상" (1523, 238) — 40px Bold #cc5200, right-align
    │   └── 100:97 TEXT "Copy & Paste로 하향 평준화된\n기존 성과물의 품질 향상" (1366, 316) 508×91 — 30px Medium #525151
    │
    ├── 좌상 신속정확성증진
    │   ├── 100:92 TEXT "신속ㆍ정확성 증진" (664.39, 694) 531×95 — 40px Bold #604f32, right-align
    │   └── 100:91 TEXT "Analogue 기반 업무를\nDigital화 하는 Process 혁신" (663.74, 784) 479×71 — 30px Medium #525151, right-align
    │
    ├── 좌하 비용저감부가가치창출
    │   ├── 100:95 TEXT "비용저감ㆍ부가가치 창출" (663.72, 948.21) 446×96 — 40px Bold #604f32, right-align
    │   └── 100:94 TEXT "건설비용 및 유지관리비 감소,\n인력투입 최소화 등 생산성 향상" (663.3, 1017.67) 428×91 — 30px Medium #525151, right-align
    │
    ├── 우상 소통이해원할
    │   ├── 100:89 TEXT "소통ㆍ이해 원할" (1651, 694) — 40px Bold #124133
    │   └── 100:88 TEXT "성과품, Solution을 통한\n사용 편리성, 협업 및 의사소통 강화" (1651, 779) — 30px Medium #525151
    │
    └── 우하 신뢰투명성강화
        ├── 100:86 TEXT "신뢰ㆍ투명성 강화" (1651, 902) — 40px Bold #124133
        └── 100:85 TEXT "3D 모델을 통한 오류\n최소화 및 Claim 예방" (1651.01, 1027.49) 544×71 — 30px Medium #525151

## 이미지 에셋

| hash | 노드 | 의미 |
|------|------|------|
| b0e9fad5... | 100:130 | 아이콘 (타이틀 좌측) |
| 849658071... | 100:70 | bg_texture (mix-blend-mode: multiply) |
| f05ebf15... | 100:102 | 아크 상단 (Ellipse599) |
| 2f0f1750... | 100:103, 100:112 | 아크 좌/우 (Ellipse597/600, 같은 이미지) |
| 21a89b81... | 100:73 | 생산성 outer (Ellipse591) |
| fbe84134... | 100:74 | 생산성 inner (Ellipse592) |
| 1f248759... | 100:77 | 안전 outer (Ellipse589) |
| c5aeccdf... | 100:78 | 안전 inner (Ellipse590) |
| 67ef527c... | 100:81 | 소통 outer (Ellipse585) |
| 2f9a4318... | 100:82 | 소통 inner (Ellipse586) |
| 13917870... | 100:105, 100:109 | 速/利 outer (Ellipse593) |
| eeb8e9bf... | 100:106 | 速 inner (Ellipse594) |
| 48850550... | 100:110 | 利 inner (Ellipse595) |
| 688b5af1... | 100:114, 100:118 | 安/質 outer (Ellipse596) |
| 2fab2688... | 100:115 | 安 inner (Ellipse598) |
| edebaf15... | 100:119 | 質 inner (Ellipse601) |
| e0f29dcf... | 100:122, 100:126 | 通/信 outer (Ellipse602) |
| 673bd8f3... | 100:123, 100:127 | 通/信 inner (Ellipse603) |
| 9b226a99... | — | gradient rect (장식, CSS로 대체 가능) |

## 색상

| 요소 | 값 |
|------|------|
| 타이틀 | gradient(#000→#883700) |
| 안전과품질 text-shadow | #cc5200 |
| 사이드 상단 title | #cc5200 |
| 사이드 좌측 title | #604f32 |
| 사이드 우측 title | #124133 |
| 사이드 desc | #525151 |
| 장식 rect | gradient(235.162deg, rgba(115,115,115,0)→rgba(213,170,137,0.33)) |

## 수학적 계산

- Scale: 1280 / 2195.205 = 0.58312
- Main circle: 350px = 15.94% of width
- Accent circle: 130.9px = 5.96% of width
- Main label: 50px Bold white
- Accent char: 45px Bold white
- Side title: 40px Bold
- Side desc: 30px Medium #525151