Dansori_EQ/docs/CHARACTER_UI_INTEGRATION.md

# CHARACTER UI INTEGRATION — 마스코트 UI 결합 계획

> 목표: `docs/Image/`의 두 마스코트(민트 여캐 "소리" · 시안 남캐 "단이", `BRAND_CHARACTERS.md`)를
> **실제 앱(WPF, 다크/Mica)에 역동적으로 결합**한다. 이 문서는 ①현재 자산 평가 ②UI 배치 매핑
> ③파일 포맷 결정(GIF/동영상/Lottie/PNG) ④이미지 생성 AI 의뢰 컨셉 목록을 정리한다.

---

## 1. 현재 자산 평가

`docs/Image/`에는 **완성도 높은 "전체 화면 장면"**이 이미 있다:
- 듀오 브랜드 아트, 온보딩 STEP 1~3, 로딩("소리 튜닝 중…"), 성공("튜닝 완료"), 바이패스("EQ 바이패스").
- 각 장면의 **wpf_gifs**(2~2.5MB) / **video_like_gifs**(2.8~3.4MB, 더 부드러움) 애니메이션 버전 존재.

### 좋은 점
- 캐릭터 디자인·컬러·분위기가 브랜드와 완벽히 일치. **스플래시/스토어/마케팅 비주얼로 즉시 사용 가능.**

### 인앱 사용의 문제 (그대로는 못 얹음)
1. **텍스트가 그림에 구워짐**(한글 UI 문구·STEP 라벨·버튼). → 현지화 불가, DPI 스케일 시 흐림,
   `TYPOGRAPHY.md`(최소 12·최대 24) 규칙과 폰트 불일치. **텍스트는 WPF가 실시간 렌더해야 함.**
2. **불투명 전체 배경** → 다크/Mica 위에 겹쳐 쓸 수 없음. 레이아웃(1400×860 가로형)과 안 맞음(세로형 풀블리드).
3. **장면 통짜** → 캐릭터만 분리 불가. 실제 앱은 **캐릭터(투명 배경) + 라이브 UI**로 합성해야 함.
4. **GIF 한계**: 다크 그라데이션에서 색밴딩, 알파(투명) 불가, 용량 큼.

> 결론: 현재 장면들은 **스플래시/마케팅 전용**으로 보관. 인앱용은 **"캐릭터만 투명 배경"**으로 재의뢰한다.

---

## 2. UI 배치 매핑 (실제 앱 화면 기준)

| # | 앱 위치 | 등장 | 연출 | 에셋 형태 |
|---|---------|------|------|-----------|
| A | **스플래시 / About** | 듀오(백투백) | 등장 페이드+음파 루프 | (기존 장면 재사용 OK) 또는 투명 듀오 PNG |
| B | **온보딩 / 도움말 드로어(3단계)** | 소리+단이 반신 | 스텝별 슬라이드 인 | **투명 PNG 컷아웃** + 라이브 WPF 텍스트 |
| C | **AI 프롬프트 처리중**("AI가 듣는 중") | 소리(손끝 음파) | 손끝 음파 **루프 애니** | **Lottie** (소형, 코너) |
| D | **AI 응답 말풍선 아바타** | 소리 얼굴 | 정지/살짝 눈깜빡 | **원형 투명 PNG** (표정 2~3종) |
| E | **로딩**(AutoEQ 다운/EQ 적용) | 소리 or 단이 소형 | 헤드폰 이퀄 펄스 루프 | **Lottie** + 라이브 진행바 |
| F | **성공 토스트**(EQ 적용/튜닝 완료) | 단이 엄지척 | 팝인+체크 | **투명 PNG**(+WPF 스토리보드 팝) |
| G | **바이패스(EQ OFF) 상태** | 둘 헤드폰 벗음 | 상태 전환 | **투명 PNG**(활성/바이패스 2컷) |
| H | **빈 상태**(프로파일/프리셋 없음) | 소리 안내 제스처 | 정지 | **투명 PNG** |
| I | **헤더/사이드바 워터마크** | 로고 모노그램 | 정지 | **SVG/PNG** |

> 핵심 원칙: **캐릭터는 이미지, 텍스트·패널·그래프·버튼·진행바는 전부 WPF 라이브 요소.**
> 그림 속 홀로그램 EQ/말풍선은 "분위기"일 뿐, 실제 조작 UI는 우리 컨트롤이 담당.

---

## 3. 파일 포맷 결정 (GIF vs 동영상 vs Lottie vs PNG)

