# Phase T' (T-Prime) — 결과물 품질 개선
> 작성일: 2026-04-02
> 근거: Phase T 파이프라인 실행 결과물(20260402_083722) 시각 검토에서 발견된 6건
> 선행: Phase T 파이프라인 구조 완성 (Stage 0~5 동작, 프롬프트 동적 생성 교체 완료)
---
## 발견된 문제 6건
### TP-1. 배경 영역이 다크로 가장 눈에 띔
**현상:** 배경(보조 영역)이 dark-bullet-list의 다크 배경(#1a2332)을 사용하여 슬라이드에서 가장 강조됨. 본심(핵심)보다 배경에 시선이 먼저 감.
**원인:** Stage 1.7(block_reference.py)에서 배경 역할에 cause_effect → dark-bullet-list를 선택. dark-bullet-list는 다크 배경 블록이므로 배경 역할에 부적합.
**해결 방향:**
- block_reference.py에서 **배경 역할은 다크 계열 블록 제외** 규칙 추가
- 배경용 블록 후보: 라이트 계열만 (card-numbered, card-icon-desc, callout-solution 등)
- 또는 배경 역할 전용 매핑 추가: cause_effect + 배경 → callout-solution (라이트 파란 배경)
**수정 파일:** `src/block_reference.py`
---
### TP-2. 본심 이미지만 크고 메시지 전달 불명확
**현상:** 본심 영역에 벤 다이어그램 이미지가 크게 차지하고, 텍스트가 아래에 밀려있어서 무슨 메시지를 전달하려는지 불명확.
**원인:** 본심 프롬프트(build_area_prompt)에서 "이미지와 텍스트의 배치 관계", "핵심 메시지를 어떻게 시각적으로 강조할지" 지시가 부족.
**해결 방향:**
- 본심 프롬프트에 추가:
- "텍스트가 주인공. 이미지는 텍스트를 보조하는 역할"
- "이미지는 float:right 또는 텍스트 옆에 배치. 이미지가 전체 폭을 차지하면 안 됨"
- "핵심 메시지(key-msg)가 시각적으로 가장 눈에 띄어야 함 — 배경색 + 큰 폰트"
- 이미지가 있을 때 레이아웃: 텍스트 좌측 + 이미지 우측 float, 또는 2단 구성
**수정 파일:** `src/html_generator.py` (build_area_prompt 본심 섹션)
---
### TP-3. 용어정의(sidebar) 오른쪽 잘림
**현상:** sidebar 카드의 텍스트가 오른쪽에서 잘려서 안 보임.
**원인 후보:**
1. Sonnet이 생성한 HTML의 width가 sidebar 컨테이너(380px)를 초과
2. 카드 내부 padding + 텍스트가 너비를 넘침
3. word-break: keep-all이 긴 영문(Building Information Modeling)을 줄바꿈하지 않음
**해결 방향:**
- build_area_prompt 첨부 섹션에 추가:
- "word-break: break-word (긴 영문 줄바꿈)"
- "각 카드 width: 100%. 카드 내부 padding 포함하여 컨테이너 안에 맞출 것"
- "텍스트가 잘리면 안 됨. 넘치면 폰트를 줄여서 맞출 것"
- sidebar 폰트가 10px인데, 긴 영문 제목이 있으면 더 줄여야 할 수 있음
**수정 파일:** `src/html_generator.py` (build_area_prompt 첨부 섹션)
---
### TP-4. 불릿 2줄째 들여쓰기 불일치
**현상:** 불릿(•) 첫줄 텍스트 시작점과 2줄째 시작점이 일직선이 아님. 여러 영역에서 공통.
**원인:** build_area_prompt에서 `padding-left/text-indent` 지시가 있지만 Sonnet이 일관되게 안 따름.
**해결 방향:**
- 프롬프트에 **구체적 HTML 예시**를 포함하여 강제:
```
불릿 예시 (이 HTML을 정확히 따라라):
• 첫줄 텍스트가 여기서 시작하고
둘째줄도 정확히 같은 위치에서 시작해야 한다
```
- 들여쓰기 CSS를 프롬프트가 아니라 **후처리(Stage 3)에서 강제 적용**하는 것도 고려
- 생성된 HTML에서 `• ` 로 시작하는 텍스트를 찾아 padding-left/text-indent를 코드로 주입
**수정 파일:** `src/html_generator.py` (build_area_prompt 공통) + 선택적으로 `src/renderer.py` (후처리)
---
### TP-5. 팝업 링크 위치 부적절
**현상:** "[DX와 BIM의 구분 상세보기]" 링크가 본문 하단에 한 줄로 떡하니 놓여있음. 본문의 흐름을 방해.
**원인:** build_area_prompt에서 "상세보기 링크를 어디에 배치하라"는 위치 지시가 없음.
**해결 방향:**
- 본심 프롬프트에 추가:
- "상세보기 링크는 관련 내용의 우측 상단에 작게 배치 (font-size: 10px, color: #2563eb, 우측 정렬)"
- "본문 흐름 중간에 넣지 마라. 해당 섹션의 헤더 옆에 배치"
- 예시:
```html
```
**수정 파일:** `src/html_generator.py` (build_area_prompt 본심 섹션)
---
### TP-6. 첨부 HTML 디자인 없음
**현상:** 첨부1_혼용 대표 사례.html, 첨부2_DX와 BIM의 구분.html이 raw MDX content를 그냥 HTML로 감싼 것. 테이블 스타일은 있지만 전체 디자인이 없음.
**원인:** Stage 5에서 popup.content를 `` 안에 그대로 넣음. Sonnet에게 디자인을 시키지 않음.
**해결 방향:**
- 첨부 HTML도 Sonnet에게 디자인 요청
- 또는 슬라이드와 동일한 디자인 토큰(tokens.css + base.css)을 적용한 템플릿 사용
- 첨부 HTML은 슬라이드(1280x720)가 아니라 **A4 세로 문서 형태** (읽기 쉬운 형태)
**수정 파일:** `src/pipeline.py` (Stage 5 팝업 HTML 생성 부분)
---
## 수정 분류
| 분류 | 관련 문제 | 수정 파일 | 규모 |
|------|----------|----------|------|
| **A. 블록 선택 규칙** | TP-1 | block_reference.py | 작음 |
| **B. 프롬프트 강화** | TP-2, TP-3, TP-4, TP-5 | html_generator.py | 중간 |
| **C. 들여쓰기 후처리** | TP-4 | renderer.py (선택) | 작음 |
| **D. 첨부 HTML 디자인** | TP-6 | pipeline.py | 중간 |
---
## 실행 순서
```
TP-1 (블록 선택 규칙) → 작음, 독립
TP-2~5 (프롬프트 강화) → 중간, build_area_prompt 한 곳에서 처리
TP-4 추가 (들여쓰기 후처리) → 작음, 프롬프트로 안 되면 코드로 강제
TP-6 (첨부 HTML 디자인) → 중간, 독립
→ 전체 재실행 + 시각 검토
```
---
## 검증 기준
- [ ] 배경이 라이트 톤. 본심이 가장 눈에 띄는가
- [ ] 본심에서 텍스트가 주인공이고 이미지가 보조인가
- [ ] 용어정의가 잘리지 않고 전부 보이는가
- [ ] 모든 영역에서 불릿 2줄째가 첫줄과 일직선인가
- [ ] 팝업 링크가 우측 상단에 작게 있는가
- [ ] 첨부 HTML이 디자인된 문서 형태인가