Compose의 Material Design 3

Jetpack Compose는 차세대 Material Design인 Material Design 3 구현을 제공합니다. Material 3은 업데이트된 테마 설정, 구성요소, Material You 맞춤설정 기능(예: 동적 색상)을 포함하며 Android 12 이상의 새로운 시각적 스타일 및 시스템 UI와 일관되도록 설계되었습니다.

아래에서는 Reply 샘플 앱을 예로 사용하여 Material Design 3을 구현하는 방법을 보여줍니다. Reply 샘플은 Material Design 3을 기반으로 합니다.

Material Design 3을 사용한 Reply 샘플 앱
그림 1. Material Design 3을 사용한 Reply 샘플 앱

종속 항목

Compose 앱에서 Material 3을 사용하려면 build.gradle 파일에 Compose Material 3 종속 항목을 추가합니다.

implementation "androidx.compose.material3:material3:$material3_version"

종속 항목을 추가하면 색상, 서체, 도형을 비롯한 Material Design 시스템을 앱에 추가할 수 있습니다.

실험용 API

일부 M3 API는 실험용으로 간주됩니다. 이러한 경우 ExperimentalMaterial3Api 주석을 사용하여 함수 또는 파일 수준에서 선택해야 합니다.

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Material Theming

M3 테마에는 색 구성표, 서체, 도형과 같은 하위 시스템이 포함되어 있습니다. 이러한 값을 맞춤설정하면 앱을 빌드하는 데 사용하는 M3 구성요소에 변경사항이 자동으로 반영됩니다.

Material Design 하위 시스템: 색상, 서체, 도형
그림 2. Material Design의 하위 시스템: 색상, 서체, 도형

Jetpack Compose는 M3 MaterialTheme 컴포저블을 사용하여 다음 개념을 구현합니다.

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

애플리케이션 콘텐츠의 테마를 지정하려면 앱에 맞는 색 구성표, 서체, 도형을 정의합니다.

색 구성표

색 구성표의 기초는 다섯 가지 주요 색상입니다. 이러한 각 색상은 Material 3 구성요소에서 사용하는 13가지 색조의 색조 팔레트와 관련이 있습니다. 예를 들어 Reply의 밝은 테마의 색 구성표는 다음과 같습니다.

답장 샘플 앱의 밝은 색 구성표
그림 3. 답장 샘플 앱의 밝은 색 구성표

색 구성표 및 색상 역할에 관해 자세히 알아보세요.

색 구성표 생성

맞춤 ColorScheme을 수동으로 만들 수도 있지만 브랜드의 소스 색상을 사용하여 생성하는 것이 더 쉬울 때가 많습니다. Material 테마 빌더 도구를 사용하면 이 작업을 하고 선택적으로 Compose 테마 설정 코드를 내보낼 수 있습니다. 다음과 같은 파일이 생성됩니다.

  • Color.kt에는 밝은 테마 색상과 어두운 테마 색상 모두에 정의된 모든 역할이 있는 테마 색상이 있습니다.

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt에는 밝은 색 및 어두운 색 구성표와 앱 테마의 설정이 포함되어 있습니다.

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

밝은 테마와 어두운 테마를 지원하려면 isSystemInDarkTheme()를 사용하세요. 시스템 설정에 따라 사용할 색 구성표(밝은 색 또는 어두운 색 구성표)를 정의합니다.

동적 색 구성표

동적 색상은 Material You의 핵심 부분으로, 알고리즘이 사용자의 배경화면에서 맞춤 색상을 가져와 앱과 시스템 UI에 적용합니다. 이 색상 팔레트는 밝은 색 구성표와 어두운 색 구성표를 만드는 시작점으로 사용됩니다.

배경화면의 Reply 샘플 앱 동적 테마 설정 (왼쪽)과 기본 앱 테마 설정 (오른쪽)
그림 4. 배경화면의 답장 샘플 앱 동적 테마 설정 (왼쪽)과 기본 앱 테마 설정 (오른쪽)

동적 색상은 Android 12 이상에서 사용할 수 있습니다. 동적 색상을 사용할 수 있다면 동적 ColorScheme을 설정할 수 있습니다. 그렇지 않은 경우 밝은 색상이나 어두운 맞춤 ColorScheme를 사용하는 것으로 대체해야 합니다.

ColorScheme는 동적 밝은 색 구성표나 어두운 색 구성표를 만드는 빌더 함수를 제공합니다.

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

색상 사용

MaterialTheme.colorScheme를 통해 앱에서 Material 테마 색상에 액세스할 수 있습니다.

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

