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>
This commit is contained in:
99
figma_to_html_agent/blocks/1171281179/flat.md
Normal file
99
figma_to_html_agent/blocks/1171281179/flat.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# Frame 1171281179 — 실측 기록 (flat)
|
||||
|
||||
> 원본: 1207 × 861 px (node 182:3024, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
|
||||
> 패턴: framework-3section-label-body (좌 라벨 / 우 카드 본문, 3 섹션)
|
||||
> Scale: **min(1280/1207, 720/861) = 720/861 = 0.83624** (height fit, 1009×720 block in 1280×720 slide)
|
||||
|
||||
## 구조 (bottom-up)
|
||||
|
||||
```
|
||||
Frame 182:3024 "Frame 1171281179" (1207 × 861)
|
||||
└─ Group 182:3025 "Group 1171285821" (0, 0) 1207×861
|
||||
│
|
||||
├─ ① 헤더 (title row, 0, 0) 1166×94
|
||||
│ └─ 항목 frame 182:3027: flex gap=15, items-center
|
||||
│ ├─ icon 50×61 (green circle, 50×50 image inside) — title_icon.png
|
||||
│ └─ TEXT 182:3030 "효율적인 정보의 관리와 활용"
|
||||
│ - "효율적인 " 50px Bold, gradient 180° (#296B55 → #123328)
|
||||
│ - "정보의 관리와 활용" 65px Bold, gradient 180° (#000 → #883700)
|
||||
│ - text-shadow: 0 0 4px #322C1E
|
||||
│
|
||||
├─ ② 좌측 브라운 라벨 (3개, 282×230, rgba(50,31,9,0.8), rounded right corners r=20)
|
||||
│ ├─ 182:3033 "What" label (18, 124) — drop-shadow 0 4 2 rgba(0,0,0,0.25)
|
||||
│ │ "무슨 정보" 40px Bold white + "What" 53px Bold #FFE100 (yellow)
|
||||
│ ├─ 182:3035 "HOW" label (18, 378) — drop-shadow 동일
|
||||
│ │ "어떻게 연계" 40px + "HOW" 53px #FFE100
|
||||
│ └─ 182:3031 "WHEN" label (18, 631) — drop-shadow 없음
|
||||
│ "언제 사용" 40px + "WHEN" 53px #FFE100
|
||||
│
|
||||
├─ ③ 우측 흰 카드 (3개, 877~879×230, white bg, 3px border #A5BBB4, rounded right r=20)
|
||||
│ ├─ 182:3037 (315, 124) 877×230 ← What 카드
|
||||
│ ├─ 182:3039 (315, 378) 877×230 ← HOW 카드
|
||||
│ └─ 182:3038 (313, 631) 879×230 ← WHEN 카드
|
||||
│
|
||||
├─ ④ 우측 카드 장식 이미지 (3개, 383×177, rounded-bl r=17, 동일 src 재사용)
|
||||
│ ├─ 182:3040 image 5624 (804, 176) — card_decor.png
|
||||
│ ├─ 182:3041 image 5625 (805, 428) — 동일
|
||||
│ └─ 182:3042 image 5626 (803, 680) — 동일
|
||||
│
|
||||
├─ ⑤ 본문 텍스트 (3 섹션)
|
||||
│ ├─ 182:3043 What 본문 (321, 143) 880×193 — 35px Medium black + 40px Bold #CC5200 강조
|
||||
│ │ • 수량, CBS 내역, 단가, 공사일정, 자원 투입계획 등 [계획 정보]
|
||||
│ │ • 일일 작업수량, 실제 투입 자원 등 [공사 실행 정보]
|
||||
│ │ • 품질/안전/환경 등 점검일지, 체크리스트, 사진 등 [공사 결과]
|
||||
│ │
|
||||
│ ├─ 182:3045 HOW 본문 (319, 396) 888×194
|
||||
│ │ • 3D 형상 [산출속성과 연계]하여 S/W를 통해 정의
|
||||
│ │ • 객체별 품질 검사 기준 등은 [시방규정과 연계]하여 S/W로 정의
|
||||
│ │ • 객체별 필요정보를 Text기반 형식으로 [사용자가 입력]
|
||||
│ │
|
||||
│ └─ 182:3044 WHEN 본문 (319, 653) 868×177
|
||||
│ • [착수 전] 공정계획, 시공계획 등 계획 수립
|
||||
│ • [개별 공사 전] 시공상세도를 기반으로 한 작업 내용 확인
|
||||
│ • [개별 공사 후] 실적 관리, 공사관련 문서 작성, 업무 보고
|
||||
│
|
||||
└─ ⑥ image 3341 placeholder (656, 517) 536×311 opacity 85
|
||||
— design_context에 src 미포함. WHEN 카드 영역 내 정체 불명 placeholder.
|
||||
— 시각 영향 없으므로 생략.
|
||||
```
|
||||
|
||||
## 에셋 (2개 + 1 missing)
|
||||
|
||||
| 파일 | 의미 | 크기 | 사용 |
|
||||
|------|------|------|------|
|
||||
| `assets/title_icon.png` | 타이틀 좌측 녹색 원형 아이콘 (1171281194에서도 사용) | 50×50 | 1× |
|
||||
| `assets/card_decor.png` | 카드 우측 장식 이미지 (3D 헥사곤/패턴) | 383×177 | **3×** (재사용) |
|
||||
| (image 3341) | metadata에는 있으나 design_context 미제공 | 536×311 | 생략 |
|
||||
|
||||
## 이상 탐지 결과
|
||||
|
||||
| 검사 | 결과 |
|
||||
|------|------|
|
||||
| 회전 단일문자 | 없음 |
|
||||
| 좁은 박스 세로 텍스트 | 없음 |
|
||||
| 중복 노드 | card_decor 동일 src 3× 재사용 — 정상 |
|
||||
| Vector 좌표 metadata vs design_context | 일치 |
|
||||
| **이상한 회전 nesting** | 좌측 라벨 3개 모두 `rotate-180` 래퍼 + 내부 컨텐츠도 `rotate-180` → 시각적으로 identity. Figma 자동 레이아웃 export 부산물. CSS에서는 회전 생략하고 `border-top-right-radius/bottom-right-radius: 20px`만 적용. |
|
||||
| **이상한 image transform** | 카드 장식 3개 모두 `-scale-y-100` + `rotate-180` → 시각적으로 identity. CSS에서 transform 생략. |
|
||||
| metadata에 있으나 design_context 미제공 | image 3341 (placeholder) — 무시 |
|
||||
|
||||
## 변형 가능 축
|
||||
|
||||
- **sections[N=3] (required)** — cardinality 3 고정 (analysis.md), label + body 페어 3쌍
|
||||
- `label_kr` (required, 40px) — "무슨 정보" / "어떻게 연계" / "언제 사용"
|
||||
- `label_en` (required, 53px yellow) — "What" / "HOW" / "WHEN"
|
||||
- `body_bullets[N=3]` (required) — 본문 불릿 (35px black + 40px Bold #CC5200 강조)
|
||||
- `title` (required) — "효율적인 정보의 관리와 활용" 형태, 두 부분 폰트 사이즈 다름 (50/65)
|
||||
- `title_icon` (required) — 녹색 원형 아이콘
|
||||
- `card_decor` (optional) — 카드 우측 장식 이미지. 없으면 흰 카드만
|
||||
|
||||
## Sub-patterns
|
||||
|
||||
- `label-body-rounded-right-pair` — 좌(브라운 라벨, rounded right) / 우(흰 카드, rounded right + border) 페어
|
||||
- `bullet-list-with-highlight` — 불릿 리스트에서 핵심어 색상/폰트 강조 (#CC5200, +5px)
|
||||
- `gradient-bg-clip-text-title` — 멀티 폰트 사이즈 + 멀티 색 그라디언트 텍스트 헤더 (1171281194의 title-row와 비슷)
|
||||
|
||||
## 임시 보정 (1:1, 템플릿화 시 재고려)
|
||||
|
||||
- 좌측 라벨의 `drop-shadow`는 What/HOW만 적용, WHEN에는 미적용 — Figma에서 의도된 차이일 수 있음 (검토 필요). 우선 보존.
|
||||
- 본문 tracking 값(letter-spacing) 마이크로 조정 (-1.75 ~ -2.8px). 템플릿에서는 자연 wrap에 맡김 권장.
|
||||
Reference in New Issue
Block a user