안녕하세요 GDG on Campus: SSWU Chapter Member 이승민입니다!
현재 진행중인 SucceSS 프로젝트에서 Jetpack Compose를 이용해 앱을 개발하고 있습니다. 작년에 스터디에서 진행했던 XML 기반의 개발 방식과는 다르게 Jetpack Compose는 XML 없이 코드를 통해 디자인과 기능을 동시에 구현할 수 있어 정말 신기했습니다. 처음 사용해보았을 때는 어려운 점도 있었지만 시간이 지나면서 그 편리함을 확실히 느꼈습니다. 그래서 오늘은 Jetpack Compose가 무엇인지 어떤 특징이 있는지 그리고 단점과 예제 코드까지 함께 여러분과 살펴보겠습니다!
Jetpack Compose란?
Jetpack Compose는 구글이 안드로이드 UI 개발을 더욱 빠르고 효율적으로 할 수 있도록 공개한 최신 도구입니다. 기존 안드로이드 앱 개발에서는 UI를 XML로 구성하고 로직을 Kotlin 또는 Java로 작성했지만 Jetpack Compose는 Kotlin만을 사용하여 UI와 로직을 동시에 구현할 수 있게 해줍니다. 이렇게 하나의 언어로 UI와 기능을 모두 다룰 수 있기 때문에 개발이 훨씬 직관적이고 간결해집니다.
Jetpack Compose의 특징
✅ 코드로 UI 만들기
XML 없이 Kotlin 코드로 UI를 구현할 수 있습니다. 이를 통해 레이아웃을 자유롭게 조정하고 디자인을 쉽게 커스터마이즈할 수 있습니다. 화면과 기능을 한 곳에서 다룰 수 있기 때문에 불필요한 중복을 줄이고 개발 과정이 간결해지며 더 효율적으로 작업할 수 있습니다.
✅ 실시간 미리 보기
실시간 미리보기를 제공하여 UI를 구현하면서 즉시 결과를 확인할 수 있어 빠른 개발이 가능합니다. 앱 실행하지 않고도 수정 사항을 즉시 반영하고 확인할 수 있어 테스트와 디버깅 속도가 빨라집니다.
✅ 상태 변화 감지
jetpack Compose는 상태 기반 UI 개발에 매우 적합합니다. 상태 변화를 쉽게 감지하고 그에 맞게 UI를 자동으로 업데이트할 수 있어 동적인 인터페이스를 구현할 때 유리합니다. remember와 mutableStateOf를 활용하면 상태 관리가 간단해지고 기존의 LiveData나 StateFlow와도 쉽게 연동할 수 있습니다.
✅ 재사용 가능한 컴포넌트
UI 요소를 Composable 함수로 정의하여 재사용할 수 있습니다. 반복되는 UI 구성 요소들을 여러 화면에서 쉽게 재사용할 수 있어 코드 유지보수가 용이해지고 일관된 UI를 유지할 수 있습니다.
✅ 쉬운 애니메이션 구현
animate*AsState 등의 API를 이용하면 복잡한 애니메이션을 쉽게 구현할 수 있습니다. 기존 XML 방식에서는 애니메이션을 만들려면 여러 개의 파일과 리소스를 작성하고 관리해야 했지만 Compose에서는 간단한 코드로 자연스러운 애니메이션을 구현할 수 있습니다.
Jetpack Compose의 단점
✅ 학습 곡선과 새로운 패러다임
Jetpack Compose는 기존의 XML 기반 UI와 매우 다른 방식으로 UI를 구성합니다. 처음 사용해보면 새로운 개념 예를 들어 Composable 함수나 상태 관리 방식 등이 낯설게 느껴질 수 있습니다. 초기에는 학습 곡선이 있을 수 있습니다.
✅ 성능 문제 및 최적화 필요성
복잡한 UI를 구현할 때 Jetpack Compose의 성능 문제가 발생할 수 있습니다. 특히 과도한 recomposition(재구성)이 일어나면 UI 성능이 저하될 수 있으므로 최적화가 필요합니다. UI가 복잡하거나 상태 변화가 빈번한 경우 성능을 고려한 최적화가 필수적입니다.
✅ 일부 라이브러리와의 호환성 문제
Jetpack Compose는 아직 발전하는 중인 기술로 일부 기존 라이브러리와의 완벽한 호환성 문제가 있을 수 있습니다. 구버전 라이브러리나 API가 Compose에 맞게 업데이트되기 전까지는 일부 기능을 사용할 때 추가적인 작업이 필요할 수 있습니다.
✅ 앱 크기 증가 가능성
Jetpack Compose를 사용하면 관련 라이브러리를 포함해야 하므로 앱의 초기 크기가 증가할 수 있습니다. Compose의 사용이 많아질수록 앱의 실행 파일 크기나 메모리 사용량이 커질 수 있기 때문에 크기 관리에도 주의가 필요합니다.
기본적인 Jetpack Compose 예제
@Composable
fun Greeting(name: String) {
Text(text = "Hello안녕하세요, $name!", fontSize = 24.sp, fontWeight = FontWeight.Bold)
}
@Preview
@Composable
fun PreviewGreeting() {
Greeting(name = "Compose")
}
위 코드를 실행하면 "안녕하세요, Compose!"라는 글자가 화면에 나타납니다. 기존의 XML 방식과 달리 UI를 함수로 만들 수 있다는 것을 확인할 수 있습니다.
@Composable
fun ClickableTextExample() {
var text by remember { mutableStateOf("클릭해보세요!") }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = text,
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.clickable { text = "클릭되었습니다!" }
)
}
}
@Preview
@Composable
fun PreviewClickableTextExample() {
ClickableTextExample()
}
위 코드를 실행하면 "클릭해보세요!"라는 텍스트가 나타나고 이를 클릭하면 "클릭되었습니다!"로 바뀝니다. 이처럼 Compose에서는 UI와 로직을 한 곳에서 쉽게 처리할 수 있습니다.
Jetpack Compose는 구글이 적극적으로 지원하는 최신 UI 프레임워크로 안드로이드 UI 개발의 중심 기술로 자리잡을 가능성이 큽니다. 구글의 공식 지원을 받으며 향후 더 많은 기능이 추가될 예정이므로 앞으로의 발전이 매우 기대됩니다. Compose를 사용하면서 UI를 훨씬 더 쉽게 만들 수 있다는 것을 깨달았고 디자인과 기능을 동시에 다룰 수 있어 개발 과정이 훨씬 효율적이었습니다. 처음에는 다소 어렵게 느껴졌지만 익숙해지면 그 편리함을 실감하게 되었습니다. 앞으로 더 다양한 기능을 활용해 멋진 앱을 개발하고 싶습니다.
여러분도 새로운 프로젝트를 시작할 때 Jetpack Compose를 적극적으로 활용하여 앱 개발에 도전해 보세요!!