코틀린 안드로이드 앱개발 강좌, 제트팩을 이용해 화면 만들기

안드로이드 개발에서 사용자 인터페이스(UI)는 어플리케이션의 핵심 요소 중 하나입니다.
이를 구축하기 위해 Android Jetpack의 다양한 라이브러리와 도구를 활용할 수 있습니다.
이 글에서는 코틀린을 사용하여 Jetpack Compose를 통해 화면을 만드는 방법에 대해 자세히 알아보겠습니다.

1. Jetpack Compose란?

Jetpack Compose는 현대적인 안드로이드 UI 툴킷입니다.
선언형 UI 패러다임을 사용하여 개발자가 더 쉽게 사용할 수 있도록 합니다.
이 도구는 UI를 빠르게 구축하고 동적으로 업데이트할 수 있게 해줍니다.
또한, 기존 XML 레이아웃 시스템과의 호환성을 제공하며, UI 요소들을 쉽고 직관적으로 구성할 수 있는 기능을 갖추고 있습니다.

2. Jetpack Compose의 장점

  • 선언형 UI: UI가 상태에 따라 자동으로 업데이트됩니다.
  • 모듈화: UI 구성 요소들을 재사용 가능한 작은 단위로 나누어 관리합니다.
  • 툴링 지원: Android Studio에서 미리 보기 기능과 코드 리팩토링 지원을 통해 생산성을 높입니다.

3. Jetpack Compose 시작하기

Jetpack Compose를 사용하기 위해서는 Android Studio를 최신 버전으로 업데이트해야 합니다.
또한, 프로젝트 생성 시 Compose를 사용하도록 설정해야 합니다.

3.1. 새로운 Compose 프로젝트 생성하기

  1. Android Studio를 실행하고 “New Project”를 선택합니다.
  2. “Empty Compose Activity” 템플릿을 선택합니다.
  3. 프로젝트 이름과 패키지 정보를 입력한 뒤 “Finish” 버튼을 클릭하여 프로젝트를 생성합니다.

3.2. build.gradle 설정

다음으로, 프로젝트의 build.gradle 파일을 설정해야 합니다.
Compose 관련 의존성을 추가하는 것이 필요합니다. 

dependencies {
    implementation "androidx.compose.ui:ui:1.0.0"
    implementation "androidx.compose.material:material:1.0.0"
    implementation "androidx.compose.ui:ui-tooling:1.0.0"
    implementation "androidx.activity:activity-compose:1.3.0"
}

4. 간단한 UI 화면 만들기

이제 본격적으로 간단한 UI 화면을 만들어보겠습니다.
예를 들어, 기본적인 버튼과 텍스트를 통해 사용자 상호작용을 구현해 보겠습니다.

4.1. 기본 UI 구성하기

package com.example.myapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

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

@Composable
fun MyApp(content: @Composable () -> Unit) {
    MaterialTheme {
        content()
    }
}

@Composable
fun Greeting(name: String) {
    Button(onClick = { /* Do something */ }) {
        Text(text = "Hello, $name!")
    }
}

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

5. Compose의 UI 구성 요소

Compose는 다양한 UI 구성 요소를 제공합니다. 여기서는 몇 가지 주요 구성 요소에 대해 설명합니다.

5.1. Text

텍스트를 표시하기 위해서는 Text 컴포저블을 사용할 수 있습니다.
다음은 문자열을 화면에 표시하는 예시입니다. 

@Composable
fun DisplayText() {
    Text(text = "안녕하세요, Jetpack Compose!")
}

5.2. Button

버튼을 만들어 사용자의 입력을 받을 수 있습니다.
아래 코드는 버튼을 클릭했을 때 텍스트가 변경되는 예제입니다. 

@Composable
fun ButtonExample() {
    var buttonText by remember { mutableStateOf("클릭해 주세요") }
    
    Button(onClick = { buttonText = "클릭되었습니다!" }) {
        Text(text = buttonText)
    }
}

5.3. Column

Column 컴포저블을 사용하여 수직 방향으로 구성 요소들을 나열할 수 있습니다. 

@Composable
fun ColumnExample() {
    Column {
        Text("첫 번째 텍스트")
        Button(onClick = { /* Do something */ }) {
            Text("두 번째 텍스트 버튼")
        }
    }
}

6. 상태 관리

Jetpack Compose는 상태 기반의 UI 컴포넌트를 쉽게 관리할 수 있게 해줍니다.
상태가 변경되면 UI가 자동으로 업데이트됩니다.
remember, mutableStateOf를 통해 UI의 상태를 관리할 수 있습니다.

6.1. 상태 예제

@Composable
fun StatefulCounter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "현재 카운트: $count")
        Button(onClick = { count++ }) {
            Text(text = "카운트 증가")
        }
    }
}

7. 디자인 구성

Jetpack Compose는 Material Design을 기본으로 지원합니다.
다양한 Material UI 컴포넌트를 사용하여 일관된 디자인을 유지할 수 있습니다.

7.1. Material Theme 사용하기

@Composable
fun ThemedApp() {
    MaterialTheme {
        Column {
            Text("Material Design 예제", style = MaterialTheme.typography.h4)
            Button(onClick = { /* Do something */ }) {
                Text("버튼")
            }
        }
    }
}

8. 네비게이션 관리

여러 화면 간의 전환을 관리하는 것은 안드로이드 앱 개발에서 매우 중요합니다.
Jetpack Compose에서는 NavHost를 사용하여 쉽게 구현할 수 있습니다.

8.1. 네비게이션 라이브러리 추가하기

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0"
}

8.2. 네비게이션 예제

@Composable
fun SetupNavGraph() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "firstScreen") {
        composable("firstScreen") { FirstScreen(navController) }
        composable("secondScreen") { SecondScreen() }
    }
}

@Composable
fun FirstScreen(navController: NavController) {
    Column {
        Text("첫 번째 화면")
        Button(onClick = { navController.navigate("secondScreen") }) {
            Text("두 번째 화면으로 이동")
        }
    }
}

@Composable
fun SecondScreen() {
    Text("두 번째 화면")
}

9. 결론

Jetpack Compose를 사용한 안드로이드 화면 개발은 매우 강력하고 직관적입니다.
선언형 UI를 통해 보다 효율적으로 UI를 작성할 수 있습니다.
이 글에서는 기본적인 화면 구성 요소와 상태 관리, 네비게이션 방법에 대해 설명하였습니다.
앞으로 Jetpack Compose를 이용하여 다양한 앱을 개발해 보시기 바랍니다.

추가로, Jetpack Compose의 공식 문서와 다양한 예제를 통해 더 많은 기능을 탐색해 보시기 바랍니다.
Jetpack Compose 공식 문서를 방문해 더 자세한 내용을 확인할 수 있습니다.