diff --git a/IMPROVEMENT-PHASE-T.md b/IMPROVEMENT-PHASE-T.md new file mode 100644 index 0000000..c7887e0 --- /dev/null +++ b/IMPROVEMENT-PHASE-T.md @@ -0,0 +1,206 @@ +# 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(텍스트 양이 다른)에서도 위계가 유지되는가?