Jetpack Compose 개요

안녕하세요, 오늘은 구글에서 새롭게 출시한 선언형 UI 도구 키트인 Jetpack Compose에 대해서 알아보려고 합니다.

아직까지 Compose는 알파와 베타 버전이 혼합되어 있지만 빠른 속도로 발전되고 있어 공부 가치가 충분히 있다고 생각합니다.

🚀 Jetpack Compose가 도대체 뭔데?

Compose는 안드로이드 네이티브의 UI를 개발하기 위해 구글에서 새롭게 출시한 선언형 UI 도구 키트입니다. Compose를 활용하여 UI 개발을 진행한다면 이전에 XML 방식으로 UI 개발을 진행할 때는 경험하지 못했던 아래와 같은 장점들을 얻을 수 있습니다.

 

1) 코드 감소	적은 수의 코드로 더 많은 작업을 하고 전체 버그 클래스를 방지할 수 있으므로 코드가 간단하며 유지 관리하기 쉽다.
2) 직관적	UI만 설명하면 나머지는 Compose에서 처리하며 또한 앱 상태가 변경되면 UI가 자동으로 업데이트 된다.
3) 빠른 개발 과정	기존의 모든 코드와 호환되며 또한 실시간 미리보기 등 각종 안드로이드 스튜디오의 지원으로 빠르게 개발할 수 있다.
4) 강력한 성능	안드로이드 플랫폼 API에 직접 액세스하고 머티리얼 디자인, 어두운 모드, 애니메이션 등을 기본적으로 지원한다.

이전까지는 안드로이드 네이티브의 UI를 개발하기 위한 방법으로 XML 방식밖에 존재하지 않아 화면의 UI가 복잡해질 시 코드가 난잡해질 뿐만 아니라 앱의 상태 변화에 따른 데이터 업데이트 과정에서도 많은 힘이 들었습니다. 또한 유지보수가 매우 힘들다는 대표적인 단점이 존재하여 기존의 개발자가 작성한 코드를 새로운 개발자가 이어서 유지보수를 한다는 것이 쉽지만은 않았습니다.

 

이미지 출처 : Android Developers

이러한 단점들을 극복하기 위해 구글에서 새롭게 출시한 것이 바로 Jetpack Compose 입니다. 2년 전 애플 역시 WWDC 2019 컨퍼런스에서 기존의 UIKit 방식의 스토리보드를 대체할 새로운 개발 패러다임인 SwiftUI를 먼저 선보이기도 했습니다. 이처럼 현시대에는 이전의 명령형 프로그래밍 방식보다 선언형 프로그래밍 방식을 더욱 추구하면서 개발 트렌드가 점차적으로 바뀌고 있습니다.

🍭 Jetpack Compose 살짝 맛보기!

앞으로 Compose에 대해서 심화적으로 공부해보기 전 Compose를 활용하여 간단한 예제를 진행해보겠습니다. 또한 예제 속 동일한 UI를 기존의 명령형 프로그래밍 방식인 XML로도 함께 구현해보면서 두 방식의 차이점에 대해서 살펴보겠습니다. 특히 이번 과정에서는 각각의 코드에 대해서 정확하게 이해하는 것보다 Compose에 대한 전체적인 느낌을 경험하는 것이 더욱 중요합니다.

 

예제 출처 : Android Developers

1) 명령형 프로그래밍 방식인 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:cardCornerRadius="4dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/header"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription" />
    </androidx.cardview.widget.CardView>

    <View
        android:layout_width="match_parent"
        android:layout_height="16dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A day wandering through the sandhills in Shark Fin Cove, and a few of the sights I saw"
        android:textSize="20sp"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:maxLines="2"
        android:ellipsize="end"
        tools:ignore="HardcodedText" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Davenport, California"
        android:textSize="14sp"
        android:textColor="@color/black"
        tools:ignore="HardcodedText" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="December 2018"
        android:textSize="14sp"
        android:textColor="@color/black"
        tools:ignore="HardcodedText" />

</LinearLayout>

2) 선언형 프로그래밍 방식인 Compose

@Composable
fun NewsStory() {
    MaterialTheme {
        val typography = MaterialTheme.typography
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Image(
                painter = painterResource(R.drawable.header),
                contentDescription = null,
                modifier = Modifier
                    .height(180.dp)
                    .fillMaxWidth()
                    .clip(shape = RoundedCornerShape(4.dp)),
                contentScale = ContentScale.Crop
            )
            Spacer(Modifier.height(16.dp))

            Text("A day in Shark Fin Cove",
                style = typography.h6)
            Text("Davenport, California",
                style = typography.body2)
            Text("December 2018",
                style = typography.body2)
        }
    }
}

