kyeongmin
9fbe3ac90c
전체 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>
4.4 KiB
4.4 KiB
Frame 1171281202 — 원본 시각 관계 분석
소스:
design_agent(원본)/figma_to_html_agent/block-tests/bim-sw-overview.html목적: hybrid 재구성 전, 보존/flow화/CSS대체 영역을 명확히 분리
1. 반드시 유지할 시각 관계
1-A. 좌측 패널 전체 (absolute 유지, 변경 없음)
| 요소 | 위치 | 크기 |
|---|---|---|
| left-bg | left:38, top:74.02 | w:964.14, h:759.99 |
| cat-bar-1 | left:103.13, top:153 | w:693.19, h:49 |
| cat-bar-2 | left:103.13, top:352 | w:693.19, h:49 |
| cat-bar-3 | left:103.13, top:612 | w:693.19, h:49 |
| cat-title-1 | left:162.77, top:126 | w:606.27, h:95.8 |
| cat-title-2 | left:162.77, top:326 | w:606.27, h:95.8 |
| cat-title-3 | left:162.77, top:586 | w:606.27, h:95.8 |
| sw-1 | left:166.42, top:207 | w:323.36, h:120 |
| sw-2 | left:166.42, top:405 | w:654.63, h:180 |
| sw-3 | left:162.46, top:671 | w:654.63, h:120 |
좌측은 건드리지 않는다.
1-B. 타이틀 (absolute 유지)
| 요소 | 위치 | 크기 |
|---|---|---|
| title-icon | left:0, top:13 | w:38.05, h:40 |
| title-text | left:51, top:0 | w:1198, h:48 |
| title-bar | left:26, top:42 | w:255.13, h:26 |
1-C. 장식 요소 (absolute 유지)
| 요소 | 위치 | 크기 |
|---|---|---|
| mid-deco | left:884.33, top:192 | w:180.96, h:541 |
| mid-arrow | left:943.66, top:375 | w:73.18, h:158 |
1-D. 우측 5행 top rhythm (absolute Y 유지)
| Row | badge top | bar top | text top | arrow top | interval |
|---|---|---|---|---|---|
| 1 | 78 | 105 | 123 | 152 | — |
| 2 | 230 | 257 | 276 | 302 | 152 |
| 3 | 384 | 412 | 430 | 456 | 154 |
| 4 | 539 | 567 | 586 | 606 | 155 |
| 5 | 694 | 721 | 734 | 760 | 155 |
핵심: 이 Y rhythm은 고정. flex column으로 일반화하면 안 됨.
1-E. 우측 row 내부 겹침 관계
각 row에서 4개 요소의 X 관계:
badge: left:1047.5, w:88.01 → 1047.5 ~ 1135.51
bar: left:1094.96, w:751.54 → 1094.96 ~ 1846.50
text: left:1176.05, w:687.26 → 1176.05 ~ 1863.31
arrow: left:1794.09, w:47.47 → 1794.09 ~ 1841.56
겹침 관계:
- badge는 bar 시작점 좌측으로 47.46px 돌출 (1094.96-1047.5)
- badge와 bar는 40.55px 겹침 (1135.51-1094.96)
- text는 bar 좌측에서 81.09px 안쪽에서 시작 (1176.05-1094.96)
- text는 bar 우측을 16.81px 넘어감 (1863.31-1846.50) ← 원본 특성
- arrow는 bar 내부, 우측에서 52.41px 안쪽 (1846.50-1794.09)
2. flow/flex로 바꿔도 되는 내부 영역
우측 row 내부만 (row Y는 유지)
현재 (원본):
- badge, bar, text, arrow 모두 독립 absolute
하이브리드: 각 row를 하나의 컨테이너로 묶고, row의 top은 원본 값 유지. 내부에서만 관계 재정의:
.row-N (absolute top: 원본 값, left: 1047.5px)
.badge (absolute overlay, z-index:2)
.bar (CSS background, position:relative)
.text (bar 내부 usable area 기준)
.arrow (bar 끝 구조 자산)
"bar 내부 usable area" 계산:
- bar left edge → text start: 81px (padding-left)
- text end → bar right edge: text가 16.8px 넘어감 → 넘어가도록 허용하거나 bar를 확장
- arrow start → bar right edge: 52px (padding-right for arrow area)
3. CSS로 대체 가능한 자산
| 원본 자산 | CSS 대체 | 상태 |
|---|---|---|
| left-bg | CSS gradient + clip-path | 원본에서 이미 CSS |
| cat-bar × 3 | CSS gradient | 원본에서 이미 CSS |
| right-bar × 5 | CSS background | 원본에서 이미 CSS |
| mid-deco | CSS radial-gradient | 원본에서 이미 CSS |
| title-bar | CSS blur | 원본에서 이미 CSS |
| badge × 5 | 이미지 유지 (복잡한 원형 + 숫자) | — |
| arrow × 5 | 이미지 유지 (화살표 아이콘) | — |
| mid-arrow | 이미지 유지 | — |
| title-icon | 이미지 유지 | — |
→ 원본에서 이미 모든 CSS 변환 완료. 추가 대체 대상 없음.
4. 하이브리드 재구성 축 순서
축1 (먼저): row geometry
- 좌측 전체 유지 (absolute 그대로)
- 우측 5행: 각 row를 하나의 컨테이너로 묶기
- row top은 원본 값 유지
- 내부: badge overlay + bar(contains text + arrow)
- 이 단계에서는 text usable area는 아직 안 건드림
축2 (다음): text usable area
- bar 내부에서 text의 padding/width를 "bar usable area"로 재정의
- arrow를 bar 끝 구조 자산으로 재배치