C.E.L_Slide_test2/figma_to_html_agent/blocks/1171281182/flat.md

Frame 1171281182 — 실측 기록 (flat)

원본: 1248 × 1066 px (node 182:2523, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) 패턴: cards-3-category-with-bim-process-diagram (상단 3 카테고리 카드 + 하단 BIM 모델/공사 Process 연계 원형 다이어그램) Scale: min(1280/1248, 720/1066) = 720/1066 = 0.67542 (height fit, 843×720 block)

구조 (bottom-up)

Frame 182:2523 "Frame 1171281182" (1248 × 1066)
│
├─ ① 헤더 (title-row, flex gap 25)
│  ├─ 182:2551 icon 50×50  ← title_icon.png (녹색 원형, 1171281179와 공유)
│  └─ 182:2552 TEXT "시공단계 BIM 모델과 정보 활용 구분" — 50px Bold black (gradient bg-clip-text 솔리드 검정)
│
├─ ② 상단 3 카테고리 카드
│  │
│  ├─ Section 1 — Model-based (top=116)
│  │   ├─ 182:2567 brown label (21, 116, 335×124) — bg rgba(50,31,9,0.8), rounded right r=20, drop-shadow
│  │   │   "모델" 45px #FFE100 yellow + "기반" 38px white
│  │   │   "(Model-based)" 38px white
│  │   ├─ 182:2569 white card (378, 116, 870×124) — border 3px #A5BBB4, rounded right r=20
│  │   ├─ 182:2570 card decor (981, 119, 264×118) — card_decor.png (rounded-bl,tl r=17)
│  │   └─ 182:2571 body list (378, 148, 821×77) — 40px Bold black, list-disc
│  │       "최종 목적물의 전체 또는 부분 [3D 형상정보 ] 활용"
│  │       (강조: 45px #144838)
│  │
│  ├─ Section 2 — Object-based (top=263)
│  │   ├─ 182:2555 brown label (19, 263, 335×124) — 동일 스타일
│  │   │   "객체" 45px yellow + "기반" 38px white / "(Object-based)" 38px
│  │   ├─ 182:2557 white card (376, 263, 870×124)
│  │   ├─ 182:2558 card decor (983, 265, 260×119)
│  │   └─ 182:2559 body list (376, 295, 857×77)
│  │       "Model의 개별 [객체]에 정의된 [건설정보 ]활용"
│  │
│  └─ Section 3 — Position-based (top=411)
│      ├─ 182:2562 brown label (21, 411, 335×124)
│      │   "위치" 45px yellow + "기반" 38px white / "(Position-based)" 38px
│      ├─ 182:2564 white card (378, 411, 870×124)
│      ├─ 182:2565 card decor (981, 413, 265×119)
│      └─ 182:2566 body list (378, 442, 821×77)
│          "공사 중 발생하는 데이터의 [위치정보] 활용"
│
└─ ③ 하단 BIM 모델 / 공사 Process 연계 다이어그램 (656~1029)
   │
   ├─ 182:2537 container_bg.png (66, 660, 1084×370) — 큰 둥근 컨테이너 BG, rounded 69
   ├─ 182:2535 wave_bg crop A (62, 656, 425×374, overflow hidden, image scaled 708%) — 좌측 부분
   ├─ 182:2536 wave_bg crop B (475, 656, 675×374, overflow hidden, image translate-left 442%) — 우측 부분
   │
   ├─ 좌측 BIM 모델 영역
   │   ├─ 182:2526 circle_bg.png (164, 707, 294×294)
   │   ├─ 182:2539 left_circle_content (167, 656, 374×374) — BIM 와이어프레임
   │   ├─ 182:2540 left_inner_decor (192.7, 742.55, 307×215)
   │   ├─ 182:2527 dot_small (190, 717, 41×41)
   │   ├─ 182:2531 dot_small (246, 995, 20×20)
   │   ├─ 182:2532 element_122 (195, 944, 122×122)
   │   └─ 182:2542 TEXT "BIM 모델" — 45px Bold gradient (#276853 → #B65320)
   │       container at (233.29, 801, 256×?), text-shadow 0 7 4 rgba(0,0,0,0.5)
   │
   ├─ 가운데 X-shape decoration
   │   ├─ 182:2543 x_shape_center (475, 743.05, 250×200)
   │   ├─ 182:2544 x_shape_center mirror (-scale-y-100) (475, 741, 250×200)
   │   └─ 182:2530 dot_small (446, 850, 20×20)
   │
   └─ 우측 공사 Process 연계 영역
       ├─ 182:2525 circle_bg.png (590, 707, 294×294)
       ├─ 182:2538 right_circle_content (671, 656, 374×374, opacity 0.95) — 페이퍼/문서
       ├─ 182:2545 right_overlay (820, 771, 152×180, opacity 0.7)
       ├─ 182:2529 dot_small (822, 733, 20×20)
       ├─ 182:2528 dot_small (650.03, 980, 41×41)
       ├─ 182:2533 element_122 (772, 682, 122×122)
       └─ 182:2547 TEXT "공사 / Process 연계" — 45px Bold gradient
           container at (720, 717, 256×214), 2 lines (line-height 60)

에셋 (12개)

파일	의미	크기	사용
title_icon.png	녹색 원형 아이콘 (1171281179 공유)	50×50	1×
card_decor.png	카드 우측 장식 (1171281179 공유)	264×118	3×
container_bg.png	하단 다이어그램 컨테이너 큰 둥근 BG	1084×370	1×
circle_bg.png	원형 둥근 사각 BG	294×294	2×
left_circle_content.png	좌측 BIM 와이어프레임 모델	374×374	1×
right_circle_content.png	우측 페이퍼/문서 (opacity 0.95)	374×374	1×
left_inner_decor.png	좌측 원 안 장식	307×215	1×
x_shape_center.png	중앙 X 모양 (원래 + 거울 mirror)	250×200	2×
right_overlay.png	우측 추가 오버레이 (opacity 0.7)	152×180	1×
wave_bg.png	컨테이너 안 wave 배경 (좌/우 crop 변형)	425×374 / 675×374	2×
dot_small.png	작은 동그라미 dot	41×41 / 20×20	5×
element_122.png	보조 장식 122×122	122×122	2×

이상 탐지 결과

검사	결과
회전	x_shape_center 두 번째 인스턴스 -scale-y-100 (수직 미러)
Vector 좌표 metadata vs design_context	일치
z-order 비정상	본문 ul들이 카드/decor 뒤에 섹션별로 분산 그려짐 — overlap 시각 영향 없음
중복 노드	circle_bg (2×), x_shape_center (2×), card_decor (3×), dot_small (5×), element_122 (2×) — 정상 재사용
wave_bg crop	동일 src를 width 708%/542%로 스케일링하여 다른 부분 노출 — overflow:hidden 처리 필요

변형 가능 축

• categories[N=3] (required) — 모델기반 / 객체기반 / 위치기반 (cardinality 3 고정)
  • category_label_kr (required, 한글, 강조 부분 yellow)
  • category_label_en (required, "(English-based)" 형식)
  • category_body (required, list-disc, 인라인 #144838 강조)
• bottom_diagram (optional?) — BIM 모델 ↔ 공사 Process 연계 다이어그램. 다른 구성 가능
  • left_label (required, "BIM 모델" 형태, 45px gradient)
  • right_label (required, "공사 / Process 연계" 형태, 2 lines OK)
  • 좌/우 원 콘텐츠 이미지는 도메인-specific (BIM, Process 시각화)
• title (required, 50px Bold gradient bg-clip-text)
• title_icon (required, 녹색 원형)

Sub-patterns

• cards-3-category-rounded-right — 1171281179와 동일 사이드 라벨 패턴 (label-body-rounded-right-pair) 재사용
• dual-circle-process-diagram — 신규 sub-pattern. 좌/우 큰 원 + 중앙 X-shape decoration + 다중 작은 dot 장식
  • 좌/우 원: circle_bg + content(domain image) + decor 오버레이
  • 중앙: X-shape (mirror 적용)
  • 라벨: 45px Bold gradient bg-clip-text 텍스트

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

• 하단 다이어그램의 모든 dot_small / element_122 위치는 Figma 데이터 그대로. 템플릿화 시 단순화 가능
• wave_bg crop은 단일 이미지를 두 영역에 다른 변환으로 사용 — overflow:hidden 수동 적용
• x_shape_center mirror는 CSS transform: scaleY(-1) (회전 아님)