지금까지는 컴퍼저블 하나 안에서 값 다루는 것만 봤는데, 이번엔 컴퍼저블 여러 개를 어떻게 화면에 배치하는지 보자.

컴포즈에서 배치를 담당하는 게 크게 세 가지다: Row, Column, Box.

Row - 가로로 나열

@Composable
fun RowExample() {
    Row {
        Text("첫번째")
        Text("두번째")
        Text("세번째")
    }
}

Row 안에 넣은 것들은 가로로 나란히 배치된다.

Column - 세로로 나열

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

Column은 반대로 세로로 쌓인다. Row랑 이름만 다르지 쓰는 방식은 똑같다.

Box - 겹쳐서 배치

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(150.dp)
    ) {
        // 배경 역할 (이미지 대신 색깔 박스로 대체)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.DarkGray)
        )

        Text(
            text = "겹쳐진 텍스트",
            color = Color.White,
            modifier = Modifier
                .align(Alignment.BottomStart)
                .padding(8.dp)
        )
    }
}

Box는 넣은 것들이 같은 자리에 겹쳐서 쌓인다. 배경 위에 텍스트를 올리는 것처럼, "겹쳐야 하는" 상황에 쓴다.

Modifier - 컴퍼저블 꾸미고 조정하기

지금까지 코드에서도 Modifier를 몇 번 봤을 텐데, 이게 크기, 여백, 배경색, 클릭 가능 여부 같은 걸 다 담당한다.

근데 Modifier는 순서가 결과를 바꾼다. 이게 초보자가 제일 많이 헷갈리는 부분이다.

// 케이스 1: padding 먼저, background 나중
Text(
    text = "안녕",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Yellow)
)

// 케이스 2: background 먼저, padding 나중
Text(
    text = "안녕",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(16.dp)
)

왜 이런 차이가 생기냐면, Modifier는 체이닝한 순서대로 "바깥에서 안으로" 하나씩 적용되기 때문이다.

케이스 1은 "여백을 16dp 두고, 그 안쪽 영역에만 배경색을 칠해라"가 되고, 케이스 2는 "먼저 배경색을 칠하고, 그 다음에 여백을 둬라"가 된다. 그래서 배경색이 칠해지는 범위 자체가 달라지는 것이다.

정리

• Row, Column, Box는 컴퍼저블을 배치하는 세 가지 기본 틀이다
• Modifier는 순서대로 적용되니까, 원하는 결과가 안 나오면 순서부터 의심해봐야 한다

다음 글에서는 이 배치 위에 실제 데이터 리스트를 스크롤 가능하게 뿌리는 LazyColumn을 다뤄보겠다.

전체코드

package com.buyoungsil.todo_project

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.buyoungsil.todo_project.ui.theme.Todo_projectTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Todo_projectTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

                    Column(modifier = Modifier.fillMaxSize().padding(innerPadding)) {
                        RowExample()
                        ColumnExample()
                        BoxExample()

                        Text(
                            text = "안녕",
                            modifier = Modifier
                                .padding(16.dp)
                                .background(Color.Yellow)
                        )

                        Text(
                            text = "안녕",
                            modifier = Modifier
                                .background(Color.Yellow)
                                .padding(16.dp)
                        )
                    }


                }
            }
        }
    }
}

@Composable
fun RowExample() {
    Row() {
        Text("첫번째")
        Text("두번째")
        Text("세번째")
    }
}


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

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(150.dp)
    ) {
        // 배경 역할 (이미지 대신 색깔 박스로 대체)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.DarkGray)
        )

        Text(
            text = "겹쳐진 텍스트",
            color = Color.White,
            modifier = Modifier
                .align(Alignment.BottomStart)
                .padding(8.dp)
        )
    }
}