윤찬 211673bc6c feat(mobile): Phase M-1 모바일 프로젝트 기반 + V3 마스터 플랜

- V3 모바일 마스터 플랜 작성 (docs/v3/00-mobile-master-plan.md)
  11개 Phase, 5주 로드맵, 전략 결정사항 확정
- 7개 디자인 HTML 레퍼런스 저장 (docs/v3/designs/)
- app.json → app.config.ts 전환 + 환경변수 체계
- 5탭 네비게이션 (DASH/HIST/REC FAB/TALK/SET)
- metro.config.js monorepo 격리 (root RN 0.84 충돌 해결)
- ui-native 테마 디자인 목업 색상 동기화
- SafeArea 적용 (useSafeAreaInsets)
- DEV 로그인 우회 (__DEV__ 전용)
- Supabase .env 연동
- iOS 시뮬레이터 검증 완료

2026-04-13 03:22:15 +09:00

30 KiB

Raw Blame History

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 설정

{
  "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)

핵심 차별화:

크로스 플랫폼 시너지 — 데스크톱(무료 로컬) + 모바일(클라우드) 연동
AI 후처리 품질 — Claude API 기반 회의록/요약/액션아이템
디자인 — D3RO 인스트루먼트 미학 (경쟁사 대비 압도적 브랜딩)
가격 — 데스크톱은 완전 무료(로컬), 모바일 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+

30 KiB Raw Blame History