d3ro-voice/docs/v3/00-mobile-master-plan.md

# D3RO-VOICE V3 — 모바일 앱 마스터 플랜

> React Native (Expo) 기반 iOS/Android 동시 출시
> 데스크톱↔웹↔모바일 완전 동기화 + D3RO 인스트루먼트 미학

---

## 1. 전략 결정 요약

| 항목 | 결정 |
|------|------|
| **타겟 사용자** | 올인원 — 비즈니스(회의), 교육(강의), 일반(메모) |
| **기술 스택** | React Native (Expo 51+) + TypeScript strict |
| **STT 엔진** | 클라우드 전용 — Google Cloud STT via Edge Function |
| **LLM** | Anthropic Claude API via Edge Function |
| **오디오 플로우** | 로컬 녹음 → 완료 후 업로드 → 서버 전사 → AI 후처리 |
| **데이터** | Supabase PostgreSQL (SSOT) — 로컬 캐시 없음 |
| **동기화** | 전체 동기화 — 히스토리, 회의록, 설정, 사전, RAG |
| **디자인** | D3RO 인스트루먼트 미학 유지 (packages/ui-native) |
| **수익** | 기존 Free/Pro/Pro+ 크로스 플랫폼 구독 통합 |
| **출시** | iOS + Android 동시 (Expo EAS Build) |
| **팀 기능** | 초기부터 포함 |
| **모바일 특화** | 백그라운드 녹음 + 푸시 알림 + 홈 위젯 |
| **앱 이름** | D3RO Voice (데스크톱/웹과 통일) |
| **출시 지역** | 글로벌 동시 출시 (12개 언어) |
| **최소 OS** | iOS 16+ / Android 12+ |
| **화자 구분** | 필수 — 초기부터 (서버사이드 pyannote) |
| **오디오 보관** | 클라우드 영구 저장 (Supabase Storage) |
| **편집** | 전사 원본 + AI 요약 + 회의록 모바일에서 전체 편집 가능 |
| **사용 시나리오** | 회의/강의/음성메모 모두 동등 우선순위 |
| **개발 방식** | 바이브코딩 (Claude Code) |

---

## 2. 현재 상태 (V2-6 MVP 잔존물)

apps/mobile에 Expo 스켈레톤이 존재:

| 항목 | 상태 | 비고 |
|------|------|------|
| 프로젝트 설정 | ✅ 완료 | Expo 51, expo-av, expo-notifications |
| OAuth 로그인 | ✅ 완료 | Google + GitHub |
| 녹음→STT 파이프라인 | ✅ 완료 | expo-av → stt-proxy Edge Function |
| 회의 목록 | ⚠️ 60% | FlatList 조회만, 상세 화면 없음 |
| 프로필/로그아웃 | ✅ 완료 | |
| 푸시 알림 | ⚠️ 40% | 토큰 등록만, 수신 미구현 |
| D3RO 디자인 | ❌ 미적용 | 기본 RN 스타일만 사용중 |
| 팀 기능 | ❌ 없음 | |
| AI 후처리 | ❌ 없음 | STT만 있고 요약/회의록 없음 |
| 오프라인 캐시 | ❌ 없음 | |

---

## 3. 핵심 아키텍처

### 3.1 오디오 파이프라인 (핵심 수익 기능)

```
[모바일 앱]
  마이크 (expo-av) → 로컬 녹음 파일 (.m4a)
       ↓ 녹음 완료
  Supabase Storage 업로드 (audio/{user_id}/{session_id}.m4a)
       ↓ 업로드 완료
  Edge Function: stt-proxy
       → Google Cloud STT (audio → transcript segments)
       → 결과를 transcripts 테이블에 저장
       ↓ 전사 완료
  Edge Function: ai-process
       → Claude API (transcript → summary/minutes/action-items)
       → 결과를 meetings 테이블에 저장
       ↓ 처리 완료
  푸시 알림 → 모바일에 "전사 완료" 알림
  모바일에서 결과 조회 + 편집
```

### 3.2 실시간 회의 모드 (장시간 녹음)

```
[모바일 앱 — 백그라운드 녹음]
  마이크 → expo-av (foreground service / background audio)
       ↓ N분 단위 청크 분할
  청크별 업로드 → stt-proxy → 부분 전사 결과
       ↓ Supabase Realtime
  모바일 UI에 실시간 전사 텍스트 표시
       ↓ 녹음 종료
  전체 병합 → AI 후처리 → 회의록 생성
```

### 3.3 AI 음성 대화

```
[모바일 앱]
  마이크 → 짧은 녹음 (1~30초)
       ↓
  stt-proxy → 텍스트
       ↓
  llm-proxy → Claude 응답 (스트리밍)
       ↓
  tts-proxy → 음성 합성 (Google Cloud TTS / Edge TTS)
       ↓
  expo-av → 재생
```

