# 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에 맡길 것