# 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을 정확히 따라라):
  <div style="padding-left:14px; text-indent:-14px;">• 첫줄 텍스트가 여기서 시작하고
  둘째줄도 정확히 같은 위치에서 시작해야 한다</div>
  ```
- 들여쓰기 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
  <div style="display:flex; justify-content:space-between; align-items:center;">
    <h3>DX와 핵심기술의 올바른 관계</h3>
    <a style="font-size:10px; color:#2563eb;">상세보기 →</a>
  </div>
  ```

**수정 파일:** `src/html_generator.py` (build_area_prompt 본심 섹션)

---

### TP-6. 첨부 HTML 디자인 없음

**현상:** 첨부1_혼용 대표 사례.html, 첨부2_DX와 BIM의 구분.html이 raw MDX content를 그냥 HTML로 감싼 것. 테이블 스타일은 있지만 전체 디자인이 없음.

**원인:** Stage 5에서 popup.content를 `<body>` 안에 그대로 넣음. 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이 디자인된 문서 형태인가
