Dansori_EQ/docs/CHARACTER_UI_INTEGRATION.md

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

⚠️ 참조 자산 정리 알림 (2026-07-04): 이 문서가 인용하던 원본 자산 — docs/Image/(ChatGPT 장면 이미지·GIF), BRAND_CHARACTERS.md, CHARACTER_PROFILES.md, IMAGE_GEN_*.md, Girl Character.jpg — 은 저장소 정리 때 삭제되었다. 이 문서는 UI 결합 설계/의사결정 참고용으로만 유지하며, 아래에 나오는 해당 파일 경로는 더 이상 존재하지 않는다. (이소리 이미지 생성 의뢰서는 현재 D:\Project\Work_Claude\LeeSori_Live2D\에 별도 보관.)

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

---

1. 현재 자산 평가

docs/Image/에는 **완성도 높은 "전체 화면 장면"**이 이미 있다:

• 듀오 브랜드 아트, 온보딩 STEP 1~3, 로딩("소리 튜닝 중…"), 성공("튜닝 완료"), 바이패스("EQ 바이패스").
• 각 장면의 wpf_gifs(22.5MB) / video_like_gifs(2.83.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. 열린 결정

• 캐릭터 이름 확정: 여 이소리(Lee Sori) · 남 이단(Lee Dan). (이미지 직접 노출은 선택)
• Girl Character.jpg = 이소리 "동양풍 얼굴" 참고용(복장/헤어컬러 참고 아님).
• 애니메이션 범위 확정: "최대한 Lottie". → 캐릭터 = 파츠 컷아웃 리깅으로 Lottie화(AI가 만든 투명 파츠 사용), 모션 FX(음파·EQ바·파티클·로딩) = 순수 벡터 Lottie. PNG+스토리보드는 폴백/저부하 화면에만 제한적으로. → 이미지 생성 AI 요청문: (구 docs/IMAGE_GEN_REQUESTS.md는 삭제됨 → 현재 이소리 의뢰서는 D:\Project\Work_Claude\LeeSori_Live2D\ 참조). → 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로 승격.