0Pricing
Android Academy · 강의

Column, Row와 Box

일반적인 레이아웃에 컴포저블을 배치해 보세요.

Column, Row와 Box은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

컴포저블 배치하기

컴포저블을 서로 상대적으로 배치하기 위해 Compose는 세 가지 핵심 레이아웃 컴포저블인 Column, Row, Box를 제공합니다.

Column: 세로로 쌓기

Column은 자식 요소를 위에서 아래로 세로 방향으로 쌓습니다.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: 가로로 쌓기

Row는 자식 요소를 왼쪽에서 오른쪽으로 나란히 배치합니다.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: 겹쳐 배치하기

Box는 레이어처럼 자식 요소를 서로 포개어 쌓습니다. 나중에 배치한 자식 요소가 먼저 배치한 요소 위에 그려집니다. 배지, 오버레이, 배경을 만들 때 유용합니다.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

자식 요소는 콘텐츠 람다입니다

각 레이아웃은 마지막 인자로 콘텐츠 람다를 받습니다. 그 안에서 호출하는 모든 컴포저블이 해당 레이아웃의 자식 요소가 됩니다. XML은 없으며, 자식 요소는 단순히 함수 호출로 작성합니다.

레이아웃 중첩하기

레이아웃은 자유롭게 중첩할 수 있습니다. Column 안에 Row를 넣으면 격자와 비슷한 구조나 여러 행으로 이루어진 목록을 만들 수 있습니다.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column과 LinearLayout 비교

XML을 사용해 보셨다면 Column은 세로 방향의 LinearLayout과 비슷하고, Row는 가로 방향의 LinearLayout과 비슷합니다. Box는 간단한 FrameLayout과 비슷합니다.

기본 크기 지정

기본적으로 레이아웃의 크기는 자식 요소에 필요한 만큼만 지정됩니다(콘텐츠에 맞춤). 다음 레슨에서 다룰 Modifier.fillMaxSize() 같은 수정자를 사용하면 사용 가능한 공간을 모두 채우도록 만들 수 있습니다.

Box의 contentAlignment

Box에서는 contentAlignment를 사용해 모든 자식 요소를 정렬할 수 있습니다. 예를 들어 모든 요소를 가운데에 배치할 수 있습니다.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

알맞은 레이아웃 선택하기

방향을 기준으로 선택하세요. 세로 배치에는 Column, 가로 배치에는 Row, 겹쳐 배치하거나 자식 요소 하나를 가운데 정렬할 때는 Box를 사용합니다. 대부분의 화면은 세 가지를 모두 조합합니다.

마무리

세 가지 레이아웃을 모두 사용한 간단한 프로필 레이아웃입니다.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

빠른 확인

자식 요소를 서로 포개어 쌓는 레이아웃은 무엇인가요?

복습

세 가지 핵심 레이아웃:

  • Column — 세로로 쌓습니다.
  • Row — 가로로 쌓습니다.
  • Box — 레이어를 겹쳐 배치하며, contentAlignment로 콘텐츠를 가운데 정렬할 수 있습니다.

이들을 자유롭게 중첩해 어떤 화면이든 만들 수 있습니다.

자주 묻는 질문

“Column, Row와 Box” 강의는 무료인가요?

네 — “Column, Row와 Box” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Column, Row와 Box”에서 뭘 배우나요?

일반적인 레이아웃에 컴포저블을 배치해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Android Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Column, Row와 Box” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Column, Row와 Box
  2. Modifier 시스템
  3. 정렬과 배치
  4. LazyColumn으로 목록 만들기
← Android Academy(으)로 돌아가기