각 색상 역할은 구성요소의 상태, 가시도, 강조에 따라 다양한 위치에서 사용될 수 있습니다.

  • 기본 색상은 기본 색상으로, 눈에 띄는 버튼, 활성 상태, 높은 노출 영역의 색조와 같은 기본 구성요소에 사용됩니다.
  • 보조 키 색상은 필터 칩과 같이 UI에서 눈에 덜 띄는 구성요소에 사용되며 색상 표현식의 기회를 확대합니다.
  • 3차 키 색상은 기본 색상과 보조 색상의 균형을 맞추거나 요소에 주목도를 높이는 데 사용할 수 있는 대비 강조의 역할을 얻는 데 사용됩니다.

Reply 샘플 앱 디자인은 primary-container 위에 on-primary-container 색상을 사용하여 선택된 항목을 강조합니다.

on-primary-container 색상이 지정된 기본 컨테이너 및 텍스트 필드
그림 5. on-primary-container 색상이 지정된 기본 컨테이너 및 텍스트 필드

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

여기에서는 Reply 탐색 창에서 강조와 강조를 위해 보조 및 3차 컨테이너 색상이 대조적으로 사용되는 방식을 확인할 수 있습니다.

플로팅 작업 버튼의 3차 컨테이너와 on-tertiary-container 조합입니다.
그림 6. 플로팅 작업 버튼의 3차 컨테이너와 on-tertiary-container 조합입니다.

서체

Material Design 3는 Material Design 2에서 조정된 텍스트 스타일을 포함하여 서체 스케일을 정의합니다. 이름 지정과 그룹화는 표시, 헤드라인, 제목, 본문, 라벨로 간소화되었고 각각 대, 중, 소 크기가 있습니다.

Material Design 3의 기본 서체 크기
그림 7. Material Design 3의 기본 서체 크기
M3 기본 글꼴 크기/줄 높이
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

서체 정의

Compose는 기존 TextStyle글꼴 관련 클래스와 함께 M3 Typography 클래스를 제공하여 Material 3 유형 스케일을 모델링합니다. Typography 생성자는 각 스타일의 기본값을 제공하므로 맞춤설정하지 않으려는 매개변수를 생략할 수 있습니다.

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

다양한 서체 사용을 위한 본문 대형, 중간 중간 및 라벨
그림 8. 다양한 서체 사용을 위해 대형 본문, 중간 본문, 매체 라벨입니다.

Material Design 서체 스케일에서 15개의 기본 스타일이 모두 제품에 필요한 것은 아닙니다. 이 예에서는 축소된 세트로 5개의 크기를 선택하고 나머지는 생략합니다.

TextStyle의 기본값과 글꼴 관련 속성(예: fontFamily, letterSpacing)을 변경하여 서체를 맞춤설정할 수 있습니다.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

Typography를 정의한 후 M3 MaterialTheme에 전달합니다.

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

텍스트 스타일 사용

MaterialTheme.typography를 사용하여 M3 MaterialTheme 컴포저블에 제공된 서체를 가져올 수 있습니다.

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

서체 적용에 관한 머티리얼 가이드라인을 자세히 알아보세요.

도형

Material 표면은 다양한 도형으로 표시할 수 있습니다. 도형은 주의를 집중시키고, 구성요소를 식별하고, 상태를 전달하고, 브랜드를 표현합니다

도형 배율은 컨테이너 모서리의 스타일을 정의하며 정사각형에서 완전한 원형까지 둥근 정도 범위를 제공합니다.

도형 정의

Compose는 새로운 M3 도형을 지원하기 위해 M3 Shapes 클래스에 확장 매개변수를 제공합니다. M3 도형 배율은 서체 스케일과 비슷하므로 UI에서 다양한 표현의 도형을 사용할 수 있습니다.

다양한 크기의 도형이 있습니다.

  • XS
  • 사이즈: S
  • 보통
  • 크게
  • XL

기본적으로 각 도형에는 기본값이 있지만 다음과 같이 재정의할 수 있습니다.

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

Shapes를 정의한 후에는 M3 MaterialTheme에 전달할 수 있습니다.

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

도형 사용

MaterialTheme에 있는 모든 구성요소의 도형 배율을 맞춤설정하거나 구성요소별로 그렇게 할 수도 있습니다.

중형 및 큰 도형을 기본값으로 적용합니다.

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Reply 샘플 앱의 카드 중형 모양과 플로팅 작업 버튼용 큰 도형
그림 9. Reply 샘플 앱의 카드 중형 모양과 플로팅 작업 버튼용 큰 도형

Compose의 일부인 다른 두 도형 RectangleShapeCircleShape가 있습니다. 직사각형 도형에는 테두리 반경이 없으며 원형 도형은 원의 가장자리를 완전히 표시합니다.

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

아래 예는 기본 도형 값이 적용된 일부 구성요소를 보여줍니다.

