Compose UI 도구 키트에 대해서 알아보자

이 글은 ANDROID 개발자를 위한 JETPACK COMPOSE 코스를 바탕으로 작성되었습니다.

Material Design

Compose는 Material Design 2와 Material Design 3를 지원한다. Material Theme을 구성해놓으면 Color Scheme, Shapes, Typography, Content를 설정해둘 수 있다. 어떻게 보면 XML을 사용할 때, style.xml을 설정한 것과 비슷한 느낌이다. 다만 XML이 아닌 Kotlin으로 작성된만큼 런타임 중에 변경하기 용이하고, 사용자 정의 테마도 구현할 수 있다.

MaterialTheme(
    colorScheme = colorScheme,
    shapes = Shapes
    typography = Typography,
    content = content
)

Scaffold and Surface

Scaffold는 앱의 기본적인 레이아웃 구조를 정의하고, Material Design의 디자인 원칙에 따라 앱의 주요 컴포넌트를 배치한다. 조금 다르긴 하지만 페이지의 전체적인 UI 요소들을 제공한다는 점에서 XML로 치면 가장 바깥에 있는 Layout과 비슷한 역할인 것 같다. 다만 Scaffold는 TopAppBar, Content, Bottom Navigation Bar, Floating Action Button처럼 정말 주요 컴포넌트를 다룬다는 점에서 차이가 있다.

Surface는 배경 색상, 모서리 반경, 그림자 등의 속성을 정의하며 UI 요소들을 담는 컨테이너 역할을 한다. Scaffold는 앱의 최상위 레벨에서 전체 레이아웃을 관리하고 Surface는 그보다 아래에서 하위 요소들의 시각적 요소를 관리하는 역할이라 보면 되겠다.

Layouts and Modifiers

Compose에서는 Constraint, Linear ~ 등으로 Layout을 명시하지 않는다. 대신에 Row, Column, Box, LazyRow, LazyColumn 등을 사용해서 UI 요소들을 구성하고 정렬, 크기, 간격 등을 설정할 수 있다. Modifier는 UI에 다양한 추가 기능을 제공한다. 말 그대로 수정자의 기능을 가지는 것이다. 크기, 여백, 패딩, 배경, 클릭 이벤트 등의 속성을 설정할 수 있고, XML과는 다르게 하나의 Modifier에 수정자.속성().속성() 형식으로 구현된다. 개인적으로는 이런 방식이 XML의 방식보다 훨씬 편리하다고 느껴진다.

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier = modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

이 스터디의 GitHub Repository가 궁금하다면? 링크

참고

• Android Developers 공식 문서 Compose 기본사항
• Android Developers Channel > Powerful: Compose toolkit - MAD Skills