Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9fbe3ac90cd1d70cc40ce2d3bb3da1b0e19ff39e
C.E.L_Slide_test2/figma_to_html_agent/blocks/1171281174/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.9 KiB
Raw Blame History

Frame 1171281174 — 실측 기록 (flat)

원본: 1728 × 657 px (node 182:2810, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) 패턴: scene-with-numbered-list-4 (좌:장면 이미지+글로브, 우:번호 4개 + brown pill 텍스트 버블) Scale: 1280 / 1728 = 0.74074 → 슬라이드 안 1280 × 486.7 px 차지

구조 (bottom-up)

Frame 182:2810 "Frame 1171281174" (1728 × 657)
├─ rounded-rect 182:2811 "image 3939" (0, 0) 447×133  ← header_pill.png (브라운 pill 배경)
├─ TEXT 182:2812 "국외" center=(223.5, 68), top-left=(46, 23) 355×90 — 60px Bold 흰색, tracking -1.8, line-height 90
├─ rounded-rect 182:2813 "image 3940" (0, 19) 75×88  ← pin_icon.png (pin/marker 아이콘)
│
├─ rounded-rect 182:2825 "image 3949" (53, 139) 815×465  ← scene.png (건설 현장 합성 이미지, opacity 0.7, radius 27)
├─ rounded-rect 182:2826 "image 3951" (718, 159) 127×126  ← globe.png (구 모양 아이콘, border 3 white, radius 132.5, opacity 0.8)
├─ rounded-rect 182:2828 "image 3957" (825, 86) 115×571  ← arrow_chain.png (수직 화살표 체인, 4개 노드를 연결)
│
├─ rounded-rect 182:2814 "image 3953" (954, 136) 760×97  ← text_bubble.png (브라운 둥근 막대)
├─ rounded-rect 182:2815 "image 3954" (954, 266) 760×97  ← text_bubble.png (재사용)
├─ rounded-rect 182:2816 "image 3955" (954, 407) 760×97  ← text_bubble.png (재사용)
├─ rounded-rect 182:2817 "image 3956" (954, 543) 760×97  ← text_bubble.png (재사용)
│
├─ TEXT 182:2818 "오류에 의한 Claim 최소화" (1033, 149) 695×60 — 45px Medium #11231D, leading 60, text-shadow
├─ TEXT 182:2819 "설계 업무 시 사업 Data 정리 필수" (1033, 285) 695×60
├─ TEXT 182:2820 "자체적인 기술업무 Manual 작성" (1033, 421) 695×60
├─ TEXT 182:2821 "데이터 통합 및 관리" (1033, 562) 695×60
│
├─ rounded-rect 182:2822 "01 2" (906, 117) 89×93  ← badge_01.png (번호 1 + 우측 화살표)
├─ rounded-rect 182:2823 "02 2" (906, 238) 89×93  ← badge_02.png
├─ rounded-rect 182:2824 "03 2" (906, 376) 89×93  ← badge_03.png
└─ rounded-rect 182:2827 "04 1" (906, 509) 89×93  ← badge_04.png (이름 suffix만 다름)

에셋 (10개)

파일 의미 크기 사용 횟수
assets/header_pill.png 좌상단 브라운 pill 헤더 배경 447×133 1
assets/pin_icon.png pin/marker 아이콘 (헤더 위 겹침) 75×88 1
assets/scene.png 건설 현장 합성 메인 이미지 (4.5MB) 815×465 1 (opacity 0.7)
assets/globe.png 구 모양 원형 아이콘 (장면 위) 127×126 1 (opacity 0.8, white border)
assets/arrow_chain.png 수직 화살표 체인 (장면→번호 연결) 115×571 1
assets/text_bubble.png 브라운 둥근 막대 배경 760×97 4 (재사용)
assets/badge_01.png 번호 1 (chevron 우측 화살표 포함) 89×93 1
assets/badge_02.png 번호 2 89×93 1
assets/badge_03.png 번호 3 89×93 1
assets/badge_04.png 번호 4 (Figma 이름 suffix _1 다름, 비주얼 동일) 89×93 1

이상 탐지 결과

검사 결과
회전 단일문자 없음
좁은 박스 세로 텍스트 없음
중복 노드 (동일 좌표 + 동일 내용) 없음. text_bubble은 동일 src 4× 재사용 — 정상
Vector 좌표 metadata vs design_context 불일치 일치
회전 적용 (bbox vs render 차이) 없음 (모두 정사각형 또는 가로 배치)
z-order 비정상 scene(이미지 3949)가 badges 01-03 다음 순서로 그려짐 → 시각 영향 없음 (위치 비겹침)

변형 가능 축

  • list_items[N=4] (required) — 번호 4개 항목, cardinality=4 고정 (analysis.md)
    • text (required, 한 줄, 45px 분량)
  • header_pill (required) — 좌상단 카테고리 헤더 ("국외" 외 다른 텍스트 가능)
  • header_pin (optional) — pin 아이콘
  • scene_image (optional) — 메인 합성 이미지. 없으면 박스 자리만 차지하거나 단색 fill
  • globe_overlay (optional) — 원형 오버레이 아이콘
  • arrow_chain (required) — 장면과 리스트 연결하는 수직 체인
  • numbered_badges[N=list_items.length] (required) — 번호별 PNG 배지

Sub-patterns

  • scene-photo-with-circle-overlay — 큰 합성 이미지 + 원형 아이콘 오버레이 (R16 비슷한 프레임 배치 패턴)
  • numbered-pill-list — 번호 배지 + 옆 pill 텍스트 막대 N개 (1171281180 stacked-arrow-list와 다름: 여기는 평행 배열, 1171281180은 계단)

임시 보정 (1:1, 템플릿화 시 재고려)

  • 번호 배지를 PNG로 유지 (CSS 변환 시 1171281174의 chevron 모양 + 번호 폰트 동시 재현 필요 → 향후 svg/ 폴더로 정리)
  • text_bubble을 PNG로 유지 (CSS gradient/border-radius로 변환 가능 → 프로모션 시 CSS화 후보)
Reference in New Issue View Git Blame Copy Permalink