C.E.L_Slide_test2/PLAN.md

Design Agent — 실행 계획

Phase 1: 기반 구축

DA-1: 프로젝트 셋업

• 파일: pyproject.toml, .env, .gitignore
• 내용: Python 환경, 의존성 정의, 환경 변수
• 의존성: 없음
• 완료 기준: pip install -e . 성공

DA-2: FastAPI 서버 기본 구조

• 파일: src/main.py, src/config.py
• 내용: FastAPI 앱, CORS, health endpoint, 설정 관리
• 의존성: DA-1
• 완료 기준: uvicorn src.main:app --reload 정상 시작, /api/health 200 반환

DA-3: 디자인 토큰 + 기본 CSS

• 파일: static/tokens.css, static/base.css
• 내용: CLAUDE.md에 정의된 디자인 토큰을 CSS 변수로 구현, Pretendard 폰트 설정, 16:9 슬라이드 컨테이너
• 의존성: 없음
• 완료 기준: 빈 슬라이드가 16:9 비율로 렌더링, Pretendard 폰트 적용 확인

---

Phase 2: 블록 템플릿 제작

DA-4: 블록 템플릿 — 비교 (comparison)

• 파일: templates/blocks/comparison.html
• 내용: 2단 병렬 레이아웃, Jinja2 슬롯 ({{left_title}}, {{left_content}}, {{right_title}}, {{right_content}})
• 의존성: DA-3
• 완료 기준: 더미 데이터로 렌더링 시 2단 비교 표시, 디자인 토큰 적용

DA-5: 블록 템플릿 — 카드 그리드 (card-grid)

• 파일: templates/blocks/card-grid.html
• 내용: 2~4열 카드 배열, Jinja2 슬롯 ({{cards[n].icon}}, {{cards[n].title}}, {{cards[n].description}})
• 의존성: DA-3
• 완료 기준: 3개 카드 렌더링, 카드 수에 따라 자동 배열

DA-6: 블록 템플릿 — 관계도 (relationship)

• 파일: templates/blocks/relationship.html
• 내용: 벤 다이어그램 (CSS 원형), Jinja2 슬롯 ({{center}}, {{items[n]}})
• 의존성: DA-3
• 완료 기준: 3원 벤 다이어그램 렌더링, 라벨 표시

DA-7: 블록 템플릿 — 프로세스 (process)

• 파일: templates/blocks/process.html
• 내용: 가로 단계 흐름, Jinja2 슬롯 ({{steps[n].number}}, {{steps[n].title}}, {{steps[n].description}})
• 의존성: DA-3
• 완료 기준: 4단계 프로세스 렌더링, 연결선 표시

DA-8: 블록 템플릿 — 강조 인용 (quote-block)

• 파일: templates/blocks/quote-block.html
• 내용: 배경색 + 좌측 라인 + 인용 텍스트, Jinja2 슬롯 ({{quote_text}}, {{source}})
• 의존성: DA-3
• 완료 기준: 인용 블록 렌더링, 강조 스타일 적용

DA-9: 블록 템플릿 — 결론 바 (conclusion-bar)

• 파일: templates/blocks/conclusion-bar.html
• 내용: 하단 전체 폭 강조 영역, Jinja2 슬롯 ({{conclusion_text}})
• 의존성: DA-3
• 완료 기준: 결론 바 렌더링, 강조 색상 적용

DA-10: 블록 템플릿 — 비교 테이블 (comparison-table)

• 파일: templates/blocks/comparison-table.html
• 내용: 다항목 비교 테이블, Jinja2 슬롯 ({{headers}}, {{rows}})
• 의존성: DA-3
• 완료 기준: 5행 3열 테이블 렌더링

DA-11: 슬라이드 조합 렌더러

• 파일: src/renderer.py, templates/slide-base.html
• 내용: Jinja2로 블록 조합 → HTML 생성. grid-template-areas로 블록 배치. 다중 페이지 지원.
• 다중 페이지: .slide div 여러 개 + page-break-after: always (인쇄 시 페이지 분리)
• 의존성: DA-4 ~ DA-10
• 완료 기준: JSON 블록 배치 명세 → 완성 HTML 출력 (1페이지 또는 다중 페이지)

---

Phase 3: AI 파이프라인 연결

DA-12: 1단계 — Kei 실장 (꼭지 추출 + 분석)

• 파일: src/kei_client.py
• 내용: 본문에서 핵심 꼭지 추출 + 다단계 분석
  • 꼭지 추출: 본문에서 2~5개 핵심 파트 식별 (1페이지 적정: 5개)
  • 페이지 분리: 5개 초과 + 레이어 동등 → 2페이지 (의미 기반 분할 2/3, 3/4 등)
  • 5개 + 내용 많음 → 세부 내용은 자세히보기 대상
  • 레이어 수준: 각 꼭지가 도입/핵심/보조/결론 중 어디인지
  • 강조 판단: 어떤 꼭지를 시각적으로 눈에 띄게 할 것인가
  • 배치 방향: 세로로 긴 꼭지, 가로로 나열할 꼭지 판단
  • 이미지 판단: 몇 개, 어떤 꼭지 소속, 핵심/보조, 텍스트 포함 여부
  • 표 판단: 행/열 규모, 전체 표시 가능 여부
  • 상세 콘텐츠 판단: 자세히보기 대상 식별
• 기술: Anthropic API (Sonnet)
• 의존성: DA-2
• 완료 기준: 꼭지 목록 + 레이어 + 강조 + 배치 + 이미지/표/상세 판단 JSON

