Jetpack Compose, 뭐가 좋은데?
알라미 ‘정보' 화면, Jetpack Compose 로 전환하며 느낀 Compose 의 장점
최근 Android 에서 가장 핫한 기술 중 하나를 꼽으라면 Jetpack Compose 를 꼽을 수 있을 것 같습니다.
Jetpack Compose 는 Android 공식 홈페이지를 참고하면 Android 를 위한 현대적인 선언형 UI 도구 키트라고 정의되어 있습니다.
Jetpack Compose Android Developer
알라미 Android 팀에서도 최신 UI 빌드 트렌드를 따라가기 위해, 더 나아가 Compose 의 이점을 활용하기 위해 기존 UI 빌드 방식을 Jetpack Compose 로 전환해 나가고자 합니다.
이에 대한 첫 걸음으로 다음 ‘설정’의 ‘정보' 화면을 Jetpack Compose 로 전환하였고 Compose 를 적용함으로써 어떤 이점이 있었는지 공유해보고자 합니다.
View 를 그릴 때 필요한 작업으로는 다음 요소들이 있습니다.
그리기
- 스타일링
- 폰트, 색상, 크기, 여백…
설정하기
- 텍스트, 이미지…
이벤트 처리
- 클릭 이벤트, 드래그 이벤트, …
해당 화면의 “앱 평가" 버튼 View 에 대해 기존 UI 시스템과 Jetpack Compose 를 이용한 방식을 위의 View 작업들을 기준으로 비교하면서 예시를 들어보도록 하겠습니다.
해당 버튼을 그리는데 필요한 View 작업을 위 3가지 관점에서 나열해보면 다음과 같습니다.
그리기
- Button 형태
- 둥근 모서리
- 굵은 폰트
- 폰트 크기
- 회색 배경색
설정하기
- 텍스트 설정
- “앱 평가”
이벤트 처리하기
- 버튼 클릭시 알라미 플레이 스토어 화면으로 이동
이를 위해 기존 UI 시스템에서는 다음과 같이 View 에 대한 처리가 분산되어 관리되어왔습니다.
같은 작업을 Jetpack Compose 를 통해 처리하면 다음과 같이 하나의 View 에 대한 처리를 한 곳에서 관리할 수 있습니다.
Compose 의 이점을 좀 더 이해해보기 위해 기존 UI 방식 대비 변경사항에 대해 얼마나 더 잘 대처할 수 있는지 임의 변경 요청 사항이 발생한 상황을 가정해보겠습니다.
기존 “앱 평가” 버튼의
색상을 R.attr.colorSurface_MediumEmphasis 로 변경하고
텍스트를 “앱 평가하기” 로 변경하고
클릭시 앱 평가 버튼 이벤트 로깅을 추가해주세요
다음 요구사항 반영을 위해 기존 UI 시스템은 각각의 작업이 처리되는 곳에서 변경사항에 대한 반영이 필요하게 됩니다.
하나의 View 에 대한 처리가 분산되어 처리되어 응집도가 낮은 구성 방식으로 느껴집니다.
반면에 Jetpack Compose 의 경우 하나의 View 에 대한 처리가 한 곳에서 이루어져 변경도 하나의 View 를 위한 Composable 함수 내부에서만 이루어지게 됩니다.
기존 UI 방식 대비 하나의 View 에 대한 처리가 한곳에서 이루어져 기존 방식 대비 응집도가 높게 느껴집니다.
다음 예시를 통해 기존 UI 처리방식과 Jetpack Compose 를 통한 UI 처리 방식을 비교해 보고 어떤 이점들이 있는지 살펴 보았습니다.
정리해보면 다음과 같은 이점들을 확인할 수 있었습니다.
- 하나의 뷰에 대한 처리가 한 곳에서
- 하나의 뷰에 대한 변경사항이 한 곳에서
- 결과적으로 뷰에 대한 관리가 용이
이외에도 이번 예시를 통해 다루지 못한 Compose 를 통해 누릴 수 있는 이점들은 더 다양하게 존재합니다.
다음에는 또 다른 예제를 통해 또 어떤 이점들이 있는지 소개해보도록 하겠습니다.
앞으로도 알라미 프로젝트 내의 많은 UI 요소들을 Jetpack Compose 로 전환해 나갈 계획이며 더욱 compose 의 이점을 활용한, 유지보수가 용이한 알라미 프로젝트를 기대합니다.
⏰ 딜라이트룸에서 알라미와 함께 아침을 바꿀 분들을 모십니다 🙌
👉 딜라이트룸에 어떤 포지션이 있는지 궁금해요(+ 입사 축하금 100만원💸)
👉 딜라이트룸 미디엄 팔로우하기 (카테고리 섹션 오른쪽의 ‘Follow’ 버튼 클릭)