모든 Material 3 구성요소의 기본 도형 값
그림 10. 모든 Material 3 구성요소의 기본 도형 값

도형 적용에 관한 Material 가이드라인을 참고하세요.

강조

M3에서 강조는 색상 변형과 on-color 조합을 사용하여 제공됩니다. M3에서는 UI에 강조를 추가하는 두 가지 방법이 있습니다.

  • 확장된 M3 색상 시스템의 on-surface, on-surface-variant 색상과 함께 표면, 표면 변형, 배경을 사용합니다. 예를 들어 표면은 on-surface-variant와 함께, surface-variant는 on-surface와 함께 사용하여 다양한 강조 수준을 제공할 수 있습니다.
강조를 위해 중성색 조합을 사용합니다.
그림 11. 강조를 위해 중성색 조합을 사용합니다.
  • 텍스트에 서로 다른 글꼴 두께 사용 위에서 서체 스케일에 맞춤 가중치를 제공하여 다르게 강조할 수 있음을 확인했습니다.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

고도

머티리얼 3는 주로 색조 색상 오버레이를 사용하여 고도를 나타냅니다. 이는 컨테이너와 표면을 서로 구별하는 새로운 방법입니다. 색조 고도를 높이면 그림자 외에도 더 눈에 띄는 색조가 사용됩니다.

색조 고도와 그림자 고도
그림 12. 색조 고도와 그림자 고도

어두운 테마의 고도 오버레이도 Material 3에서 색조 색상 오버레이로 변경되었습니다. 오버레이 색상은 기본 색상 슬롯에서 가져옵니다.

Material Design 3의 그림자 고도와 색조 고도 비교
그림 13. Material Design 3의 그림자 고도와 색조 고도 비교

대부분의 M3 구성요소를 뒷받침하는 지원 컴포저블인 M3 Surface에는 색조 고도 지원과 그림자 고도 지원이 모두 포함됩니다.

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Material 구성요소

Material Design에는 이미 Material Theming을 따르고 있으며 멋진 Material Design 앱을 만드는 데 도움이 되는 다양한 Material 구성요소(예: 버튼, 칩, 카드, 탐색 메뉴)가 함께 제공됩니다. 기본 속성이 있는 구성요소를 바로 사용할 수 있습니다.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3는 강조와 관심에 따라 서로 다른 역할에서 사용할 동일한 구성요소의 여러 버전을 제공합니다.

FAB에서 버튼 강조, 기본에서 텍스트 버튼으로
그림 14. FAB에서 버튼 강조, 기본에서 텍스트 버튼으로 강조
  • 가장 강조되는 작업을 위한 확장된 플로팅 작업 버튼은 다음과 같습니다.

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • 높은 강조 작업을 위한 채워진 버튼:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • 낮은 강조 작업의 텍스트 버튼:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

Material 버튼 및 기타 구성요소에 관해 자세히 알아보세요. Material 3은 다양한 사용 사례와 화면 크기에 맞게 특별히 설계된 버튼, 앱 바, 탐색 구성요소와 같은 다양한 구성요소 모음을 제공합니다.

Material은 다양한 화면 크기와 상태에 따라 탐색을 구현하는 데 도움이 되는 여러 탐색 구성요소도 제공합니다.

NavigationBar는 5개 이하의 대상을 타겟팅하려고 할 때 소형 기기에 사용됩니다.

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail는 가로 모드의 소형~중형 태블릿 또는 휴대전화에 사용됩니다. 사용자에게 인체공학을 제공하고 기기의 사용자 환경을 개선합니다.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

BottomNavigationBar(왼쪽) 및 NavigationRail(오른쪽)의 응답 쇼케이스
그림 15. BottomNavigationBar (왼쪽) 및 NavigationRail (오른쪽)의 답글 쇼케이스

기본 테마 설정에서 두 가지를 모두 사용하여 응답하여 모든 기기 크기에 맞는 몰입형 사용자 환경을 제공합니다.

NavigationDrawer는 세부정보를 표시하기에 충분한 공간이 있는 중대형 크기의 태블릿에 사용됩니다. PermanentNavigationDrawer 또는 ModalNavigationDrawerNavigationRail와 함께 사용할 수 있습니다.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

영구 탐색 창의 답글 쇼케이스
그림 16. 영구 탐색 창의 답글 쇼케이스

탐색 옵션은 사용자 경험, 인체공학, 도달 가능성을 개선합니다. Material 탐색 구성요소에 관한 자세한 내용은 Compose 적응형 Codelab을 참고하세요.

구성요소의 테마 맞춤설정

M3은 맞춤설정과 유연성을 권장합니다. 모든 구성요소에는 기본 색상이 적용되지만 필요한 경우 유연한 API를 노출하여 색상을 맞춤설정할 수 있습니다.

