# 에이전트 미팅 Cycle 9: 감정/스토리텔링 전략
> task-id: task-1199.1 | 일시: 2026-03-28

**미팅 모드**: hybrid
**토론 깊이**: thorough
**총 사이클 수**: 3

---

## 주제
시각적 감정 전달 구체적 기법 — 색상(Cycle 8) 이후, 타이포그래피/레이아웃/수치 표현 매핑

## 참석자
- **아프로디테** (마케팅팀장) — 전환 심리학, 감정 훅 설계
- **아마테라스** (디자인팀장) — 타이포 시스템, 레이아웃 구조
- **로키** (레드팀) — DA + 벤치마크 검증, 비관습적 대안

---

## 토론 기록

### Round 1 — 독립 의견 수집

#### 아프로디테 (마케팅팀장)
Cycle 8에서 색상 팔레트를 확정했지만, 색상은 감정의 배경일 뿐이다. 감정 전달의 실질은 타이포그래피 크기 대비, 레이아웃 여백 변화, 수치 표현 방식이 결정한다.

**핵심 주장: 레이아웃 여백이 감정의 물리적 표현이다.**

슬라이드별 레이아웃 전략:
- **Slide 1 (훅/긴장)**: 헤드라인 72px+, weight 800+. 물음표 타이포가 현재 작은 크기로 묻힘 — 크기 배율로 긴장감 회복 필요
- **Slide 2 (고통/압박)**: 여백 의도적 최소화 + 행간 압축. "숨이 막히는 레이아웃"으로 고통 감정 지원
- **Slide 3 (해결/해방)**: Slide 2 대비 여백 300%+ 확장. 해결책 등장 = 공간 해방. 가장 강력한 감정 모멘트
- **Slide 4 (신뢰/증거)**: 수치 단독 표기 금지. "0원 → 1,000만원" 대비 구조 필수. 숫자 크기 대비: 1,000만원 크게, 0원 작게
- **Slide 5 (긴급/CTA)**: 배경 전체 강렬 + CTA 버튼 주변 여백은 넉넉하게. "배경의 압박 + CTA의 여유" 대비 구조

#### 아마테라스 (디자인팀장)
인물 없는 스토리텔링의 답: **타이포그래피가 인물의 역할을 대신해야 한다.** 글자 자체가 감정적 행위자가 되는 시스템이 필요.

**타이포그래피 감정 시스템 제안:**

| 슬라이드 | 폰트 계열 | Weight | 크기 | 감정 역할 |
|---------|---------|--------|------|---------|
| Slide 1 | Display | 800 | 64px+ | 선언적 긴장 |
| Slide 2 | Body | 400~500 | 16~18px | 평범한 고통 (밀도로 압박) |
| Slide 3 | Display | 700 | 56px+ | 전환의 선언 |
| Slide 4 | Body + 숫자는 tabular-nums | 600 | 혼합 | 냉철한 신뢰 |
| Slide 5 | Display | 700~900 | 48px+ | 압박/긴급 |

**레이아웃 감정 시스템 제안:**

| 슬라이드 | 정렬 | 여백 특성 | 감정 효과 |
|---------|------|---------|---------|
| Slide 1 | 중앙 정렬 + 상하 균형 | 보통 | 중립적 주목 |
| Slide 2 | 좌측 정렬 + 상단 치우침 | 최소화 | 불균형/불안 |
| Slide 3 | 중앙 정렬 + 하단 여백 크게 | 최대화 | 안도/안착 |
| Slide 4 | 그리드 정렬 + 규칙적 간격 | 균일 | 구조/신뢰 |
| Slide 5 | 전체 화면 채움 + CTA 중앙 집중 | CTA 주변 넉넉 | 긴박/결단 |

#### 로키 (레드팀) — DA + 비관습적 대안

**아프로디테 공격:**
- "여백 300% 확장"은 CSS 수치로 명세화하지 않으면 Cycle 8의 실수(미팅 합의가 코드에 미반영) 재현. 구체적 padding/margin 수치 명세 필수.
- Slide 5 "여백 축소 = 행동 강요" 오류. UX 연구: CTA 주변 여백 확보가 CTR 향상. 좁은 CTA = 클릭하기 무서운 느낌.

**아마테라스 공격:**
- Slide 2 텍스트 밀도 증가 → 모바일 가독성 붕괴 → 이탈. 감정 전달 전에 사용자가 나감.
- 모노스페이스 폰트 Slide 4 적용은 기존 폰트 시스템과 충돌 여부 미검증.

