[Android] Jetpack Compose 장점

Jetpack Compose

 

Jetpack Compose는 Android UI를 쉽고 효율적으로 만들 수 있는 Tool Kit이다.

이름에서 이 툴킷의 용도를 얼추 유추해 볼 수 있다.

Compose(조립하다, 구성하다 등 -> 대략 '작은 것들로 큰 것을 만든다' 라는 의미로 해석할 수 있다.)

 

MSA처럼 작은 단위로 UI Components를 쪼갠 뒤에 적재적소에 알맞은 녀석들을 끼워 넣어 UI를 구성한다는 의미다.

 

그래서 XML을 두고 굳이 왜..?

이런 생각을 할 수 있다. 필자도 처음에는 그랬다. 굳이 잘 쓰던 XML을 버리고 Compose로 개선해야 하는가?

정답은 It's up to you.

새로운 것이 무조건 좋은 것은 아니다. 이 글을 읽은 후에 판단은 본인에게 맡기겠다.

적은 소스 코드

지금 당장 프로젝트를 열어 res/layout 폴더 안에 있는 .xml 개수를 확인해 보자.

Activity 별로 거의 1:1 관계로 xml 파일이 존재할 것이다. 게다가 Custom Dialog라도 있다면 더 늘어날 것이고 RecyclerView에 들어가는 item layout도 있을 것이고 아무튼 사용자에게 보이는 화면이라면 무조건 다 있을 것이다.

그 안에 구성된 Button, TextView, EditText 이런 녀석들이 전부 다르지 않을 것이다. 여기서의 다름은 기본 색상, 글자 색상, 비활성화 색상 등을 이야기하는 것이지 위치나 크기를 이야기하는 것이 아님을 밝힌다.

 

불필요한 반복을 없애주는 것이 Compose의 장점 중 하나이다. 소스 코드가 줄어들면 그만큼의 관리포인트가 줄어드는 것이고, 개발도 더 빠르고 쉽게 완성될 수 있다는 것이다.

 

간단하게 Button을 예로 들어 차이를 확인해 보자.

기존 방식은 XML을 우선 만들고 Class에서 Inflate 해주는 과정이 필요하다.

<layout_example.xml>
...중략...

<Button
	android:text="Click!"
	android:textAllCaps="false"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

...생략...

위 코드로 생성된 버튼은 아래와 같다.

 

이제 이 XML 파일을 Class에 연결해 주는 작업이 필요하다.

<MainActivity.kt>
...중략...

override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.layout_example)

...생략...

이후에 Button 객체를 생성해서 초기화하고 사용할 수 있게 된다.

 

---

 

Jetpack Compose를 사용하면 훨씬 더 코드가 간결해진다.

(Jetpack Compose를 사용하기 위한 설정은 추후 다루겠다.)

function에 @Composable 애너테이션을 붙이면 Compose로써 사용이 가능하다.

@Composable
@Preview(showBackground = true)
fun Btn() {
    Button(onClick = { }) {
        Text(text = "Click!")
    }
}

@Preview 애너테이션을 붙이면 미리보기가 가능해진다.

위 함수로 생성된 버튼은 아래와 같다.

이제 이 버튼을 View에 넣어보자.

<MainActivity.kt>
...중략...

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

...생략...

끝이다. 이렇게 설정하면 아래와 같이 나온다.

정말 말도 안 되게 간편하고 소스코드의 양이 확 줄은 것을 확인할 수 있다.

여기에서 클릭이벤트를 구현하는 순간 그 차이는 기하급수적으로 달라질 수밖에 없다.

원래대로라면 id 달고 findViewById 해서 객체 만들고 setListener에 익명함수로 달거나 DataBinding을 써서 비교적 더 간편하게 했겠지만

Jetpack Compose는 Button 안에 있는 onClick에 함수만 구현해 주면 클릭이벤트를 구현할 수 있다.

게다가 고차함수를 넘겨받을 수 있기 때문에 버튼마다 다르게 구현할 수도 있다.

 

직관적

호출하는 API만 봐도 이것이 어떤 UI를 의미하는 지를 알 수 있도록 되어 있다. Button 뿐만 아니라 CheckBox, RadioButton, Row, Column 등 직관적으로 사용할 수 있도록 구성되어 있다.

 

728x90

 

개발 속도 증진

Compose는 기존 소스코드들과 호환이 잘 된다. Navigation, ViewModel, Kotlin coroutine도 Compose를 사용하고 있다. 또한 Preview를 보여주기 때문에 시간절약을 할 수 있다. 이 Preview는 에러케이스의 경우나 해상도나 크기가 다른 디바이스에서의 예외 상황 등을 비교적 빠르게 확인할 수 있도록 도와준다.

Preview에 마우스를 갖다 대면 우상단에 아이콘이 나오는데 Animation이 있는 경우엔 왼쪽에 하나가 더 생긴다.

맨 오른쪽은 에뮬레이터나 실제 디바이스에서 이 버튼을 확인할 수 있는 기능이다. 이 기능을 사용하고 나면 Run Configuration 이 해당 위젯으로 바뀌어 있기 때문에 다시 app으로 바꿔야 한다.

두 번째는 Interaction을 확인하는 기능이다. 눌렀을 때 Ripple Effect 같은 것들을 확인해 볼 수 있다.

 

Powerful

굉장히 강력하다. 여기서 강력하다는 말은 편리하다라는 말로 생각해도 좋을 것 같다.

Jetpack Compose는 Android Platform API는 물론 Material Design, Dark 테마, Animation 같은 기능들을 강력하게 지원해 준다.

 

 

마치며

이번 게시글에서는 이렇게 총 4개의 Jetpack Compose의 장점을 알아보았다.

다음 게시글에서는 Kotlin을 중심으로 빌드 된 Jetpack Compose의 특징에 대해 다뤄보겠다.