카카오헤어샵에 Compose 적용하기
xml 에서 Compose 로 가는 여정길
안녕하세요! 카카오헤어샵 Android 개발을 하고 있는 두루라고 합니다.
최근 핫한 키워드인 선언형 Ui Jetpack Compose를 헤어샵에 적용했던 내용에 대해서 소개하려고 합니다.
선언형 Ui와 Compose는 요즘 너무나도 핫한 키워드라서 여러곳에서 설명하고 있으므로 설명은 넘어가도록 하고 카카오헤어샵 Android 팀에서 적용을 하면서 있었던 일들에 대해서 이야기를 해보려고 합니다.
1. 도입배경
최신 트렌드인 선언형 Ui를 적용하기에 앞서 어떤 화면을 Compose로 바꿀 것 인가에 대해서 논의를 하게되었습니다.
현재 진행되고 있는 feature에 겹치지 않으면서 빠른시간내에 적용을 해볼 수 있던 화면들을 살펴보던중 팀 동료인 에이단의 의견으로 마이페이지와 그안의 설정 화면 부터 적용을 해나가기로 하였습니다.
2. Compose의 도입
도입을 하다보니 아래의 3가지 문제들에 직면하게 되었습니다.
1. 카카오헤어샵에서는 Custom Font를 사용하고 있으며, 모든 Text Composable에 Style를 지정을 하게 되면 코드 직관성에 문제가 있을 것 같습니다.
(실제로 Text Composable에 Style을 적용하면서 손에 익기 전에는 FontWeight에 대해서 찾아보는 번거로움이 생겼습니다.)
2. 비슷한 Ui와 로직을 가진 화면의 경우 반복되는 코드들이 생겨나고 있습니다.
(Scaffold 내부의 상단 Toolbar 같은 경우)
3. 마이 페이지 & 설정 페이지는 서버에서 값을 받는 것이 아닌 로컬에서 구현 하는데, 이미지, 텍스트는 어떻게 구현을 하는게 다른 분들이 보기에도 좋을까요?
"좀 더 간편하게 사용하고 싶습니다!"
"추후 확장성을 고려하고 싶습니다!"
"누가 보더라도 한눈에 알아볼 수 있도록 하고 싶습니다!"
위의 세가지 항목을 모두 충족하는 방법은 어떤 것이 있을까에 대해서 카카오헤어샵 Android 에서는 아래와 같이 정의를 하기로 하였습니다.
(저희가 정의한 방법보다 물론 더 좋은 방법이 존재할 수 있으며, 앞으로도 더 좋은 방법에 대해서 논의를 해나가 볼 생각입니다!)
3. Hairshop System Guide 설계
0. Color 및 Font에 대한 가이드가 필요합니다.
1. Text System 가이드가 필요합니다.
위에서 문제였던 Text Composable에 대해서 System Guide를 만들기로 하였으며, 가이드를 세우면서 추후 확장성을 위해서 Text Composable을 Wrapping 하면서 저희의 문제점을 없애는 형식으로 하였습니다.
2. Switch, CheckBox 등에 대해서도 가이드가 필요합니다.
System Guide를 만들다 보니 헤어샵에서는 공통으로 사용하는 컴포넌트들이 존재하였으며, 이에 해당하는 컴포넌트들에 대해서도 정의하기로 하였습니다.
다만, Switch와 CheckBox의 경우 컴포넌트는 동일하며 기능에 맞게 클릭 & 현재 상태에 대해서만 들고 있습니다.
4. System Guide를 사용한 마이페이지 & 설정 Compose 도입
이제 헤어샵앱에 대한 Compose 도입 준비가 마무리 되었습니다.
위의 만들어둔 System Component 를 통해서 마이페이지와 설정페이지에 대한 Compose 도입이 성공적으로 도입이 마무리 되었습니다.
또한 컴포넌트들에 대해서 기준을 잡고 Composable 함수를 Wrapping 하여 System Component를 만들어두니 새롭게 Compose로 마이그레이션 할 경우에도 만들어둔 컴포넌트를 활용하여 손쉬운 작업이 가능해진다는 장점이 들어났습니다.
물론 Ui 로직외의 로직들에 대해서는 Compose로 마이그레이션 하면서 상태값 관리등, 여러가지 이유로 인하여 많은 고민과 테스트에 시간을 할애 해야 했습니다.
그럼에도 불구하고 Ui 작업에 대한 시간 단축은 엄청난 효과가 있다고 느껴졌습니다.
5. 중복되는 Ui들에 대한 재활용 정의
마지막으로, 카카오헤어샵앱의 Compose 컴포즈 작업내용을 마무리하면서 가장 고민을 많이 했던 중복 Composable에 대한 재활용중 데이터 정의 내용을 살펴보려고 합니다.
카카오헤어샵 내의 알림설정 화면을 살펴보면 같은 Ui들이 반복되는 것 처럼 보이지만 세세한 부분에서 차이점이 존재합니다.
하단에 Divider이 있는지 없는지, 설명이 1개인 경우와 2개, 3개인 경우등 같은 Ui처럼 보이지만 공통컴포넌트로 만들려고 하면 어려움이 존재하였습니다.
고민1.
각각의 영역을 하나로 통일할 수 없을까?
고민2.
토글 이벤트에 대해서는 어떻게 처리하는 것이 좋을까?
고민3.
각각의 영역마다 Composable 함수를 안만들고 LazyColumn으로 처리할 수 있는 방법은 없을까?
위의 고민을 하던중 Sealed Class로 Ui State를 관리하는 내용을 살펴보던중 해당 내용을 잘 활용하면 위의 고민을 해결할 수 있겠다는 생각이 들었으며, 아래와 같이 정의하였습니다.
(아래의 내용은 예시입니다!)
위와 같이 Sealed Class 로 정의함에 따라서 스위치와 타이틀, 설명을 가진 같은 Ui가 새롭게 추가될 경우 아래의 3가지 부분을 수정하는 것으로 추후에 추가될 경우 Ui 수정이 간결해졌습니다.
1. Settings Sealed Class 내의 신규 Ui에 대한 정의
2. 토글 버튼 클릭시에 대한 로직
3. 리스트 초기화시 신규 타입에 대한 추가
위의 과정을 거쳐 카카오헤어샵의 첫 Compose 도입이 완료되었습니다!
마무리
최근 핫한 키워드인 선언형 Ui인 Jetpack Compose를 카카오헤어샵에 적용하면서 기존 XML과는 다른 여러가지 색다른 매력을 느끼게 되었습니다.
기존 XML의 경우 DataBinding과 결합이 되어있다면, 로직을 살펴볼 경우 XML, Fragment or Activity, ViewModel, BindingAdapters등 여러가지를 살펴봐야 로직에 대한 판단이 섰다면 Compose의 경우 Ui Composable, ViewModel 두개만 살펴봐도 로직에 대해서 판단을 할 수 있는 측면에서 큰 이점이 있었습니다.
(물론 Compose에 대한 Side Effect 없이 최적화를 잘하려면 상태값 관리등 여러가지 더 살펴봐야 하지만... 딥한 내용이라 아직 좀 더 살펴봐야 할 것 같습니다.)
이번 카카오헤어샵의 Compose 도입을 진행하면서 Compose에 대한 이점과 필요성에 대해서 많은 것을 느끼게 되었던 시간이었습니다.
이상으로 카카오헤어샵앱에 Compose 도입 내용을 마치도록 하겠습니다.
카카오헤어샵에서의 Compose 도입을 하면서 있었던 이슈들에 대해서 궁금한점 이나 좀 더 좋은 방법이 있으시면 언제든 댓글로 남기주시면 감사하겠습니다!
개인적인 생각으로 언제나 맞는 코드에 정답은 없는 것 같습니다.
각각의 현재 시점에 맞는 상황과 팀과 개인의 스타일에 묻어나는 코드만 있을 뿐이라고 생각이 들긴 합니다.
언제든 좋은 의견 자유롭게 남겨주시면 감사하겠습니다!
긴글 읽으시느라 정말 노고 많으셨습니다!
