kyeongmin
c42e01f060
- 루트의 IMPROVEMENT-PHASE-*.md, PHASE-*.md 등 45개 → docs/history/로 이동 - docs/block-tests/ 오래된 블록 테스트 HTML 삭제 (figma_to_html_agent로 대체) - docs/figma-analysis/, docs/figma-assets/, docs/figma-screenshots/ 정리 - docs/test-*.html 등 초기 테스트 파일 정리 - 참고 페이지/ 스크린샷 정리 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
151 lines
6.5 KiB
Markdown
151 lines
6.5 KiB
Markdown
# 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이 디자인된 문서 형태인가
|