[Android] Performance Testing XML vs Programmatically vs Jetpack Compose

💡 UI 작업을 XML과 Code, Jetpack Compose 진행했을 때의 차이를 비교하고 테스트를 진행하였습니다.

 

개요

• XML과 Programmatically 방식에 대한 차이점이 궁금하던 중 직접 테스트한 블로그를 발견하여 학습하게 되었습니다.

Performance comparison: building Android Layout with XML vs By Code vs Jetpack Compose

Performance comparison: building Android Layout with XML vs By Code vs Jetpack Compose

• 위 포스팅에서는 XML로 UI를 그리는 것과 Kotlin Code 상에서 UI를 그리는 것의 차이점을 파악하였습니다.
• 또한 Jetpack Compose의 등장으로 3가지 경우에 대한 테스트를 진행하였습니다 !
• 위 포스팅은 2020년 게시물로, Jetpack Compose가 많이 사용되는 경우가 아니었으므로 현재는 Jetpack Compose의 테스트 시간이 더욱 단축되었을 가능성이 큽니다.
• 코드를 작성하여 성능 테스트를 진행하였습니다.

비교 대상

XML 레이아웃

• 전통적인 방법으로, UI 요소를 XML 파일에서 선언합니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

</LinearLayout>

코드로 UI 작성

• 코틀린 코드에서 View 객체를 직접 생성하고 레이아웃을 구성합니다.

val linearLayout = LinearLayout(this).apply {
    orientation = LinearLayout.VERTICAL
    layoutParams = LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.MATCH_PARENT,
        LinearLayout.LayoutParams.MATCH_PARENT
    )
}

val textView = TextView(this).apply {
    text = "Hello World!"
    layoutParams = LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT
    )
}

val button = Button(this).apply {
    text = "Click Me"
    layoutParams = LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT
    )
}

linearLayout.addView(textView)
linearLayout.addView(button)
setContentView(linearLayout)

Jetpack Compose

• 선언적 방식으로 Composable Function으로 UI를 구성합니다.

@Composable
fun Greeting() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(text = "Hello World!")
        Button(onClick = { /* Do something */ }) {
            Text("Click Me")
        }
    }
}

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

테스트 시나리오

• 총 2가지 테스트 시나리오를 작성하였습니다.

앱의 초기 로딩 시간

• 각 앱을 실행하고 첫 화면이 로드되는 데 걸리는 시간을 측정합니다.

레이아웃 렌더링 시간

• UI를 렌더링 하는 데 걸리는 시간을 측정합니다.

테스트 환경

• Android Studio에서 동일한 기기로 테스트를 진행하였습니다.
• Compose 버전을 최신 버전으로 업데이트하였습니다.
• Wi-Fi를 사용하면 CPU가 느려지는 경우가 있으므로 모든 Wi-Fi와 백그라운드 서비스를 끄고 테스트를 진행했습니다.
• 반복 테스트를 통해 각 방식별로 여러 변 반복해서 평균 값을 도출하였습니다.
• Logcat을 사용하여 각 앱의 시작과 onResume()에서 시간을 측정합니다.

override fun onResume() {
    super.onResume()
    val end = System.currentTimeMillis()
    val result = end - start
}

테스트 결과

• 테스트 결과를 밀리초(ms) 단위로 측정하여 정리하였습니다.

방법	초기 로딩 시간(ms)	레이아웃 렌더링 시간(ms)
XML 레아이웃	평균 약 250ms	평균 약 300ms
코드 작성	평균 약 220ms	평균 약 280ms
Jetpack Compose	평균 약 300ms	평균 약 350ms

초기 로딩 시간

• 코드로 UI를 작성한 방식이 가장 빠른 로딩 시간을 보였습니다.
• XML 레이아웃이 그 뒤를 따르고, Jetpack Compose가 가장 느렸습니다.
• Jetpack Compose의 경우 선언적 방식과 많은 리소스를 요구하는 초기 설정으로 인해 로딩 시간이 길어질 수 있습니다.

레이아웃 렌더링 시간

• 코드를 UI로 작성한 방식이 가장 빠르게 렌더링 되었으며, XML보다 조금 더 빠른 렌더링을 보여줬습니다.
• Jetpack Compose는 현재 렌더링 시간이 가장 길었지만 최신 버전에서는 많은 최적화가 이루어지는 것으로 보아 특정 상황에서는 빠른 렌더링을 보인 경우도 있었습니다.

결론

• Jetpack Compose는 초기 로딩 시간과 렌더링 시간이 길지만 선언적 UI 작성의 장점과 복잡한 UI를 쉽게 구성할 수 있는 장점이 있습니다.
  • 또한 최신 버전일 수록 최적화가 이루어지므로 점점 장점이 증가할 수 있습니다.
• 코드 작성 방식이 XML 레이아웃 보다 빠른 로딩과 렌더링 시간을 보여주었지만 그 차이는 작으며, 코드 작성 방식이 더 복잡한 것을 고려하면 XML 레이아웃 방식이 더 좋은 방법이 될 수도 있습니다.
• 프로젝트의 필요에 따라 최적의 선택을 진행하는 것이 중요할 것입니다 !!