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

Frame 1171281206 — 실측 기록 (flat)

원본: 3714.75 × 923 px (node 182:2643, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) 패턴: cards-4-grid-with-arrow-divider (4열 카드 + 상단 화살표 + dashed 분할선) Scale: min(1280/3714.75, 720/923) = 1280/3714.75 = 0.34457 (width fit, 1280×318 block)

구조 (bottom-up)

Frame 182:2643 "Frame 1171281206" (3714.75 × 923)
│
├─ ① 상단 ▼ 화살표 (image 3526 stacked 2x with -rotate-90)
│  ├─ 182:2666 (1534, 0, 632×174 after rotation) — top_arrow.png
│  └─ 182:2667 (1534, 10.7, 632×174, opacity 0.5) — 동일 src 그림자 효과
│
├─ ② 외곽 흰 카드 컨테이너 (4.15, 204, 3710×701)
│       border 3px #CE4D16, rounded 20, bg white
│
├─ ③ dashed 분할선 (3개 — vertical, #CE4D16 dashed 2px)
│  ├─ 182:2646 at x=899.67, y=204, h=701
│  ├─ 182:2647 at x=1853.23, y=204, h=701
│  └─ 182:2648 at x=2783.99, y=204, h=701
│
├─ ④ 4 카드 헤더 pill (image 4331/4332/4333/4334 동일 src 4×, 632×88)
│  ├─ 182:2651 (137.85, 187) — Card 1 (독과점 생태계 형성)
│  ├─ 182:2654 (1060.32, 187) — Card 2 (기술예속 심화)
│  ├─ 182:2652 (2002.48, 187) — Card 3 (S/W 사용료 과다)
│  └─ 182:2653 (2933.24, 187) — Card 4 (존폐 위기)
│
├─ ⑤ 4 카드 타이틀 텍스트 (50px Bold white, line-height 90, text-shadow 0 7 4 rgba(0,0,0,0.25))
│       모두 -translate-x-1/2 -translate-y-1/2 → center 좌표 명시
│  ├─ 182:2655 "독과점 생태계 형성" center=(453.46, 230), w=770
│  ├─ 182:2658 "기술예속 심화" center=(1376.97, 230), w=770, tracking -1px
│  ├─ 182:2656 "S/W 사용료 과다" center=(2331.57, 230), w=770
│  └─ 182:2657 "존폐 위기" center=(3248.85, 230), w=770
│
├─ ⑥ 4 일러스트 이미지 (DALL-E 생성, 모두 opacity 0.8)
│  ├─ 182:2661 illust_1_monopoly.png (96.39, 303, 715×394, rounded 40)
│  ├─ 182:2663 illust_2_dependency.png (970.15, 303, 815×394, rounded 32, h-overflow 109%)
│  ├─ 182:2662 illust_3_cost.png (1926.82, 296, 783×390, rounded 40, h-overflow 106%)
│  └─ 182:2664 illust_4_crisis.png (2894.89, 296, 707×390, rounded 40)
│
└─ ⑦ 4 카드 본문 텍스트 (40px Bold black, line-height 70, 모두 center 좌표)
   ├─ 182:2649 center=(453.98, 795.5), w=907.96, h=255 — 2 줄
   │     "3rd Party의 개발을 유도하여" / "시장 점유율을 높여 지배력 발휘"
   ├─ 182:2650 center=(1378, 786), w=911.07 — 2 줄
   │     "대형 S/W 전문회사의 확대로" / "사용 및 기술적용이 종속되게 됨"
   ├─ 182:2659 center=(2318.09, 804), w=770.11 — 2 줄
   │     "기술 종속으로 지속해서 높아지는" / "S/W의 사용료를 감당해야 함"
   └─ 182:2660 center=(3249.89, 804), w=770.11 — 2 줄
         "국내 건설산업 전체에 악영향을 미치며," / "엔지니어링 사업의 회사는 존폐 위기에 직면함" (tracking -0.32)

에셋 (7개 + 1 CSS)

파일	의미	크기	사용
top_arrow.png	상단 ▼ 화살표	174×632 (rotate-90 → 632×174)	2× (1개 opacity 0.5)
header_pill.png	카드 상단 헤더 (브라운 pill)	632×88	4×
illust_1_monopoly.png	DALL-E 독과점 생태계 일러스트	715×394	1× (opacity 0.8)
illust_2_dependency.png	기술예속 일러스트	815×394	1× (opacity 0.8)
illust_3_cost.png	DALL-E S/W 사용료 일러스트	783×390	1× (opacity 0.8)
illust_4_crisis.png	DALL-E 존폐 위기 일러스트	707×390	1× (opacity 0.8)
divider.svg	dashed 분할선 (2px dashed #CE4D16)	701×2	CSS로 대체 (R9: border-left: 2px dashed #CE4D16)

이상 탐지 결과

검사	결과
회전 적용	top_arrow 2× -rotate-90; dividers rotate-90 (CSS border 사용으로 회전 불필요)
Vector 좌표 metadata vs design_context	일치
이미지 overflow	illust_2/3은 부모 size보다 큰 width/height → overflow:hidden + position offset
중복 노드	header_pill (4×), top_arrow (2×) — 정상 재사용

변형 가능 축

• cards[N=4] (required) — cardinality 4 고정
  • card_label (required, 50px Bold white)
  • card_illust (required, 일러스트 이미지)
  • card_body (required, 40px Bold 2줄)
• outer_border_color — #CE4D16 (orange, 정책/문제 톤)
• top_arrow (required for this layout) — 상단 ▼ 모양 강조

Sub-patterns

• cards-4-grid-with-dashed-dividers — 4 카드 + 사이에 점선 vertical divider
• arrow-down-pointer-from-top — 상단 ▼ 화살표 강조
• card-with-illust-center — 카드 = 헤더 pill + 일러스트 (opacity 0.8) + 본문

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

• divider는 SVG 대신 CSS border-left: 2px dashed #CE4D16 사용 (R9 순수 CSS 우선)
• 일러스트 이미지는 도메인-specific PNG (다른 콘텐츠 매칭 시 교체)
• header_pill은 PNG로 유지 (CSS gradient + border-radius로 변환 가능 후보)