# Frame 1171281210 — Process/Product 혁신

## 내용 설명

2가지 혁신 축(과정/결과)을 상단 배너로 선언하고, 하단 2열에서
각각 상세(AS-IS vs TO-BE 대조)를 설명하는 디자인.
Analogue→Digital, 2D도면→3D모델 같은 이중 변환 서사를
좌우 병렬로 드러낸다.
2가지 혁신 축을 상단 선언 후 각각 상세 설명·AS-IS vs TO-BE
구조·이중 Transformation 서사에 적합.
3개 이상 항목 병렬·시간 순서 단계 나열에는 부적합.

## 후보 키워드

과정혁신, 결과혁신, Process, Product, AS-IS, TO-BE, Transformation, Analogue, Digital, 2D, 3D, 2D도면, 3D모델

## 정제 Anchor Sets

- **process_product**: 과정혁신, 결과혁신, Process, Product
- **as_is_to_be**: AS-IS, TO-BE, Transformation, Analogue, Digital
- **dimension_2d_3d**: 2D, 3D, 2D도면, 3D모델

## 구조 매칭 정보

- **family**: compare
- **layout**: banner-top-2col-bottom
- **axis**: horizontal
- **relation_type**: compare
- **cardinality**: ideal 2 / min 2 / max 2
- **slots** (9개, required 9개): title, banner_left, banner_right, col_a_title, col_a_as_is, col_a_to_be, col_b_title, col_b_as_is, col_b_to_be
- **source title**: Process/Product 혁신
- **original layout**: compare-2banner-top-2col-bottom

## 적합/부적합 기준

### suits
- 2가지 혁신 축을 상단 선언 후 각각 상세
- AS-IS vs TO-BE 구조
- 이중 Transformation 서사

### not_suits
- 3개 이상 병렬 항목
- 시간 순서 단계 나열
- 단일 주제 심층 설명
- 주체별 나열

## 재구성 허용

- **split**: False
- **merge**: False
- **infer_missing_slot**: False
- **rewrite_label**: True
- **rewrite_body**: True

## 메타

- schema_version: template-fit-v1 mirror
- source_of_truth: structure_ontology.yaml + keyword_base.yaml
- structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
- keyword_base_sync_at: 2026-04-22
- anchor_sets_cleaned_at: 2026-04-22

---

## 변환 메모 (1:1 HTML, 2026-04-30)

> 실제 변환 시 관찰된 구조 — 위 slot 모델(9-slot AS-IS/TO-BE 쌍)은 **좌 섹션1만** 표현. 컬럼별로 3섹션이 있고 각 섹션의 body 형태가 다르다는 점을 보강 메모.

- **node**: 181:2519 (URL `?node-id=29-373` 의 1171281210 프레임)
- **원본 크기**: 3848 × 1388 px
- **슬라이드 스케일**: `1280 / 3848 = 0.33270` (zoom on `.inner`)
- **결과 슬라이드 차지 면적**: 1280 × 461.78 px (가운데 vertically centered)

### 실제 컬럼 구조 (3-section per column)

```
좌 컬럼 (Process)                     우 컬럼 (Products)
─────────────────────                ─────────────────────
[헤더 배너 (rotate 180°)]              [헤더 배너 (no rotate)]
"과정 (Process)의 혁신"                "결과 (Products)의 혁신"

§1 "Analogue 개념...Transformation"    §1 "Copy & Paste...품질 향상"
   AS-IS (3불릿) | → | TO-BE (3불릿)      body: 2불릿

§2 "위치기반의 3D 모델..."             §2 "Analogue 기반 도서 외..."
   body: 1불릿                            body: 1불릿 + ＊ 각주

§3 "사용자 중심의 Solution(S/W)..."    §3 "Solution을 이용한 업무효율화..."
   body: 3불릿                            body: 2불릿
```

→ 위 slot 모델 9개는 §1 의 AS-IS/TO-BE 쌍 + 두 헤더 + 두 컬럼 타이틀만 다룸. §2 / §3 의 본문은 별도 슬롯 풀에서 채워야 매칭 완료. 9-slot fit 만으로는 underfill.

### 색상 팔레트

