Jetpack Compose의 Row: 정의, composable 속성 및 작동 방식

Jetpack Compose에서 Row란

Row는 하위 요소를 수평 순서로 배치하는 composable 함수입니다. Compose 레이아웃 계층에서 Row는 Column 및 Box와 함께 기본 컨테이너의 위치를 차지합니다.

Row는 치수를 지정할 필요가 없습니다 — 콘텐츠에 따라 자동으로 조정됩니다. Row의 너비는 Modifier.fillMaxWidth 또는 고정 크기가 지정되지 않는 한 패딩을 포함한 하위 요소 너비의 합과 같습니다.

Row의 하위 요소는 컨테이너 내에서 위치에 영향을 주는 자체 수정자를 가질 수 있습니다. 예를 들어 Modifier.weight를 사용하면 요소가 사용 가능한 공간의 비례적 부분을 차지할 수 있습니다.

Android Developers Blog, 2024에 따르면 Row는 하위 요소를 순차적으로 처리하며 Compose 측정 규칙에 따라 크기를 계산합니다: 먼저 weight가 없는 요소를 측정한 다음 나머지 공간을 weight가 있는 요소 간에 분배합니다.

Row 구문 및 기본 시그니처

Row의 기본 시그니처에는 modifier 매개변수, horizontalArrangement 및 verticalAlignment가 포함됩니다. 모든 하위 요소는 최종 content 람다 블록에 전달됩니다.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "일")
        Text(text = "이")
        Text(text = "삼")
    }
}

Row 속성: horizontalArrangement 및 verticalAlignment

horizontalArrangement 매개변수는 Row 내에서 수평 축을 따라 하위 요소가 분배되는 방식을 결정합니다. Arrangement 클래스의 Start, End, Center, SpaceBetween, SpaceAround 및 SpaceEvenly 값을 사용할 수 있습니다.

Arrangement.Start는 요소를 컨테이너의 시작 부분에 배치하고 Arrangement.End는 끝에, Arrangement.Center는 가운데에 배치합니다. 이 값들은 CSS Flexbox의 justify-content 속성과 유사하게 작동합니다.

Arrangement.SpaceBetween은 첫 번째 요소를 시작 부분에, 마지막 요소를 끝 부분에 배치하고 나머지 요소들 사이에 동일한 간격을 두고 균등하게 분배합니다. Material Design Guidelines, 2025에 따르면 SpaceBetween은 도구 모음 및 탐색 행에 최적입니다.

verticalAlignment 매개변수는 요소를 수직으로 정렬합니다. Alignment.Top, Alignment.CenterVertically 및 Alignment.Bottom 값을 사용할 수 있습니다. 이 속성은 Row 요소의 높이가 다른 경우 — 예를 들어 여러 줄 텍스트 옆에 아이콘이 있는 경우 — 유용합니다.

Arrangement 값 표

Modifier.weight로 공간 분배

Modifier.weight는 Row와 Column 내에서만 사용할 수 있는 수정자로, 지정된 값에 비례하여 하위 요소 간에 사용 가능한 공간을 분배합니다. 한 요소의 가중치가 1.0f이고 다른 요소가 2.0f인 경우 두 번째 요소는 두 배의 공간을 차지합니다.

weight가 없는 요소는 콘텐츠에 필요한 공간을 차지합니다. 나머지 공간은 weight가 있는 요소 간에 가중치에 비례하여 분배됩니다. 이 동작은 CSS Flexbox의 flex-grow 속성과 유사합니다.

Android Developer Documentation, 2025에 따르면 weight는 Row, Column 및 BoxWithConstraints 내에서만 작동합니다. Row에서 weight를 사용할 때 모든 하위 요소는 두 단계로 측정됩니다: 먼저 weight가 없는 요소, 그 다음 weight가 있는 요소입니다.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "왼쪽",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "오른쪽")
    }
}

Row를 사용한 코드 예제

첫 번째 예제는 아이콘과 텍스트가 있는 Row를 보여줍니다 — 연락처 목록 또는 설정의 일반적인 시나리오입니다. Icon과 Text는 verticalAlignment를 중앙으로 설정하여 Row에 래핑됩니다.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "즐겨찾기에 추가")
    }
}

두 번째 예제는 버튼과 균등 분배가 있는 Row를 보여줍니다. SpaceEvenly는 모든 버튼과 컨테이너 가장자리 사이에 동일한 간격을 보장합니다.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("취소") }
        Button(onClick = {}) { Text("저장") }
    }
}

세 번째 예제 — 평점을 표시하기 위해 Card 내부의 Row입니다. Modifier.weight가 있는 중첩 Row를 사용하면 평점 별표와 숫자 값이 고정 공간을 차지할 수 있습니다.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "평점:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

적응형 레이아웃에서 Row의 특징

Row는 적응형 레이아웃에서 너비 제어가 필요합니다. Row의 콘텐츠가 사용 가능한 화면 너비를 초과하면 요소가 컨테이너 경계를 벗어날 수 있습니다. 이를 방지하려면 Modifier.horizontalScroll을 사용하거나 Column으로 전환하세요.

Row를 Modifier.weight와 결합할 때 부모 Row에 fillMaxWidth를 설정하는 것이 중요합니다 — 그렇지 않으면 weight가 존재하지 않는 공간을 분배합니다. Material Design Guidelines, 2025에 따르면 fillMaxWidth 없이 weight를 사용하는 Row는 잘못된 구성으로 간주됩니다.

적응형 인터페이스의 경우 Row를 Box와 결합하거나 Arrangement.SpaceBetween을 사용하여 다양한 화면 크기에서 자동 요소 분배를 수행하는 것이 좋습니다. 이는 미디어 쿼리 없이 유연성을 제공합니다.

• Modifier.horizontalScroll — Row 오버플로 시 스크롤 추가
• Modifier.weight — 공간을 비례적으로 분배
• Arrangement.SpaceBetween — 가장자리 고정을 통한 적응형 분배