Compose 레이아웃·Modifier — Column·Row·Box·체이닝

[03 Compose 기초]에서 선언형 UI를 봤다면, 이 장은 화면을 실제로 배치하는 법이다 — Column·Row·Box 세 기본 레이아웃과, 크기·여백·정렬·클릭을 입히는 Modifier. Compose 레이아웃은 *한 번에 측정(single-pass measurement)*되어 빠르고, Modifier 체이닝의 순서가 결과를 바꾼다. (출처: Android — Compose layout / Modifiers.)

세 가지 기본 레이아웃

Column {              // 세로로 쌓기
    Text("위"); Text("아래")
}
Row(                  // 가로로 나열
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) { Text("왼쪽"); Text("오른쪽") }
Box {                 // 겹쳐 쌓기(z축) — 배지·오버레이
    Image(...); Text("9", Modifier.align(Alignment.TopEnd))
}

Column — 자식을 세로로. verticalArrangement(간격)·horizontalAlignment(가로 정렬).
Row — 자식을 가로로. horizontalArrangement·verticalAlignment.
Box — 자식을 겹쳐서(z축). Modifier.align으로 개별 정렬.

다이어그램 로딩 중…

Modifier — 순서가 결과를 바꾼다

Modifier는 크기·여백·배경·클릭·정렬 등을 체이닝한다. 핵심 함정 — 순서가 중요하다. Modifier는 바깥(먼저 선언)에서 안(나중)으로 적용된다.

// padding 후 background → 여백은 배경 '밖'
Text("A", Modifier.padding(16.dp).background(Color.Gray))
// background 후 padding → 여백이 배경 '안'(배경이 더 큼)
Text("B", Modifier.background(Color.Gray).padding(16.dp))

자주 쓰는 Modifier:

크기 — fillMaxWidth()·fillMaxSize()·size(48.dp)·width/height·wrapContentSize().
여백·정렬 — padding()·Modifier.align()·Modifier.weight()(Row/Column에서 남은 공간 비율 분배).
모양·테두리 — clip(RoundedCornerShape(8.dp))·border()·background().
상호작용 — clickable {}·scrollable·pointerInput.

Row {
    Text("고정", Modifier.width(80.dp))
    Text("나머지 채움", Modifier.weight(1f))   // 남은 폭을 차지
}

Scaffold·Slot API — 화면 골격

복잡한 레이아웃은 슬롯(slot) API로 영역에 컴포저블을 끼운다. Scaffold가 대표 — 상단바·하단바·FAB·본문 슬롯을 제공한다.

Scaffold(
    topBar = { TopAppBar(title = { Text("제목") }) },
    floatingActionButton = { FloatingActionButton(onClick = {}) { Icon(...) } }
) { padding ->
    Column(Modifier.padding(padding)) { /* 본문 — innerPadding 반영 필수 */ }
}

슬롯 API(content: @Composable () -> Unit)는 컴포넌트를 재사용 가능·유연하게 만드는 Compose의 핵심 설계다.

커스텀 레이아웃·제약 기반 배치

BoxWithConstraints — 가용 크기에 따라 다른 UI(반응형).
ConstraintLayout(Compose 버전) — 복잡한 상대 배치(서로 기준). 단순한 건 Column/Row가 낫다.
Layout 컴포저블 — 직접 측정·배치(고급). Compose 레이아웃은 *자식을 한 번 측정(single pass)*하므로 중첩이 깊어도 빠르다(전통 View의 다중 측정과 대비).

정리 — 쌓고(레이아웃) 입힌다(Modifier)

Compose 배치의 핵심 — Column(세로)·Row(가로)·Box(겹침) + arrangement/alignment, Modifier 체이닝(순서가 결과를 바꿈·weight로 비율 분배), Scaffold·슬롯 API로 화면 골격과 재사용, 반응형은 BoxWithConstraints, 복잡 배치는 ConstraintLayout. 레이아웃으로 쌓고 Modifier로 입히는 두 축이 Compose UI의 전부다.

한 줄 요약 — Column(세로)·Row(가로·weight 비율)·Box(겹침)+arrangement/alignment. Modifier=체이닝(순서 중요: padding↔background)·size/fillMax/clip/clickable. Scaffold·슬롯 API(content 람다)로 골격·재사용. 반응형 BoxWithConstraints, 복잡 배치 ConstraintLayout. 레이아웃은 single-pass라 빠름.

(출처: Android — Compose layout basics / Modifiers / Scaffold / Compose ConstraintLayout.)