### 결론 요약
| 용도 | 권장 포맷 | 이유 |
|------|-----------|------|
| 정지 캐릭터(아바타·빈상태·온보딩 컷·성공/바이패스) | **투명 PNG-24 (알파)** | 선명, 가벼움, DPI별 @1x/@1.5x/@2x |
| 루프 마이크로 애니(AI 처리중·로딩·음파 펄스) | **Lottie (.json 벡터)** | 초경량, 벡터라 무한 선명, 색 틴트·루프 자연스러움 |
| 화려한 래스터 루프가 꼭 필요할 때 | **애니메이션 WebP / APNG** | 알파 지원(투명), GIF보다 고화질·소용량 |
| 불투명 전체화면 스플래시/인트로(1회) | **MP4/WebM (불투명)** | 리치하지만 알파 오버레이엔 부적합 |
| ❌ 지양 | **GIF** | 256색 밴딩(다크 그라데이션에 치명), 알파 없음, 용량 큼 |

### "GIF로? 동영상으로?" 직접 답
- **둘 다 최적이 아님.** 실제로 앱에 **역동적으로** 얹는 최선은:
  **정지 투명 PNG + WPF 자체 애니메이션(Storyboard: 페이드/살짝 떠오름/스케일/글로우 펄스)** 이
  90%를 커버한다. 추가 에셋·라이브러리 없이 "살아있는" 느낌을 낸다.
- 더 리치한 **손끝 음파/헤드폰 이퀄 펄스** 같은 반복 모션은 **Lottie**로 별도 제작(작고 선명·테마 틴트 가능).
- **동영상(MP4)** 은 **불투명 스플래시** 한 곳에만. WPF `MediaElement`는 **알파 채널 영상 지원이 빈약**해
  캐릭터 오버레이용으로는 비추천.
- **GIF는 쓰지 말 것**(특히 이 다크·네온 그라데이션에서 밴딩이 눈에 띔). 굳이 래스터 루프면 **WebP/APNG.**

### WPF 재생 방법 / 필요 패키지 (메모)
- **투명 PNG**: 기본 `Image` 컨트롤. 추가 패키지 불필요.
- **WPF 스토리보드**: 기본 제공(`DoubleAnimation`, `RenderTransform`). 추가 불필요.
- **Lottie**: WPF는 기본 미지원 → 라이브러리 필요. 후보: **`SkiaSharp.Skottie`**(Skia 기반, 유지보수 양호) /
  `LottieSharp`. dev 세션에서 하나 채택해 PoC.
- **애니메이션 GIF/WebP**: 기본 미지원 → `WpfAnimatedGif`(GIF) / WebP는 별도 디코더. (지양하므로 후순위)
- **성능**: 캐릭터는 큰 이미지이므로 **표시 크기에 맞춘 다운스케일본**을 쓰고, 안 보일 땐 언로드.

---

## 4. 이미지 생성 AI 의뢰 컨셉 목록

> ⚠️ **이미지 생성 AI는 "정지 이미지"만 만든다.** 애니메이션(Lottie/영상)은 별도 모션 작업.
> 따라서 AI에는 **① 일관성 고정용 캐릭터 시트 → ② 포즈/표정별 투명 배경 컷** 순으로 의뢰한다.
> 프롬프트 베이스는 `BRAND_CHARACTERS.md` §7. 공통 조건: **transparent background, character only, no text,
> no UI panels, consistent same character, high-res ≥2048px.**

### STEP 1 — 일관성 고정 (먼저)
- **캐릭터 시트(각 1장)**: 정면·3/4·측면 턴어라운드 + 표정 6종(기본/미소/웃음/집중/윙크/놀람).
  → 이걸 레퍼런스로 걸어 이후 컷의 **동일 인물** 유지.

### STEP 2 — 배치용 컷 (투명 배경)
**여캐 "소리"**
- `sori_idle` 반신 기본(살짝 미소) — 온보딩/빈상태
- `sori_present` 손바닥 펴고 손끝 음파 — AI 제안/처리중(C의 정지 베이스)
- `sori_happy` 두 손 하이(기쁨) — 성공
- `sori_face_round` 원형 얼굴 크롭 표정 3종 — AI 아바타(D)
- `sori_headphones_off` 헤드폰 벗는 컷 — 바이패스(G)

**남캐 "단이"**
- `dan_idle` 반신 기본(자신감 미소) — 온보딩
- `dan_tune` 홀로그램 슬라이더 조작(패널은 뺀 손동작만) — 튜닝/로딩(E 베이스)
- `dan_thumbsup` 엄지척 — 성공(F)
- `dan_headphones_off` 헤드폰 벗는 컷 — 바이패스(G)

**듀오**
- `duo_backtoback` 백투백 대표 포즈(투명) — 스플래시/About(A)

### STEP 3 — (선택) 모션
- C/E의 손끝 음파·헤드폰 펄스는 위 정지 컷을 바탕으로 **Lottie 재제작**(모션 디자이너 또는 image-to-video 툴).
- 저비용 대안: 정지 PNG + **WPF 스토리보드**(글로우 펄스/부유)만으로 시작.

