[Jetpack] Compose 란?

혼자 스터디를 진행하고 이해한대로 작성된 글이기 때문에 옳지 못한 정보가 있을 수 있습니다.

잘못된 부분은 언제든지 지적해주시면 감사하겠습니다.

---

Jetpack에는 Compose라는 것이 있다.

지금까지 사용하던 XML을 사용하지 않고 코틀린으로 선언하여 화면을 그릴 수 있는, Native UI를 코드레벨로 구현할 수 있도록 도와주는 도구이다.

 

필자가 Jetpack Compose에 대하여 공부를 진행하고 있으나, 생각보다 러닝커브가 있는 것으로 보인다.

기존의 XML 방식만 사용하다 다른 방식을 사용하면서 사용 방법에 대한 갭 때문에 어렵게 느껴지는 것도 있는 것으로 보이는데, 최대한 많은 부분을 이해해보고자 Compose에 대한 글을 작성하려고 한다.

 

혼자 공부하고 이해한 대로 작성한 글이기 때문에 잘못 된 부분이 있을 수 있으며, 확인하는대로 수정을 해둘 생각이다.

---

우선,

Compose 란 무엇인가 ?

 

Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트로,
Android를 위한 현대적인 선언형 UI 도구 키트이다.

 

Jetpack Compose에 대한 안드로이드 공식 문서에 대한 내용인데, 여기서 가장 중요한 부분은 선언형 UI 도구라는 것이다.

지금까지는 XML을 사용하고, 명령형 UI를 사용하여 UI를 그려서 앱을 구현하였는데, Compose를 사용하면 Flutter나, Swift UI 처럼 선언형 UI를 사용하여 개발할 수 있도록 도와준다.

 

여기서, 명령형 UI와 선언형 UI에 대하여 간단하게 차이를 보자면 다음과 같다.

 

// 명령형 UI
val textView = TextView()
textView.text = "~"
textView.setTextColor("~")
...

// 선언형 UI
Text(
   text = "~"
   color = "~"
   ...
)

 

이런식으로 명령형 UI는 아이템을 생성하고, 아이템의 값들을 추가적으로 작성하는 반면, 선언형 UI는 아이템을 생성할 때 아이템의 값들을 작성하여 생성하게 된다.

 

그렇다면,

Compose를 사용했을 때 얻을 수 있는 장점은 무엇일까?

1. 코드 감소
   1. 작성하는 코드를  Kotlin, XML로 나누지 않고 Kotlin으로만 작성할 수 있다.
   2. View를 그릴 때, XML보다 작성되는 코드가 적다.
   3. 유지 관리와 디버깅이 쉬워진다.
2. 직관적
   1. UI를 설명하기만 하면 되며, 직관적이고 읽기가 쉽다.
   2. 앱 상태가 변경되면 UI가 자동으로 업데이트 된다.
   3. 통제를 벗어나거나 이해하지 못하는 행동이 줄어든다.
3. 빠른 개발
   1. 기존의 모든 코드와 호환 된다.
   2. 실시간 미리보기와 같은 기능을 통해 더 빠르게 개발이 가능하다.
4. 높은 성능
   1. 머티리얼 디자인, 어두운 테마, 애니메이션 등을 기본적으로 지원한다.
   2. 특별한 도구 업싱도 애니메이션을 추가할 수 있다.
   3. 원하는 디자인을 유연하게 구현할 수 있다.

안드로이드 공식 페이지에서 Compose를 사용해야 하는 이유를 확인하면 다음과 같다.

 

코드의 감소와 직관적이라는 것은 필자가 잠깐 공부하면서 몇 가지의 코드를 작성했을 때도 느낄 수 있는 부분이었지만,

빠른 개발이라는 것은 아무래도 Compose에 익숙해지지 않으면 힘들 것이라고 생각한다.

아무래도 XML을 사용했을 때와 사용방법이 상당히 차이가 있어서 다른 장점을 느끼지 못하는 것으로 보이지만,

사용 방법에 익숙해진다면 확실히 XML보다 편하게 사용이 가능할 것이라고 생각이 든다.

---

그렇다면,

간단하게  Compose를 사용해보도록 하자.

 

아직 제대로 된 사용법을 모르기 때문에 기존의 XML을 사용한 프로젝트를 변경하는 것이 아닌, 새로운 프로젝트를 만들어서 Compose를 사용해보도록 하자.

 

 

프로젝트를 새로 만들면 위와 같이 Empty Compose Activity를 선택할 수 있다.

해당 아이템을 클릭하고 프로젝트를 새로 만들게 되면,

 

 

이런 구조를 가지고 있는 프로젝트가 만들어지게 된다.

res 폴더를 보면 알 수 있겠지만 layout 폴더가 존재하지 않고, kt 파일만 존재하는 것을 볼 수 있다.

 

 

MainActivity를 확인해 보면 이와 같이 나와있다.

 

위에서 부터 차례대로 확인을 해보자.

setContent 블록은 해당 Activity에서 보여줄 레이아웃을 정의한다.

 

