(Compose) Row, Column

안녕하세요! 이번 글에서는 Jetpack Compose의 가장 기본적이면서도 정말 많이 사용되는 컴포넌트인 Row와 Column에 대해 알아보겠습니다.

이전 블로그 글에서 Text와 Button과 Image에 대해서 알아보았는데 이 컴포넌트들을 배치하는 방법에 대해서는 다루지 않았습니다. 또한 XML을 사용해서 UI 개발을 하던 개발자가 Compose를 처음 접한다면 “뷰(View)에서 LinearLayout을 세로/가로로 쓰던 걸 Compose에서는 뭘로 하지?”라는 생각을 할 수 있어요.

바로 이때 등장하는 게 Row와 Column입니다.

Row와 Column이란?

• Row: 자식 컴포넌트들을 가로 방향(수평)으로 배치
• Column: 자식 컴포넌트들을 세로 방향(수직)으로 배치

뷰(View) 시절의 LinearLayout과 개념적으로 비슷하지만, 훨씬 가볍고 선언적으로 작성할 수 있어서 더 직관적이에요.

기본 사용법

가장 간단한 예제를 먼저 볼까요?

@Composable
fun SimpleRowAndColumn() {
    Column {
        Text("첫 번째 줄")
        Text("두 번째 줄")
        Text("세 번째 줄")
    }

    Row {
        Text("왼쪽")
        Text("가운데")
        Text("오른쪽")
    }
}

Column은 UI를 위에서 아래로 배치하고 Row는 UI를 왼쪽에서 오른쪽으로 배치합니다.

따라서 내가 수직으로 나열하고 싶을 때는 Column을 사용하고 수평으로 나열하고 싶다면 Row를 사용하면 됩니다.

Modifier로 스타일 조정

Row와 Column은 Modifier를 통해 크기, 배경, 패딩 등 다양한 스타일을 쉽게 줄 수 있습니다.

Column(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("첫 번째 줄")
    Text("두 번째 줄")
}

Arrangement와 Alignment

조금 더 고급 설정으로는 자식 컴포넌트들의 위치를 조절할 수 있습니다.

• horizontalArrangement: Row에서 수평 정렬
• verticalArrangement: Column에서 수직 정렬
• verticalAlignment: Row에서 수직 정렬
• horizontalAlignment: Column에서 수평 정렬

예를 들어, 가운데 정렬을 하고 싶다면 아래와 같이 사용하면 됩니다.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center
) {
    Text("가운데에 있는 텍스트")
}

Row와 Column 같이 활용하기

실제 앱에서는 Row와 Column을 적절히 섞어서 다양한 화면을 만듭니다. 예를 들어, 제목과 설명을 세로로 배치하면서, 오른쪽 끝에 버튼을 두고 싶다면 이렇게 작성할 수 있어요.

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Column {
        Text("제목", fontWeight = FontWeight.Bold)
        Text("설명 텍스트")
    }
    Button(onClick = { /* TODO */ }) {
        Text("버튼")
    }
}

마치며

Row와 Column은 Compose에서 정말 자주 쓰이는 기본 레이아웃 컴포넌트입니다. 처음에는 간단하게 시작하더라도, 다양한 Modifier와 Arrangement, Alignment를 조합하면서 원하는 UI를 만들 수 있어요.

 

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA