카카오헤어샵에 Compose 적용하기 - xml 에서 Compose 로 가는 여정길

Compose 도입 배경

• 카카오헤어샵은 선언형 UI 트렌드에 맞춰 Jetpack Compose를 도입하기로 결정, 마이페이지와 설정 화면부터 적용 시작.

Compose 도입 과정 및 문제점

• Custom Font 사용으로 인한 스타일 지정의 어려움, 반복되는 UI 코드, 이미지 및 텍스트 구현 방식에 대한 고민 발생.
• Text Composable 래핑, 공통 컴포넌트 정의를 통해 문제 해결, System Component를 활용하여 마이그레이션 용이성을 확보.

중복 UI 재활용 및 마무리

• Sealed Class를 활용하여 UI State를 관리, 스위치, 타이틀, 설명을 가진 UI의 추가 및 수정 간결화.
• Compose 도입 후 UI 로직 파악 용이성, UI 작업 시간 단축 효과를 경험.