# task-283.1: 카드뉴스 렌더러 V2 전면 재설계

## 작업 레벨: Lv.3 (복합 기능)

## 목표
vibe.tip 스레드 디자인을 벤치마크로, 카드뉴스 렌더러를 **전면 재설계**한다.
기존 코드 구조(BaseRenderer 상속)는 유지하되, 비율·타이포·레이아웃·시각장치를 근본적으로 업그레이드한다.

## 참조 이미지 (반드시 확인)
- `/home/jay/projects/ThreadAuto/docs/design-reference/slide1.jpg` ~ `slide6.jpg`
- 이 6장이 디자인 목표 퀄리티. **색상은 제외** (우리 테마 컬러 유지), **구조와 레이아웃을 벤치마크**.

## 변경 사항 상세

### 1. 비율 변경: 1:1 → 4:5
- **기존**: 1080×1080 (WIDTH=HEIGHT=1080)
- **변경**: 1080×1350 (WIDTH=1080, HEIGHT=1350)
- `renderer/engine.py`의 WIDTH, HEIGHT 상수 변경
- 모든 슬라이드 렌더링 코드에서 새 비율 반영
- Threads API: 4:5 비율 지원 확인됨 (1080×1350 OK)

### 2. 타이포그래피 대폭 확대
- **커버 제목**: 54~64pt 초굵은 볼드 (현재 ~36pt 추정). 화면의 25~30% 차지.
- **커버 부제**: 20~22pt 레귤러, text_secondary 색상
- **본문 카드 제목**: 36~40pt 볼드
- **본문 카드 설명**: 18~20pt 레귤러
- **카테고리/뱃지**: 14~16pt 볼드
- **워터마크**: 12~14pt 레귤러
- 핵심: **크기 계층이 명확해야 함** (제목 ≫ 부제 > 본문 > 캡션)

### 3. 슬라이드별 레이아웃 다양화 (핵심!)
기존 PATTERN_A/B/C 3종 → **5종 이상** 슬라이드 타입으로 확장:

#### 슬라이드 1: 커버 (COVER)
- 좌상단: 카테고리 pill badge (둥근 모서리 + 채운 배경)
- 중상단: **초대형 볼드 제목** (3줄까지 허용)
- 제목 아래: 부제 (회색 작은 글씨)
- 하단 50%: **여백** (또는 향후 일러스트 영역)
- 우하단: 워터마크 "서울대보험쌤"

#### 슬라이드 2~3: 본문 카드 리스트 (CARD_LIST)
- 상단: 볼드 제목 + 우상단 페이지번호 pill badge (02 / 06 형태)
- 제목 아래: 회색 부제
- 중간: **2~3개 카드** (둥근 모서리, 글래스모피즘 배경)
  - 각 카드: 좌측 아이콘(이모지 대신 원형 색상 뱃지) + 볼드 제목 + 설명
  - 카드 간 30~40px 간격
- 하단: **CTA/강조 배너** (악센트 배경 + 볼드 텍스트)

#### 슬라이드 4~5: 본문 상세 (DETAIL)
- 상단: 볼드 제목 + 페이지번호
- 중간: **인포박스** (좌측 악센트 수직 바 4px + 아이콘 + 볼드 제목 + 설명)
- 선택적: 구분선 또는 추가 인포박스
- 하단: TIP 박스 (아이콘 + 작은 텍스트)

#### 슬라이드 6~N: 추가 본문
- CARD_LIST와 DETAIL 교대 사용

#### 마지막 슬라이드: CTA (SUMMARY_CTA)
- 상단: **대형 볼드 요약 제목** (중앙 정렬)
- 중간: 악센트 테두리 영역 안에 **요약 카드 2~3개** (아이콘 + 제목 + 설명)
- 하단: CTA 텍스트 (DM/팔로우 유도)
- 최하단: 워터마크

### 4. 카드 컴포넌트 디자인
- **글래스모피즘**: 반투명 배경 + 미세 블러 (현재 Theme.card_bg 활용)
- **둥근 모서리**: radius 16~20px
- **미세 테두리**: 1px, card_bg보다 약간 밝은 색 (border)
- **좌측 악센트 바**: 인포박스 등에서 4px 세로선 (accent 색상)
- **카드 간 간격**: 최소 24px, 권장 32~40px

