[Android] Compose UI 프로그래밍

https://developer.android.com/jetpack/compose/documentation

Jetpack Compose 시작하기  |  Android Developers

안드로이드의 Compose UI는 작년(2021년)부터 뜨기 시작한 안드로이드 Jetpack Library이다.

 

간단하게 말하자면 선언형 프로그래밍 방식의 UI 빌드형 라이브러리이다.

선언형이란 '어떻게' 보단 '무엇을'에 초점을 맞추어 개발하는 방식을 말한다.

 

컴포즈로 보자면 예를 들어 사용자가 버튼을 클릭해서 토스트를 띄우게끔 할거라면

"토스트를 띄우는 버튼"에 초점을 맞추어 메서드를 만드는 거라고 볼 수 있을 것 같다.

 

Compose와 유사한 방식을 가진 것으로는 Flutter, SwiftUI가 있다.

SwiftUI는 사용해본 적이 없어서 자세한 설명은 못하지만, Flutter의 경우 위젯 내부에 위젯을 넣으면서 개발하는 형태를 지니고 있다.

 

안드로이드 컴포즈의 경우 뷰에 뷰를 쌓는 느낌을 개발을 한다.

 

공식 문서에 나와있는 컴포즈의 예시이다. 보다시피 한눈에 보기 좋은 편이다.

 

컴포즈에 대한 설명에 앞서 장점을 짚어보자면

1. 코드 감소

2. 직관적

3. 빠른 개발 과정

4. 강력한 성능

이렇게 네가지가 공식적인 장점이다.

 

장점을 조금 풀어서 말해보자면 기존에 안드로이드 뷰를 그릴 때에는 xml 파일을 작성하고 코틀린 파일에서 바인딩하고 필요에 따라 업데이트, 이벤트 기능 등을 추가하다보니 파일의 양도 많고 코드도 길어지고 한눈에 보기 어렵다고 볼 수 있다.

컴포즈로 개발을 하면 코틀린 파일 내에서 UI와 데이터 관리가 모두 이루어진다. 전반적으로 직관적이고 개발과정이 빨라진다고 볼 수 있다.

 

또한 성능이 좋다. 이 부분은 빌드 속도가 빨라지고 앱이 가벼워진다는 것을 의미한다.

여기서 한가지 예외 사항이 있다면,

기존 xml과 컴포즈를 동시에 쓰는 건 크게 속도가 빨라진다고 보기 어렵다.

아예 컴포즈만 사용하는 것이 이 성능 측면의 장점을 누릴 수 있게 해준다.

 

그렇다면 안드로이드 컴포즈 개발에서의 베이직한 뷰를 알아야 한다.

3가지가 있는데 크게 Row, Column, Box이다.

 

<Row>

<Column>

<Box>

Row랑 Column은 어렵지 않으니 이미지로 충분히 설명이 되었을 것이다.

Box의 경우 그냥 Container(Flutter에선 Container와 비슷)라고 생각하면 된다.

내부에 뷰를 배치할 수 있는데 그냥 배치하면 쌓이듯이 배치되기도 한다.

 

간단한 예제 코드를 보여주자면 다음과 같다.

class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExampleScreen()
        }
    }
}

@Composable
fun ExampleScreen() {
    val context = LocalContext.current

    ComposeTestProjectTheme() { 
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {

                Button(onClick = {
                    context.startActivity(Intent(context, LazyColumnActivity::class.java))
                }) {
                    Text(text = "Lazy Column")
                }
                Button(onClick = {
                    context.startActivity(Intent(context, RoomActivity::class.java))
                }) {
                    Text(text = "Room")
                }
                Button(onClick = {
                    context.startActivity(Intent(context, PagingActivity::class.java))
                }) {
                    Text(text = "Paging")
                }

            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTestProjectTheme {
         ExampleScreen()
    }
}

해당 예시에 대한 설명은 다음과 같다.

 

컴포즈는 미리보기 기능을 지원하는데 @Preview 주석만 달아주면 된다. 메서드 이름은 겹치면 안되는 것에 유의해야 한다.

보통 preview를 보면서 개발을 하기 때문에 oncreate 와 preview 쪽에선 최소화하여 동일하게 작성을 해주어야 귀찮게 계속 양쪽에 둘다 수정을 해주어야 하는 일이 발생하지 않는다.

 

 

<컴포즈 재사용>

컴포즈의 특성을 살려서 컴포저블 메서드는 재사용을 잘 해주는 것이 좋다.

 

나의 경우 이러한 식으로 파일을 만들고 내부에 공통적으로 쓰이는 부분들을 담아서 사용하였다.

일반적으로 그냥 메서드만 파일을 구분하여 만드는 경우를 많이 봤는데 필요에 따라, 어떻게 사용하느냐에 따라 object로 만들어도 좋을 것 같다고 생각한다.

 

 

Compose 공식 문서 상의 특징 및 권장사항이다.

 

여전히 불편한 점이 없다고 볼 순 없지만, 구글에서 굉장히 밀어주는 라이브러리이니 만큼 흐름을 잘 숙지하고 있는 게 좋을 것 같다고 생각했다.

러닝커브가 없다고 볼 순 없으며 현재 대부분의 앱이 xml로 만들어져 있을텐데 이를 compose로 변환하는 게 쉬운 과정은 아니다.

또한 MVVM 패턴을 굉장히 권장하고 있다. 해당 패턴이 아닌 MVP 등으로 이루어져 있는 경우 전반적인 아키텍처를 수정해야 될 것이다.

 

익숙해지는 데에는 조금 시간이 걸린다고 한다. 나의 경우 Flutter를 했던 경험 덕분에 사용이 어렵진 않았다.

하지만 처음 Flutter를 접했을 때를 생각하면 불편했던 점이 이만저만이 아니었다.

ConstraintLayout도 Compose에서 지원을 하고 있지만 굳이 필요로 되지 않는다.

 

다시 LinearLayout에 익숙해지는 것이 더 좋을 것 같다.