### 3.4 데이터 동기화

```
Supabase PostgreSQL (SSOT)
  ├── meetings (회의 세션)
  ├── meeting_documents (생성 문서: 회의록/요약/액션아이템)
  ├── transcripts (전사 세그먼트)
  ├── history (전사 히스토리)
  ├── dictionary (커스텀 사전)
  ├── user_settings (설정 동기화)
  ├── rag_documents / rag_chunks (RAG)
  ├── teams / team_members (팀)
  └── subscriptions (구독)

모바일은 Supabase 직접 쿼리 (로컬 DB 없음)
데스크톱 SQLite ↔ Supabase 양방향 동기화 (기존 CloudSyncService)
웹은 Supabase 직접 쿼리 (기존 apps/web)

→ 어디서 녹음하든 모든 플랫폼에서 조회/편집 가능
```

---

## 4. Phase 로드맵

> 바이브코딩(Claude Code) 기준 일정 산정
> 각 Phase는 독립 커밋 + 테스트 가능 단위

### Phase M-1: 프로젝트 기반 정비 (1~2일)

**목표:** 기존 MVP 스켈레톤을 정상 구동 가능한 상태로 정비

- [ ] Expo SDK 버전 확인 및 의존성 정리
- [ ] Supabase 환경변수 실제 값 연결 (placeholder 제거)
- [ ] app.config.ts로 전환 (환경변수 관리)
- [ ] @d3ro/ui-native 패키지 연결 검증
- [ ] @d3ro/core, @d3ro/i18n, @d3ro/api-client 연결 검증
- [ ] iOS 시뮬레이터 + Android 에뮬레이터 빌드 확인
- [ ] 기존 record.tsx 녹음→STT 파이프라인 동작 확인

**산출물:** 모바일 앱이 실제 Supabase에 연결되어 녹음→전사 가능

---

### Phase M-2: D3RO 디자인 시스템 적용 (2~3일)

**목표:** packages/ui-native 완성 + 전체 앱에 D3RO 인스트루먼트 미학 적용

- [ ] ui-native 테마 토큰 정의 (d3roPalette, d3roShadow, d3roRadius, d3roTypo)
- [ ] 핵심 DS 컴포넌트 구현:
  - MetalCard (금속 질감 카드)
  - PhosphorText (13가지 변형 — 녹색 형광 텍스트)
  - Led (상태 LED 인디케이터)
  - PhysicalButton (물리 버튼 느낌)
  - ScreenPanel (CRT 스크린 패널)
  - WaveBars (9개 웨이브 바 애니메이션)
- [ ] 공통 레이아웃 컴포넌트 (AppShell, TabBar, Header)
- [ ] 로그인 화면 D3RO 디자인 적용
- [ ] 탭 네비게이션 D3RO 스타일 적용
- [ ] i18n 연결 (t() 함수, 12개 locale)
- [ ] 다크 모드 전용 (D3RO 미학은 어두운 테마)

**산출물:** 앱 전체가 D3RO 인스트루먼트 미학으로 통일

---

### Phase M-3: 녹음→전사→요약 핵심 플로우 (3~4일)

**목표:** 핵심 수익 기능 완성 — 녹음부터 AI 요약까지 풀 파이프라인

- [ ] 녹음 화면 고도화:
  - WaveBars 실시간 오디오 레벨 시각화
  - 녹음 시간 표시 (타이머)
  - 일시정지/재개 지원
  - 녹음 품질 설정 (고/중/저)
- [ ] 오디오 파일 Supabase Storage 업로드:
  - 진행률 표시
  - 네트워크 끊김 시 재시도
  - 백그라운드 업로드 (앱 나가도 계속)
- [ ] Edge Function 확장:
  - stt-proxy: 긴 오디오 분할 처리 (15초 단위)
  - diarize-proxy: pyannote 기반 화자 구분 (서버사이드)
  - ai-process: 전사 결과 → Claude API → 요약/키포인트/액션아이템
  - 처리 상태 업데이트 (Supabase Realtime → 모바일 구독)
- [ ] 오디오 원본 클라우드 보관:
  - Supabase Storage에 영구 저장
  - 모든 기기에서 재생 가능
- [ ] 결과 화면:
  - 전사 원본 텍스트 뷰어 (화자별 색상 구분)
  - AI 요약 (구조화된 마크다운)
  - 전사 원본 + 요약 + 회의록 전체 편집 가능
  - 복사/공유 기능
- [ ] 히스토리 목록 (최근 전사 기록)
- [ ] 푸시 알림: 전사 완료 시 알림

