# Phase T: 폰트 위계 + 동적 컨테이너 계산

> 작성일: 2026-03-31
> 상태: 설계
> 근거: Phase S 결과물에서 폰트 크기가 중요도와 역전 — 첨부(14px) > 배경(9px). 컨테이너 비율이 폰트 위계를 따라가야 함.
> 선행: Phase S (Claude HTML 직접 생성 + 독립 검증 시스템)

---

## 1. 문제

### 현재 상태
| 영역 | 중요도 | 있어야 할 크기 | 현재 실제 크기 |
|------|--------|-------------|-------------|
| 핵심 (key-msg) | 1위 | 가장 큼 | 11px (가장 작음) |
| 본문 (core) | 2위 | 큼 | 12px |
| 배경 (bg) | 3위 | 보통 | 9-11px |
| 첨부 (sidebar) | 4위 | 가장 작음 | 14px (가장 큼) |

**폰트 크기가 중요도와 완전히 역전되어 있다.**

### 원인
각 프롬프트를 독립적으로 설계하면서 "이 영역 안에서 맞추기"만 했고, 슬라이드 전체에서의 시각적 위계를 고려하지 않음. 컨테이너 크기를 먼저 정하고 폰트를 끼워 맞추니 중요도가 뒤집힘.

### 근본 원칙
**폰트(위계)가 먼저고, 컨테이너(공간)가 따라가야 한다.**

---

## 2. 폰트 위계 (확정)

| 영역 | 중요도 | 폰트 크기 | 비고 |
|------|--------|----------|------|
| 핵심 (key-msg) | 1위 | **14px** bold | 무조건 한 줄, 하나의 메시지 |
| 본문 (core) | 2위 | **12px** | 본문 텍스트 기본 |
| 배경 (bg) | 3위 | **10-12px** | 텍스트 양에 따라 조정 |
| 첨부 (sidebar) | 4위 | **9-11px** | 참고 자료, 가장 작아도 됨 |

---

## 3. 계산 순서

```
[Phase 1] 텍스트 분석
    각 영역별 글자 수 측정
    ↓
[Phase 2] 폰트 위계로 필요 공간 계산
    "이 폰트 크기로 이 텍스트를 넣으려면 몇 px 필요한가?"
    ↓
[Phase 3] 컨테이너 비율 역산
    필요 공간에 맞춰 body:sidebar 비율 조정
    ↓
[Phase 4] 폰트 미세 조정
    컨테이너 확정 후, 위계 범위 내에서 최적 폰트 결정
    ↓
[Phase 5] 레이아웃 결정
    폰트 최소값으로도 안 되면 구조 변경 (2단 등)
    ↓
[Phase 6] 프롬프트에 확정된 수치 전달
    "10px, 22줄, overflow:hidden" — Claude에게 정확한 제약 조건
```

---

## 4. 수학적 기초

### 기본 상수 (Pretendard 한글 실측)
```
글자폭 비율: font_size × 0.947 (fonttools 실측)
줄 높이 비율: font_size × 1.5 (본문 기준, 영역마다 조정 가능)
```

### 수용량 계산 공식
```
줄당 글자 수 = (가용 너비 - 들여쓰기) ÷ (font_size × 0.947)
줄 수 = (가용 높이 - padding - 헤더) ÷ (font_size × 줄높이비율)
총 수용량 = 줄당 글자 수 × 줄 수
```

### 가용 공간 계산
```
슬라이드: 1280 × 720px
padding: 40px × 2 = 80px (상하좌우)
grid gap: 20px × 2 = 40px (행/열 간격)
header: ~66px (2rem × 1.7 + padding + border)

내부 영역: (1280 - 80) × (720 - 80) = 1200 × 640px
body+sidebar 행 높이: 640 - 66(header) - 60(footer) - 40(gaps) = 474px

body 열 너비: 1200 × body_ratio - 20(gap)
sidebar 열 너비: 1200 × sidebar_ratio
```

### 예시 계산: sidebar (현재 35%, 420px)

```
텍스트: 용어 3개, 총 ~400자
폰트: 10px
줄 높이: 10 × 1.5 = 15px
카드 chrome: 3 × (title 20px + padding 28px + margin 10px) = 174px
header: 30px, outer padding: 40px
가용 높이: 474 - 40 - 30 - 174 = 230px
가용 줄 수: 230 ÷ 15 = 15줄 (카드당 5줄)
줄당 글자: (420 - 40 - 28 - 14) ÷ 9.47 ≈ 35자
총 수용: 15 × 35 = 525자 > 400자 → OK

만약 용어 6개, 총 ~800자라면?
카드 chrome: 6 × 58 = 348px → 가용 높이 = 474 - 40 - 30 - 348 = 56px
줄 수 = 56 ÷ 15 = 3줄 → 3 × 35 = 105자 ≪ 800자 → FAIL
→ 9px로 축소해도 불가 → 2단 레이아웃 또는 body:sidebar 비율 변경 필요
```

