# Mobile Voice UX Deep Dive

> **일시**: 2026-02-18 01:55
> **참석자**: PM, UX, Frontend, Backend, Data, Planner, QA, Legal, Reflect (9 Agents)
> **안건/주제**: 모바일 환경에서의 음성 기능 UX/UI 개선 심층 토론

---

## 1. 📢 Agenda
*   **User Issue**: "모바일에서 음성 기능을 바로 쓰기엔 UX가 어색하다."
*   **Goal**: 현재 UX의 문제점을 "Deep"하게 분석하고, 모바일-First 관점에서 개선안 도출.

---

## 2. 🗣️ Discussion Log

### 2.1. 현황 분석 (Pain Points)

*   **PM**: 자, 사용자가 "어색하다"고 느낀 지점을 파보자. 현재 흐름이 어떻게 되지?
*   **UX**: 현재 모바일 플로우는 이렇습니다.
    1.  햄버거 메뉴나 하단 버튼을 누름.
    2.  사이드 패널이 *전체 화면* (또는 80%)을 덮으며 열림.
    3.  거기서 "녹음" 버튼이나 "AI" 버튼을 또 찾아야 함.
    4.  음성 명령(`useVoiceCommand`)은 배경에서 돌지만, *내가 지금 듣고 있다*는 피드백(Visual Cue)이 화면 구석에 작게 있거나 없음.
*   **Frontend**: 맞습니다. `AISidepanel`이 데스크탑에서는 '사이드'지만, 모바일에서는 사실상 'Modal'입니다. 컨텍스트(본문)를 가려버리죠. 음성 명령을 하면서 본문을 못 보는 게 가장 큰 "어색함"일 겁니다.
*   **QA**: 테스트해보면, "요약해줘"라고 말햇을 때, 패널이 스윽 열리면서 결과가 나오는데, 이게 모바일에서는 딜레이가 더 크게 느껴집니다. 그리고 "듣고 있나?" 확신이 안 서서 자꾸 화면을 확인하게 돼요.
*   **Legal**: `RecordingConsentModal`도 문제입니다. "녹취 시작" 하면 모달이 뜨는데, 모바일에서 체크박스 두 개 누르고 "확인" 누르기가 번거로워요. 법적으론 필수지만, UX적으론 장벽입니다.
*   **Data**: 실시간 `useSpeechRecognition` 데이터(Transcript)가 `AIWhispers` 컴포넌트에 표시되는데, 이게 사이드 패널 *안에* 숨어있습니다. 패널을 열기 전엔 내가 무슨 말을 하는지 안 보이죠.

### 2.2. 개선 아이디어 (Brainstorming)

*   **Planner**: 그럼 "Always-on" 느낌을 줘야겠네. Siri나 Google Assistant처럼.
*   **UX**: **하단 플로팅 바 (Floating Bottom Bar)** 형태가 적합합니다.
    *   평소: 얇은 바(Bar) 형태 or FAB(Floating Action Button).
    *   활성 시: 하단에서 위로 살짝 올라오는 **Bottom Sheet** (본문 안 가림).
    *   피드백: 파형(Waveform)이나 텍스트가 실시간으로 흐르는 UI.
*   **Frontend**: 기술적으론 `AISidepanel`을 모바일에서만 `BottomSheet` UI로 변경하는 게 좋겠어요. `framer-motion` 쓰면 부드럽게 구현 가능합니다.
*   **Backend**: 서버 부하는 괜찮은데, 모바일 네트워크 불안정을 고려해서 Optimistic UI(선반영)가 필요해요. "요약 중..." 같은 상태 메시지가 명확해야 합니다.
*   **Reflect**: 사용자는 "자연스러운 대화"를 원해요. 지금은 "명령 -> 대기 -> 결과"의 턴 방식인데, **스트리밍(Streaming)** 처럼 글자가 타닥타닥 찍히는 연출이 있으면 덜 어색할 겁니다. (Gemini 2.5 Flash가 빠르니 가능)
*   **Legal**: 녹취 동의는... "최초 1회 동의 후 설정 저장" 옵션을 주면 어떨까요?
    *   **QA**: 안 됩니다. 통신비밀보호법은 "매 대화"마다 동의가 원칙이라 리스크가 큽니다.
    *   **UX**: 그럼 모달 대신 **슬라이드 투 언락(Slide to Confirm)** 같은 제스처로 빠르게 동의하게 하죠. 체크박스 2개보다 훨씬 빠릅니다.

### 2.3. 구체적 솔루션 (Action Items)

1.  **Mobile AI Interceptor (UI)**
    *   사이드 패널 대신, 모바일에서는 **하단 오버레이 (Floating AI Bar)** 사용.
    *   음성 감지 시 자동으로 하단 바 활성화 (파형 애니메이션).
2.  **Streaming Response**
    *   결과를 한 번에 띡 보여주는 게 아니라, 타자기 효과로 실시간성을 강조.
3.  **Command Feedback**
    *   사용자가 말한 명령("요약해줘")을 화면 중앙 하단에 Toast 메시지처럼 즉시 표시. ("알겠습니다, 요약할게요")
4.  **Gesture Consent**
    *   녹취 동의 과정을 간소화 (UI적으로).

---

## 3. 📝 Conclusion & Next Steps

*   **PM**: 좋습니다. "사이드 패널"을 모바일에서 "하단 AI 바"로 진화시키는 방향으로 갑시다. 이게 '어색함'을 없애는 핵심 키입니다.
*   **Priority**:
    1.  **Mobile UI 분기**: `AISidepanel` vs `MobileAIBar`.
    2.  **Visual Feedback**: 음성 인식 시각화 강화.

이 내용을 사용자에게 제안하고 승인받죠.