190 lines
6.4 KiB
Markdown
190 lines
6.4 KiB
Markdown
# Phase X: 템플릿 기반 동적 레이아웃
|
|
|
|
> 작성일: 2026-04-06
|
|
> 상태: 계획 수립
|
|
|
|
---
|
|
|
|
## 배경
|
|
|
|
현재 파이프라인은 모든 MDX를 "배경/본심/첨부/결론" 4칸에 억지로 끼워넣는다.
|
|
배경이 없는 콘텐츠도 배경을 만들어내고, 3분할이 적절한 콘텐츠도 2분할로 넣는다.
|
|
Kei가 내용을 잘못 파악한 게 아니라, **"4칸을 채워라"는 지시가 잘못**된 것이다.
|
|
|
|
## 핵심 아이디어
|
|
|
|
**미리 정의된 레이아웃 템플릿 중 Kei가 콘텐츠에 맞는 것을 선택한다.**
|
|
|
|
- Kei가 자유롭게 구조를 만드는 것이 아님 (불안정)
|
|
- 옵션을 주고 고르게 함 (안정적)
|
|
- 하드코딩 아님 — 어떤 MDX가 와도 적절한 템플릿이 선택됨
|
|
|
|
## 고정 영역
|
|
|
|
모든 템플릿 공통:
|
|
- **상단**: 슬라이드 제목 헤더 (항상 존재)
|
|
- **하단**: 결론 footer (항상 존재)
|
|
- **중간**: 템플릿에 따라 달라지는 영역
|
|
|
|
## 중간 영역 템플릿 옵션
|
|
|
|
### A. body + sidebar
|
|
```
|
|
┌──────────┬─────┐
|
|
│ 본심1 │참조 │
|
|
│ 본심2 │ │
|
|
└──────────┴─────┘
|
|
```
|
|
적합: 참조자료(용어 정의 등)가 별도로 있는 콘텐츠
|
|
예시: 01번 MDX (DX/BIM 용어 정립)
|
|
|
|
### B. 상단 wide + 하단 2분할
|
|
```
|
|
┌─────────────────┐
|
|
│ 강조/핵심 │
|
|
├────────┬────────┤
|
|
│ 항목1 │ 항목2 │
|
|
└────────┴────────┘
|
|
```
|
|
적합: 핵심 1개 + 두 가지 측면 비교/설명
|
|
예시: 03번 MDX (필수요건 + 과정혁신/결과변화)
|
|
|
|
### C. 상단 wide + 하단 3분할
|
|
```
|
|
┌─────────────────┐
|
|
│ 강조/핵심 │
|
|
├─────┬─────┬─────┤
|
|
│항목1│항목2│항목3 │
|
|
└─────┴─────┴─────┘
|
|
```
|
|
적합: 핵심 1개 + 세 가지 항목 병렬
|
|
예시: 02번 MDX (궁극적 목표 + 발주처/설계사/시공사)
|
|
|
|
### D. 2분할 (좌우 대등)
|
|
```
|
|
┌────────┬────────┐
|
|
│ 항목1 │ 항목2 │
|
|
│ │ │
|
|
└────────┴────────┘
|
|
```
|
|
적합: 두 가지 비교/대비
|
|
|
|
### E. 단일 전체
|
|
```
|
|
┌─────────────────┐
|
|
│ │
|
|
│ 본심 (전체) │
|
|
│ │
|
|
└─────────────────┘
|
|
```
|
|
적합: 하나의 흐름, 분할 불필요
|
|
|
|
### F. 상단 wide + 하단 2분할 + 보조 sidebar
|
|
```
|
|
┌─────────────┬───┐
|
|
│ 강조/핵심 │참조│
|
|
├──────┬──────┤ │
|
|
│항목1 │항목2 │ │
|
|
└──────┴──────┴───┘
|
|
```
|
|
적합: B + sidebar 조합
|
|
|
|
---
|
|
|
|
## 프로세스
|
|
|
|
```
|
|
1. Kei가 MDX 원본을 읽고 내용 분석
|
|
→ 핵심 메시지, 콘텐츠 구조 파악
|
|
|
|
2. Kei가 꼭지를 나눔 (개수와 역할명 자유)
|
|
→ "핵심목표 1개, 주체별 기대효과 3개, 결론 1개"
|
|
→ 역할명: 고정 4칸 아님. 콘텐츠에 맞는 이름 사용
|
|
|
|
3. Kei가 템플릿 선택
|
|
→ "꼭지 구조를 보니 C템플릿이 맞다"
|
|
→ 옵션 A~F 중 하나
|
|
|
|
4. Kei가 각 영역에 꼭지 배정 + weight
|
|
→ 상단: 핵심목표(0.3)
|
|
→ 하단좌: 발주처(0.2), 하단중: 설계사(0.2), 하단우: 시공사(0.2)
|
|
→ footer: 결론(0.1)
|
|
|
|
5. 파이프라인이 템플릿대로 컨테이너 생성 → BEFORE
|
|
|
|
6. 콘텐츠 채움 → 측정 → 재배분 → FILLED → AFTER
|
|
|
|
7. 조립 → code_assembled / final
|
|
```
|
|
|
|
---
|
|
|
|
## 작업 리스트
|
|
|
|
### X-1: 템플릿 정의
|
|
- 옵션 A~F의 구체적 컨테이너 구조 정의
|
|
- 각 옵션의 zone 이름, 비율 계산 공식, 좌표 계산 로직
|
|
- `src/design_director.py`에 `LAYOUT_TEMPLATES` 정의
|
|
- 하드코딩 아님: 템플릿은 구조만 정의, 크기는 weight와 슬라이드 크기에서 동적 계산
|
|
|
|
### X-2: Kei 프롬프트 수정
|
|
- `KEI_PROMPT`에 템플릿 A~F 옵션 제시
|
|
- Kei가 콘텐츠를 보고 `layout: "C"` 선택
|
|
- page_structure의 역할명이 자유 (배경/본심 고정 아님)
|
|
- 각 역할에 zone 배정 (상단/하단좌/하단우 등)
|
|
- 하드코딩 아님: Kei가 콘텐츠마다 다른 선택을 함
|
|
|
|
### X-3: space_allocator 템플릿 기반 컨테이너 생성
|
|
- 선택된 템플릿에 따라 컨테이너 좌표/크기 생성
|
|
- weight 비율로 각 영역 크기 결정
|
|
- `select_preset()` → `build_layout_from_template()`
|
|
- 하드코딩 아님: 템플릿 구조 + weight + 슬라이드 크기로 동적 계산
|
|
|
|
### X-4: block_assembler / assemble_stage2 동적 역할
|
|
- `["배경", "본심", "첨부", "결론"]` 고정 루프 → `page_structure.keys()` 동적 루프
|
|
- 좌표 계산은 X-3에서 생성한 컨테이너 정보 사용
|
|
- 색상/폰트: 역할 수에 맞게 동적 배분
|
|
- 하드코딩 아님: 역할 수가 3개든 5개든 동작
|
|
|
|
### X-5: 나머지 파일 동적화
|
|
- step_visualizer: before/after 시각화에서 동적 역할 루프
|
|
- fit_verifier: 4역할 고정 → 동적 역할
|
|
- html_generator: Sonnet에게 동적 영역 수만큼 생성 요청
|
|
- renderer: 동적 grid-template 생성
|
|
- 하드코딩 아님: 모두 ctx.containers.keys() 기반
|
|
|
|
### X-6: 검증
|
|
- 01번 MDX → A템플릿 → 기존과 동일하거나 더 나은 결과
|
|
- 02번 MDX → C템플릿 → 상단 강조 + 하단 3분할
|
|
- 03번 MDX → B템플릿 → 상단 요건 + 하단 2분할
|
|
- 텍스트가 컨테이너 안에 있음
|
|
- 공란 최소
|
|
- 01번이 깨지면 롤백
|
|
|
|
---
|
|
|
|
## 주의사항
|
|
|
|
- 하드코딩 절대 금지: 특정 MDX에만 동작하는 코드 없음
|
|
- 01번 보호: Phase X 전에 git commit 완료 (1f7579c). 깨지면 롤백
|
|
- 점진적 진행: X-1 → X-2 후 Kei 응답 확인 → X-3~X-5 순차 진행
|
|
- 각 단계마다 검증
|
|
|
|
---
|
|
|
|
## 관련 코드 (고정 역할 참조 현황)
|
|
|
|
| 파일 | 참조 수 | 수정 범위 |
|
|
|------|---------|----------|
|
|
| src/html_generator.py | 54건 | X-5 |
|
|
| src/step_visualizer.py | 32건 | X-5 |
|
|
| src/space_allocator.py | 26건 | X-3 |
|
|
| scripts/assemble_stage2.py | 26건 | X-4 |
|
|
| src/kei_client.py | 18건 | X-2 |
|
|
| src/block_assembler.py | 17건 | X-4 |
|
|
| src/fit_verifier.py | 16건 | X-5 |
|
|
| src/pipeline.py | 15건 | X-3~X-5 |
|
|
| src/renderer.py | 7건 | X-5 |
|
|
| src/pipeline_context.py | 4건 | 필요 시 |
|
|
| **합계** | **215건** | |
|