코딩

Jetpack Compose 소개 & 개발환경 세팅

Eastpark 2025. 1. 1. 20:00
728x90
반응형

Jetpack Compose 소개 & 개발환경 세팅

안드로이드 UI 개발에서 Jetpack Compose가 빠르게 자리를 잡아가고 있다.

구글이 주도적으로 밀고 있는 만큼, 새로운 프로젝트나 기존 프로젝트에서도 점차 Compose 도입을 고민하는 사례가 늘어나는 추세다.

이번 포스트에서는 Jetpack Compose가 무엇이며, 어떤 이점을 제공하는지, 그리고 프로젝트에서 사용하기 위한 개발환경 세팅을 중점적으로 다뤄보고자 한다.

1. Jetpack Compose란 무엇인가

1.1 선언형(Declarative) UI

기존 안드로이드 개발에서는 XML 레이아웃과 findViewById(), Adapter 등을 사용해 화면을 구성했다.

그러나 Jetpack Compose는 선언형(Declarative) UI 방식을 채택한다.

    • “어떻게 그릴지”를 세세하게 지시하기보다, “어떤 상태가 주어지면 이런 UI 형태가 된다”는 식으로 작성한다.

    • UI 요소는 @Composable 어노테이션이 붙은 함수(Composable 함수)를 통해 정의한다.

1.2 Kotlin 언어 기반

Compose는 Kotlin 언어로 동작하기 때문에, 람다식·확장 함수 등의 기능을 활용하여 매우 간결하고 직관적인 코드를 작성할 수 있다.

    • XML을 따로 관리하지 않아도 되므로, 뷰와 로직을 분리하면서도 UI 코드를 한눈에 파악하기 쉽다.

    • 기존 안드로이드 뷰 시스템과도 필요한 만큼만 통합 가능하다. (호환성을 고려한 Interoperability 제공)

1.3 UI·상태 관리의 단순화

    • Recomposition: 앱의 상태(State)가 변경되면, 해당 부분의 UI를 자동으로 다시 그려준다.

    • ViewModel, LiveData, StateFlow 등 안드로이드 아키텍처 컴포넌트와도 자연스럽게 결합할 수 있어, 깨끗한 코드 구조를 만들기 쉬워진다.

2. Jetpack Compose를 사용해야 하는 이유

1. 생산성: XML, Adapter, View Holder 등 보일러플레이트 코드를 크게 줄여준다.

2. 유연성: 디자인 가이드가 바뀌거나 요구사항이 변경되더라도, 필요한 UI만 재작성하면 되므로 확장성과 유지보수성이 뛰어나다.

3. 미래 지향성: 구글에서 Compose를 안드로이드 UI의 주력으로 삼고 있으므로, 앞으로 앱 개발 트렌드가 빠르게 Compose 중심으로 옮겨갈 가능성이 높다.

3. 개발환경 세팅

Jetpack Compose를 시작하기 위해서는 Android Studio Arctic Fox(또는 그 이상의 버전)가 필요하다.

이후 버전(예: Dolphin, Electric Eel 등)에서는 Compose 개발 환경이 더욱 개선되었다.

3.1 Android Studio 업데이트

1. Android Studio를 최신 버전(최소 Arctic Fox 이상)으로 업데이트한다.

2. SDK와 Build-Tools도 최신 릴리스를 설치한다.

 

3.2 Gradle 설정

프로젝트 루트의 build.gradle 또는 settings.gradle에서 Gradle 플러그인과 Kotlin 버전을 확인하고, Compose와 호환되는 버전을 사용한다.

buildscript {
    ext.kotlin_version = "1.8.0" // Compose에 맞추어 최신 버전 사용
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:8.0.0"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

• Android Gradle Plugin(AGP)의 버전은 8.0.0 이상을 권장한다.

• Kotlin 버전 역시 Compose 버전에 따라 달라지므로, 공식 문서에서 버전 호환성을 미리 확인한다.

3.3 모듈 설정 (app/build.gradle)

모듈 단위(app/build.gradle)에서도 Compose를 활성화

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 33

    defaultConfig {
        applicationId "com.example.composeapp"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"
    }

    buildFeatures {
        compose true // Compose 활성화
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.4.7"
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {
    // Compose BOM: 서로 다른 Compose 라이브러리들의 버전을 통일해준다
    def composeBom = platform("androidx.compose:compose-bom:2023.05.01")
    implementation composeBom
    androidTestImplementation composeBom

    // Compose UI, Material, Preview 라이브러리
    implementation "androidx.compose.ui:ui"
    implementation "androidx.compose.material:material"
    implementation "androidx.compose.ui:ui-tooling-preview"

    // Debug 툴링 라이브러리
    debugImplementation "androidx.compose.ui:ui-tooling"

    // Activity에서 Compose를 사용하기 위한 라이브러리
    implementation "androidx.activity:activity-compose:1.7.2"

    // ViewModel + Compose 연동 라이브러리 (선택)
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1"

    // UI 테스트
    androidTestImplementation "androidx.compose.ui:ui-test-junit4"
}

4. 간단한 예제로 확인하기

세팅이 끝났다면, MainActivity.kt에서 Compose 함수를 간단히 호출해본다.

package com.example.composeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContent 블록 안에서 Composable 함수를 호출한다.
        setContent {
            Greeting("Compose")
        }
    }
}

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

• ComponentActivity의 onCreate()에서 setContent { ... } 블록 안에 Greeting 함수를 호출한다.

• @Composable로 표시된 Greeting 함수가 실제로 화면에 “Hello, Compose!” 텍스트를 표시한다.

 

앱을 실행하면, Compose가 렌더링한 텍스트가 잘 나타나는 것을 확인할 수 있다.

728x90
반응형