프론트엔드
Jetpack Compose로 LINE 앱 Yahoo!검색 모듈 개발하기
두줄요약
LINE 앱 Yahoo!검색 모듈에 Jetpack Compose를 전면 도입한 사례를 소개했습니다. 상태 일원화, 스테이트리스 설계, Preview 표준화로 안정성과 협업 효율을 높였습니다.
핵심 내용
- LINE Android의 Yahoo!검색 모듈 UI를 Jetpack Compose로 전면 제작한 도입 사례
- 명령형 UI의 상태 관리 복잡성과 Compose의 선언형 방식 장점을 비교하며 도입 배경 설명
- 안정성을 위해 새로 만드는 모듈에만 적용하고, 사용 컴포저블의 이슈 여부를 사전 검토
구조와 흐름
- ViewModel에서 UI 상태를 일원화하고 StateFlow로 외부 노출
- 상위 컴포저블이 상태를 구독해 하위 컴포저블에 전달하는 구조 구성
- 자식 컴포저블은 상태를 직접 갖지 않는 스테이트리스 패턴으로 설계
선택 이유
- 일부 뷰만 Compose로 섞으면 유지보수 비용이 커질 가능성 고려
- LazyColumn과 TextField 등 사용 예정 컴포저블의 안정성 이슈를 먼저 확인
- TextField는 AndroidView로 기존 EditText를 사용할 수 있는지 검토 후 도입 결정
적용해볼 점
- 컴포저블 상태별 미리 보기와 다크 모드 미리 보기 표준화
- PR에 미리 보기와 디자인 스펙을 함께 첨부해 리뷰 효율 개선
- 컴포저블 설계 시 상태 호이스팅과 Preview 활용을 우선 고려