Jetpack Compose에서 View, ViewGroup 쉽게 이해하기

안드로이드 개발을 처음 시작하면 가장 헷갈리는 게 바로 이런 용어들이죠:

• View
• ViewGroup
• 위젯
• 레이아웃

Jetpack Compose에서도 이 개념들이 전혀 사라진 건 아니에요. 방식만 달라졌을 뿐, 기본 개념은 여전히 존재합니다.

이 글에서는 Compose 기준으로, 위 개념들을 진짜 쉽게 풀어서 설명해볼게요!

---

🖼️ Jetpack Compose와 View 시스템 구조 비교

Compose에서는 기존 Android의 View, ViewGroup 개념을 그대로 가져오면서도 훨씬 간결하게 표현할 수 있습니다.
아래 이미지를 보면 그 차이를 한눈에 알 수 있어요!

 

• 기존 Android는 XML + View 상속 구조로 구성됩니다.

 

• Jetpack Compose는 모든 UI를 Composable 함수로 구성하며, 더 직관적이고 유연합니다.

Composable 함수 구조

 

---

✅ View는 화면에 보이는 것 하나하나

전통적인 Android에서는 Button, TextView, ImageView 같은 것들이 View였어요.
Compose에선 이런 것들을 모두 함수로 표현합니다.

예를 들면 이렇게요 

 

Text("안녕하세요") // 글씨 보여주기
Button(onClick = { /* 버튼 눌렀을 때 동작 */ }) {
    Text("클릭!")
}

 

👉 즉, 화면에 보이는 것 하나하나가 전부 Composable 함수예요.
기존의 View가 함수로 바뀌었다고 이해하면 됩니다!

---

✅ ViewGroup은 여러 View를 담는 박스

전에는 LinearLayout, FrameLayout처럼 여러 View를 감싸는 구조를 ViewGroup이라고 했어요.

이제는 Compose에서 이렇게 표현합니다:

Column {
    Text("첫 번째 텍스트")
    Text("두 번째 텍스트")
}

 

✔️ Column, Row, Box가 바로 여러 개의 Composable을 담는 레이아웃 함수예요.
우리는 이런 걸 편하게 "레이아웃 함수"라고 부릅니다.

 

✅ 위젯은 버튼이나 체크박스 같은 '기능 있는 UI'

Compose에서도 아래와 같이 간단한 코드로 위젯을 만들 수 있어요.

Checkbox(checked = true, onCheckedChange = { })
Slider(value = 0.5f, onValueChange = { })

 

✔️ 이런 요소들을 기존엔 '위젯'이라고 불렀지만, Compose에서는 그냥 Composable UI 요소라고 말하는 게 더 자연스럽습니다.

 

 

✅ 레이아웃은 화면 배치를 담당해요

레이아웃은 화면에 요소들을 "어떻게 정렬할지"를 결정합니다.

예를 들어, Box는 여러 요소를 겹치게 만들 수 있어요:

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    contentAlignment = Alignment.Center
) {
    Text("중앙 정렬된 텍스트")
}

✔️ 즉, Column, Row, Box, LazyColumn 같은 것들이 전부 레이아웃 역할을 합니다!

 

🧾 한눈에 정리! 비교표

 

개념	기존 Android(View 기반)	Jetpack Compose
View	버튼, 텍스트 등 개별 UI 요소	Text(), Button() 등의 함수
ViewGroup	LinearLayout, FrameLayout 등	Column(), Row(), Box() 등
Widget	기능성 UI 요소 (예: 버튼, 슬라이더)	기능이 있는 Composable 함수들
Layout	ViewGroup 중 위치 지정 역할	배치용 Composable 함수

 

✨ 마무리 정리

Jetpack Compose에선 복잡한 View 상속 구조를 몰라도 괜찮아요!
그냥 "모든 UI는 함수로 만들고, 필요한 대로 조립해서 쓴다"는 걸 기억하면 됩니다.
XML 파일? ❌ 이제는 Kotlin 코드 한 줄로 끝나요!