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

Frame 1171281198 — 실측 기록 (flat)

원본: 2734.634 × 910.775 px (node 182:2766, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) 패턴: dx-banner-with-3perspective-cards (상단 다크 그린 배너 + 좌측 DX 원형 라벨 + 우측 3 카드) Scale: min(1280/2734.6, 720/910.8) = 1280/2734.6 = 0.46810 (width fit, 1280×426 block)

구조 (bottom-up)

Frame 182:2766 "Frame 1171281198" (2734.634 × 910.775)
│
├─ ① 상단 다크 그린 배너 (0~198)
│  ├─ 182:2768 header_left.png (0, 0.99, 364×198) — 좌측 헤더 BG (대각선 패턴)
│  ├─ 182:2769 header_center.png (363, 0, 2007×198) — 중앙
│  ├─ 182:2770 header_right.png (2369, 0, 366×198) — 우측
│  ├─ 182:2771 image 3568 placeholder (539, 19.74, 1748×145) — design_context에 src 없음, 무시
│  ├─ 182:2772 header_decor.png (30.94, 37.51, 127×114) — 좌측 데코
│  └─ 182:2773 header_decor.png (2585.11, 68.11, 127×114) — 우측 데코 (rotate-180)
│
├─ ② 타이틀 (배너 위 텍스트)
│  └─ 182:2774 TEXT "디지털 전환(DX)은 S/W가 필수다."
│       center=(1369.38, 96.24) → top-left=(3.6, 0.98)
│       w=2730.503, h=190.518
│       90px Bold, line-height 65, text-align center
│       "디지털 전환(DX)" #90FA33 (green) / "은" white / " S/W" green / "가 필수다." white
│
├─ ③ 본문 영역 (164~910)
│  │
│  ├─ 좌측 DX 원형 영역 (164~880, x=0~620)
│  │  ├─ 182:2776 body_bg.png (1.03, 196.09, 2733.6×508) — 본문 BG
│  │  ├─ 182:2777 middle_overlay.png (805.34, 263.21, 1897×648, opacity 0.8)
│  │  ├─ 182:2778 left_bg.png (127.86, 164.5, 888×720)
│  │  ├─ 182:2779 left_decor.png (4.13, 233.6, 612×639) — scaleY(-1) + rotate(90)
│  │  ├─ 182:2780 left_inner_bg.png (27.84, 256.3, 591×566)
│  │  ├─ 182:2781 hanmaek_label.png (142.3, 374.76, 56×32, opacity 0.9)
│  │  └─ 182:2782 dx_circle.png (28.87, 378.71, 592×320) — "DX를 위한 S/W" 텍스트 포함된 원형 이미지
│  │
│  ├─ 우측 3 카드 영역 (310~880, x=913~2596)
│  │  ├─ Card 1 (BIM 전면설계, x=913) green tone
│  │  │   ├─ 182:2783 card_frame.png (913, 310, 515×378) — 카드 outline frame (orange/green)
│  │  │   ├─ 182:2786 card_header_bg.png (974, 310, 378×86) — 헤더 BG (label 배경)
│  │  │   ├─ 182:2787 card_bottom_decor.png (913, 642, 515×186)
│  │  │   ├─ 182:2792 TEXT "BIM 전면설계" — 40px Bold gradient #296B55→#123328
│  │  │   │   center=(1164.18, 323.43+32.08=355.51) → top-left=(969, 323)
│  │  │   ├─ 182:2796 본문 텍스트 (989.91, 450.77, 426×334) — 37px Medium black, 5 단락
│  │  │   │   "건설산업 생산성 향상" / blank / "고부가가치 산업으로의 전환" / blank /
│  │  │   │   "건설산업의 디지털전환(DX)\n체계 마련 및 고도화 필요"
│  │  │   └─ 3 bullet icons (936.29, 461.63 / 936.29, 543.56 / 936.29, 622.53) 41×39
│  │  │
│  │  ├─ Card 2 (디지털 전환 S/W, x=1500) orange tone
│  │  │   ├─ 182:2784 card_frame.png (1500, 310, 515×377)
│  │  │   ├─ 182:2788 card_header_bg.png (1558, 310, 378×86)
│  │  │   ├─ 182:2789 card_bottom_decor.png (1500, 642, 515×186)
│  │  │   ├─ 182:2793 TEXT "디지털 전환 S/W" — 40px Bold gradient #CC5200→#8D3900
│  │  │   ├─ 182:2797 "노동집약형 업무 탈피" (1570, 450, 453×60) — 37px Medium
│  │  │   ├─ 182:2808 "S/W의 지속적인 고도화 필요" (1571, 530, 453×63) — 37px Medium
│  │  │   ├─ 182:2809 "충분한 투자(인력, 비용, 시간 등)와 엔지니어의 적극적 동참" (1568, 612, 453×120)
│  │  │   │   — 37px Medium + 30px (인력, 비용, 시간 등)
│  │  │   └─ 3 bullet icons (1520.96, 461 / 1520.96, 543 / 1520.96, 625) 41×39
│  │  │
│  │  └─ Card 3 (고부가가치 산업전환, x=2080) green tone
│  │      ├─ 182:2785 card_frame.png (2080, 310, 515×377)
│  │      ├─ 182:2790 card_header_bg.png (2141, 310, 378×86)
│  │      ├─ 182:2791 card_bottom_decor.png (2081, 642, 515×186)
│  │      ├─ 182:2794 TEXT "고부가가치 산업전환" — 40px Bold gradient #296B55→#123328
│  │      ├─ 182:2798 본문 (2154, 450, 442×334) — 37px Medium, 3 단락
│  │      │   "기본기술의 이해 & 발전 필요" / blank /
│  │      │   "업무 본질에 대한 깊은 이해를 바탕으로 창의적 아이디어 발현" / blank /
│  │      │   "업무환경 개선과 DX를 통한\nProcess 혁신과 Product 개선"
│  │      └─ 3 bullet icons (2101, 461 / 2101, 543 / 2101, 678) 41×39