### 규격 (전달용)
- 배경 투명(알파) PNG, 캐릭터만, **텍스트/로고/패널 없음**.
- 캔버스 여백 최소, 캐릭터 꽉 차게. 세로 반신 ~2048px, 원형 아바타 ~1024px.
- 3종 DPI 다운스케일본(@1x/@1.5x/@2x) 또는 원본 1장(앱에서 다운스케일).
- 컬러: 소리=민트 `#38E0C4`, 단이=시안 `#4CC2FF`, 라인 선명.

---

## 5. 제작 우선순위 / 로드맵
1. **캐릭터 시트로 일관성 고정**(STEP 1) — 가장 먼저. (배치마다 얼굴 다른 문제 해소)
2. **투명 PNG 핵심 5컷**: `sori_face_round`(아바타) · `sori_present` · `dan_thumbsup` · `duo_backtoback` · 바이패스 2컷.
3. **WPF 결합 PoC**: `Image` + 스토리보드로 온보딩/아바타/성공 토스트에 정적+모션 배선.
4. **Lottie 도입 검토**(SkiaSharp.Skottie) → AI 처리중·로딩 루프.
5. 스플래시는 기존 듀오 장면(불투명) 재사용 가능.

## 6. 열린 결정
- [x] **캐릭터 이름 확정**: 여 **이소리(Lee Sori)** · 남 **이단(Lee Dan)**. (이미지 직접 노출은 선택)
- [x] `Girl Character.jpg` = **이소리 "동양풍 얼굴" 참고용**(복장/헤어컬러 참고 아님).
- [x] **애니메이션 범위 확정: "최대한 Lottie"**.
      → 캐릭터 = **파츠 컷아웃 리깅으로 Lottie화**(AI가 만든 투명 파츠 사용), 모션 FX(음파·EQ바·파티클·로딩) =
        **순수 벡터 Lottie**. PNG+스토리보드는 **폴백/저부하 화면**에만 제한적으로.
      → 이미지 생성 AI 요청문: **`docs/IMAGE_GEN_REQUESTS.md`**.
      → WPF Lottie 재생 라이브러리 PoC 필요(후보: **SkiaSharp.Skottie** / LottieSharp).

## 6-B. Lottie로 "직접(벡터)" 만들 모션 FX (이미지 생성 AI 아님)
> 아래는 이미지 생성 AI가 아니라 **AE/Bodymovin·Figma·LottieLab로 벡터 제작**(또는 무료 Lottie 에셋 커스터마이즈).
> 캐릭터 컷아웃 뒤/주변에 합성해 "캐릭터가 소리를 다루는" 장면을 완성한다.
- `fx_soundwave_loop` : 손끝에서 퍼지는 **음파 링/파형**(민트→시안) 무한 루프.
- `fx_eq_bars_loop` : 5~7개 **EQ 막대**가 위아래로 튀는 루프(로딩·처리중).
- `fx_particles_loop` : 반짝이는 별/음표 파티클 상승 루프.
- `fx_glow_ring_pulse` : 캐릭터 뒤 **글로우 링** 맥동(성공/강조).
- `fx_loading_progress` : 이퀄라이저형 진행 인디케이터.
- `fx_check_success` : 체크마크 그려지는 성공 애니.

## 7. Lottie vs PNG + WPF 스토리보드 (의사결정용 비교)
| 항목 | 투명 PNG + WPF 스토리보드 | Lottie (.json 벡터) |
|------|--------------------------|---------------------|
| 정체 | 정지 그림 + WPF가 위치/투명도/크기/회전만 애니 | 디자이너가 만든 **그림 자체가 움직이는** 벡터 애니 |
| 표현력 | 페이드·부유·확대·글로우·흔들림 등 **단순 트랜스폼** | 팔 움직임·음파 퍼짐·표정 변화 등 **본격 모션** |
| 제작 | 개발자가 XAML만(추가 그림 불필요) | **모션 디자이너/툴 필요**(AE→Bodymovin 등), 별도 제작 |
| 앱 무게 | 매우 가벼움(기본 기능) | 라이브러리 필요(SkiaSharp.Skottie 등) + json |
| 선명도 | 이미지라 DPI별 다운스케일 필요 | 벡터라 **무한 선명**, 색 틴트 쉬움 |
| 적합 | 아바타·온보딩 컷·성공 토스트·빈상태 | AI "듣는 중" 음파·로딩 이퀄 펄스 등 **주목 루프** |
| 비용/속도 | 낮음/빠름(바로 가능) | 높음/느림(에셋 제작 선행) |

> 권장: **PNG+스토리보드로 먼저 전체 배선** → 눈에 띄어야 할 1~2곳만 **Lottie로 승격**.