**산출물:** 녹음 → 업로드 → 전사 → AI 요약 → 알림 → 결과 조회 풀 플로우

---

### Phase M-4: 회의 모드 (3~4일)

**목표:** 장시간 회의 녹음 + 실시간 전사 + 회의록 자동 생성

- [ ] 회의 세션 생성/관리:
  - 회의 제목, 참석자 입력
  - 회의 시작/종료
  - 회의 중 메모 추가
- [ ] 장시간 녹음 엔진:
  - 백그라운드 녹음 (iOS: background audio mode, Android: foreground service)
  - N분 단위 청크 분할 + 순차 업로드
  - 녹음 중 배터리/저장공간 모니터링
- [ ] 실시간 전사 표시:
  - 청크별 전사 결과를 Supabase Realtime으로 수신
  - 스크롤 가능한 전사 타임라인
  - 타임스탬프 표시
- [ ] 회의록 자동 생성:
  - 회의 종료 후 전체 전사 병합
  - Claude API로 회의록 생성 (요약/결정사항/액션아이템/참석자별 발언)
  - 다중 문서 템플릿 (회의록/요약/이메일 초안)
- [ ] 회의 상세 화면:
  - 탭: 전사 원본 / 회의록 / 문서
  - 마크다운 렌더러 + 편집기
  - 내보내기 (PDF/DOCX/클립보드)
- [ ] 회의 목록 고도화 (검색, 필터, 정렬)

**산출물:** 완전한 회의 모드 — 녹음부터 회의록 생성까지

---

### Phase M-5: AI 음성 대화 (2~3일)

**목표:** ChatGPT Voice 스타일 음성 AI 대화 기능

- [ ] 대화 UI:
  - 음성 대화 모드 화면 (전용)
  - 말하기 버튼 (Push-to-talk) + 자동 감지 모드
  - 대화 히스토리 표시 (말풍선)
  - AI 응답 중 WaveBars 애니메이션
- [ ] 음성 파이프라인:
  - 짧은 녹음 → stt-proxy → 텍스트
  - 텍스트 → llm-proxy (Claude) → 응답 스트리밍
  - 응답 → tts-proxy → 음성 합성 → 재생
- [ ] Edge Function 추가:
  - tts-proxy: Google Cloud TTS 또는 Edge TTS
  - 음성 선택 (남/여, 언어별)
- [ ] 대화 컨텍스트 유지 (세션 기반)
- [ ] 커스텀 인스트럭션 (시스템 프롬프트 설정)
- [ ] 대화 기록 저장 + 검색

**산출물:** 음성으로 AI와 대화, 텍스트+음성 모두 지원

---

### Phase M-6: 파일 전사 + 오프라인 캐시 (2~3일)

**목표:** 외부 오디오/동영상 파일 업로드 전사 + 오프라인 대응

- [ ] 파일 업로드 전사:
  - 기기 갤러리/파일에서 오디오/비디오 선택
  - 지원 포맷: m4a, mp3, wav, mp4, mov, webm
  - 대용량 파일 분할 업로드 (청크)
  - 백그라운드 처리 + 푸시 알림
- [ ] 오프라인 캐시:
  - 최근 N개 전사 결과 로컬 캐시 (AsyncStorage / MMKV)
  - 오프라인에서 캐시된 결과 조회 가능
  - 오프라인 녹음 → 온라인 복귀 시 자동 업로드 큐
- [ ] 네트워크 상태 감지 + UI 표시

**산출물:** 파일 전사 기능 + 기본 오프라인 지원

---

### Phase M-7: 팀 기능 (2~3일)

**목표:** 팀 공유 회의록 + 협업 기능

- [ ] 팀 관리:
  - 팀 생성/편집/삭제
  - 팀원 초대 (이메일/링크)
  - 팀원 역할 관리 (admin/member/viewer)
- [ ] 팀 회의록 공유:
  - 회의록을 팀에 공유
  - 팀 전용 회의 목록 (RLS 기반)
  - 팀원 간 코멘트
- [ ] 팀 대시보드:
  - 팀 전체 회의 통계
  - 최근 활동 피드
- [ ] Supabase RLS 정책 확장:
  - team_members 기반 접근 제어
  - 팀 내 문서 CRUD 권한

**산출물:** 팀 단위 회의록 공유/협업

---

### Phase M-8: 데스크톱↔모바일 크로스 플랫폼 연동 (2~3일)

**목표:** 핵심 차별화 — 플랫폼 간 완벽한 데이터 연동

- [ ] 크로스 플랫폼 동기화 검증:
  - 데스크톱에서 녹음 → 모바일에서 조회/편집
  - 모바일에서 녹음 → 데스크톱/웹에서 조회/편집
  - 설정 동기화 (커스텀 사전, 인스트럭션 등)
