# 카드뉴스 전용 노하우 (ThreadAuto v2)

> **용도**: 카드뉴스 슬라이드 제작 규칙
> **범위**: ThreadAuto v2 기반 카드뉴스(인스타그램/블로그) 슬라이드 전용. 테마 시스템, 슬라이드 타입별 규칙, HTML/CSS 템플릿. 광고 배너는 범위 외(→ knowhow-design.md).
> **대상 사용자**: 콘텐츠팀 + 디자인팀 (카드뉴스 기획/제작 시)
> **갱신 규칙**: 최종 수정: 2026-04-03 | 작성: task-1367.1

## 1. 디자인 원칙

ThreadAuto v2 카드뉴스는 4가지 원칙을 기반으로 설계된다.

- **모던**: 충분한 여백, 그리드 정렬, 깔끔한 레이아웃
- **트렌드**: 그라데이션 · 글래스모피즘 · 소프트 쉐도우 · 라운드 카드
- **전문성**: 타이포그래피 위계(제목 / 부제 / 본문), 브랜드 일관성
- **다양성**: 포스팅마다 다른 컬러 테마 / 레이아웃 변형

---

## 2. 테마 시스템

### 5종 테마 정의 (`themes.py` 기준)

| # | 테마명 | 분위기 | primary | secondary | accent | bg_gradient |
|---|--------|--------|---------|-----------|--------|-------------|
| 1 | **NavyGold** | 전문적·고급스러운 | `#003087` (딥 네이비) | `#1A4FAD` (미디엄 네이비) | `#C9A84C` (웜 골드) | `#0A1628` → `#1B3A6B` |
| 2 | **BlackRed** | 강렬·임팩트 | `#C0392B` (딥 레드) | `#E74C3C` (비비드 레드) | `#FF6B6B` (라이트 레드) | `#1A0000` → `#3D0000` |
| 3 | **GreenWhite** | 신뢰·안정 | `#1E7A4E` (포레스트 그린) | `#27AE60` (미디엄 그린) | `#A8E6CF` (민트 그린) | `#E8F5EE` → `#FFFFFF` |
| 4 | **PurplePink** | 모던·트렌디 | `#7B2D8B` (딥 퍼플) | `#B44AC0` (미디엄 퍼플) | `#FF69B4` (핫 핑크) | `#2D0045` → `#6B0057` |
| 5 | **OrangeCream** | 따뜻한·친근한 | `#D4500A` (번트 오렌지) | `#FF8C42` (비비드 오렌지) | `#FFD166` (선샤인 옐로우) | `#FFF3E0` → `#FFE0B2` |

### 카드 속성 상세

| 테마 | text_primary | text_secondary | card_bg | number_bg | border_color |
|------|-------------|---------------|---------|-----------|--------------|
| NavyGold | `#F0F4FF` | `#A8BCDC` | `#FFFFFF28` (불투명 16%) | `#C9A84C` | `#FFFFFF40` |
| BlackRed | `#FFFFFF` | `#FFAAAA` | `#FFFFFF22` (불투명 13%) | `#C0392B` | `#FFFFFF38` |
| GreenWhite | `#1A2E20` | `#2D5A3D` | `#FFFFFFDD` (불투명 87%) | `#1E7A4E` | `#1E7A4E30` |
| PurplePink | `#FFF0FF` | `#DDA0DD` | `#FFFFFF25` (불투명 15%) | `#FF69B4` | `#FFFFFF3D` |
| OrangeCream | `#2C1500` | `#7A4020` | `#FFFFFFCC` (크림 반투명) | `#D4500A` | `#D4500A30` |

### 테마 선택 규칙

- **직전 포스팅과 같은 테마 사용 금지** (다양성 원칙)
- `get_random_theme()`: 다크 테마(NavyGold·BlackRed·PurplePink) 각 25%, 밝은 테마(GreenWhite·OrangeCream) 각 12.5% 가중치
- `get_next_theme()`: NavyGold → BlackRed → GreenWhite → PurplePink → OrangeCream → (반복) 순환
- 히스토리 파일(`data/theme_history.json`)로 직전 테마 추적, 중복 자동 제외

---

## 3. 슬라이드 타입별 규칙

### cover (표지)

- 강한 훅 타이틀 (42–44px, font-weight 900)
- 서브타이틀 (선택)
- 카테고리/키워드 pill badge
- 상단 우측에 브랜드 로고 오버레이
- 레이아웃 패턴: PATTERN_C (전면 그라데이션 배경 + 중앙 텍스트)

### card_list (체크리스트)

