Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정

포함 내용:
- Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md)
- 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py)
- 블록 템플릿 추가 (cards, emphasis 변형)
- 코드 수정: block_search, content_editor, design_director, slide_measurer
- catalog.yaml 블록 목록 업데이트
- CLAUDE.md, PROGRESS.md, README.md 업데이트

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -12,27 +12,38 @@
 
 ---
 
-## 아키텍처 (5단계 파이프라인)
+## 아키텍처 (Phase Q 파이프라인)
+
+> Phase P(다후보 렌더링 비교) 실행 결과 20/100점. 업계 조사(Beautiful.ai, Napkin.ai, VASCAR 등) 기반으로 Phase Q에서 재설계.
+> 핵심 전환: "계산 먼저, AI 판단 나중에, 렌더링은 검증만"
 
 ```
-[1단계] Kei 실장 (Sonnet) — AI 사고
-    꼭지 추출 → 정보 구조 파악 → 레이어/강조/배치/role 판단
+[1단계] Kei 실장 (Opus) — AI 사고
+    꼭지 추출 → 정보 구조 파악 → 비중(page_structure) → relation_type
     ↓
-[2단계] 디자인 팀장 — 2-Step
-    Step A: 레이아웃 프리셋 선택 (규칙 기반, LLM 불필요)
-      - 실장의 role 분석을 보고 프리셋 자동 결정
-    Step B: 프리셋 안에서 블록 매핑 + 글자 수 가이드 (Sonnet)
-      - 선택된 프리셋의 CSS가 프롬프트에 포함됨
-      - flow → body/main, reference → sidebar
+[1.5단계] Kei 실장 (Opus) — 컨셉 구체화
+    relation_type, expression_hint, source_data
     ↓
-[3단계] Kei 텍스트 편집자 (Sonnet) — AI 사고
-    글자 수 가이드 참고하되 내용 의미 우선. 도메인 용어 보존하며 편집
+[컨테이너 계산] 코드 — 결정론적
+    Kei 비중 → 역할별 컨테이너 px 확정
     ↓
-[4단계] 디자인 실무자 (Sonnet + Jinja2 + CSS) — AI + 코드
-    편집자가 정리한 텍스트에 맞게 디자인 조정 + HTML 조립
+[2단계] 블록 선택 (Phase Q) — 코드(결정론적) + Kei 1회
+    ① relation_type → 블록 카테고리 매핑 (코드, Napkin.ai 방식)
+    ② 컨테이너 제약 필터링: min_height_px, height_cost, sidebar 제한 (코드)
+    ③ catalog 존재 검증: 유령 블록 차단 (코드)
+    ④ 글자수 예산 계산: 컨테이너 px → 최대 글자수/항목수 (코드)
+    ⑤ Kei에게 필터된 2-3개 후보 제시 → 1개 선택 (AI 1회)
     ↓
-[5단계] 디자인 팀장 (Sonnet) — AI 사고
-    전체 균형 재검토 → 공간 재배분 → 2차 조정 지시
+[3단계] Kei 편집자 (Opus) — AI 사고
+    글자수 예산 = 하드 제약. 예산 안에서 의미 우선 편집. 원본 보존.
+    ↓
+[4단계] 디자인 실무자 (Sonnet + Jinja2) — CSS 조정 + HTML 조립
+    ↓
+[검증] Selenium 1회 렌더링 — overflow 확인 (코드)
+    overflow 시: ① 간격 축소(LaTeX 글루) ② 폰트 축소(이진탐색) ③ 텍스트 압축(AI 1회)
+    ↓
+[품질 게이트] Opus 멀티모달 (VASCAR식)
+    스크린샷 기반 시각 품질 평가 → 미달 시 교정 또는 출력 차단
 ```
 
 ### 레이아웃 프리셋 (2단계 Step A)