DA-13: 2단계 — 디자인 팀장 (레이아웃 설계)

• 파일: src/design_director.py
• 내용: 블록 매핑 + 공간 배분 + 글자 수 가이드
  • 블록 매핑: catalog 메뉴판에서 각 꼭지 성격에 맞는 블록 선택
  • 이미지 배치: Pillow로 원본 크기 확인 → 가로/세로에 따라 영역 결정 (크기만 조절, crop 안 함)
  • 표 배치: 행×열 규모 보고 공간 판단 (안 되면 요약 요청 또는 페이지 분리)
  • 자세히보기: 상세 콘텐츠는 <details> 영역으로 설계
  • 공간 배분: 영역별 비율, 겹침 방지
  • 글자 수 가이드: 각 블록 공간에 맞는 대략적 글자 수 (하드코딩 아닌 판단)
  • 페이지 판단: 안 들어가면 2페이지 분리
• 기술: Anthropic API (Sonnet) + Pillow (이미지 크기)
• 의존성: DA-12
• 완료 기준: 블록 배치 + 이미지/표 배치 + 글자 수 가이드 JSON

DA-13b: 3단계 — Kei 텍스트 편집자 (텍스트 정리)

• 파일: src/content_editor.py
• 내용: 팀장의 글자 수 가이드 참고하되 내용 의미 우선
  • 전체 컨텍스트와 핵심 용어 유지
  • 세련된 표현으로 편집 (의미 > 글자 수)
  • 출처 보존, 개조식, 날조 금지
  • 표 내용 편집 (핵심 행/열 선택, 요약)
  • 자세히보기 대상: 요약 버전 + 상세 버전 둘 다 작성
• 기술: Anthropic API (Sonnet)
• 의존성: DA-13
• 완료 기준: 슬롯별 텍스트 JSON. 핵심 용어 보존. 자세히보기 포함.

DA-14: 4단계 — 디자인 실무자 (디자인 조정 + HTML 조립) + 5단계 재검토

• 파일: src/pipeline.py, src/renderer.py
• 내용:
  • 4단계 (AI + 코드): 편집자 텍스트에 맞게 디자인 조정 (폰트/여백/박스 — 텍스트 자르지 않음)
    • Jinja2 HTML 조립, 이미지 object-fit:contain, 표 container query, <details> 접기, 인쇄 펼침 JS
  • 5단계 (AI): 팀장이 전체 균형 재검토 → 채움 비율, 블록 균형, 이미지/표 크기 점검 → 2차 조정
• 기술: Anthropic API Sonnet (디자인 조정 + 재검토) + Jinja2/CSS (조립)
• 의존성: DA-11, DA-12, DA-13, DA-13b
• 완료 기준: 텍스트 입력 → 균형 잡힌 슬라이드 HTML (이미지/표/자세히보기 포함, 재검토 완료)

---

Phase 4: UI + 출력

DA-15: 프론트엔드 — 콘텐츠 입력 + 미리보기

• 파일: static/index.html (별도 HTML 파일), main.py (FileResponse로 서빙)
• 내용: 텍스트 입력 영역 + iframe 미리보기 + HTML 다운로드 버튼
• 기술: FileResponse (FastAPI 내장), fetch API + 수동 SSE 파싱
• 의존성: DA-14
• 완료 기준: 텍스트 붙여넣기 → 슬라이드 미리보기 표시 + HTML 다운로드
• 주의: HTML/JS를 Python 문자열에 넣지 않는다 (이스케이프 충돌 방지)

---

버그 수정

BF-2: 블록 내용 비어있음 (렌더러 Jinja2 include 문제)

• 파일: src/renderer.py, templates/slide-base.html
• 내용: include → 블록별 개별 render() 후 HTML 삽입
• 기술: Jinja2 get_template().render() (내장)
• 의존성: 없음 (기존 코드 수정만)
• 완료 기준: 콘텐츠 입력 → 슬라이드에 텍스트가 표시됨

BF-3: 한글 깨짐 (다운로드 파일)

• 파일: static/index.html
• 내용: download() Blob에 UTF-8 BOM 추가
• 기술: JavaScript '\uFEFF' 1줄
• 의존성: 없음
• 완료 기준: 다운로드한 HTML 파일에서 한글 정상 표시

DA-16: 통합 테스트

• 파일: tests/test_pipeline.py, tests/test_renderer.py
• 내용: 전체 파이프라인 테스트 + 블록 렌더링 테스트
• 의존성: BF-2, BF-3
• 완료 기준: 테스트 전체 통과

---

의존 관계

DA-1 → DA-2 → DA-12(실장) → DA-13(팀장) → DA-13b(편집자) ─┐
                                                             ├→ DA-14(조립+재검토) → DA-15 → DA-16
DA-3 → DA-4~DA-10 → DA-11(렌더러) ─────────────────────────┘

• Phase 1~2: AI 없이 진행 가능
• Phase 3: Anthropic API 필요 (5단계 파이프라인)
• 5단계 흐름: 실장 → 팀장 → 편집자 → 조립 → 재검토

---

기술 스택

역할	도구	비고
서버	FastAPI + uvicorn	Kei와 동일
템플릿 엔진	Jinja2	블록 상속 + 슬롯 변수
렌더링	CSS Grid + 디자인 토큰	순수 CSS
한국어 폰트	Pretendard Variable	word-break: keep-all
AI (실장)	Kei API (Opus)	localhost:8000
AI (팀장)	Anthropic API (Sonnet)	Structured Outputs
테스트	pytest	렌더링 + 파이프라인