- [ ] 기기 관리:
  - 연결된 기기 목록 (모바일/데스크톱/웹)
  - 기기별 마지막 활동 시각
  - 기기 연결 해제
- [ ] 알림 동기화:
  - 데스크톱에서 처리 완료 → 모바일 푸시
  - 모바일에서 업로드 완료 → 데스크톱 알림
- [ ] 딥링크:
  - 웹/데스크톱에서 "모바일에서 보기" → 앱 딥링크
  - 공유 링크 → 앱 열기

**산출물:** 어디서 녹음해도 모든 기기에서 동일 경험

---

### Phase M-9: 인앱결제 + 구독 통합 (2~3일)

**목표:** 모바일 인앱결제와 기존 Payple 구독 통합

- [ ] 인앱결제 (IAP):
  - iOS: StoreKit 2 (expo-in-app-purchases)
  - Android: Google Play Billing (expo-in-app-purchases)
  - Pro / Pro+ 구독 상품 등록
- [ ] 구독 통합:
  - 모바일 IAP ↔ Supabase subscriptions 동기화
  - 기존 Payple(웹) 구독자는 모바일에서 자동 인식
  - 모바일에서 결제한 구독도 웹/데스크톱에서 유효
  - 중복 결제 방지 로직
- [ ] 구독 관리 UI:
  - 현재 플랜 표시
  - 업그레이드/다운그레이드
  - 결제 히스토리
  - 사용량 (전사 시간, AI 호출 수)
- [ ] 무료 사용량 관리:
  - Free: 월 5시간 전사, 월 50회 AI
  - 사용량 초과 시 업그레이드 프롬프트

**산출물:** 모바일 인앱결제 + 크로스 플랫폼 구독 통합

---

### Phase M-10: 모바일 특화 기능 (2~3일)

**목표:** 모바일만의 강점을 살린 특화 기능

- [ ] 백그라운드 녹음 고도화:
  - iOS: Background Audio + Silent Push
  - Android: Foreground Service + Notification
  - 백그라운드에서 장시간 녹음 안정성
  - 배터리 최적화 (doze mode 대응)
- [ ] 홈 위젯:
  - iOS: WidgetKit (Expo Widgets)
  - Android: App Widget
  - 위젯 기능: 빠른 녹음 시작, 최근 전사 요약, 사용량 표시
- [ ] 푸시 알림 고도화:
  - 전사 완료 알림
  - 팀 코멘트 알림
  - 주간 리포트 알림
  - 알림 설정 (카테고리별 on/off)
- [ ] 퀵 액션:
  - 3D Touch / Long Press → 빠른 녹음 시작
  - 공유 시트 → 오디오 파일 전사
  - Siri Shortcuts / Google Assistant 연동 (선택)

**산출물:** 모바일 네이티브 경험 극대화

---

### Phase M-11: 품질 + 스토어 출시 (3~4일)

**목표:** 앱스토어 심사 통과 + 안정적 출시

- [ ] 품질 보증:
  - E2E 테스트 (Detox / Maestro)
  - 성능 프로파일링 (메모리, 배터리, 네트워크)
  - 크래시 리포팅 (Sentry)
  - 분석 (Amplitude / Mixpanel)
