Compose에서 공식적으로 레이아웃 컴포저블이라고 분류한 것은 없습니다. Compose에는 컴포저블만 있을 뿐이며 그중 UI 요소를 배치하는 역할을 하는 일부를 편의상 레이아웃 컴포저블이라고 부릅니다. 여기서는 가장 기본적인 Row, Column, Box를 살펴보겠습니다. 또한 컴포저블의 크기, 위치, 정렬 등 레이아웃을 결정하는 핵심적인 역할을 하는 Modifier에 대해서도 함께 알아봅니다.

Row

Row는 자식 컴포저블을 가로 방향(수평)으로 배치합니다.

3개의 Text()가 Row의 자식 컴포저블입니다. Text()는 왼쪽, 가운데, 오른쪽에 배치되어 있습니다. 이렇게 배치된 이유를 이해하려면 Row의 주요 파라미터에 대해서 알아야 합니다.

주요 파라미터

horizontalArrangement: 자식들의 가로축 정렬 방식 결정

Arrangement.Start → 왼쪽 정렬

Arrangement.Center → 중앙 정렬

Arrangement.End → 오른쪽 정렬

Arrangement.SpaceBetween → 양 끝 고정 + 중간 균등 분배

verticalAlignment: 자식들의 세로축 정렬 방식 결정

Alignment.Top → 위쪽 정렬

Alignment.CenterVertically → 세로 중앙 정렬

Alignment.Bottom → 아래쪽 정렬

이를 토대로 예제 코드를 해석해 보면 가로축은 양 끝 고정 후 중간 부분은 균등하게 분배하고, 세로축은 세로로 중앙 정렬되도록 설정한 상태입니다. 여기서 결과 화면으로 와닿기 어려운 부분은 세로 중앙 정렬입니다. 그 이유는 현재 레이아웃 높이가 글자 크기와 비슷하기 때문입니다. 높이를 변경하려면 어떻게 해야 할까요? 이때 사용하는 것이 바로 Modifier 타입의 modifier 파라미터입니다.

Modifier

Modifier는 UI 요소(컴포저블)의 모양, 크기, 배치, 동작 등을 꾸미거나 확장하기 위한 객체입니다. 선언형 UI를 지향하는 Compose 특성상 Modifier는 불변 객체입니다. Modifier는 한 번 만들어지면 내부 상태가 바뀌지 않습니다. 이를 통해 사이드 이펙트를 줄이고 재사용성을 높입니다. 불변이기 때문에 여러 동작을 적용하기 위해서 새로운 Modifier를 만들어 연결하는 체이닝(Chaining) 방식을 사용합니다. 그러면 어떤 역할들이 있을까요?

주요 역할

레이아웃 제어

크기 조절: fillMaxSize(), width(), height()

위치/정렬: padding(), offset(), align()

스타일링

배경색: background()

테두리: border()

그림자: shadow()

모양: clip()

이벤트 처리

클릭: clickable { ... }

스크롤: verticalScroll() / horizontalScroll()

제스처: pointerInput { ... }

애니메이션 / 제스처 확장

draggable(), swipeable(), animateContentSize()

그렇다면 앞선 예제에서 높이를 조절하려면 어떻게 해야 할까요?

높이를 조절할 수 있는 height()를 사용하면 됩니다. 이때 체이닝 방식으로 기존 Modifier.fillMaxWidth()에 이어서 추가하면 됩니다. 이때 Modifier 객체는 불변이기 때문에 Modifier.fillMaxWidth()를 통해 새롭게 만들어진 Modifier 객체에 추가로 height()를 적용하여 또 다른 새로운 Modifier를 만들게 됩니다. 예제에서는 최종적으로 Row가 높이 100dp를 가진 레이아웃이 됩니다. 이제 verticalAlignment의 Alignment.CenterVertically로 인해서 가로축 기준 가운데 정렬이 된 것을 명확히 알 수 있습니다.

Modifier 사용 시 정말 중요한 것이 있습니다. 바로 순서입니다. 왜 그럴까요? 앞서 이야기했듯이 Modifier는 불변 객체로서 체이닝 시 먼저 적용된 내용이 반영된 새로운 객체를 만듭니다. 그렇기 때문에 순서가 바뀌면 같은 동작을 적용을 해도 전혀 다른 결과가 나옵니다. 우리가 모래를 만지고 손을 씻는 것과 손을 먼저 씻고 모래를 만지는 것은 순서만 다를 뿐 같은 행동을 한 것이지만 결과는 완전히 다른 것처럼요.

다음 예제를 통해서 좀 더 명확히 알 수 있습니다.

Modifier의 체이닝을 보면 background()로 배경색을 지정했습니다. 그 후 padding()을 통해 패딩을 적용했습니다. 따라서 순차적으로 생각해 보면 배경은 전체 영역에 적용 후 안쪽에 패딩이 적용됩니다.

이번에는 padding()을 먼저 적용했습니다. 그 후 background()로 배경색을 지정했습니다. 이때는 먼저 패딩 영역이 만들어지고 그 안쪽 영역에만 배경색이 적용됩니다. 이렇듯 전혀 다른 화면이 그려집니다. 따라서 Modifier는 순서에 주의를 기울여 선언해야 합니다.

Column

Column은 자식 컴포저블을 세로 방향(수직)으로 배치합니다.

개념적으로 Row()와 거의 동일하지만 방향만 가로가 아닌 세로입니다.

주요 파라미터

verticalArrangement: 자식들의 세로축 정렬 방식 결정

Arrangement.Top → 위쪽 정렬

Arrangement.Center → 세로 중앙 정렬

Arrangement.Bottom → 아래쪽 정렬

Arrangement.SpaceBetween → 양 끝 고정 + 나머지 균등 분배

horizontalAlignment: 자식들의 가로축 정렬 방식 결정

Alignment.Start → 왼쪽 정렬

Alignment.CenterHorizontally → 가로 중앙 정렬

Alignment.End → 오른쪽 정렬

Row와 Column은 단독으로도 사용하지만 중첩해서 쓰는 경우가 많습니다. 그렇게 하면 대부분의 앱 화면을 쉽게 구성할 수 있습니다.

Box

Box는 자식 컴포저블들을 겹쳐서 배치하거나, 개별적으로 위치를 지정할 수 있도록 합니다.

contentAlignment 파마리터는 자식 컴포저블들의 기본 정렬 위치를 지정합니다. 자식 컴포저블에서 Modifier.align()을 쓰지 않으면 이 값이 기본 적용됩니다. 위 예제에서 Box는 120x120 크기이며 Image()는 중앙에 배치하고 Text()는 Modifier.align()을 이용해 특정 위치(하단 중앙)에 개별 배치합니다.

Row와 Column이 컴포저블을 각각 수평, 수직으로 배치하는 반면, Box는 컴포저블을 겹치거나 특정 위치에 자유롭게 정렬할 수 있다는 큰 차이점이 있습니다. 이러한 특징은 배지 표시 등에 유용하게 활용됩니다.

my_profile 이미지는 원형이 아니라 사각형입니다. 테두리가 흰색일 뿐입니다. Modifier의 clip()을 이용하면 원형으로 자를 수 있습니다.

기본적인 세 가지 레이아웃 컴포저블을 살펴봤습니다. Row, Column, Box는 함께 사용하면 더욱 세밀한 화면 구성이 가능합니다. 예를 들면 다음과 같은 프로필 카드를 만들 수 있습니다. 앞서 다룬 내용들을 기반으로 필요한 부분을 조금만 더 추가하면 어렵지 않게 만들 수 있으니 도전해 보세요!

Compose 레이아웃 컴포저블

댓글