# C.E.L. Slide Pipeline

MDX 기반 콘텐츠를 분석하여 1280×720 슬라이드 HTML로 자동 변환하는 파이프라인입니다.

## 한 줄 요약

**텍스트 콘텐츠를 넣으면, 코드가 구조를 분석하고 디자인을 입혀서 슬라이드로 만들어줍니다.**

---

## 현재 프로세스 (AS-IS)

```
1. MDX 입력
   - MDX 파일 읽기
   - 정규화 (제목/본문/이미지/표/핵심요약 분리)

2. 꼭지 추출 (AI)
   - 중목차별 핵심 주제 파악
   - 각 꼭지의 성격 분류

3. zone 구분 (코드)
   - 중목차(##) 기준으로 영역 분할 (top/bottom)
   - 콘텐츠 양 기준으로 비중(weight) 산출

4. BEPs 디자인 매칭 (코드)
   - catalog에서 tag/schema 기준으로 블록 검색
   - 매칭되면 → 해당 블록에 콘텐츠 삽입
   - 미매칭이면 → 기존 스타일 따라 코드가 고정 렌더 (1회)

5. 조립 (코드)
   - slide-base(1280×720)에 zone별 배치
   - 상세 내용은 첨부 파일로 분리

6. 검증
   - overflow 측정 (Selenium)
   - 구조 검증 (본문 visible, 링크 수)

7. 출력
   - final.html + 첨부 HTML
```

### 현재 수준

| 대상 | 상태 |
|------|------|
| MDX 03 (3개 목표 + 비교표) | ✅ 정상 동작 |
| MDX 02 (목표 + 프로세스 + 상세표) | △ 구조 동작, 시각 품질 보정 중 |

---

## 개선 프로세스 (TO-BE)

```
1. MDX 입력
   - MDX 파일 읽기
   - 정규화 (제목/본문/이미지/표/핵심요약 분리)

2. zone 구분 (코드)
   - 중목차(##) 기준으로 영역 분할

3. BEPs 디자인 매칭 검토
   3-1. 매칭 시
        - 해당 디자인 선택
        - zone 크기에 맞게 재구성
   3-2. 미매칭 시
        - 중목차에 대한 꼭지 정리 (AI)
        - 꼭지별 유사 디자인 선택
        - 해당 중목차/소목차에 맞게 redesign
        - 입력 → 조정 반복 (빈 공간/overflow 자동 조절)

4. 검증
   - overflow / 빈 공간 측정
   - 시각 품질 검증 (정렬, 위계, 가독성)

5. 출력
   - final.html + 첨부 HTML
```

### AS-IS → TO-BE 핵심 차이

| 항목 | AS-IS | TO-BE |
|------|-------|-------|
| 꼭지 추출 시점 | zone 구분 전에 항상 실행 | 미매칭 시에만 (3-2) |
| 디자인 미매칭 | 코드 고정 렌더 1회 | redesign + 반복 조정 |
| 빈 공간 처리 | 그냥 둠 | 자동 재분배 |
| 검증 | overflow만 | 시각 품질까지 |

---

## 핵심 원칙

| 원칙 | 설명 |
|------|------|
| **콘텐츠가 기준** | 디자인이 콘텐츠에 맞춤 (콘텐츠를 디자인에 맞추지 않음) |
| **코드가 판단** | AI는 꼭지 추출만, 레이아웃/디자인 선택은 규칙 기반 |
| **기존 디자인 재활용** | Figma에서 추출한 BEPs 블록을 우선 활용, 없으면 같은 스타일로 생성 |
| **넘치면 분리** | 슬라이드에 안 들어가는 상세 내용은 첨부로 분리 (자세히보기) |
| **통일이 아닌 다양성** | 같은 구조라도 콘텐츠에 따라 다른 표현 가능 (recipe = 표현 범주) |

---

## 프로젝트 구조

### 파이프라인 핵심

| 파일 | 역할 |
|------|------|
| `src/pipeline.py` | 전체 파이프라인 오케스트레이션 |
| `src/section_parser.py` | 중목차 추출, schema 분류, subsection typing |
| `src/block_reference.py` | BEPs 디자인 매칭 (catalog 검색) |
| `src/block_assembler.py` | 슬라이드 HTML 조립, recipe executor, direct render |
| `src/space_allocator.py` | zone 크기/비율 계산 |
| `src/pipeline_context.py` | 파이프라인 데이터 모델 (PopupItem 등) |

### 템플릿 / 카탈로그

| 파일 | 역할 |
|------|------|
| `templates/catalog.yaml` | BEPs 블록 목록 (when/slots/template) |
| `templates/blocks/slide-base.html` | 슬라이드 기본 틀 (1280×720) |
| `templates/blocks/new/` | Figma 추출 블록 (prerequisites-3col 등) |
| `templates/blocks/redesign/` | 재디자인 블록 (process-product-2col 등) |

### 검증

| 파일 | 역할 |
|------|------|
| `src/slide_measurer.py` | Selenium overflow 측정 |
| `src/step_visualizer.py` | 단계별 디버그 보드 생성 |
| `src/validators.py` | 구조 검증 |

### 산출물

각 실행은 `data/runs/{run_id}/` 아래에 저장됩니다.

| 파일 | 내용 |
|------|------|
| `final.html` | 최종 슬라이드 |
| `final_context.json` | 전체 파이프라인 결과 데이터 |
| `steps/*.html` | 단계별 디버그 보드 |
| `첨부*_상세*.html` | popup 상세 내용 |

---

## 향후 개선 방향

1. **3-2 입력→조정 반복 구현** — redesign 후 빈 공간/overflow 자동 재분배
2. **검증 강화** — overflow뿐 아니라 정렬, 위계, 가독성까지 시각 품질 검증
3. **BEPs 매칭 범위 확대** — 더 많은 Figma 블록 추출 및 catalog 등록
4. **다양한 MDX 확장** — MDX 02, 03 이후 추가 문서 유형 검증