Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8e1f5c67c17d8b7e7db0955c29d95d2aad43147c
C.E.L_Slide_test2/figma_to_html_agent/blocks/1171281179/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

5.8 KiB
Raw Blame History

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 View Git Blame Copy Permalink