Jetpack Compose의 Box 레이아웃

Box는 Jetpack Compose에서 가장 기본적인 레이아웃 컴포저블(composable) 중 하나로, 자식 요소들을 하나의 부모 영역 안에서 서로 겹쳐 쌓는 방식으로 배치합니다. Column이나 Row가 자식 요소를 하나의 축을 따라 순차적으로 배열하는 것과 달리, Box는 자식 요소를 뒤에서 앞으로(back-to-front) 겹쳐서 그립니다. 따라서 이미지 위에 텍스트를 배치하거나, 플로팅 액션 버튼을 추가하거나, 커스텀 오버레이 효과를 구현할 때 가장 적합한 레이아웃입니다.

면접에서 Box 레이아웃과 관련된 질문은 Compose의 레이아웃 시스템에 대한 전반적인 이해도를 평가하는 데 자주 활용되므로, 동작 원리를 확실히 파악해 두시는 것이 중요합니다.

이번 면접 질문을 통하여 아래 내용들을 학습하실 수 있습니다.

• Box가 자식 요소를 어떻게 쌓으며, 그리기 순서가 어떻게 결정되는지 설명할 수 있습니다.
• contentAlignment를 활용하여 모든 자식 요소의 기본 위치를 제어하는 방법을 이해할 수 있습니다.
• 개별 자식 요소에 Modifier.align()을 적용하여 부모의 기본 정렬을 재정의하는 방법을 익힐 수 있습니다.
• Box가 Column이나 Row보다 적합한 실전 사용 사례를 파악할 수 있습니다.

Box의 자식 요소 스태킹 원리

Box는 자식 요소를 선언된 순서대로 배치합니다. 첫 번째 자식이 스택의 가장 아래에 그려지고, 이후 선언된 자식 요소가 그 위에 순서대로 그려집니다. 이러한 레이어링 동작은 기존 뷰 시스템의 FrameLayout과 유사한 개념이므로, 기존 안드로이드 개발 경험이 있으신 분이라면 직관적으로 이해하실 수 있습니다.

@Composable
fun LayeredBox() {
    // 200dp 크기의 Box 안에 두 개의 자식 Box를 겹쳐서 배치
    Box(modifier = Modifier.size(200.dp)) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Blue) // 파란색 배경이 전체 영역을 채움
        )
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red) // 빨간색 박스가 파란색 위에 그려짐
        )
    }
}

위의 예제에서 파란색 Box는 200dp 영역 전체를 채우고, 빨간색 Box는 100dp 크기로 그 위에 그려집니다. 별도의 정렬을 지정하지 않으면, 두 자식 요소 모두 기본값인 좌측 상단(top-start) 코너에 배치됩니다.

정렬(Alignment) 제어

contentAlignment 매개변수는 Box 내 모든 자식 요소의 기본 정렬 위치를 설정합니다. 개별 자식 요소는 Modifier.align()을 사용하여 이 기본 정렬을 재정의할 수 있습니다.

@Composable
fun ImageWithOverlay() {
    Box(
        modifier = Modifier.size(200.dp),
        // 모든 자식 요소를 하단 중앙에 기본 배치
        contentAlignment = Alignment.BottomCenter
    ) {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = "Background Image"
        )
        Text(
            text = "Overlay Text",
            color = Color.White,
            modifier = Modifier
                .background(Color.Black.copy(alpha = 0.5f)) // 반투명 배경 적용
                .padding(8.dp)
        )
    }
}