카드, 버튼과 같은 대부분의 구성요소는 수정 가능한 색상 및 고도 인터페이스를 노출하는 기본 객체를 제공합니다. 이 객체를 수정하여 구성요소를 맞춤설정할 수 있습니다.

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

Material 3 맞춤설정에 관한 자세한 내용을 참고하세요.

시스템 UI

Material You의 일부 측면은 Android 12 이상의 새로운 시각적 스타일과 시스템 UI에서 비롯됩니다. 변경사항이 있는 두 가지 주요 영역은 물결 효과와 오버스크롤입니다. 이러한 변경사항을 구현하기 위한 추가 작업은 필요하지 않습니다.

물결 효과

이제 물결 효과를 누르면 은은한 반짝임이 적용되어 표면이 밝아집니다. Compose Material 물결 효과는 Android에서 내부적으로 플랫폼 RippleDrawable을 사용하므로 반짝임 물결 효과는 Android 12 이상에서 모든 Material 구성요소에 사용할 수 있습니다.

M2와 M3의 물결 효과 비교
그림 17. M2와 M3의 물결 효과

오버스크롤

이제 오버스크롤이 스크롤 컨테이너 가장자리에서 스트레치 효과를 사용합니다. 스트레치 오버스크롤은 API 수준과 관계없이 Compose Foundation 1.1.0 이상의 스크롤 컨테이너 컴포저블(예: LazyColumn, LazyRow, LazyVerticalGrid)에서 기본적으로 사용 설정됩니다.

컨테이너 가장자리에 스트레치 효과를 사용하여 오버스크롤
그림 18. 컨테이너 가장자리에서 스트레치 효과를 사용하여 오버스크롤

접근성

Material 구성요소에 내장된 접근성 표준은 포괄적인 제품 디자인의 기반을 제공하도록 설계되었습니다. 제품의 접근성을 이해하면 저시력, 시각장애, 청각 장애, 인지 장애, 운동 장애, 상황적 장애 (예: 팔 부러짐)를 비롯한 모든 사용자의 사용성을 개선할 수 있습니다.

색상 접근성

동적 색상은 색상 대비에 대한 접근성 표준을 충족하도록 설계되었습니다. 색조 팔레트 시스템은 모든 색 구성표에 기본적으로 액세스할 수 있도록 하는 데 매우 중요합니다.

Material의 색상 시스템은 액세스 가능한 대비율을 충족하는 데 사용할 수 있는 표준 톤 값과 측정값을 제공합니다.

Reply 샘플 앱: 기본, 보조, 3차 색조 팔레트 (위에서 아래로)
그림 19. Reply 샘플 앱: 기본, 보조, 3차 색조 팔레트 (위에서 아래로)

모든 Material 구성요소 및 동적 테마 설정은 이미 접근성 요구사항을 충족하도록 선택된 색조 팔레트 집합에서 위의 색상 역할을 사용하고 있습니다. 그러나 구성요소를 맞춤설정하는 경우 적절한 색상 역할을 사용하고 불일치를 피해야 합니다.

기본 위에 on-primary를, primary-container 위에 on-primary-container를 사용하고 다른 강조 색상과 중성색에도 동일하게 사용하여 사용자가 대비감을 느낄 수 있도록 합니다.

기본 컨테이너 위에 3차 컨테이너를 사용하면 사용자의 대비가 떨어집니다.

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

충분한 대비 (왼쪽)와 낮은 대비 (오른쪽)
그림 20. 충분한 대비 (왼쪽)와 낮은 대비 (오른쪽)

서체 접근성

M3 서체 스케일은 정적 유형 램프와 값을 업데이트하여 기기 전반에 걸쳐 확장되는 단순하지만 동적인 크기 카테고리 프레임워크를 제공합니다.

예를 들어 M3에서는 Display Small에 스마트폰 또는 태블릿과 같은 기기 컨텍스트에 따라 다른 값을 할당할 수 있습니다.

큰 화면

Material은 적응형 레이아웃과 폴더블에 관한 안내를 제공하여 앱의 접근성을 높이고 대형 기기를 들고 있는 사용자의 인체공학을 개선합니다.

Material은 다양한 종류의 탐색을 제공하여 대형 기기에 더 나은 사용자 환경을 제공할 수 있도록 합니다.

Android 대형 화면 가이드라인에 관해 자세히 알아보고 적응형 및 접근성 디자인에 관한 답장 샘플을 참고하세요.

자세히 알아보기

Compose의 Material Theming에 관한 자세한 내용은 다음 리소스를 참고하세요.

샘플 앱

문서

API 참조 및 소스 코드

동영상