동일한 UI 임에도 불구하고 Compose를 활용하였을 때의 코드 양이 2배나 줄어드는 이유가 무엇일까요? 그것은 바로 Compose에서 기본적으로 제공하는 코틀린의 직관적인 UI 관련 API를 사용하였기 때문입니다. 이를 통해 중복 코드를 줄일 수 있으며 더욱 빠른 속도로 개발을 진행할 수 있습니다. 그러나 위의 두 방식은 코드 작성 방법에서만 차이가 존재하지 코드 속 내부 로직은 일치합니다.

 

또한 Compose의 코드에 대해서 이해가 되지 않는 부분이 많을 것입니다. 그래도 이번 글에서는 코드에 대한 상세 설명을 따로 진행하지 않겠습니다. 앞에서도 말했듯이 이번 과정에서는 각각의 코드에 대해서 정확하게 이해하는 것보다 Compose에 대한 전체적인 느낌을 경험하는 것이 더욱 중요하다고 말했습니다. 앞으로 Compose에 대해서 천천히 알아갈 것이기 때문에 걱정하지 않으셔도 됩니다. 그러나 코드를 정확히 이해 및 분석하고 싶은 분들은 구글에서 공식적으로 제공하는 아래의 설명 글을 참고하시면 되겠습니다.

Android 개발자  |  Android Developers

🌍 Jetpack Compose의 미래는?

지난 2017년 구글에서는 자체 클로스 플랫폼인 Flutter에 처음으로 선언형 프로그래밍 방식을 도입하여 출시했던 적이 있습니다. 그 후 2020년에는 안드로이드 네이티브의 UI 개발에도 선언형 프로그래밍 방식을 도입하여 선보인 것이 바로 지금까지 알아보았던 Compose 입니다. 구글 뿐만 아니라 애플, 페이스북, 에어비엔비 등 각종 유명 기업들 역시 기존의 명령형 프로그래밍 방식의 UI 개발에서 느꼈던 불편한 문제점들을 해결하기 위해 다들 선언형 프로그래밍 방식을 추구하면서 개발 트렌드가 점점 바뀌고 있습니다.

 

이미지 출처 : Google Play Store

더 나아가 앞으로의 미래에는 선언형 프로그래밍 방식이 각 플랫폼 별 공식화가 될 것이라고 예상합니다. 지금까지 출시된 많은 서비스들이 기존의 명령형 프로그래밍 방식으로 개발되어 있기 때문에 지금 당장 모든 것이 선언형 프로그래밍 방식으로 변경되는 것은 현실적으로 불가능하지만 앞으로 시간이 지남으로서 선언형 프로그래밍 방식의 사용률은 분명히 높아질 것이라고 확신합니다.

 

이미지 출처 : Android Developers

Compose 역시 현재는 아직까지 알파와 베타 버전이 혼합되어 있는 상태이지만 시간이 조금 더 지나고 버전이 안정화되어 정식 릴리즈 버전을 출시한다면 구글 역시 Compose 사용을 지향하고 이를 공식화할 것이라고 생각합니다. 그렇기 때문에 Compose를 지금부터 공부하고 미리 연습해보는 것은 괜찮은 투자이며 앞으로의 미래를 보고 움직이는 좋은 선택이라고 저는 판단했습니다.

👍 글을 마치며

오늘은 Jetpack Compose 개요라는 주제로 Compose에 대해서 알아보았습니다. 심화적으로 내용을 공부했다기 보다는 이에 대한 느낌과 흥미를 가질 수 있도록 초점을 두었습니다. 저 역시 고등학교 1학년 때부터 현재까지 약 2년 동안 안드로이드 앱 개발을 주로 진행했으며 이 과정에서도 많은 것들이 변화하고 발전했습니다. 세상은 지금도 빠른 속도로 변화하고 이런 변화에 뒤쳐지지 않으려면 꾸준히 배움을 이어나가야 합니다. 이번에 새롭게 출시된 Compose 역시 안드로이드 플랫폼의 새로운 혁신과 같으며 미래의 주 개발 패러다임으로 발전할 수 있습니다. 그렇기 때문에 지금부터 천천히 공부를 진행하면서 미래의 개발 트렌드를 미리 대비해야 합니다. 오늘도 긴 글을 읽어주셔서 너무 감사하며 앞으로도 Compose 관련으로 이해하기 쉬운 글을 작성하도록 노력하겠습니다.