Files
C.E.L_Slide_test2/figma_to_html_agent/blocks/1171281190/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

4.1 KiB
Raw Blame History

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