ComposeTempTheme {
    // A surface container using the 'background' color from the theme
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {
        Greeting("Android")
    }
}

 

setContent 블록 안에는 위의 코드가 들어가 있는데, 여기서 ComposeTempTheme는 ui.theme 패키지의 theme.kt 파일에 정의되어 있는 테마 파일이다.

해당 파일은 프로젝트를 만들 때 프로젝트 이름을 토대로 자동 생성되는 것으로, 필자는 ComposeTemp 라는 이름으로 프로젝트를 만들었기 때문에 이와 같이 나오는 것이다.

 

Surface는 이하의 요소를 감싸는 컨테이너 역할을 하는 것이다.

즉, modifier, color에 대한 속성 값을 가지고 Greeting이라는 요소를 감싸게 된다는 것이다.

 

 

Surface는 다음과 같은 값들을 사용할 수 있는데, 그 중에서 2가지의 속성 값만 사용한 것이다.

 

다시 setContent 코드로 돌아와서 해석해보자면 다음과 같다.

ComposeThempTheme로 선언 되어있는 테마를 사용하여 이하의 아이템들을 그린다.

Greeting이라는 아이템을 그리는데 Android라는 텍스트를 넘길 것이고, 이는 fillMaxSize를 가지고 MeterialTheme의 background 색을 가지게 된다.

 

다음으로, Greeting 함수를 확인해보자.

 

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

 

@Composable이라는 어노테이션을 확인할 수 있는데, 해당 어노테이션을 선언해서 작성한 함수는 Compose를 사용해서 빌드를 하겠다는 의미가 된다. 즉, 간단하게 말해서 UI 요소라고 생각하면 된다.

 

매개변수로 string 값을 받아오고, Text라는 아이템의 text 값에 이를 사용하고 있다. 

여기서, Text라는 아이템은 TextView라고 생각하면 된다.

기존의 XML을 사용하여 간단한 TextView를 만들기 위해서는 TextView 아이템을 선언해 너비와 높이 값을 입력받고 작성해야 했는데, Compose를 사용해서 별 다른 조건 없이 TextView를 사용하기 위해서는 위와 같은 한 줄만 추가하면 된다.

 

이것만 봐도 코드량이 적고, 직관적이며 간단하게 사용이 가능하다는 것을 느낄 수 있을 것이다.

 

 

다음으로는,

DefaultPreview() 함수에 대해서 확인할 차례이다.

 

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTempTheme {
        Greeting("Android")
    }
}

 

onCreate의 setContent에서는 Greeting만 호출하고 있기 때문에 DefaultPreview 함수는 호출되지 않는다.

하지만, @Preview 어노테이션과 함수의 이름을 보면 알 수 있듯이, 해당 어노테이션을 사용하게 되면 앱을 빌드하거나 에뮬레이터에 설치하지 않고도 해당 UI를 확인할 수 있게 된다.

 

@Preview 어노테이션을 통해 Preview로 UI를 확인할 것인데, showBackground = true로 설정하여 배경이 있는 경우 확인하게 된다.

ComposeTempTheme를 사용하며 Greeting 함수를 통해 Hello Android라는 TextView를 보여주게 된다.

 

이 상태에서, 우측 상단의 Split이나 Design을 누르면 XML에서 확인했을 때와 마찬가지로 UI를 확인할 수 있다.

 

 

조금 더 확장해서, PreView 어노테이션은 하나가 아니라 여러번 붙여서 선언할 수 있다.

 

@Preview(
    name = "Mode 1",
    showBackground = true
)
@Preview(
    showBackground = false,
    name = "Mode 2"
)
@Preview(
    showBackground = true,
    name = "Mode 3"
)
@Composable
fun DefaultPreview() {
    ComposeTempTheme {
        Greeting("Android")
    }
}

 

이처럼 name을 다르게 선언해서 @Preview 어노테이션을 추가하게 되면

 

 

이처럼 각 Preview 모드에 맞춰서 UI를 보여주게 된다.

해당 방법을 사용하여 Night 모드일 떄의 UI를 동시에 확인한던지 다양하게 사용할 수 있을 것으로 보인다.

---

이번에는 아주 간단하게 Compose가 무엇인지 알아보고,

프로젝트를 만들었을 때 기본적으로 나와있는 함수들을 확인하고 알아보았다.

 

아직까지는 이정도라면 엄청 간단한데? 라고 생각이 들 수 있겠지만,

지금 선언했던 TextView에 XML처럼 속성 값들을 줘야한다고 생각했을 때, 어떻게 줘야할지 처음 접하는 필자로써는 감이 오지 않는다.

처음 보는 요소들도 상당히 있기도 하니까 말이다.

 

앞으로 좀 더 Compose에 대하여 스터디를 진행하고, 이런 저런 UI를 만들어 보면서 조금 더 Compose에 익숙해지도록 해야겠다.

Compose에 대한 공부를 진행하면서, 그 진행 과정을 모두 글로 작성할 수는 없겠지만, 작성할 필요성이 있다고 느끼는 것들에 대해서는 글을 작성해 볼 예정이다.