컴포즈 (Jetpack Compose)

Android 앱 개발 방식은 오랜 시간 동안 XML 기반 UI로 유지되어 왔지만 Jetpack Compose의 등장으로 안드로이드 UI 개발 패러다임이 급격히 변화하고 있다.

Jetpack Compose의 기본 개념, 상태 관리 방법, 그리고 실제 프로젝트에 Compose를 도입에 대해 글로 작성해 본다

---

1. Jetpack Compose란?

Jetpack Compose는 구글이 공식 지원하는 선언형 UI 프레임워크로, Android 앱에서 UI를 더 간결하고 직관적으로 구성할 수 있다.

주요 특징

• XML이 필요 없음: 모든 UI는 Kotlin 코드로 작성
• 재사용성 향상: Composable 함수 단위로 UI 모듈화 가능
• 상태 기반 UI: 상태가 변경되면 자동으로 UI가 업데이트됨
• 기존 View 시스템과의 호환: 필요 시 기존 View와 함께 사용 가능

예)

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

@Preview
@Composable
fun PreviewGreeting() {
    Greeting(name = "Compose")
}

2. 기존 View 기반 방식과의 차이점

 

항목	기존 View (XML)	Jetpack Compose
UI 작성	XML과 Kotlin 코드 분리	Kotlin 코드로 UI 선언
데이터 반영	findViewById, ViewBinding	상태 변경 시 자동으로 반영
가독성	레이아웃과 로직 분리로 복잡	UI와 로직이 밀접하여 직관적
재사용	include, Custom View 필요	함수 단위로 간단하게 재사용
테스트	실제 View 필요, 복잡한 환경 설정	Composable 함수로 테스트 용이
성능	중첩된 레이아웃 시 성능 저하 우려	필요한 부분만 효율적으로 다시 그림

 

Compose는 선언형 방식으로 인해 UI의 흐름을 직관적으로 파악할 수 있고, 유지보수가 쉬우며, 코드가 간결해지는 장점가지고 있다

 

3. Compose에서의 상태 관리

Compose에서는 상태(state)가 UI의 핵심인데, 상태가 변경되면 해당 상태를 사용하는 UI만 다시 그려지는 구조이기 때문에, 전체적인 성능과 구조의 명확성이 좋아진다.

remember를 이용한 상태 관리

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

 

ViewModel과의 연동 예

class CounterViewModel : ViewModel() {
    private val _count = mutableStateOf(0)
    val count: State<Int> = _count

    fun increment() {
        _count.value++
    }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val count by viewModel.count

    Column {
        Text("Count: $count")
        Button(onClick = { viewModel.increment() }) {
            Text("+1")
        }
    }
}

 

이처럼 ViewModel과의 연동도 매우 자연스럽고, MVVM 패턴과도 알맞다.

---

4. 프로젝트에 Compose 도입

도입 배경

기존 프로젝트에서는 ViewBinding과 XML을 사용했지만, 신규 기능 화면부터 Compose를 조금 씩 사용해 보려고 생각했다.

도입 전략

• 기존 화면은 유지하고 신규 화면부터 Compose 적용
• 기존 ViewModel, Repository 구조 유지
• Jetpack Navigation을 Navigation-Compose로 전환

 

시행착오와 해결

• Compose 생명주기 및 recomposition 개념이 초반에 다소 생소하고 어려웠음
• 디버깅 시 어떤 Composable이 다시 그려졌는지 파악이 어려움
• 일부 서드파티 라이브러리의 호환문제? Compose 지원 미흡

도입 시 어려웠던 점

• UI 상태 흐름에 대한 학습 곡선: 기존 View 시스템과 달리 상태(state)가 중심이기 때문에, remember, mutableStateOf, LaunchedEffect 등 Compose 특유의 상태 관리 방식에 익숙해지는 데 시간이 걸림.
• 디버깅 도구의 부족: Compose 전용 디버깅 툴이나 recomposition 로그 확인 도구가 부족하여 초기에는 어떤 부분이 다시 그려지는지 파악하기 어려웠음.
• 기존 코드와의 통합 문제: 기존 View 기반 코드와 Compose를 함께 사용할 때 Fragment, Activity와의 연결에서 예기치 않은 버그 발생 가능성이 있음.
• 학습 자료의 분산: 공식 문서 외의 예제나 실전 경험 공유 자료가 부족해 처음 접근할 때 참고할 자료를 찾는 것이 어려웠음.

도입 후 장점

• UI 구성 코드가 한눈에 파악 가능해져서 유지보수 편리
• Composable 단위로 재사용성 대폭 향상
• 디자이너 피드백을 바로 반영할 수 있어 개발 속도 향상

---

마무리하며

Jetpack Compose는 Android 개발자에게 큰 전환점을 제공하는 도구이다. 기존 안드로이드 스타일과 달라 학습을 해야한다는 어려움이 있었지만, 코드가 간결해지고 직관적이며, MVVM 패턴과도 자연스럽게 어울리는 등 장점이 있다.

아직 Compose를 써보지 않으셨다면, 전체 프로젝트를 모두 한번에 바꾸기 보다는 부분적으로 예제나 신규 기능부터 도입해보시는 걸 추천한다. 앞으로의 안드로이드 UI는 Compose가 중심이 될 가능성이 높기 때문에, 컴포즈를 학습하여 프로젝트를 완성해 나가는 것을 목표 진행해 보려한다.