Kyeongmin/C.E.L_Slide_test2

Files

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

3.7 KiB

Raw Permalink Blame History

Frame 1171281193 — 원본 시각 관계 분석

소스: design_agent(원본)/figma_to_html_agent/block-tests/bim-issues-quadrant.html 목적: hybrid 재구성 전, 보존/flow화/CSS대체 영역을 명확히 분리

1. 반드시 유지할 시각 관계

1-A. 8개 headline box 위치 (absolute 유지)

ID	위치	크기	정렬
h-tl-1	left:12, top:151.22	w:771	left
h-tl-2	left:12, top:565.27	w:885	left
h-tr-1	right:1, top:151.22	w:771	right
h-tr-2	right:1, top:564.35	w:807	right
h-bl-1	left:12, top:957.17	w:657	left
h-bl-2	left:12, top:1298.36	w:771	left
h-br-1	right:1, top:957.17	w:539	right
h-br-2	right:1, top:1312.18	w:820	right

1-B. 12개 body box 위치와 폭 (absolute 유지, 높이만 auto)

ID	위치	폭	원본 높이	정렬	중심 근접?
b-tl-1	left:8, top:222.25	993	239.75	left	N
b-tl-2	left:8, top:645.49	870	239.75	left	Y (중심 y:582~1166)
b-tr-1	right:21, top:222.25	1058	299.69	right	N
b-tr-2	right:21, top:635.35	915	119.88	right	Y
b-tr-3	right:21, top:775.45	751	119.38	right	Y
b-bl-1	left:8, top:1035.56	972	179.81	left	Y
b-bl-2	left:0, top:1367.52	1082	239.75	left	N
b-br-1	right:21, top:1028.17	880	119.88	right	Y
b-br-2	right:21, top:1154.20	1025	119.88	right	Y
b-br-3	right:21, top:1379.50	1074	239.75	right	N

핵심: 중심 근접 body box들의 폭이 좁다 → 중심 원 금지영역을 피함.

1-C. 중심 원 금지영역

center-quote: left:809.01, top:581.87, w:644.99, h:584.43
→ x 범위: 809 ~ 1454
→ y 범위: 582 ~ 1166

body box의 폭은 이 영역과 겹치지 않도록 설계됨.

1-D. 장식 요소 (absolute 유지)

4 card-bg: gradient 배경, 꼭지점에 배치
4 header-ribbon: 카테고리 라벨, gradient 배경
center-quote: 이미지 + 오버레이 텍스트

1-E. 우측 body box의 배치 방식

원본에서 우측 body box는:

right: 21px → 박스 자체가 우측에 위치
text-align: right + list-style-position: inside

하이브리드에서: bullet-row 블록 자체를 우측에 배치. text-align:right가 아니라 컨테이너가 right에 앵커됨.

2. flow/flex로 바꿔도 되는 내부 영역

body box 내부만

원본	하이브리드
`<ul><li>` + list-style: disc	R13 flex pair (marker + text)
height 고정 (239.75, 179.81 등)	height: auto (콘텐츠 결정)
padding-left: 63px	marker width: 1.5em (≈63px)

절대 바꾸지 않는 것:

body box의 left/right/top/width (absolute 위치)
headline의 위치/크기
center-quote의 위치

3. CSS로 대체 가능한 자산

원본 자산	CSS 대체	상태
card-bg gradient	CSS linear-gradient	원본에서 이미 CSS
header-ribbon gradient	CSS linear-gradient	원본에서 이미 CSS
center-quote 배경	img (복잡한 이미지)	이미지 유지

→ 원본 bim-issues-quadrant.html은 이미 모든 CSS 변환이 완료된 상태. 추가 CSS 대체 대상 없음.

4. 하이브리드 재구성 축 순서

축1 (먼저): body 내부 flow화

body box의 absolute 위치는 원본 그대로
내부만: ul/li → R13 flex pair
height 고정 → auto
이 단계에서는 우측 정렬 방식은 아직 안 건드림

축2 (다음): 우측 bullet-row 배치

우측 body box: text-align:right 제거
bullet-row 블록을 우측 앵커 컨테이너 안에 좌→우 읽기로 배치

3.7 KiB Raw Permalink Blame History