---

## 5. 동적 계산이 어려운 이유

```
텍스트 양 → 폰트 크기 → 줄 수 → 레이아웃 → 컨테이너 크기
    ↑                                              ↓
    └──────────── 서로 영향을 줌 ────────────────────┘
```

- 텍스트가 많으면 폰트를 줄여야 함
- 폰트를 줄이면 줄 수가 늘어남
- 줄 수가 늘어나면 높이가 부족할 수 있음
- 높이가 부족하면 레이아웃을 바꿔야 함 (1단 → 2단)
- 레이아웃을 바꾸면 너비가 줄어서 줄당 글자 수가 줄어듦
- 줄당 글자 수가 줄면 다시 줄 수가 늘어남...

### 해결: 보수적 추정 + 검증 1회 (하이브리드)

100% 정확한 사전 계산 대신:
1. **보수적으로 계산** (실제보다 10-15% 작게 추정)
2. **위계 범위 내에서 폰트 결정** (간단한 단계적 판단)
3. **Claude에게 정확한 수치 전달**
4. **content_verifier + Selenium으로 1회 검증** (이미 구현됨)
5. **실패 시 1단계 축소 후 재생성** (이미 구현됨)

---

## 6. 컨테이너 비율 조정

### 현재
```
grid-template-columns: 65fr 35fr  (body 65% : sidebar 35%)
```

### 제안: 텍스트 양에 따라 동적 조정
```
sidebar 텍스트가 적으면 → 70:30 또는 72:28
sidebar 텍스트가 보통이면 → 68:32
sidebar 텍스트가 많으면 → 65:35 (현재 유지)
```

판단 기준:
```
sidebar 글자 수 ÷ sidebar 수용량(최소 폰트 기준) = 충전율
충전율 < 50% → 비율 축소 가능 (28-30%)
충전율 50-80% → 현재 유지 (32-35%)
충전율 > 80% → 비율 확대 또는 레이아웃 변경
```

---

## 7. 정렬 규칙

- "용어 정의" 라벨: 카드 좌측 시작점에 맞춰 정렬 (중앙 정렬 아님)
- 각 영역의 텍스트 시작점이 수직으로 정렬되어야 함

---

## 8. 구현 대상

### 신규 함수 (위치: src/space_allocator.py 또는 신규 모듈)
```python
def analyze_text_volume(content: str, analysis: dict) -> dict[str, int]:
    """각 영역별 글자 수 측정"""

def calculate_font_sizes(text_volumes: dict, container_specs: dict) -> dict[str, float]:
    """위계 범위 내에서 최적 폰트 크기 결정"""

def calculate_container_ratios(text_volumes: dict, font_sizes: dict) -> dict:
    """필요 공간에 맞춰 body:sidebar 비율 역산"""

def calculate_text_capacity(width_px: int, height_px: int, font_size: float, ...) -> int:
    """주어진 컨테이너에서 수용 가능한 글자 수"""
```

### 수정 대상
- **html_generator.py**: 프롬프트에 동적 폰트 크기 전달 ({font_size} 변수 추가)
- **space_allocator.py**: 컨테이너 비율 동적 조정
- **content_verifier.py**: 폰트 크기 균형 검증 추가 (L3 확장)

---

## 9. 자기 검증 체크리스트

- [ ] 핵심 메시지(key-msg)가 14px로 가장 큰가?
- [ ] 본문(core)이 12px인가?
- [ ] 배경(bg)이 10-12px 범위인가?
- [ ] 첨부(sidebar)가 9-11px으로 가장 작은가?
- [ ] 폰트 크기가 중요도 순서와 일치하는가? (핵심 > 본문 > 배경 > 첨부)
- [ ] 컨테이너 비율이 텍스트 양에 맞게 조정되었는가?
- [ ] "용어 정의" 라벨이 카드 좌측에 정렬되었는가?
- [ ] 모든 영역에서 텍스트가 잘리지 않는가?
- [ ] 다른 MDX(텍스트 양이 다른)에서도 위계가 유지되는가?