에셋 (15개)

파일	의미	크기	사용
header_left.png	좌측 다크 그린 헤더 BG (대각선 패턴)	364×198	1×
header_center.png	중앙 다크 그린 헤더 BG	2007×198	1×
header_right.png	우측 다크 그린 헤더 BG	366×198	1×
header_decor.png	헤더 좌/우 작은 데코 (사각형 군)	127×114	2× (우측은 rotate-180)
body_bg.png	본문 BG	2733×508	1×
middle_overlay.png	중앙 BG 오버레이	1897×648	1× (opacity 0.8)
left_bg.png	좌측 영역 BG	888×720	1×
left_decor.png	좌측 데코	612×639	1× (scaleY(-1) + rotate(90))
left_inner_bg.png	좌측 내부 BG	591×566	1×
hanmaek_label.png	한맥기술 작은 라벨	56×32	1× (opacity 0.9)
dx_circle.png	"DX를 위한 S/W" 텍스트 포함 원형 이미지	592×320	1×
card_frame.png	카드 외곽 프레임 (orange/green border)	515×378	3×
card_header_bg.png	카드 상단 라벨 BG	378×86	3×
card_bottom_decor.png	카드 하단 데코	515×186	3×
bullet_arrow.png	녹색 ▶ 화살표 (1171281209 공유)	41×39	9×

이상 탐지 결과

검사	결과
회전 적용	header_decor 우측 인스턴스 rotate-180; left_decor scaleY(-1) + rotate(90)
Vector 좌표 metadata vs design_context	일치
중복 노드	header_decor (2×), card_frame/header_bg/bottom_decor (3×), bullet_arrow (9×) — 정상 재사용
누락 자산	image 3568 (placeholder, src 없음) — 무시
DX를 위한 S/W 텍스트	텍스트 노드 아님, dx_circle.png 안에 baked in. 1:1 변환에는 그대로 PNG 사용. 향후 템플릿화 시 CSS+텍스트 분리 검토

변형 가능 축

• cards[N=3] (required) — cardinality 3 고정 (analysis.md)
  • card_label (required, 40px Bold gradient — color depends on tone)
  • card_color_palette (required) — green (#296B55→#123328) 또는 orange (#CC5200→#8D3900)
  • body_paragraphs[N=1~3] (required) — 37px Medium, line-height 60
  • body_bullets[N=3] (required) — 녹색 ▶
• title (required) — 90px Bold, 인라인 색상 변경 가능 (#90FA33 강조 + 흰색)
• header_decor_left/right (optional) — 작은 사각형 군 데코
• dx_circle (required for this layout) — 좌측 큰 원형 텍스트 이미지

Sub-patterns

• dark-green-banner-title — 상단 다크 그린 배너 + 인라인 색상 강조 텍스트 (#90FA33)
• card-with-orange-frame-and-bullet-list — 카드 외곽 프레임 PNG + 헤더 BG PNG + 본문 + ▶ 불릿
• bullet-paragraph-multiline-with-spacer — 단락 사이에 빈 줄 패턴 (line-height 60 빈 paragraph)

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

• 카드 프레임/헤더/하단 데코를 PNG로 유지 (CSS gradient/border-radius로 변환 가능 → 프로모션 시 검토)
• 좌측 dx_circle은 텍스트가 baked-in 이미지라 동적 변경 불가 — 템플릿화 시 별도 CSS 처리 필요
• 본문의 tracking-[-X.YYpx] 마이크로 letter-spacing 다수 — 자연 wrap에 맡길 것