**비관습적 대안 — "Kinetic Typography Illusion" (정적 모션 효과)**:
- 실제 GIF/애니메이션이 아닌, 정적 이미지에서 모션감을 주는 타이포 기법
  - 연속 크기 변화 배열: 같은 단어를 점점 커지는 크기로 3개 나열 → 시선이 방향성을 읽음
  - 텍스트 불투명도 단계: 동일 텍스트를 80%→100% 투명도로 반복 → 페이드인 느낌
  - 사선 배치: 텍스트를 2~3도 기울여 배치 → 속도감
- 최강 지지: 모션 광고 CTR = 정적 대비 180~250% (Meta 벤치마크). 정적으로도 모션 느낌 구현 가능.
- 최강 반론: v6 범위 초과 가능성. Slide 5 CTA 카드에만 선택적 적용이 안전.

---

### Round 2 — 교차 토론 (충돌 해소)

**아프로디테 → 로키 Slide 5 공격 수용:**
CTA 주변 여백 축소 안 철회. 최종 수정: "배경 전체의 강렬한 색조(압박) + CTA 버튼 주변 넉넉한 여백(유혹)" 대비 구조. 로키 지적이 정확함.

**아마테라스 → 로키 모바일 공격 부분 수용:**
Slide 2 텍스트 밀도 방식 수정:
- ~~실제 텍스트 크기 증가~~ → `line-height: 1.2` (기본 1.5~1.6 대비 압축) + 카드 패딩 축소
- 텍스트 크기 자체는 가독성 유지. 공간 압박감만 연출.
- 결과: 모바일 가독성 유지하면서 압박 감정 전달.

**아마테라스 → 로키 모노스페이스 공격 반박:**
전면 모노스페이스 철회. 대신 `font-variant-numeric: tabular-nums` CSS 속성으로 숫자만 정렬 처리. 기존 폰트 시스템 100% 유지.

**로키 → 아프로디테 수치 대비 구조 지지:**
"0원 → 1,000만원" 타이포 표현 강화안 제시:
- "0원" — 회색 (`#9B9B9B`), 24px, weight 400
- "→" — 민트 (`#A8E6CF`), 28px, weight 500
- "1,000만원" — 오렌지 (`#F4821A`), 56px, weight 800
- 효과: 숫자 크기 + 색상 + 굵기의 3중 대비로 시각적 여정 형성

**Kinetic Typography Illusion 판정:**
Slide 5 CTA에만 선택적 적용. 구체적으로: CTA 버튼 텍스트에 letter-spacing을 약간 넓혀 "강조" 느낌 + 텍스트 그림자 미세 적용으로 입체감. 전면 적용 기각.

---

### Round 3 — 최종 합의 도출

#### 핵심 질문 응답

**Q1: 텍스트와 색상만으로 감정을 얼마나 전달할 수 있는가?**
→ **합의**: 80%까지 가능. 색상(배경 분위기) + 타이포 크기 대비(긴장/해방) + 수치 시각화 대비("0원→1,000만원")가 결합되면 인물 없이도 강한 감정 유발 가능. 나머지 20%는 인물/이미지가 보완할 수 있으나, 현재 스코프에서 필수는 아님.

**Q2: 인물 없이 스토리텔링이 가능한가?**
→ **합의**: 가능. 조건: 타이포그래피가 인물의 역할(표정, 시선, 자세)을 대신해야 함.
- 크기 변화 = 감정의 강도 변화
- 굵기 변화 = 감정의 무게감
- 위치/정렬 = 감정의 방향성
- 색상 변화 = 감정의 온도

**Q3: 각 슬라이드의 감정을 색상/타이포/레이아웃으로 매핑하는 구체적 방법은?**
→ 아래 "슬라이드별 감정-비주얼 매핑" 표로 확정.

---

## 슬라이드별 감정-비주얼 매핑

> Cycle 8 색상 팔레트 + Cycle 9 타이포/레이아웃 통합 완성본

### Slide 1 — 훅/긴장 감정: "공감/답답함"

| 요소 | 현재 v6 | Cycle 9 확정 | 감정 효과 |
|------|--------|------------|---------|
| 색상 | 네이비 단색 | 네이비 `#1a2a3a` top→bottom (Cycle 8) | 긴장/압도감 |
| 헤드라인 타이포 | 미명세 | 64px+, weight 800, 크림 `#FAF8F3` | 선언적 충격 |
| 물음표 처리 | 묻힘 | 물음표를 별도 강조 (크기 130%, 색상 민트 힌트) | 독자에게 직접 질문하는 느낌 |
| 레이아웃 | 기어/화살표 이미지 | 중앙 정렬 + 상하 균형 여백 | 중립 주목 |
| 서브텍스트 | 있음 | weight 400, 18px, opacity 80% | 헤드라인 대비 부드러움 |
| 비주얼 오브젝트 | 기어 (감정 0) | **제거 또는 최소화** — 타이포만으로 충분 | — |

