프론트엔드
Compose와 MVI로 다시 태어난 Android UI: MVVM에서 MVI로의 전환기
두줄요약
검색 화면의 복잡한 상태 관리를 개선하기 위해 MVVM에서 MVI로 전환하고, Compose와 결합한 구조를 소개했습니다. 단방향 데이터 흐름과 SideEffect 분리로 가독성과 유지보수성을 높였습니다.
문제 상황
- 검색 화면의 웹→네이티브 전환 과정에서 상호작용과 데이터 갱신이 빈번한 복잡한 UI 상태 관리 필요
- 기존 MVVM에서는 StateFlow 기반 개별 상태 관리가 늘어나며 코드 복잡성, 비동기 갱신, 디버깅 난이도 증가
원인 분석
- 상태와 이벤트가 많아질수록 ViewModel의 프로퍼티와 View 관찰 지점이 분산
- 상태 변경과 UI 반영의 흐름이 명확하지 않아 예측 가능성 저하
해결 방법
- Jetpack Compose와 MVI 패턴을 결합해 단방향 데이터 흐름과 선언형 UI 적용
- State, Event, SideEffect를 Contract로 분리하고 단일 상태 객체로 화면 상태 통합
- BaseViewModel과 Channel, runningFold, stateIn으로 이벤트 처리와 상태 갱신 구조화
성능/운영 포인트
- 화면 상태의 가독성, 유지보수성, 확장성 향상
- 일회성 작업을 SideEffect로 분리해 재처리와 상태 혼합 문제 완화
- Firebase Performance Monitoring으로 전환 이후 성능 수치 분석