### 5. 시각 장치 추가
- **Pill Badge**: 둥근 모서리(radius 50%) 배지. 카테고리/페이지번호에 사용.
  - 채운 타입: 배경색 + 흰색 텍스트 (카테고리용)
  - 아웃라인 타입: 테두리만 + accent 색상 텍스트 (페이지번호용)
- **페이지 번호**: 우상단 "02 / 06" 형식 pill badge
- **인포박스**: 좌측 accent 컬러 수직 바 + 아이콘 원형 뱃지 + 제목 + 설명
- **CTA 배너**: 하단 별도 영역, accent 배경 강조

### 6. 여백 시스템
- **좌우 패딩**: 60~72px (현재 MARGIN=72 유지 or 확대)
- **상단 패딩**: 60~80px (현재 header bar → pill badge로 대체)
- **요소 간 간격**: 최소 24px, 카드 간 32~40px
- **한 슬라이드에 주요 요소 3~4개 이내** (과밀 방지)

### 7. 브랜딩 변경
- **기존**: 하단 풀너비 바 "인카다이렉트 TOP사업단 | 서울대보험쌤"
- **변경**: 우하단 작은 워터마크 "서울대보험쌤" (12~14pt, text_secondary 색상, opacity 60%)
- 커버 + CTA(마지막) 슬라이드에만 워터마크 표시
- 중간 슬라이드에는 페이지번호만

### 8. 테마 호환
- 기존 5개 테마(NavyGold, BlackRed, GreenWhite, PurplePink, OrangeCream) 색상값 유지
- Theme dataclass에 `border_color: str` 필드 추가 (card_bg보다 밝은 미세 테두리)
- GreenWhite 같은 밝은 테마도 새 레이아웃에서 잘 보이도록 조정

## 수정 대상 파일
- `renderer/engine.py` — WIDTH/HEIGHT 변경 (1080→1350)
- `renderer/cardnews.py` — **전면 재작성** (커버/본문/CTA 슬라이드 함수 전체)
- `renderer/themes.py` — Theme에 border_color 추가, 기존 5테마에 값 설정
- `renderer/templates.py` — 새 레이아웃에 맞게 업데이트
- `renderer/fonts.py` — 폰트 크기 상수 업데이트 (새 계층)
- `renderer/colors.py` — 필요시 공용 색상 추가

## 수정하면 안 되는 파일
- `publisher/threads_publisher.py` — API 코드 손대지 말 것
- `content/` 하위 전체 — 컨텐츠 생성 파이프라인
- `scheduler/` 하위 전체 — 스케줄러
- `tests/` — 테스트는 별도로 수정 (기존 테스트가 깨지는 건 새 비율에 맞게 업데이트)

## JSON 입력 형식 (기존과 동일 유지)
```json
{
  "slides": [
    {"type": "cover", "title": "...", "subtitle": "...", "category": "고민공감"},
    {"type": "body", "title": "...", "description": "..."},
    ...
    {"type": "cta", "title": "...", "subtitle": "..."}
  ]
}
```
- 기존 content_generator_v2가 생성하는 JSON 포맷과 100% 호환 필수
- 슬라이드 type 필드로 렌더링 방식 분기

## 테스트 요구사항
1. 기존 테스트 중 비율 관련(1080×1080) assertion → 1080×1350으로 업데이트
2. 새 슬라이드 타입별 렌더링 테스트 추가
3. 5개 테마 × 7슬라이드 = 35장 렌더링 smoke test
4. 렌더링된 이미지 파일을 `/home/jay/projects/ThreadAuto/output/v2_sample/` 에 저장

## 디자인 미팅
- 비너스(디자인센터) 참여 필수
- 구현 전 30분 이내 빠른 디자인 리뷰 미팅으로 레이아웃 확정 후 코딩 진입
- 미팅 기록: `memory/meetings/2026-03-06-renderer-v2-design.md`

## 주의사항
- Pillow(PIL)만 사용. 외부 렌더링 라이브러리 추가 금지.
- 이모지 렌더링은 PIL 한계로 불가 → 원형 색상 뱃지(숫자 또는 아이콘 대체)로 처리
- `_strip_emoji()` 함수 유지
- BaseRenderer 상속 구조 유지
- 한글 폰트: `~/.local/share/fonts/NotoSansCJKkr-Regular.otf` (기존과 동일)