[Winter Blog Challenge] 선언형 UI Jetpack Compose를 알아보자 (Organizer 홍지현)

안녕하세요, GDGoC 성신여자대학교 오거나이저 홍지현입니다. 😊

 

이번 Winter Blog Challenge에 참여하게 되어 매우 뜻깊은 경험이 될 것 같아 설레는 마음입니다. 이번 챌린지를 통해 평소에 관심 있었던 기술을 깊이 있게 탐구하고, 저의 생각과 경험을 공유할 수 있는 기회를 얻게 되어 정말 기쁩니다.

 

이번 블로그 글에서는 안드로이드 개발의 새로운 패러다임을 이끌고 있는 Jetpack Compose에 대해 이야기해보려고 합니다. 기존의 XML 기반 레이아웃과는 전혀 다른 접근 방식을 가진 Compose의 매력과 실제 개발에 적용하면서 느낀 장단점에 대해 함께 살펴보겠습니다! 🚀

---

1. Jetpack Compose란?

Jetpack Compose는 구글에서 공식적으로 지원하는 선언형 UI 프레임워크입니다. 기존의 XML 레이아웃 + Activity/Fragment를 사용하는 명령형 방식과는 달리, Kotlin 코드를 통해 UI를 직접 선언할 수 있어 개발자에게 보다 간결하고 직관적인 UI 개발 환경을 제공합니다.

• 언어: Kotlin 전용
• 출시: 2021년 (Stable 버전 기준)
• UI 철학: 선언형 UI (Declarative UI)

Compose의 가장 큰 특징은 별도의 XML 없이 UI를 Kotlin 코드로 직접 정의할 수 있다는 점입니다. 또한 @Preview 기능을 통해 실시간으로 UI를 확인할 수 있어, 반복적인 빌드 없이도 빠르게 결과물을 확인할 수 있습니다.

---

2. 왜 Jetpack Compose를 사용할까?

기존 방식 (XML)	Jetpack Compose
레이아웃과 로직 분리	코드 내에서 UI 직접 선언
ViewBinding 필요	별도의 바인딩 없이 바로 접근 가능
복잡한 UI 구성 시 코드 중복	재사용 가능한 Composable 함수 활용
Activity/Fragment 필요	단일 화면 내에서 컴포저블 관리

🎯 Compose의 장점

• 간결한 코드
  • Jetpack Compose는 XML 없이 Kotlin 코드만으로 UI를 정의할 수 있어 코드가 간결해집니다.
• 실시간 미리보기
  • Android Studio의 Preview 기능을 통해 실시간으로 UI를 미리볼 수 있어 개발 효율성이 높아집니다.
• 재사용성
  • Composable 함수를 사용하면 코드의 재사용성이 증가합니다.
• State 관리 용이
  • 상태(State) 관리가 용이해져 상태 변화에 따라 UI가 자동으로 업데이트됩니다.

⚠️ 단점

• 러닝 커브 존재
  • Jetpack Compose는 기존 XML 기반 개발에 익숙한 개발자에게는 새로운 개념과 문법으로 인해 러닝 커브가 있을 수 있습니다.
• 초기 빌드 속도
  • 초기 빌드 속도가 다소 느릴 수 있어 개발 초기 단계에서 시간이 더 소요될 수 있습니다.
• 라이브러리 호환성
  • 아직 모든 라이브러리와의 호환성이 완벽하지 않아 일부 라이브러리를 사용할 때 제한이 있을 수 있습니다.

---

3. Jetpack Compose의 핵심 개념

📌 1) Composable 함수

Jetpack Compose의 기본 단위는 바로 Composable 함수입니다. 모든 UI 요소는 @Composable 어노테이션이 붙은 함수로 정의됩니다.

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

📌 2) 상태(State) 관리

Compose에서는 상태를 기반으로 UI가 자동으로 갱신됩니다. 이를 위해 remember와 mutableStateOf를 합니다.

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

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Count: $count", fontSize = 24.sp)
        Button(onClick = { count++ }) {
            Text("Increase")
        }
    }
}

📌 3) 레이아웃 컴포넌트

• Column: 수직 정렬
• Row: 수평 정렬
• Box: 겹쳐서 배치
• LazyColumn: 리스트뷰 대체 (리스트 렌더링 최적화)

@Composable
fun SimpleList() {
    LazyColumn {
        items(10) { index ->
            Text(text = "Item #$index", fontSize = 20.sp, modifier = Modifier.padding(8.dp))
        }
    }
}

---

4. 왜 Jetpack Compose를 사용해야 할까?

안드로이드 개발에 Jetpack Compose를 도입해야 하는 이유는 단순히 "새로운 기술"이기 때문만은 아닙니다. 생산성, 유지보수성, 그리고 미래지향성이라는 세 가지 측면에서 Compose는 기존 방식에 비해 확실한 이점을 제공합니다.

1. 생산성 향상
   • XML과 Kotlin 파일을 오가며 개발하던 번거로움을 없애고, 하나의 언어로 UI와 로직을 동시에 관리할 수 있습니다.
   • @Preview 기능으로 실시간 피드백을 받아 UI를 빠르게 수정할 수 있습니다.
2. 유지보수성 강화
   • Composable 함수를 통해 UI 구성요소를 모듈화할 수 있어 코드의 재사용성과 가독성이 크게 향상됩니다.
   • UI와 상태(State)가 자연스럽게 연결되어 있어, 복잡한 UI에서도 코드의 일관성을 유지할 수 있습니다.
3. 안드로이드의 미래
   • 구글은 Jetpack Compose를 안드로이드 개발의 표준으로 적극적으로 밀고 있으며, 지속적인 업데이트와 새로운 기능을 제공하고 있습니다.
   • Compose의 영향력은 안드로이드에 국한되지 않습니다. JetBrains에서 발표한 Compose Multiplatform을 통해 데스크탑과 웹까지 확장 가능성이 열려있습니다.

---

✍️ 마무리하며

Jetpack Compose는 단순히 기존의 XML 방식을 대체하는 것을 넘어, 안드로이드 UI 개발의 새로운 패러다임을 제시하고 있습니다. 선언형 UI라는 개념이 아직 낯설 수 있지만, 한번 적응하면 개발 속도와 유지보수 측면에서 확실한 이점을 느낄 수 있을 것입니다.

 

저 역시 이번에 Jetpack Compose를 사용해 안드로이드 앱을 직접 개발해보면서, 기존 XML 기반 개발과는 또 다른 매력을 느낄 수 있었습니다. 특히 간결한 코드 작성과 실시간 미리보기 기능 덕분에 UI 작업의 효율성이 크게 향상되었고, 상태 관리의 단순화로 인해 더 직관적인 개발이 가능했습니다.

 

안드로이드 개발에 조금이라도 관심이 있다면, Jetpack Compose에 도전해보세요! 여러분도 Compose의 매력에 빠지게 될 거예요. 😉

 

감사합니다. 🙌