Jetpack Compose의 Arrangement와 Alignment

Jetpack Compose에서는 레이아웃 컨테이너 내부에 자식 요소를 배치할 때 두 가지 핵심 개념을 사용합니다. Arrangement는 **주축(main axis)**을 따라 자식 요소 간의 간격과 분배를 제어하며, Alignment는 **교차축(cross axis)**을 따라 자식 요소의 위치를 결정합니다. 이 두 개념을 혼동하면 예상치 못한 레이아웃 동작이 발생하기 쉬운데, 특히 Row, Column, Box 사이를 전환할 때 자주 겪는 실수이기도 합니다. 실제 면접에서도 Compose 레이아웃 시스템에 대한 이해도를 확인하기 위해 이 주제를 빈번하게 질문하므로 확실히 정리해 두시는 것이 좋습니다.

이 레슨을 학습하고 나면 다음을 수행할 수 있습니다.

• Row와 Column에서 주축과 교차축을 명확히 구분할 수 있습니다.
• Arrangement 옵션을 활용하여 자식 요소의 간격과 분배를 제어할 수 있습니다.
• Alignment 옵션을 활용하여 교차축 및 Box 내부에서 자식 요소를 배치할 수 있습니다.
• 두 개념을 조합하여 정밀한 레이아웃 제어를 구현할 수 있습니다.

주축(Main Axis)과 교차축(Cross Axis)

모든 선형 레이아웃에는 주축과 교차축이 존재합니다. Row에서는 주축이 수평 방향으로, 교차축이 수직 방향으로 흐릅니다. Column에서는 이와 반대로, 주축이 수직 방향이고 교차축이 수평 방향입니다. Arrangement는 주축을 기준으로 동작하며, Alignment는 교차축을 기준으로 동작합니다.

이 구분이 중요한 이유는 동일한 시각적 결과를 얻기 위해 컨테이너에 따라 서로 다른 매개변수를 사용해야 하기 때문입니다. 가령, 자식 요소를 수평으로 중앙에 배치하려면 Row에서는 horizontalArrangement를 사용하지만, Column에서는 horizontalAlignment를 사용해야 합니다. 이러한 차이를 명확히 인지하지 않으면 레이아웃이 의도대로 동작하지 않는 상황을 자주 마주하게 됩니다.

주축을 따른 Arrangement

Arrangement는 주축을 따라 자식 요소가 어떻게 분배되는지를 정의합니다. 각 항목의 위치와 항목 사이의 간격을 모두 제어하며, 다양한 옵션을 제공합니다. 다음은 Arrangement.SpaceBetween을 사용한 예제입니다.

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()
) {
    Text("Start")
    Text("Middle")
    Text("End")
}

Arrangement.SpaceBetween은 첫 번째 항목을 시작 지점에, 마지막 항목을 끝 지점에 배치하고, 나머지 공간을 항목 사이에 균등하게 분배합니다. 이 외에도 자주 사용되는 옵션은 다음과 같습니다.

• Arrangement.Start / Arrangement.Top: 자식 요소를 시작 지점에 모아 배치합니다.
• Arrangement.End / Arrangement.Bottom: 자식 요소를 끝 지점에 모아 배치합니다.
• Arrangement.Center: 자식 요소를 중앙에 그룹으로 배치합니다.
• Arrangement.SpaceEvenly: 자식 요소 앞, 사이, 뒤에 동일한 간격을 배분합니다.
• Arrangement.SpaceAround: 양쪽 끝에는 절반 크기의 간격을, 항목 사이에는 전체 크기의 간격을 배분합니다.
• Arrangement.spacedBy(8.dp): 각 자식 요소 사이에 고정된 간격을 지정합니다.

spacedBy 변형은 개별 항목에 일일이 패딩을 적용하지 않고도 일정한 간격을 유지하고 싶을 때 특히 유용합니다. 또한 spacedBy에 정렬 매개변수를 함께 사용할 수도 있습니다. Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally)는 자식 요소 사이에 간격을 두면서, 자식 요소의 총 너비가 컨테이너 너비보다 작을 때 그룹 전체를 사용 가능한 공간의 중앙에 배치합니다.