### Slide 2 — 고통/압박 감정: "긴급함/불안"

| 요소 | 현재 v6 | Cycle 9 확정 | 감정 효과 |
|------|--------|------------|---------|
| 색상 | 네이비 단색 | 크림 `#FAF8F3` flat (Cycle 8) | 직시/회피 불가 |
| 텍스트 색상 | 흰색 | `#2B2B2B` 거의 검정 (Cycle 8) | 무게감/진지함 |
| 타이포 크기 | 미명세 | 18~22px body, weight 500 | 평범한 현실 직시 |
| line-height | 기본값 | **1.2** (기본 1.5 대비 압축) | 숨막히는 밀도 |
| 카드 패딩 | 기본값 | **최소화** (상하 padding 50% 축소) | 공간 압박 |
| 레이아웃 | 미명세 | 좌측 정렬 + 상단 치우침 | 불균형/불안 |
| 비주얼 오브젝트 | 기어 (감정 0) | **제거** — 텍스트 밀도 자체가 비주얼 | — |

### Slide 3 — 해결/희망 감정: "희망/안도"

| 요소 | 현재 v6 | Cycle 9 확정 | 감정 효과 |
|------|--------|------------|---------|
| 색상 | 네이비 단색 | 딥그린 `#2D6A4F` + 민트 `#A8E6CF` 135deg (Cycle 8) | 성장/자연/생명력 |
| 헤드라인 타이포 | 미명세 | 56px+, weight 700, 크림 | 전환 선언 |
| 강조 텍스트 | 없음 | 핵심 단어에 민트 `#A8E6CF` 적용 | 해결책 시각 표지 |
| 카드 패딩 | 기본값 | **Slide 2 대비 3배 확장** (상하 padding 150%) | 숨 트이는 해방감 |
| 레이아웃 | 화살표 이미지 | 중앙 정렬 + 하단 여백 크게 | 안도/안착 |
| 앰버골드 어센트 | 없음 | `#D4A843` 10% (CTA 요소 예고, Cycle 8) | Color Foreshadowing 시작 |
| 비주얼 오브젝트 | 화살표 (감정 0) | **제거** — 여백 확장 자체가 해방의 비주얼 | — |

### Slide 4 — 신뢰/증거 감정: "신뢰/안정"

| 요소 | 현재 v6 | Cycle 9 확정 | 감정 효과 |
|------|--------|------------|---------|
| 색상 | 네이비 단색 | 따뜻한화이트 `#FDFAF5` + 골드 `#C9A84C` 20% radial soft (Cycle 8) | 전문성/권위 |
| 텍스트 색상 | 흰색 | 네이비 `#1a2a3a` (Cycle 8) | 신중함/안정 |
| 수치 표현 | 1,000만원 단독 | **대비 구조**: "0원 → 1,000만원" | 감정적 여정 |
| 수치 타이포 | 균일 크기 | "0원" 회색 24px weight400 / "→" 민트 28px / "1,000만원" 오렌지 56px weight800 | 3중 대비 감정 폭발 |
| 숫자 정렬 | 기본 | `font-variant-numeric: tabular-nums` | 냉철한 신뢰감 |
| 레이아웃 | 도시 스카이라인 (감정 0) | 그리드 정렬 + 균일 간격 | 구조/체계/신뢰 |
| 골드 어센트 | 없음 | `#C9A84C` 20% (Color Foreshadowing 강화) | 가치/품격 |
| 비주얼 오브젝트 | 도시 스카이라인 (감정 0) | **제거** — 수치 대비 구조가 신뢰의 비주얼 | — |

### Slide 5 — 긴급/행동 감정: "결단/행동"

