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

Frame 1171281210 — 실측 기록 (flat)

원본: 3848.00390625 × 1388 px (node 181:2519, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) 패턴: process-products-2col-banner-top (Process/Products 혁신, 좌우 2컬럼 + 상단 헤더 배너) Scale: 1280 / 3848 = 0.33270 → 슬라이드 16:9 안에 1280 × 461.7 px 차지

구조 (bottom-up)

Frame 181:2519 "Frame 1171281210" (3848 × 1388)
└─ Group 181:2223 "Group 1171285823" (0, 0) 3848×1388
   ├─ Group 181:2224 "Group 4697" (0, 0) 3845×933  ← body_bg.svg (단일 SVG로 export)
   │  ├─ vector 181:2225 "Rectangle 42336"  ← 좌측 path: 0~1923, gradient 흰(α0.3)→#39321E(α0.3) 세로
   │  └─ vector 181:2226 "Rectangle 42337"  ← 우측 path: 1921~3845, gradient #296B55(α0.3)→흰(α0.3) 세로
   │
   ├─ TEXT 181:2237 "Analogue 개념 기반 업무의 Digital Transformation"
   │     (82.02, 237) 1250.72×95 — 50px Black #5C3714, leading 95
   ├─ TEXT 181:2229 AS-IS 불릿 (좌하)
   │     (125.01, 340) 539.37×210 — 40px Bold black, list-disc, leading 70, ms-60
   │     • 개념, 도서, 행정 절차 중심
   │     • 2D 도면, 전문가, 규정
   │     • 업무 구분(단절), 책임
   ├─ TEXT 181:2235 TO-BE 불릿 (좌상)
   │     (1075.03, 340) 671.92×210 — 40px Bold black, list-disc
   │     • 시각화된 목적물, 소통, 투명성 중심
   │     • 3D 모델, 참여자, 실체
   │     • 협업(융∙복합), 창의성
   ├─ rounded-rect 181:2240 "image 2645" (763, 400) 252×90  ← arrow.png
   │
   ├─ TEXT 181:2233 "위치기반의 3D 모델을 사용하는 Process 혁신"
   │     (82.02, 600) 991.34×95 — 50px Black #5C3714
   ├─ TEXT 181:2227 (좌 섹션2 본문)
   │     (125.04, 722) 1465.75×140 — 40px Bold black, list-disc
   │     • 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신
   │
   ├─ TEXT 181:2234 "사용자 중심의 Solution(S/W) 제공"
   │     (82.02, 916) 991.34×95 — 50px Black #5C3714
   ├─ TEXT 181:2228 (좌 섹션3 본문)
   │     (125, 1038) 1465.77×350 — 40px Bold black, list-disc
   │     • 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌\n속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수
   │     • 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W 로 기술 축적
   │     • 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을\n연계가 가능하도록 설계, 시공 Solution 제공
   │
   ├─ TEXT 181:2236 "Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상"
   │     (2135, 237) 1324.07×95 — 50px Black #084C56
   ├─ TEXT 181:2230 (우 섹션1 본문)
   │     (2178.04, 351) 1465.75×140 — 40px Bold black, list-disc
   │     • 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
   │     • 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물
   │
   ├─ TEXT 181:2239 "Analogue 기반 도서 외 Digital 기반 정보물 추가"
   │     (2135, 538) 1430.15×95 — 50px Black #084C56
   ├─ TEXT 181:2232 (우 섹션2 본문, ＊ 주석 포함)
   │     (2178.01, 652) 1471.15×210 — 40px Bold black + 25.8px ＊
   │     • 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물＊에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가
   │       ＊ 정확한 숫자 확인 및 진행과정의 확인 등을 위해 성과물은 지속적으로 존속
   │
   ├─ TEXT 181:2238 "Solution을 이용한 업무효율화(사용자 편의, 협업 및 의사소통 강화 등)"
   │     (2135, 916) 1324.07 — 50px main + 40px sub-paren, Black #084C56
   ├─ TEXT 181:2231 (우 섹션3 본문)
   │     (2178.01, 1030) 1555.87×280 — 40px Bold black, list-disc
   │     • 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야야만 함
   │     • Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리
   │
   ├─ Group 181:2241 "Group 1171276616" (0, 62) 1921×142  ← 좌측 헤더 (rotate 180°)
   │  ├─ vector 181:2242 "Rectangle 42421"  ← header_left_bg.svg (둥근 좌측 r=71)
   │  └─ TEXT 181:2243 "과정 (Process)의 혁신"
   │        center=(1342.45, 133.5) → top-left=(803.99, 62) 1076.90×143
   │        — 70px Black, tracking 3.5px, bg-clip-text gradient
   │        layer1: linear-gradient(90deg, #3E3523 0%, #3E3523 100%) — 솔리드 브라운
   │        layer2: linear-gradient(180deg, #296B55 0%, #123328 100%) — 가려짐 (1번이 솔리드)
   │        text-shadow: 0 0 4px #322C1E
   │
   └─ Group 181:2244 "Group 1171276617" (1923, 62) 1925×142  ← 우측 헤더 (rotation 없음)
      ├─ vector 181:2245 "Rectangle 42422"  ← header_right_bg.svg (둥근 좌측 r=71)
      └─ TEXT 181:2246 "결과 (Products)의 혁신"
            (2135, 75) 1114.41×116 — 70px Black, tracking 3.5px
            layer1: linear-gradient(90deg, #225F4A 0%, #225F4A 100%) — 솔리드 그린
            text-shadow: 0 0 4px #322C1E

에셋

파일	의미	크기	위치	처리
(Figma SVG: body_bg)	본문 영역 배경 (좌: #39321E α0.3 → 흰 α0.3 세로, 우: #296B55 α0.3 → 흰 α0.3 세로)	3845×933	(0, 0)	CSS linear-gradient 2 개 (단순 단방향 그라디언트, 슬라이드 픽셀 의존 없음 — R8)
(Figma SVG: header_left_bg)	좌측 헤더 배경 (둥근 좌측 r=71, gradient #A5A196 α0.1 → #39321E α1)	1921×142	(0, 62) rotate(180°)	CSS border-radius 0 71 71 0 + linear-gradient(to right, rgba(136,131,118,.343) 0%, #39321E 73.1% 100%) — 회전 외관 그대로
(Figma SVG: header_right_bg)	우측 헤더 배경 (둥근 좌측 r=71, gradient #296B55 α0.1 → #032118 α1)	1925×142	(1923, 62)	CSS border-radius 71 0 0 71 + linear-gradient(to right, #032118 0%, rgba(41,107,85,.1) 100%)
assets/arrow.png	AS-IS → TO-BE 화살표 (gradient bar + arrow head 합성)	252×90	(763, 400)	PNG 유지 (R9 예외 — 단순 그라디언트가 아닌 일러스트성 자산)

그라디언트 수학 (post-rotation 외관 도출)

Left header — 원본 grad 라인 x1=2437.15 (α0.1 light) → x2=516.146 (#39321E α1). 좌측 viewBox 0..1921 안 매개변수: 우단 t = (2437.15 - 1921) / (2437.15 - 516.146) = 0.269, 좌단 t = 1.269 (clamp 되어 stop1). 우단 색 = (1 - 0.269) · stop1 + 0.269 · stop0 = rgba(136, 131, 118, 0.343). rotate(180°) 적용 후 좌단 ↔ 우단 거울 → CSS 는 좌→우 방향, 0% rgba(136,131,118,.343), 73.1% #39321E (= 1 - 0.269 = 0.731), 100% #39321E.

Right header — 원본 grad x1=1925 → x2=0, 회전 없음. 그대로 CSS 좌→우: 0% #032118 (#032118 α1.0), 100% rgba(41, 107, 85, 0.1).

Body bg — α 0.3 세로 2 개. paint0 (y1=932 white → y2=0 #39321E) → 좌측 박스: linear-gradient(to bottom, rgba(57,50,30,.3) 0%, rgba(255,255,255,.3) 100%). paint1 (y1=0 #296B55 → y2=933 white) → 우측 박스: linear-gradient(to bottom, rgba(41,107,85,.3) 0%, rgba(255,255,255,.3) 100%).

이상 탐지 결과

검사	결과
회전 단일문자 (bbox 가로 > 세로 × 1.5)	없음
좁은 박스 세로 텍스트 (width < fontSize × 0.8)	없음
중복 노드 (동일 좌표 + 동일 내용)	없음
Vector 좌표 metadata vs design_context 불일치	metadata에서 Group 4697 내부 vector(181:2225, 181:2226) 좌표가 부모 기준으로 비정상값(절반 위치). design_context의 통합 image 표시(왼=0, 위=0, 3845×933)를 신뢰.
회전 적용 (bbox vs render 차이)	좌측 헤더 (Group 1171276616)에 rotate(180°) 적용 — design_context flex+rotate-180 wrapper 확인. 우측 헤더는 회전 없음.
body_bg vs frame 높이 불일치	body_bg 높이 933 < frame 1388. 하단 455px(섹션 3 영역)는 body_bg 없이 슬라이드 흰 배경 노출 → 디자인 의도 (하단으로 갈수록 흰색 페이드)

변형 가능 축

• columns[N=2] (required) — 좌(Process)/우(Products), 항상 2개
  • header_text (required) — "과정 ~의 혁신" / "결과 ~의 혁신"
  • header_color_palette — 좌(브라운 #3E3523 / bg #A5A196→#39321E), 우(그린 #225F4A / bg #296B55→#032118)
  • sections[N=3] (required) — 항상 3개 섹션 (각 컬럼)
    • title (required) — 50px Black, 색상은 컬럼별
    • body — 본문. 다음 중 하나:
      • 좌 섹션1 한정: AS-IS / TO-BE 좌우 비교 (각 3 불릿) + 가운데 화살표
      • 일반: 단일 불릿 리스트 (1~5개 항목)
• body_bg_image (optional) — 좌/우 톤 차이를 표현하는 원판 SVG. 없을 시 단순 흰 배경
• arrow_image (optional) — AS-IS/TO-BE 분할 시에만 등장
• aster_footnote (optional) — ＊ 표시 + 25.8px 작은 본문

Sub-patterns

• column-with-header-banner — 컬럼 상단에 둥근 헤더 배너(라운드 좌측만 71, gradient 배경, bg-clip-text 텍스트)
  • 좌측 컬럼: 배너 회전 180° (rounded 우측이 컬럼 우단으로 향함)
  • 우측 컬럼: 회전 없음 (rounded 좌측이 컬럼 좌단으로 향함)
  • 결과: 두 배너의 둥근 모서리가 가운데 분할선 양쪽에 배치되는 미러 디자인
• as-is-to-be-pair (좌 섹션1) — 좌(AS-IS) / 화살표 / 우(TO-BE) 가로 비교
• aster-footnote-inline (우 섹션2) — 본문 끝 ＊ → 다음 줄 ＊로 시작하는 작은 글씨 주석