- `items` 배열 필수 (3~5개 권장)
- 각 아이템: 좌측 accent 수직 바 + title + description
- GlassCard로 각 아이템 감싸기
- 레이아웃 패턴: PATTERN_A (좌측 넘버링 + 우측 텍스트 블록)

### detail (상세)

- 수치/통계 강조 (label + value 쌍)
- 하단 TIP 텍스트 (선택)
- `items` 배열로 데이터 표시
- 레이아웃 패턴: PATTERN_B (상단 아이콘/넘버 + 하단 텍스트)

### body (본문)

- **다중 항목 모드**: `items` 배열이 있으면 card_list 스타일 렌더링
- **단일 설명 모드**: `items` 없으면 `description` 하나를 GlassCard에 표시
- **주의**: 단일 항목만 넣으면 슬라이드 상반부 빈 공간 과다 → **최소 2개 이상 항목 권장**

### cta (행동 유도)

- 헤드라인: 가치 제안 문구 (44px, bold)
- 요약 영역: 핵심 포인트 1–3개 (CircleBadge + title + description)
- CTA 버튼: 행동 유도 문구 (버튼 스타일, accent 배경, 흰 글씨)
- **주의**: 상단 130px 여백 확보 (브랜드 로고 영역)
- **주의**: CTA에 "출처/채널" 같은 메타데이터만 넣지 말 것 → 행동 유도 문구 필수

---

## 4. 실패 패턴 (task-1366.1 기반)

### 패턴 1: body 슬라이드 빈 공간 과다

- **증상**: body 슬라이드에 항목 1개만 전달 → 슬라이드 상반부 텅 빔
- **원인**: `description` 단일 string만 사용, `items` 배열 미활용
- **해결**: `items` 배열에 3–5개 항목 전달하여 공간 균등 활용

### 패턴 2: CTA 행동 유도력 없음

- **증상**: CTA 슬라이드에 "출처: 매일경제", "채널: 서울대보험쌤" 만 표시
- **원인**: `items`에 메타데이터만 전달
- **해결**: CTA `items`에 핵심 포인트 요약 전달, `cta_text`에 "지금 상담받기" 등 행동 유도 문구

### 패턴 3: 로고/텍스트 겹침

- **증상**: 헤드라인 텍스트가 우상단 브랜드 로고와 겹쳐 가독성 저하
- **원인**: 상단 여백 48px로 로고 영역(56–128px) 침범
- **해결**: CTA 슬라이드 상단 패딩 **130px** 확보

---

## 5. 성공 패턴

### 정보 밀도 균일

- 슬라이드당 `items` 수: **3–5개 권장**
- 각 슬라이드가 비슷한 양의 정보를 담아야 함

### CTA 효과적 구성

- 요약 영역: 핵심 포인트 2–3개
- CTA 문구 예: "지금 바로 상담하기", "무료 분석 받기" 등 명확한 행동 유도
- 버튼 스타일: accent 배경색, 둥근 모서리, 충분한 패딩

### 테마 순환

- 5종 테마를 순환 사용
- 직전 포스팅과 같은 테마 중복 방지
- 테마 선택 시 콘텐츠 분위기와 매칭 고려:
  - 전문적·신뢰성 강조 → NavyGold / GreenWhite
  - 강렬한 임팩트 → BlackRed
  - 트렌디·감각적 → PurplePink
  - 따뜻한·친근한 → OrangeCream

---

## 6. 레이아웃 상수

| 항목 | 값 |
|------|----|
| 슬라이드 전체 | 1080 × 1350 px (세로형 9:11.25) |
| BrandBar (상단) | 높이 12px, primary 색상 |
| BrandFooter (하단) | 높이 100px, primary 배경 + 브랜드명 |
| 콘텐츠 영역 | top 12px ~ bottom 100px |
| 좌우 마진 | 64px |
| 로고 오버레이 | 우측 상단, 너비 180px, 높이 ~72px, 하단 128px 정렬 |
| CTA 상단 패딩 | **130px** (로고 침범 방지) |

### 레이아웃 패턴 순환 (슬라이드 인덱스 0-based)

| 인덱스 | 패턴 | 용도 |
|--------|------|------|
| 0 | PATTERN_C | 훅/표지 슬라이드 (전면 그라데이션) |
| 1 | PATTERN_A | 본문 (좌측 넘버링 + 우측 텍스트) |
| 2 | PATTERN_B | 본문 (상단 넘버 + 하단 텍스트) |
| 3 | PATTERN_A | 본문 |
| 4 | PATTERN_B | 본문 |
| 5 | PATTERN_A | 본문 |
| 6 | PATTERN_C | 마지막 CTA 슬라이드 |

> 슬라이드 수가 7개를 초과하면 위 순서가 순환(cycle) 적용된다.