@@ -54,15 +65,26 @@ reference 꼭지 있음 → sidebar-right
 나머지 → single-column
 ```
 
-### 역할 분리
+### 역할 분리 (Phase R')
 
 | 역할 | 담당 | 방식 | 하는 일 | 하지 않는 일 |
 |------|------|------|---------|------------|
-| Kei 실장 | Sonnet | AI | 꼭지 추출, 정보 구조 파악, 레이어/강조/배치/role 판단 | 디자인, 텍스트 편집 |
-| 디자인 팀장 Step A | 코드 | 규칙 | 실장의 role에 따라 레이아웃 프리셋 자동 선택 | AI 판단 불필요 |
-| 디자인 팀장 Step B | Sonnet | AI | 프리셋 안에서 블록 매핑, 글자 수 가이드, zone 배정 | 레이아웃 구조 결정 (이미 정해짐) |
-| 텍스트 편집자 | Sonnet | AI | 도메인 용어 보존하며 편집, 출처 보존, 표 편집 | 레이아웃 결정 |
-| 디자인 실무자 | Sonnet + 코드 | AI + 코드 | 텍스트에 맞게 디자인 조정, HTML/CSS 조립 | 콘텐츠 의미 판단 |
+| Kei 실장 | Opus (Kei API) | AI | 꼭지 추출, 비중 판단, relation_type + expression_hint 부여, 최종 검수 | HTML 생성, 레이아웃 계산 |
+| 컨테이너 계산 | 코드 | 결정론적 | Kei 비중 → 역할별 컨테이너 px 확정 | AI 판단 불필요 |
+| 프리셋 선택 | 코드 | 규칙 | 실장의 role에 따라 프리셋 자동 선택 | AI 판단 불필요 |
+| **HTML 생성** | **AI (Kei API)** | **AI** | **콘텐츠 전달 의도에 맞는 HTML 구조를 직접 생성. 블록 CSS를 참고하되 구조는 AI가 결정.** | 블록 "선택" 안 함. 슬롯 "채우기" 안 함. |
+| 검증 | 코드 + AI | Selenium + 비전 모델 | overflow 측정, 시각 품질 평가 | |
+
+### HTML 생성 원칙 (Phase R')
+
+```
+블록이 구조를 결정 (P=Q=R, 실패) → 콘텐츠가 구조를 결정 (R', 접근 C)
+```
+
+- AI가 콘텐츠 전달 의도(expression_hint)에 맞는 HTML 구조를 직접 생성
+- 기존 38개 블록의 CSS(색상, 폰트, 배경, radius)를 **스타일 참고**로 활용
+- 블록을 **"선택"하지 않음**. topic 합침/분리, 포함 관계, 핵심 메시지 분리 가능
+- 디자인 토큰(CSS 변수)으로 품질 제약 + Selenium 측정 + 비전 모델 검증
 
 ---
 
@@ -99,23 +121,21 @@ reference 꼭지 있음 → sidebar-right
     상세 콘텐츠 판단:
     - 너무 구체적/세부적인 내용은 "자세히보기" 대상
     ↓
-[2단계] 디자인 팀장 — Step A + Step B
+[2단계] 블록 선택 (Phase Q — 코드 결정론적 + Kei 1회)
 
-    Step A: 레이아웃 프리셋 선택 (규칙 기반, LLM 불필요)
-    - 실장의 role 분석을 보고 자동 선택:
-      reference 있음 → sidebar-right
-      대등 비교 → two-column
-      고강조 1개 → hero-detail
-      나머지 → single-column
-    - 선택된 프리셋의 CSS grid가 Step B 프롬프트에 포함됨
+    Step A: 프리셋 선택 (규칙 기반, LLM 불필요)
+    - 실장의 role 분석을 보고 자동 선택
 
-    Step B: 프리셋 안에서 블록 매핑 (Sonnet)
-    - 선택된 프리셋의 zone(body/sidebar/footer)에 꼭지를 배정
-    - flow 꼭지 → body/main zone
-    - reference 꼭지 → sidebar zone
-    - detail_target 꼭지 → popup 연결
-    - catalog에서 각 꼭지에 적합한 블록 타입 선택
-    - 각 블록의 대략적 글자 수 가이드
+    Step B: 제약 기반 블록 선택 (코드 결정론적 + Kei AI 1회)
+    ① relation_type → 블록 카테고리 매핑 (코드)
+       hierarchy → visuals, comparison → tables/emphasis, definition → cards 등
+    ② 컨테이너 제약 필터링 (코드)
+       min_height_px, height_cost, sidebar 시각 블록 제한, 중복 블록 제한
+    ③ catalog.yaml 존재 검증 (코드) — 유령 블록 차단
+    ④ 글자수 예산 계산 (코드)
+       컨테이너 px → 최대 글자수/항목수 → AI 편집 시 하드 제약
+    ⑤ Kei에게 필터된 2-3개 후보 제시 → 1개 선택 (AI 1회)
+    - AI에게 불가능한 선택지를 주지 않는다 (Beautiful.ai 원칙)
 
     이미지 배치:
     - 원본 이미지 크기 확인 (Pillow Image.open().size)
@@ -129,13 +149,13 @@ reference 꼭지 있음 → sidebar-right
     자세히보기:
     - detail_target 꼭지는 <details>/<summary>로 popup 연결
     ↓
-[3단계] Kei 텍스트 편집자 — 텍스트 정리
+[3단계] Kei 텍스트 편집자 — 텍스트 정리 (글자수 예산 포함)
 
-    - 팀장의 글자 수 가이드 참고하되, 내용 의미가 우선
+    - 글자수 예산 = 하드 제약 (컨테이너 px에서 수학적으로 도출)
+    - 예산 안에서 내용 의미 우선 편집
     - 전체 컨텍스트와 핵심 용어 유지
     - 도메인 전문가로서 세련된 표현으로 편집
     - 출처 보존, 개조식 작성, 날조 금지
-    - 결과 글자 수가 가이드와 다를 수 있음 (의미 > 글자 수)
     - 표 내용도 편집 (핵심 행/열 선택, 요약 등)
     - 자세히보기 대상은 요약 버전 + 상세 버전 둘 다 작성
     ↓
@@ -162,27 +182,32 @@ reference 꼭지 있음 → sidebar-right
     - Jinja2 템플릿 렌더링
     - 다중 페이지 시 page-break 처리
     ↓
-[5단계] 디자인 팀장 — 전체 재검토
-
-    균형 점검:
-    - 1차 조립 결과의 전체 균형 확인
-    - 블록별 채움 비율 (텍스트 양 vs 공간)
-    - 블록 간 균형 (한쪽만 빽빽하고 다른 쪽 비어있지 않은지)
-
-    이미지/표 점검:
-    - 이미지 크기가 적절한지 (너무 작아서 안 보이지 않는지)
-    - 표가 읽을 수 있는 크기인지
-
-    조정:
-    - 필요 시 공간 재배분 → 실무자에게 2차 조정 지시
-    - 좌우 불균형, 어색한 빈 공간 해소
-    - 최종 HTML 출력
+[검증] Selenium 1회 렌더링 (코드)
+    - overflow 확인 (글자수 예산으로 대부분 사전 방지됨)
+    - overflow 시 수학적 조정:
+      ① 간격 축소 (LaTeX 글루 모델, AI 없음)
+      ② 폰트 크기 축소 (이진 탐색, AI 없음)
+      ③ 텍스트 압축 (최후 수단, AI 1회)
+    ↓
+[품질 게이트] Opus 멀티모달 (VASCAR식)
+    - 스크린샷 기반 시각 품질 평가:
+      ① 콘텐츠 겹침/잘림 없는가?
+      ② 본심 영역이 시각적으로 가장 두드러지는가?
+      ③ 폰트가 읽을 수 있는 크기인가?
+      ④ 블록 유형에 다양성이 있는가?
+      ⑤ 한국어 비즈니스 프레젠테이션으로서 적절한가?
+    - 미달 시: 구체적 문제 교정 → 재렌더링 (최대 2회)
+    - 미달 지속 시: 출력 차단 (깨진 슬라이드를 사용자에게 전달하지 않음)
     ↓
 미리보기 → HTML 다운로드
 ```
 
-**핵심 원칙:**
-- 디자인 팀장은 레이아웃 + 공간 배분. 텍스트를 건드리지 않는다.
+**핵심 원칙 (Phase Q):**
+- **계산 먼저, AI 판단 나중에, 렌더링은 검증만** — 업계 조사 기반 핵심 원칙
+- **블록 = 시각 패턴(구조), 크기가 아님** — 같은 블록이 컨테이너에 따라 항목수/폰트/패딩 변동
+- **AI에게 불가능한 선택지를 주지 않는다** — 결정론적 필터링 후 Kei에게 제시
+- **글자수 예산은 하드 제약** — 컨테이너 px에서 수학적으로 도출, 편집 전에 전달
+- **overflow 상태에서 출력 금지** — 비전 모델 품질 게이트 통과 필수
 - 텍스트 편집자가 정리한 텍스트가 기준. 디자인이 텍스트에 맞춘다.
 - 실무자는 텍스트를 자르지 않고, 디자인을 조정한다.
 - 이미지는 원본 그대로 사용, 크기만 조절.