| 요소 | 현재 v6 | Cycle 9 확정 | 감정 효과 |
|------|--------|------------|---------|
| 색상 | 추상 이미지 | 다크 `#0D1B2A` + 오렌지 `#F4821A` 40% radial center (Cycle 8) | 강렬/긴박 |
| CTA 버튼 타이포 | 미명세 | 48px+, weight 800, letter-spacing 0.05em 확장 | 행동 강조 |
| CTA 주변 여백 | 미명세 | **넉넉하게 확보** (버튼 상하 padding 32px+) | 클릭 유혹 |
| 배경 전체 | 추상 (감정 0) | 강렬한 다크+오렌지 → 배경 자체가 압박 | 배경의 압박 |
| 대비 구조 | 없음 | 배경 압박 + CTA 여유 = 시선 자동 집중 | 결단 강요 |
| Grain overlay | 없음 | `::before` pseudo-element, opacity 0.03~0.05 (Cycle 8) | 깊이/질감 |
| Kinetic 적용 | 없음 | CTA 텍스트 text-shadow 미세 적용 (Cycle 9 부분 채택) | 입체감/강조 |
| 비주얼 오브젝트 | 추상 (감정 0) | **완전 제거** — 오렌지+다크 배경이 유일한 비주얼 | — |

---

## 3 Whys 분석

**문제 진술**: v6 비주얼 5장이 카피의 감정 흐름을 전혀 지원하지 않는다.

### Why 1: 왜 비주얼이 감정을 지원하지 않는가?
→ **디자이너가 비주얼 요소를 "정보 설명" 도구로 사용했기 때문**

증거: 기어(메커니즘 설명), 화살표(방향 설명), 도시 스카이라인(조직 규모 설명) → 모두 개념 설명 목적. 어떤 감정도 의도하지 않음.

### Why 2: 왜 비주얼을 "정보 설명" 용도로만 사용했는가?
→ **브리프에 "무엇을 말해야 하는가"만 명세되어 있고, "어떤 감정을 느끼게 해야 하는가"가 없었기 때문**

증거: AD-CREATIVE-STANDARD의 5카드 감정 흐름 기준이 카피 작성 프로세스에서는 사용되었지만, 디자인 브리프에는 포함되지 않음. 디자이너는 카피만 받고 감정 목표 없이 작업.

### Why 3: 왜 감정 목표가 디자인 브리프에 포함되지 않았는가?
→ **카피와 비주얼 제작 프로세스가 분리된 구조적 문제. 감정 목표 명세가 카피 단계에서 종결되고 디자인으로 전달되는 채널이 없었기 때문**

증거: 미팅 기록에 감정 흐름이 반복 언급되지만 실제 디자인 산출물(v6)에 반영 안 됨. Cycle 8의 3 Whys 결론(색상 합의가 CSS에 미반영)과 동일한 패턴.

**근본 원인**: 감정 목표 명세가 카피 단계에서 끝나고 디자인 단계로 전달되지 않는 프로세스 단절.

**구조적 해결**: 디자인 브리프 템플릿에 슬라이드별 "감정 목표" 필드 신설 필수. 향후 모든 슬라이드 브리프: 카피 + 색상 목표 + 타이포 목표 + 레이아웃 목표 + 감정 목표를 동시 전달.

---

## 합의 사항

1. **비주얼 오브젝트 전면 교체 원칙**: 기어/화살표/스카이라인/추상 이미지 전량 제거. 색상+타이포+레이아웃만으로 감정 전달.

2. **Slide 2 압박 레이아웃**: `line-height: 1.2` + 카드 패딩 50% 축소. 텍스트 크기 유지로 모바일 가독성 보호.

3. **Slide 3 해방 레이아웃**: Slide 2 대비 패딩 3배 확장. 여백 확장이 "해결"의 시각적 표현.

4. **수치 대비 구조 필수**: Slide 4 "0원 → 1,000만원" — 3중 대비(크기+색상+굵기). 단독 수치 표기 금지.
   - "0원": 회색 `#9B9B9B`, 24px, weight 400
   - "→": 민트 `#A8E6CF`, 28px, weight 500
   - "1,000만원": 오렌지 `#F4821A`, 56px, weight 800

5. **`font-variant-numeric: tabular-nums`**: Slide 4 숫자 데이터에 적용. 기존 폰트 시스템 유지.

6. **Slide 5 CTA 공간 원칙**: "배경 압박(강렬한 오렌지+다크) + CTA 여유(버튼 주변 32px+ 여백)" 대비 구조. CTA 주변 여백 축소 안 기각.

7. **Kinetic Typography Illusion**: Slide 5 CTA 텍스트에만 부분 적용 (text-shadow 미세 + letter-spacing 0.05em). 전면 적용 기각.

8. **인물 없는 스토리텔링 가능 조건 확정**: 크기 = 강도, 굵기 = 무게감, 위치/정렬 = 방향성, 색상 = 온도. 이 4요소가 인물의 표정/자세 역할 대체.

