[오늘의 코드 조각] [2-1] Compose 기본 UI와 레이아웃

안녕하세요, '생각하는 개발자'입니다.

Part 1에서 우리는 코틀린이라는 언어를 통해 컴퓨터와 대화하는 법을 배웠습니다. 이제 그 언어를 사용해 사용자의 눈에 보이는 '화면'을 직접 그려볼 시간입니다.

Jetpack Compose의 세계에서는 모든 UI 요소가 Composable 함수라는 '레고 블록'으로 만들어집니다. 우리는 이 블록들을 조립하여 원하는 화면을 구성하게 됩니다. 이번 시간에는 가장 기본적이면서도 중요한 UI 블록들과, 이 블록들을 원하는 위치에 배치하는 방법에 대해 알아보겠습니다.

4.1. Composable 함수: UI를 그리는 레고 블록

Composable 함수는 화면의 일부를 그리는 특별한 함수입니다. 일반 함수와 구분하기 위해, 함수 위에 @Composable이라는 주석(Annotation)을 붙여줍니다.

 

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
이 Greeting 함수는 이제 "Hello"와 전달받은 이름을 조합하여 화면에 글자를 표시하는 하나의 UI 부품이 되었습니다.

4.2. 기본 UI 위젯: Text, Button, Image, TextField

Compose는 우리가 앱에서 흔히 보는 대부분의 UI 요소를 미리 만들어 두었습니다. 가장 대표적인 4가지를 만나보시죠.

Text: 화면에 글자를 표시합니다.

Button: 사용자가 클릭할 수 있는 버튼을 만듭니다.

Image: 아이콘이나 사진 등 이미지를 표시합니다.

TextField: 사용자가 직접 글자를 입력할 수 있는 입력창입니다.

 

@Composable
fun BasicWidgetsExample() {
    // Column을 사용해 위젯들을 세로로 차례대로 배치합니다. (자세한 내용은 아래에서!)
    Column {
        Text(text = "가장 기본적인 텍스트입니다.")

        Button(onClick = { /* 클릭 시 할 행동 */ }) {
            Text(text = "눌러보세요")
        }

        // Image는 painter 리소스를 필요로 합니다.
        // 여기서는 안드로이드 기본 아이콘을 사용해 보겠습니다.
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = "앱 아이콘" // 스크린 리더 등을 위한 설명
        )

        var textState by remember { mutableStateOf("여기에 입력하세요") }
        TextField(
            value = textState,
            onValueChange = { newText ->
                textState = newText
            }
        )
    }
}

TextField의 remember와 mutableStateOf가 궁금하신가요?
이것은 Compose의 핵심인 '상태(State)' 관리 방법입니다. 지금은 "사용자가 입력한 값을 기억하기 위한 마법 주문" 정도로만 생각해주세요. 바로 다음 챕터에서 아주 자세히 다룰 예정입니다!

 

4.3. UI 배치하기: Row, Column, Box와 Modifier

이제 레고 블록들을 조립할 시간입니다. Compose에서는 주로 3가지 컨테이너를 사용해 UI 요소들을 배치합니다.

Column: 자식들을 세로로 차례차례 쌓습니다.

Row: 자식들을 가로로 나란히 배치합니다.

Box: 자식들을 겹쳐서 쌓습니다. (가장 나중에 추가한 것이 맨 위로 올라옵니다)

그리고 **Modifier**는 이 블록들의 크기, 여백, 정렬 등 온갖 꾸미기 속성을 지정하는 아주 중요한 도구입니다.

@Composable
fun LayoutExample() {
    Column(
        modifier = Modifier.fillMaxSize(), // 화면 전체를 채우도록 설정
        horizontalAlignment = Alignment.CenterHorizontally, // 가로 정렬: 중앙
        verticalArrangement = Arrangement.SpaceEvenly // 세로 정렬: 균등한 간격
    ) {
        Text(text = "첫 번째 아이템")

        Row {
            Text(text = "두 번째")
            Text(
                text = "아이템",
                modifier = Modifier.padding(start = 8.dp) // 왼쪽 여백 8dp
            )
        }

        Box {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "배경"
            )
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = "아이콘"
            )
        }
    }
}

이 예제 코드를 직접 실행해보고, Column을 Row로 바꿔보는 등 여러 가지 실험을 해보세요. 직접 코드를 수정하고 결과를 눈으로 확인하는 것이 Compose와 가장 빨리 친해지는 방법입니다.