Rinda Calls 모바일 UX 개선 요약

통화 녹음 → AI 분석 → 액션플랜 파이프라인 · 2026 UIUX 최적 패턴 적용

머지된 PR 9건 검증 flutter test 88 통과 · analyze 무이슈 아키텍처 헥사고날 · Riverpod SSOT

2 → 1

중복 분석 차단 (멱등)

∞ → 15s

피드 무한 로딩 → 요청 timeout

6 → 1

분산 권한요청 → 한 번에 일괄

~250 → 150px

필터바 세로 높이 압축

크리티컬 — 데이터 정확성

🔁

녹음 1건이 분석 2건으로 중복

CRITICAL

Before

같은 통화가 카드 2개로. file_size·recorded_at 동일한데 파일명만 17초 차이로 2회 INSERT → STT·분석 2배

After

동일 녹음은 1건만 유지. 신규·기존(race)·동시 업로드 모두 차단

원인: 클라가 업로드마다 recording_<epoch> 새 파일명 생성 → 서버 멱등이 파일명 기준이라 못 잡음. 해결: 서버 사전 멱등 체크(workspace+recordedAt+fileSize) + partial unique index + onConflictDoNothing.

내용 동등 키 멱등partial unique indexS3 업로드 전 차단

⏳

피드가 계속 스켈레톤만 (무한 로딩)

CRITICAL

Before

HTTP 요청에 timeout 없음 → 서버 무응답/네트워크 끊김 시 영원히 로딩, 빈 상태도 안 보임

After

15초 초과 시 에러+재시도로 회복. 0건이면 빈 상태 안내 정상 노출. 기본 토큰으로 즉시 조회

해결: ApiClient get/post/patch에 주입형 timeout → NetworkFailure 매핑. 기본 디바이스 토큰 폴백으로 미설정 빈 화면 제거.

요청 timeout에러→재시도 회복기본 토큰 폴백

기능 — 자동화 · 권한 · 재생

✨

"자동 분석"을 진짜 자동으로 + 앱 시작 1탭 모달

FEATURE

Before

토글 ON인데 배너 탭→선택 다이얼로그를 거쳐야 업로드(반자동, 이름과 모순)

After

앱 켜자마자 "자동 분석 시작" 모달 → 딸깍 한 번에 권한+ON+업로드. 이후 자동 감지·업로드

패턴: 공용 startAutoAnalyze()로 토큰→권한→ON→업로드 단일 흐름. centered 모달 + 단일 주요 CTA(Hick's law). 최초 1회 동의.

1탭 온보딩단일 CTA진짜 자동 업로드

🔐

권한 요청 — 화면마다 따로 → 한 번에 일괄

FEATURE

Before

즐겨찾기·SMS·연락처·녹음 권한이 화면 진입마다 각각 팝업. 콜드스타트 silent-denied로 불안정

After

앱 첫 진입 안내 → "모두 허용" 한 번으로 전화·SMS·연락처·오디오 일괄 요청. 이후 재요청 없음

최적 패턴: 사용자 액션 시점 요청(Activity attach 보장) + 동시호출 직렬화(race 제거) + 재시도 3회 + request 시도 후에만 영구거부 판정. 헥사고날 포트/어댑터/Riverpod SSOT.

일괄 batchpre-permission rationale직렬화·재시도헥사고날

🎛️

액션플랜 부가기능 아이콘·시트화

FEATURE

Before

화면 상단을 풀폭 "자동 분석" 토글 카드가 차지 → 피드(콘텐츠)가 밀림. 원본 보기 등 컨트롤이 흩어짐

After

토글 카드 제거 → 피드가 화면 대부분 차지. 제어 바에 작은 아이콘 2개(자동분석 상태·원본 보기), 탭하면 하단 시트("분석 설정")에서 컨트롤

패턴: 콘텐츠 우선 + 부가기능은 progressive disclosure(아이콘→bottom sheet). 자동분석 ON/OFF를 아이콘 색·점 배지로 한눈에. 시트 행은 탭타깃 48 + 아이콘+라벨+설명+컨트롤.

콘텐츠 우선아이콘→하단 시트상태 아이콘 배지탭타깃 48

▶️

녹음 재생/일시정지 안정화

FEATURE

Before

리스너 중복 누적, 아이콘·상태 불일치, 완료 후 재생 불가, 슬라이더 튐

After

구독 정리 + 실제 player.playing 기준 토글 + 완료 후 재생 복구 + 드래그 가드 + URL 만료 재획득

StreamSubscription 관리상태 동기화presigned 재획득

UX 일관성 — 피드 · 필터 · 3화면

🎯

이름 마스킹 제거 · 카드/필터 정비

Before

거래처명이 "임****님"으로 가려짐. 카드 헤더 과밀, 필터 칩이 3~4줄 Wrap

After

실제 이름 노출. 헤더 단순화(배지 메타행 이동) + 긴급도 라벨·컬러바 + 필터 세그먼트·가로스크롤(150px)

3분할 세그먼트가로스크롤 칩긴급도 시각화

🧭

액션플랜·즐겨찾기·설정 3화면 일관성

즐겨찾기: 필터칩 가로스크롤·탭타깃 48·빈상태 통일.
설정: "데이터 백업"→"Rinda로 전송" 명확화, 조회/전송 혼동 제거, 베타 제거·alpha 고정.
하단 네비: 탭 타깃 56·아이콘+라벨·활성 강조. 토스트: floating으로 하단 메뉴 안 가림.

콘텐츠 우선progressive disclosure카드 재사용일관 토큰

적용한 2026 UIUX · 엔지니어링 원칙

제1원리(머스크 5단계): 삭제·단순화 우선 콘텐츠 우선 · 점진적 노출 단일 주요 CTA (Hick's law) 탭 타깃 ≥44 (Fitts) 권한은 사용자 액션 시점에 낙관적 UI + 서버 SSOT 헥사고날 포트/어댑터 Riverpod 단일 SSOT 키셋 커서 무한스크롤 멱등 설계