9. **CSS 여백 수치 명세화 필수**: "여백 3배" 같은 상대 표현 금지. 구체적 padding/margin 수치로 명세 (Cycle 8 미반영 사고 방지).

10. **디자인 브리프 템플릿 개선**: 슬라이드별 "감정 목표" 필드 신설. 카피+색상+타이포+레이아웃+감정 목표 동시 전달 구조로 프로세스 개선. 3 Whys 근본 원인 해소.

### 기각 결정 기록
- **Slide 2 텍스트 크기 증가로 밀도 연출 (아마테라스 초안)**: 모바일 가독성 붕괴 위험. `line-height` 압축 + 패딩 축소로 대체.
- **모노스페이스 폰트 Slide 4 적용 (아마테라스 초안)**: 기존 폰트 시스템 충돌 위험. `tabular-nums`로 대체.
- **Slide 5 CTA 주변 여백 축소 (아프로디테 초안)**: UX 연구 반증. 배경 압박 + CTA 여유 대비 구조로 대체.
- **Kinetic Typography 전면 적용 (로키 비관습 대안)**: v6 범위 초과, 개발 복잡도. Slide 5 CTA 부분 적용만 채택.

---

## Cycle 8 + Cycle 9 통합 비주얼 규칙서 요약

> 이 표가 디자인 브리프에 첨부되어야 함

| 슬라이드 | 감정 목표 | 배경색 | line-height | 패딩 | 헤드라인 크기/weight | 특이사항 |
|---------|---------|--------|------------|------|------------------|---------|
| S1 | 훅/긴장 | 네이비 `#1a2a3a` top→bottom | 1.5 | 기본 | 64px / 800 | 물음표 강조 크기 130% |
| S2 | 고통/압박 | 크림 `#FAF8F3` flat | **1.2** | **50% 축소** | 18~22px / 500 | 좌측 정렬 + 상단 치우침 |
| S3 | 해결/해방 | 딥그린 `#2D6A4F` 135deg | 1.6 | **3배 확장** | 56px / 700 | 핵심 단어 민트 강조 |
| S4 | 신뢰/증거 | 따뜻한화이트 `#FDFAF5` radial | 1.5 | 기본 | 수치 대비 구조 | 0원→1,000만원 3중 대비 |
| S5 | 긴급/행동 | 다크 `#0D1B2A` radial center | 1.4 | CTA 32px+ | 48px / 800 | Grain overlay + CTA letter-spacing 0.05em |

---

## 미해결 과제

1. **CSS 패딩 수치 정확화**: "50% 축소", "3배 확장" 표현을 px 단위로 확정 필요 — 개발팀 기본값 확인 후
2. **"0원 → 1,000만원" 카피 확인**: Slide 4 실제 카피에서 이 구조 사용 여부 확인. 현재 카피 내용과 대비 구조 정렬 필요
3. **모바일 Slide 2 압박 효과 검증**: `line-height: 1.2` + 패딩 축소가 실제 모바일 화면에서 감정 전달되는지 사용자 테스트
4. **Slide 3 여백 확장과 그린 배경 조화**: 딥그린 배경에서 넓은 여백이 "고급스러움"이 아닌 "해방감"으로 읽히는지 확인
5. **디자인 브리프 템플릿 신규 작성**: 감정 목표 필드 포함 — 작성 주체 및 일정 미정
6. **Color Foreshadowing A/B 테스트**: Cycle 8 미해결 항목 — 채도 수치 검증 기준 미정 [OPEN]

---

## 다음 단계

### 합의 사항 → 3문서 매핑

| 항목 | 반영 문서 |
|------|---------|
| 슬라이드별 감정-비주얼 매핑 완성표 | 계획서 — 범위/포함 |
| 비주얼 오브젝트 제거 원칙 | 계획서 — 범위/제외 |
| 수치 3중 대비 구조 (0원→1,000만원) | 맥락노트 — 결정 근거 |
| 기각 대안 4건 + 사유 | 맥락노트 — 결정 근거 |
| 3 Whys 근본 원인 (프로세스 단절) | 맥락노트 — 주의사항 |
| CSS 수치 명세, tabular-nums, CTA 패딩 | 체크리스트 — Phase별 항목 |
| 디자인 브리프 템플릿 신설 | 체크리스트 — 프로세스 개선 항목 |
| [OPEN] 항목 6건 | 체크리스트 — [미해결] 태그 |

---

*[아누/Agent미팅] [2026-03-28] [memory/meetings/task-1199.1-cycle9.md] [신규생성] [감정/스토리텔링 전략 미팅 Cycle 9 결과 기록]*