- [ ] 앱스토어 준비:
  - iOS: App Store Connect 세팅
    - 스크린샷 (6.7", 6.5", 5.5", iPad)
    - 앱 설명/키워드 (12개 언어)
    - 개인정보 처리방침
    - 앱 심사 가이드라인 준수 확인
  - Android: Google Play Console 세팅
    - 스크린샷 + 기능 그래픽
    - 스토어 등록 정보 (12개 언어)
    - 데이터 안전 양식
    - 콘텐츠 등급
- [ ] EAS Build + Submit 파이프라인:
  - eas build → iOS .ipa + Android .aab
  - eas submit → 각 스토어 자동 제출
  - OTA 업데이트 설정 (expo-updates)
- [ ] 랜딩 페이지 업데이트:
  - 모바일 앱 다운로드 링크 추가
  - 앱스토어 배지 (App Store / Google Play)
  - 모바일 스크린샷 섹션

**산출물:** iOS App Store + Google Play 출시

---

## 5. 일정 요약

| Phase | 이름 | 기간 | 누적 |
|-------|------|------|------|
| M-1 | 프로젝트 기반 정비 | 1~2일 | 2일 |
| M-2 | D3RO 디자인 시스템 | 2~3일 | 5일 |
| M-3 | 녹음→전사→요약 핵심 | 3~4일 | 9일 |
| M-4 | 회의 모드 | 3~4일 | 13일 |
| M-5 | AI 음성 대화 | 2~3일 | 16일 |
| M-6 | 파일 전사 + 오프라인 | 2~3일 | 19일 |
| M-7 | 팀 기능 | 2~3일 | 22일 |
| M-8 | 크로스 플랫폼 연동 | 2~3일 | 25일 |
| M-9 | 인앱결제 + 구독 | 2~3일 | 28일 |
| M-10 | 모바일 특화 기능 | 2~3일 | 31일 |
| M-11 | 품질 + 스토어 출시 | 3~4일 | 35일 |

**총 예상: 약 5주 (35일)**

> 바이브코딩(Claude Code) 기준. 하루 평균 4~6시간 작업 가정.
> 병렬 작업 불가능한 순차 의존 관계 반영.

---

## 6. UI 디자인 스펙 (확정)

> 4개 주요 화면 + 녹음 FAB 디자인이 확정됨
> HTML 원본: /tmp/d3ro_mobile_*.html 참조

### 디자인 레퍼런스 파일

> 모든 화면의 정확한 HTML/Tailwind 원본이 아래에 저장되어 있음.
> 새 세션에서 구현 시 반드시 이 파일들을 참조할 것.

| 화면 | 파일 | 설명 |
|------|------|------|
| Dashboard | `docs/v3/designs/dashboard.html` | DASH 탭 — 세션 통계, 사용량, 시스템 상태 |
| History | `docs/v3/designs/history.html` | HIST 탭 — 전사 기록 목록, 필터(전체/즐겨찾기/처리중) |
| Recording | `docs/v3/designs/recording.html` | 녹음 중 화면 — WaveBars, 실시간 전사, 정지 버튼 |
| Talk | `docs/v3/designs/talk.html` | TALK 탭 — AI 채팅, 메시지 입력, 리스닝 인디케이터 |
| Settings | `docs/v3/designs/settings.html` | SET 탭 — 계정, 백엔드, 환경설정, 로그아웃 |
| Upgrade | `docs/v3/designs/upgrade.html` | 구독 업그레이드 — FREE/PREMIUM 비교, 쿼터 프로그레스바 |
| Login | `docs/v3/designs/login.html` | 로그인 — LED 로고, OAuth 3종, 이메일/비번, 회원가입 링크 |

### 6.0 디자인 토큰 (모바일)

```
colors:
  appBg:      '#19191b'    — 전체 배경
  panelBg:    '#242427'    — 카드/패널 배경
  insetBg:    '#0f0f11'    — 인셋 패널 (더 깊은 배경)
  brandOrange:'#ff5c35'    — 주 액센트 (활성 탭, CTA, 숫자)
  brandGreen: '#4ade80'    — 상태 LED (활성, 연결됨)
  textMuted:  '#71717a'    — 보조 텍스트
  textMain:   '#d4d4d8'    — 기본 텍스트
  borderColor:'#2e2e32'    — 카드/패널 테두리

fontFamily:
  sans: system (SF Pro / Roboto)
  mono: ui-monospace (SFMono / Menlo / Monaco)

shadows:
  LED glow: '0 0 8px #ff5c35' (orange), '0 0 5px #4ade80' (green)
  Record FAB: '0 0 20px rgba(255,92,53,0.4)'
```

### 6.1 탭 구성 (5개)

| 탭 | 라벨 | 아이콘 | 설명 |
|----|------|--------|------|
| DASH | 대시보드 | 4-grid squares | 세션 통계, 사용량, 시스템 상태 |
| HIST | 히스토리 | clock circle | 전사 기록 목록 (필터: 전체/즐겨찾기/처리중) |
| REC | 녹음 | microphone (FAB) | 중앙 플로팅 버튼, 탭=녹음, 롱프레스=회의모드 |
| TALK | AI 대화 | chat bubble | 텍스트+음성 AI 채팅 |
| SET | 설정 | gear | 계정, 백엔드, 환경설정 |

### 6.2 DASH (대시보드) 화면

```
구조:
├── Header: LED(orange) + "D3RO-VOICE" + version + LEDs
├── InsetPanel (세션 개요):
│   ├── dot grid 배경 (radial-gradient, opacity 3%)
│   ├── 오늘 세션 카운터 (대형 font-mono 숫자)
│   ├── 가이드 텍스트 (⌘1을 눌러 녹음 시작)
│   └── 하단: 단어 수 / 연속 일수
├── 2-Button Row: [통계] [시스템]
├── 2x2 Grid Cards: 녹음시간 / 단어 / 오늘세션 / 연속일
├── Info Cards: 현재 백엔드 (CLAUDE) / 현재 등급 (FREE)
├── Usage Panel: 받아쓰기(무제한) / LLM처리(무제한) / 프리미엄쿼터(250/주간)
└── Status Bar: "OLLAMA GEMMA4:E4B" + "PRECISION DATA LINK"
```

### 6.3 HIST (히스토리) 화면

```
구조:
├── Header: LED(orange) + "HISTORY" + LED(green)
├── Filter Chips: [전체(active)] [즐겨찾기] [처리중]
├── Date Group "TODAY":
│   ├── HistoryCard:
│   │   ├── LED(green) + 시각(14:32) + 단어수(42 W)
│   │   ├── 전사 텍스트 (2줄 클램프)
│   │   └── 메타: 녹음시간(0:45) + 백엔드(CLAUDE)
│   └── HistoryCard: ...
├── Date Group "YESTERDAY": (opacity 70%)
│   └── HistoryCard: LED(gray, 완료) + ...
└── Status Bar

히스토리 카드 특징:
- 오늘 항목: LED green, 전체 opacity
- 이전 항목: LED gray, opacity 70%
- 단어수 배지: brandOrange/10 배경
- 백엔드 표시: CLAUDE / LOCAL
- 즐겨찾기 아이콘 (bookmark)
```

### 6.4 TALK (AI 대화) 화면

```
구조:
├── Header: LED(orange) + "TALK" + "LIVE" + LED(green, pulse)
├── Chat Area:
│   ├── Date Badge: "TODAY, 9:30 AM" (pill)
│   ├── AI Bubble (왼쪽): panelBg + border, rounded-tl-sm
│   │   └── 하단 라벨: "CLAUDE"
│   ├── User Bubble (오른쪽): brandOrange/10 + border, rounded-tr-sm
│   │   └── 하단 라벨: "YOU"
│   └── Listening Indicator: 3개 bounce dots
├── Input Area:
│   ├── dot grid 배경 (radial-gradient, orange, 10%)
│   ├── [첨부] + text input + [전송]
│   └── Status Bar: "OLLAMA GEMMA4:E4B"
└── Tab Bar

채팅 버블 특징:
- AI: bg-panelBg, rounded-2xl rounded-tl-sm
- User: bg-brandOrange/10, border-brandOrange/30, rounded-tr-sm
- AI 텍스트: textMain, User 텍스트: brandOrange
- 리스닝 상태: 3개 dot bounce 애니메이션
```

### 6.5 SET (설정) 화면

```
구조:
├── Header: "설정" (큰 제목, 다른 탭과 다른 스타일)
├── Section "ACCOUNT & PLAN":
│   ├── 프로필: 아바타(이니셜) + 이름 + 이메일 + [EDIT]
│   └── 현재 등급: LED(orange) + "FREE"
├── Section "BACKEND CONFIG":
│   ├── LLM 모델 선택: "CLAUDE" + chevron
│   └── 로컬 STT 엔진: toggle switch (checked)
├── Section "PREFERENCES":
│   ├── 주 언어: "한국어" + chevron
│   ├── 자동 교정: toggle switch (checked)
│   └── 햅틱 피드백: toggle switch (checked)
├── [로그아웃] 버튼
└── Status: "OLLAMA GEMMA4:E4B"

토글 스위치 스타일:
- off: bg-insetBg
- on: bg-brandOrange
- 크기: w-9 h-5
```

### 6.6 녹음 버튼 (FAB) 상태

```
비활성 (다른 탭 활성):
  bg-panelBg, border-appBg, text-textMuted
  shadow 없음

활성 (DASH 탭 — 녹음 준비):
  bg-brandOrange, border-appBg, text-appBg
  shadow: 0 0 20px rgba(255,92,53,0.4)

크기: w-14 h-14, rounded-full
위치: 탭바 중앙, -top-5 (탭바 위로 돌출)
```

### 6.7 REC (녹음 중) 화면

```
구조:
├── Header: LED(orange, pulse) + "REC_SESSION" + 타이머(03:24) + LED(green)
├── WaveBars Panel (h-32):
│   ├── bg-insetBg + dot grid 배경
│   └── 11개 오렌지 wave bars (5종 애니메이션: wave-1~5)
├── Transcript Area (scrollable):
│   ├── 초기화 로그 (font-mono, textMuted)
│   │   "> initializing voice recording protocol..."
│   ├── 전사된 텍스트 (text-lg, textMain)
│   └── 현재 입력 중: brandOrange 텍스트 + 깜빡이는 커서
├── Status: LED(orange, pulse) + "LISTENING_" + "REAL-TIME TRANSCRIPT"
└── Tab Bar:
    ├── 다른 탭 모두 opacity-50 + cursor-not-allowed (비활성)
    └── 중앙 버튼: bg-panelBg + border-brandOrange + STOP 아이콘(사각형)
       + ping 애니메이션 (border-brandOrange, opacity 20%)

녹음 중 특징:
- 다른 탭 접근 불가 (opacity 50%, cursor-not-allowed)
- FAB 버튼이 STOP 모양(사각형)으로 변경
- STOP 버튼에 ping 애니메이션
- Wave animations: 5종 (0.8s ~ 1.5s ease-in-out infinite)
  keyframes: '0%,100%': h=8px, '50%': h=32px
```

### 6.8 Upgrade (구독) 화면

```
구조:
├── Header: LED(orange) + "SUBSCRIPTION" + [X 닫기 버튼]
├── Title: "Unlock Full Potential" + 설명
├── Current Plan Card (panelBg):
│   ├── "CURRENT PLAN" + "FREE" + "$0 / mo"
│   ├── 기본 음성 인식: 무제한
│   ├── 로컬 AI (Gemma): 무제한
│   └── 프리미엄 쿼터: 250/500 + progress bar (brandGreen, 50%)
├── Premium Plan Card (insetBg + brandOrange border):
│   ├── 우상단 orange glow blur 효과
│   ├── "UPGRADE PLAN" + "PREMIUM" + "$15 / mo"
│   ├── 체크리스트 (brandOrange 체크 아이콘):
│   │   - Claude 3.5 Sonnet / Opus 무제한
│   │   - GPT-4o 외부 API 연동
│   │   - 클라우드 동기화 + 무제한 히스토리
│   │   - 초정밀 오디오 향상 필터
│   └── [UPGRADE NOW] 버튼 (bg-brandOrange, full-width)
└── Footer: "이용 약관 및 환불 정책 보기"

특징:
- 탭 바 없음 (모달 스타일, X 버튼으로 닫기)
- Premium 카드에 glow 효과: inset shadow + blur blob
- Progress bar: h-1.5, bg-brandGreen, rounded-full
```

### 6.9 공통 패턴

```
Status Bar (모든 탭 하단):
  LED(green) + "OLLAMA GEMMA4:E4B" + "PRECISION DATA LINK"
  text-[8px] font-mono tracking-wider

Home Indicator:
  w-[120px] h-1 bg-white/30 rounded-full
  absolute bottom-2 center

Header LED Pattern:
  활성 탭: w-2 h-2 bg-brandOrange + shadow glow
  연결 상태: w-1.5 h-1.5 bg-brandGreen + shadow glow

Card Pattern:
  bg-panelBg border border-borderColor rounded-xl p-4
```

---

## 7. 기술 상세

### 7.1 Expo 설정

```json
{
  "expo": {
    "name": "D3RO Voice",
    "slug": "d3ro-voice",
    "scheme": "d3ro-voice",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android"],
    "plugins": [
      "expo-av",
      "expo-notifications",
      "expo-secure-store",
      "expo-file-system",
      "expo-document-picker",
      "expo-background-fetch",
      "expo-task-manager",
      ["expo-in-app-purchases", {}]
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSMicrophoneUsageDescription": "녹음 및 음성 전사를 위해 마이크 접근이 필요합니다",
        "UIBackgroundModes": ["audio", "fetch", "remote-notification"]
      }
    },
    "android": {
      "permissions": [
        "RECORD_AUDIO",
        "FOREGROUND_SERVICE",
        "FOREGROUND_SERVICE_MICROPHONE",
        "POST_NOTIFICATIONS"
      ]
    }
  }
}
```

### 7.2 주요 의존성

```
# 코어
expo ~51.x
react-native ~0.74.x
@d3ro/core, @d3ro/api-client, @d3ro/i18n, @d3ro/ui-native

# 오디오
expo-av                    — 녹음/재생
expo-file-system           — 파일 관리
expo-document-picker       — 파일 선택

# 네트워크
@supabase/supabase-js     — DB + Auth + Storage + Realtime

# 모바일 특화
expo-notifications         — 푸시 알림
expo-task-manager          — 백그라운드 작업
expo-background-fetch      — 백그라운드 페치
expo-in-app-purchases      — IAP
expo-secure-store          — 토큰 저장
@react-native-async-storage/async-storage — 캐시

# UI
react-native-reanimated    — 애니메이션
react-native-gesture-handler — 제스처
react-native-safe-area-context
expo-linear-gradient       — 그라데이션
react-native-markdown-display — 마크다운 렌더링

# 품질
sentry-expo               — 크래시 리포팅
```

### 7.3 네비게이션 구조

```
app/
├── _layout.tsx             (Root: AuthProvider + Theme)
├── index.tsx               (Entry: 세션 체크 → 리다이렉트)
├── login.tsx               (OAuth 로그인)
├── (tabs)/
│   ├── _layout.tsx         (Tab Bar: D3RO 스타일)
│   ├── record.tsx          (녹음 탭 — 메인 CTA)
│   ├── meetings.tsx        (회의 목록)
│   ├── chat.tsx            (AI 음성 대화)
│   └── profile.tsx         (프로필 + 설정 + 구독)
├── meeting/
│   └── [id].tsx            (회의 상세: 전사/회의록/문서 탭)
├── history/
│   └── [id].tsx            (전사 상세)
├── team/
│   ├── index.tsx           (팀 목록)
│   ├── [id].tsx            (팀 상세)
│   └── invite.tsx          (팀 초대 수락)
├── settings/
│   ├── index.tsx           (설정 메인)
│   ├── subscription.tsx    (구독 관리)
│   ├── devices.tsx         (기기 관리)
│   └── dictionary.tsx      (커스텀 사전)
└── file-transcribe.tsx     (파일 업로드 전사)
```

### 7.4 Edge Function 추가/확장 목록

| 함수 | 용도 | Phase |
|------|------|-------|
| stt-proxy (확장) | 긴 오디오 분할 + 진행 상태 업데이트 | M-3 |
| ai-process (신규) | 전사→요약/회의록/액션아이템 | M-3 |
| tts-proxy (신규) | 텍스트→음성 합성 | M-5 |
| iap-webhook (신규) | Apple/Google IAP 서버 검증 | M-9 |
| send-push (확장) | 전사 완료/팀 코멘트 알림 | M-3 |

### 7.5 Supabase 테이블 추가/확장

| 테이블 | 변경 | Phase |
|--------|------|-------|
| user_settings | 신규 — 크로스 플랫폼 설정 동기화 | M-8 |
| devices | 신규 — 기기 목록 관리 | M-8 |
| push_tokens | 확장 — device_type 컬럼 추가 | M-3 |
| audio_files | 신규 — 업로드 오디오 메타데이터 | M-3 |
| processing_jobs | 신규 — 비동기 처리 상태 추적 | M-3 |

---

## 8. 경쟁사 대비 차별화

| 기능 | Clova Note | Otter.ai | D3RO Voice |
|------|-----------|----------|------------|
| 전사 | ✅ | ✅ | ✅ |
| AI 요약 | ⚠️ 기본 | ✅ | ✅ Claude 기반 고품질 |
| 회의록 자동 생성 | ❌ | ⚠️ | ✅ 다중 템플릿 |
| 데스크톱 연동 | ❌ | ⚠️ 웹만 | ✅ 완벽한 크로스 플랫폼 |
| 로컬 처리 (데스크톱) | ❌ | ❌ | ✅ 완전 무료 |
| AI 음성 대화 | ❌ | ❌ | ✅ |
| 디자인 차별화 | 기본 | 기본 | ✅ 인스트루먼트 미학 |
| 다국어 | 한/영/일 | 영 중심 | ✅ 12개 언어 |
| 팀 협업 | ❌ | ✅ | ✅ |
| 가격 (월) | ₩16,900 | $16.99 | ₩9,900 (Pro) |

**핵심 차별화:**
1. **크로스 플랫폼 시너지** — 데스크톱(무료 로컬) + 모바일(클라우드) 연동
2. **AI 후처리 품질** — Claude API 기반 회의록/요약/액션아이템
3. **디자인** — D3RO 인스트루먼트 미학 (경쟁사 대비 압도적 브랜딩)
4. **가격** — 데스크톱은 완전 무료(로컬), 모바일 Pro ₩9,900/월

---

## 9. 리스크 및 완화

| 리스크 | 영향 | 완화 |
|--------|------|------|
| Google STT 비용 ($0.006/15초) | 서버 비용 증가 | Free 티어 월 5시간 제한, Pro 이상 무제한 |
| Claude API 비용 ($3/1M input) | 요약 비용 | Haiku 사용 + 프롬프트 최적화 |
| iOS 백그라운드 녹음 제한 | 장시간 녹음 중단 | UIBackgroundModes audio + Silent Push |
| 앱스토어 IAP 수수료 30% | 수익 감소 | 웹 결제(Payple) 유도 + 가격 조정 |
| Expo 네이티브 모듈 제한 | 기능 구현 한계 | EAS Build (Custom Dev Client) |
| 대용량 오디오 업로드 | 네트워크 비용 | 압축 (AAC) + 청크 업로드 + 캐시 |

---

## 10. 성공 지표 (KPI)

| 지표 | 목표 (출시 3개월) |
|------|------------------|
| 다운로드 | 10,000+ |
| DAU | 1,000+ |
| 전환율 (Free→Pro) | 5%+ |
| 평균 세션 길이 | 15분+ |
| 앱스토어 평점 | 4.5+ |
| 크래시율 | < 0.5% |
| 전사 정확도 만족도 | 4.0/5.0+ |