4. Compose로 레이아웃 구성하기 📐

4.1 기본 레이아웃 컴포넌트 📏

Compose에서는 세 가지 기본 레이아웃 컴포넌트를 제공해:

1. Box: 자식 요소들을 겹쳐서 배치 (FrameLayout과 유사)
2. Row: 자식 요소들을 가로로 배치 (LinearLayout horizontal과 유사)
3. Column: 자식 요소들을 세로로 배치 (LinearLayout vertical과 유사)

이 세 가지 레이아웃을 조합하면 거의 모든 UI 레이아웃을 만들 수 있어. 예를 들어, 간단한 프로필 카드를 만들어볼게:

@Composable
fun ProfileCard() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = 4.dp
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 프로필 이미지
            Box(
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape)
                    .background(Color.Gray)
            ) {
                // 실제로는 여기에 Image 컴포넌트가 들어갈 수 있어
                Text(
                    text = "JP",
                    color = Color.White,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
            
            // 프로필 정보
            Column(
                modifier = Modifier
                    .padding(start = 16.dp)
                    .weight(1f)
            ) {
                Text(
                    text = "Jetpack Compose",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    text = "안드로이드 개발자",
                    fontSize = 14.sp,
                    color = Color.Gray
                )
            }
            
            // 팔로우 버튼
            Button(
                onClick = { /* 버튼 클릭 시 동작 */ },
                modifier = Modifier.wrapContentSize()
            ) {
                Text("팔로우")
            }
        }
    }
}

4.2 LazyColumn과 LazyRow로 리스트 만들기 📜

기존 안드로이드의 RecyclerView와 같은 역할을 하는 LazyColumn과 LazyRow를 사용하면 효율적인 리스트를 쉽게 만들 수 있어:

@Composable
fun SimpleList() {
    val items = List(100) { "Item #$it" }
    
    LazyColumn {
        items(items) { item ->
            Text(
                text = item,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            )
            Divider()
        }
    }
}

LazyColumn은 화면에 보이는 항목만 렌더링하기 때문에 메모리 효율이 좋아. 또한, 리스트 항목의 추가, 제거, 업데이트도 간단하게 처리할 수 있지. 😌

4.3 ConstraintLayout 사용하기 🧩

더 복잡한 레이아웃을 위해 Compose에서도 ConstraintLayout을 사용할 수 있어. 먼저 의존성을 추가해야 해:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

그리고 다음과 같이 사용할 수 있어:

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        // 참조 생성
        val (title, image, description, button) = createRefs()
        
        Text(
            text = "제목",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
        )
        
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Gray)
                .constrainAs(image) {
                    top.linkTo(title.bottom, margin = 16.dp)
                    start.linkTo(parent.start)
                }
        )
        
        Text(
            text = "이것은 설명 텍스트입니다. 여기에 자세한 내용이 들어갑니다.",
            modifier = Modifier
                .constrainAs(description) {
                    top.linkTo(image.top)
                    start.linkTo(image.end, margin = 16.dp)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints
                }
        )
        
        Button(
            onClick = { /* 버튼 클릭 시 동작 */ },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(image.bottom, margin = 16.dp)
                end.linkTo(parent.end)
            }
        ) {
            Text("확인")
        }
    }
}

ConstraintLayout을 사용하면 UI 요소들 간의 관계를 정의해서 복잡한 레이아웃도 쉽게 만들 수 있어. 특히 반응형 UI를 구현할 때 유용하지! 🧠