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>
6.5 KiB
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 카드의 텍스트가 오른쪽에서 잘려서 안 보임.
원인 후보:
- Sonnet이 생성한 HTML의 width가 sidebar 컨테이너(380px)를 초과
- 카드 내부 padding + 텍스트가 너비를 넘침
- 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를 코드로 주입
- 생성된 HTML에서
수정 파일: src/html_generator.py (build_area_prompt 공통) + 선택적으로 src/renderer.py (후처리)
TP-5. 팝업 링크 위치 부적절
현상: "[DX와 BIM의 구분 상세보기]" 링크가 본문 하단에 한 줄로 떡하니 놓여있음. 본문의 흐름을 방해.
원인: build_area_prompt에서 "상세보기 링크를 어디에 배치하라"는 위치 지시가 없음.
해결 방향:
- 본심 프롬프트에 추가:
- "상세보기 링크는 관련 내용의 우측 상단에 작게 배치 (font-size: 10px, color: #2563eb, 우측 정렬)"
- "본문 흐름 중간에 넣지 마라. 해당 섹션의 헤더 옆에 배치"
- 예시:
<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이 디자인된 문서 형태인가