| 위치 | 색상 | 비고 |
|------|------|------|
| 좌 컬럼 섹션 타이틀 | `#5C3714` (50px Black) | 갈색 (Analogue 톤) |
| 좌 헤더 텍스트 | `#3E3523` (70px Black, bg-clip-text) | 더 짙은 갈색 + 솔리드 |
| 좌 헤더 배경 | `#A5A196 α0.1 → #39321E` (가로) + rotate 180° | 우→좌로 진해짐 (회전 후 좌→우로 진해짐) |
| 우 컬럼 섹션 타이틀 | `#084C56` (50px Black) | 짙은 청록 (Digital 톤) |
| 우 헤더 텍스트 | `#225F4A` (70px Black, bg-clip-text) | 짙은 그린 |
| 우 헤더 배경 | `#296B55 α0.1 → #032118` (가로, 좌→우) | 좌 끝이 가장 어두움 |
| body 배경 (좌) | white α0.3 → `#39321E` α0.3 (세로, 하→상) | 상단만 933px |
| body 배경 (우) | `#296B55` α0.3 → white α0.3 (세로, 상→하) | 상단만 933px |
| 본문 불릿 텍스트 | `#000000` (40px Bold), leading 70 | list-disc, ms-60 |

### 자산 (4)

| 파일 | 종류 | 의미 | 처리 |
|------|------|------|------|
| `assets/body_bg.svg` | SVG | 본문 영역 배경 (3845×933, 좌/우 path 분리) | SVG 그대로 |
| `assets/header_left_bg.svg` | SVG | 좌측 헤더 둥근 배너 (1921×142, r=71 좌측만) | SVG + rotate(180°) |
| `assets/header_right_bg.svg` | SVG | 우측 헤더 둥근 배너 (1925×142, r=71 좌측만) | SVG 그대로 |
| `assets/arrow.png` | PNG | AS-IS → TO-BE 화살표 (252×90) | PNG 그대로 (R9 예외: 일러스트성 자산) |

### 검증

- **텍스트 전수 대조**: design_context 31개 토막 / index.html 31개 검출 — **100% coverage**
- **렌더 크기**: `_renders/slide.png` 1280×720 (슬라이드), `_renders/block.png` 1280×462 (블록만)
- **scale 검증**: zoom 0.33270 적용 후 블록 높이 = 1388 × 0.33270 = 461.79 → Selenium 측정 461.78 (0.01 오차, 반올림 OK)

### 변형 가능 축 (재사용 시)

- `columns[N=2]` (required, 항상 2개)
  - `header_text` — 컬럼 라벨 (예: "과정의 혁신" / "결과의 혁신")
  - `header_color` — 좌(브라운) / 우(그린) 등 컬럼별 톤
  - `sections[N=3]` — 컬럼 안 3섹션 (각 컬럼)
    - `title` (50px Black, 컬럼 색)
    - `body` — 다음 중 하나:
      - **as-is-to-be-pair**: 좌(N불릿) + 화살표 + 우(N불릿) (좌 §1 한정 패턴)
      - **bullet-list**: 단일 불릿 리스트 (1~5개)
      - **bullet-with-aster**: 본문 + ＊ 각주 단락
- `body_bg_image` (optional) — 좌/우 톤 차이를 표현하는 단일 SVG (둘로 분할). 없을 시 흰 배경
- `arrow_image` (optional) — AS-IS/TO-BE 분할 시에만 사용

### Sub-patterns 발견

- **column-with-mirrored-rounded-banner** — 좌 컬럼 헤더 배너를 180° 회전시켜 둥근 모서리를 컬럼 우측 끝으로 보내고, 우 컬럼은 회전 없이 둥근 모서리를 컬럼 좌측 끝으로. 결과적으로 두 배너의 둥근 모서리가 슬라이드 중앙 분할선 양쪽에 거울처럼 마주봄. (blocks_index.md "디자인 인사이트"에 기록 후보)
- **as-is-to-be-pair** — AS-IS / 화살표 / TO-BE 가로 비교 (섹션 본문 타입 중 하나)
- **aster-footnote-inline** — 본문 끝 ＊ → 다음 줄 ＊ 시작 작은 글씨(25.8px) 주석 (40px 본문에 비해 ~64% 크기)