우리가 Android Compose를 택한 이유: 플레이키보드 이야기
기존 컴포즈 도입 블로그를 보면 컴포즈의 코드 감소에 대해 자세히 다루지 못해 아쉽다는 생각이 강해, 이번 글은 플레이키보드 앱에서 사용하는 Button을 예시로 들어 XML를 Compose로 리팩토링 했을 때 얼마나 코드가 감소되었는지를 중점으로 다루어보려고 합니다.
안드로이드 UI 미래, 여기에 있어요!
지난 수년 동안 안드로이드 앱 개발은 주로 XML을 사용하여 UI를 설계하는 것이 일상적이었습니다.
그러나 이제 우리는 UI 개발의 새로운 시대를 맞이하고 있습니다.
안드로이드 Compose는 선언형 프로그래밍 접근 방식을 통해 혁신적으로 UI를 개발할 수 있는 도구입니다.
Compose를 사용하면 UI 코드를 함수로 작성하여 코드 양을 감소시킬 수 있습니다.
XML과 어떻게 다르죠? 왜 컴포즈를 써야할까요?
XML 과 Compose의 차이점은 엄청 많지만 당장 도입으로서 느낄 수 있는 점은 크게 3가지로 정리해 봤습니다
1. 문법과 접근 방식
- XML: XML 기반 레이아웃은 태그와 속성으로 UI 구조를 정의합니다. 정적인 구조를 선언하며, 시각적인 디자인과 논리적인 동작을 별도의 파일에 작성합니다.
- Compose : 안드로이드 컴포즈는 함수 호출을 통해 UI를 선언적으로 작성합니다. UI와 상태를 함께 정의하며, 코드로 UI 구조와 동작을 표현할 수 있습니다.
2. 가독성과 유지보수
- XML: XML은 복잡한 UI를 나타내기 위해 많은 태그와 속성이 필요할 수 있습니다. 때로는 중첩된 구조로 인해 가독성이 저하되기도 합니다. 또한 디자인과 논리가 분리되어 있어 유지보수가 어려울 수 있습니다.
- Compose : 컴포즈는 간결한 코드로 UI를 표현하기 때문에 가독성이 높습니다. UI 요소와 상태를 동일한 파일에서 관리하므로 유지보수가 간편합니다.
3. 애니메이션과 상호작용
- XML: XML로 애니메이션과 상호작용을 구현하기 위해서는 별도의 XML 파일이 필요하며, 복잡할 수 있습니다.
- Compose : 컴포즈는 내장된 애니메이션 및 인터랙션 기능을 제공하며, UI와 상호작용을 더욱 쉽게 구현할 수 있습니다.
직접 코드로 봅시다.
위의 글만 보면 잘 이해가 안 될 수 있습니다.
컴포즈의 진가는 같은 컴포넌트를 여러 곳에서 사용할 때 나타납니다.
예를 들어 메인 버튼처럼요.
한가지 예시로 코드를 살펴봅시다.
<Button
android: id = ""
style= ""
android:layout_width= "match_parent"
android:layout_height= "wrap_content"
android:layout_marginHorizontal= ""
android:layout_marginBottom= ""
android:Background= ""
android:minHeight= ""
android:text= ""
android:textAllCaps= ""
android:textColor= ""
app:layout_constraintBottom_toTopOf= "" />위 코드는 플키앱에서 들어가는 XML중 버튼의 일부분을 가져왔습니다.
대략 13줄 정도 되는군요
앱에 버튼이 많으 들어갈수록 저 코드들이 여기저기 복사해서 사용했어야 했습니다.
단순히 생각해봐도 13줄이 계속 늘어나게 되는 구조 입니다
아래 코드는 플레이키보드 앱에 Compose로 작성한 버튼 코드의 일부입니다.
@Composable
fun MainButton (buttonText: String ,modifier: Modifier =Modifier ,click: () -> Unit ) {
Column() {
Button(
onClick = {
click()
},
modifier = MainButtonModifier,
) {
Text(
text =buttonText
)
} }
}
위 코드만 본다면 Compose XML보다 복잡해 보일 수 있습니다.
하지만 Compose를 사용하는 개발자는 내부 코드를 몰라도 사용할 수 있다는 장점이 있습니다.
마치 함수를 사용하듯이 말이죠
MainButton에 인자로 버튼에 들어갈 글자, 추가적인 다자인, 클릭하면 어떤 함수가 실행될지만 정해주면됩니다.
MainButton(
buttonText = getString(R.string.onboarding_cta_fast_typing),
modifier = Modifier.padding(bottom = 16.dp ))
{
startActivity()
finish()
}위 화면에 들어간 버튼의 코드 중 일부입니다.
개발자 버튼 텍스트, 추가적인 디자인, 버튼을 누르면 어떤 함수를 실행시켜 줄 건지만 작성해주면 플키의 메인 버튼이 만들어집니다.
XML로 구현했다면 XML 코드와 XML과 코틀린 코드를 연결해 주는 과정 또 클릭 이벤트를 주는과정이 필요했겠지만 이 모든 게 하나의 함수로 끝나는 것을 볼 수 있습니다.
와우!
Compose를 이용한다면 디자인 시스템을 만들 수 있습니다.
XML으로 style를 이용하여 디자인 시스템을 만들 수 있었지만 아쉬운 점이 많이 있었는데 컴포즈로 도입 후 웹 개발처럼 디자인 시스템을 만들 수 있습니다.
안드이드 공식 문서에도 Compose로 디자인 시스템을 만드는 걸 권장하고 있습니다.
또 어떤것이 바뀌었을까요?
가장 체감이 되는 것을 뽑으라면 리사이클러뷰가 사라진 것입니다.
기존 XML의 리사이클러뷰를 사용하기 위해선 item.xml , Adapter ,ViewHolder 등 다양한 파일들을 만들어 줬어야 했습니다.
하지만 Compose는 LazyColumn 을 통해 매우 간단하게 리스트를 만들 수 있습니다.
한눈에 봐도 XML과 비교해 보면 매우 간단해진 것을 알 수 있습니다.
Compose를 도입하기만 해도 개발 시간이 단축되는 것이죠
@Composable
fun ComposeRecyclerView () {
val itemList = listOf( "item 1" , "item 2" , "item 3" )
LazyColumn {
items(items = itemList) { item ->
Text(text = item)
} }
} @Composable fun MainActivity () { MaterialTheme { ComposeRecyclerView() } }
플레이키보드에선 어느 지면이 Compose로 개발되었나요?
시범적으로 Compose를 도입하기위해 새럽게 그리는 화면중 하나를 Compose로 개발하기로 했습니다.
온보딩 화면은 특별한 기능은 없지만 사용자들에게 친숙하고 효과적인 디자인을 구현하는 데 많은 노력이 필요한 화면입니다.
이에 따라 저희는 주로 사용자 경험과 UI 배치에 집중해야 하는 온보딩 화면을 선택하게 되었습니다.
컴포즈 사용해 보니 어때요?
결론적으로 혁신적이었습니다.
개발자들이 선언형 UI를 왜 환호하는지 알 수 있었습니다 .
계속 사용해 보면서 우와…라는 생각을 했던거 같네요.
확실히 생산성에 있어선 XML대비 압도적이었습니다.
마지막으로 하고 싶은 말이 있나요?
아직 처음 사용하는 거라 조금의 러닝 커브는 있었지만, 충분히 가치 있는 도전이었습니다.
아직도 Compose 도입을 망설이시는 개발자가 있나요?
어쩌면 Compose 도입에 대한 고민과 두려움은 매우 자연스러운 일일 수 있습니다.
기존 알고 있던 지식들은 (뷰바인딩 , 데이터 바인딩 , 리사이클러 뷰) 우리에게 많은 도움을 주었지만 이제 새로운 시대가 열리고 있습니다.
Compose는 더 직관적이고 선언형 방식으로 UI를 그릴 수 있게 해줍니다.
이를 통해 더 나은 개발 경험과 생산성 향상을 얻을 수 있습니다.
그간 배웠던 기술들은 소중하며 Compose를 배우는 데 분명 도움이 될 것입니다.
이 글을 읽고 Compose 도입에 대한 두려움과 망설임이 사라졌으면 좋겠어요.
Jetpack Compose basics — Compose 시작하기 | 찰스의 안드로이드
Jetpack Compose UI 앱 개발 도구 키트 — Android 개발자 | Android Developers
