Compose 공식문서정리 - Theming

Material Design 3 in Compose

제트팩 컴포즈는 머티리얼 디자인의 차세대 진화 버전인 머티리얼 디자인 3를 구현합니다. 머티리얼 3에는 업데이트된 테마, 컴포넌트 및 동적 색상과 같은 머티리얼 유 개인화 기능이 포함되어 있으며, 안드로이드 12 이상의 새로운 비주얼 스타일 및 시스템 UI와 조화를 이루도록 설계되었습니다.

 

참고: "머티리얼 디자인 3", "머티리얼 3", "M3"라는 용어는 서로 바꿔서 사용할 수 있습니다. 기존 머티리얼 디자인 사양 및 해당 androidx.compose.material 라이브러리는 "머티리얼 디자인 2", "머티리얼 2" 또는 "M2"로 불립니다.

 

 

아래에서는 Reply 샘플 앱을 예로 들어 머티리얼 디자인 3 구현을 보여줍니다. 응답 샘플은 전적으로 머티리얼 디자인 3을 기반으로 합니다.

그림 1. 머티리얼 디자인3 을 사용한 답장 샘플 앱

종속성

컴포즈 앱에서 머티리얼 3을 사용하려면 build.gradle 파일에 컴포즈 머티리얼 3 종속성을 추가하세요

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

 

종속성이 추가되면 색상, 타이포그래피 및 모양을 포함한 머티리얼 디자인 시스템을 앱에 추가할 수 있습니다.

 

 

실험적 APIs

일부 M3 API는 실험적인 것으로 간주됩니다. 이러한 경우 함수 또는 파일 수준에서 ExperimentalMaterial3Api 어노테이션을 사용하여 옵트인해야 합니다

 

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

 

 

머터리얼 테마

 

M3 테마에는 color scheme, typography 및 shapes과 같은 하위 시스템이 포함되어 있습니다. 이러한 값을 사용자 지정하면 변경 사항이 앱을 빌드하는 데 사용하는 M3 구성 요소에 자동으로 반영됩니다.

 

머티리얼 디자인의 하위 시스템: 색상, 타이포그래피 및 모양

 

젯팩 컴포즈는 M3 머티리얼테마 컴포저블로 이러한 개념을 구현합니다

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

 

애플리케이션 콘텐츠를 테마로 하려면 앱에 맞는 색 구성표, 타이포그래피 및 모양을 정의하세요.

 

Color scheme

 

색 구성표의 기본은 다섯 가지 주요 색상 세트입니다. 이러한 각 색상은 머티리얼 3 컴포넌트에서 사용되는 13개의 톤 팔레트와 관련이 있습니다. 예를 들어 응답의 라이트 테마에 대한 색 구성표입니다:

 

 앱 조명 색 구성표 샘플

 

color schemes 생성

 

사용자 정의 컬러스킴을 수동으로 만들 수도 있지만 브랜드의 소스 색상을 사용하여 생성하는 것이 더 쉬운 경우가 많습니다.Material Theme Builder 도구를 사용하면 이 작업을 수행할 수 있으며, 선택적으로 테마 코드 작성 코드를 내보낼 수 있습니다. 다음 파일이 생성됩니다:

• 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()를 사용합니다. 시스템 설정에 따라 사용할 색 구성표를 밝게 또는 어둡게 정의합니다.

 

Dynamic color schemes

Dynamic color 는 알고리즘이 사용자의 배경 화면에서 사용자 지정 색상을 도출하여 앱과 시스템 UI에 적용하는 Material You의 핵심 부분입니다. 이 색상 팔레트는 밝은 색상과 어두운 색상을 생성하기 위한 시작점으로 사용됩니다.

배경 화면(왼쪽)과 기본 앱 테마(오른쪽)의 답장 샘플 앱 동적 테마

동적 색상은 Android 12 이상에서 사용할 수 있습니다. 동적 색상을 사용할 수 있는 경우 동적 컬러스킴을 설정할 수 있습니다. 그렇지 않은 경우 사용자 지정 밝은 색 또는 어두운 색 구성표를 사용해야 합니다.

 

ColorScheme은 light 이나 dark 만들기 위한 빌더 기능을 제공합니다:

// 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
}

 

Color usage

 

MaterialTheme.colorScheme을 통해 앱에서 머티리얼 테마 색상에 액세스할 수 있습니다:

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

 

각 색상 역할은 컴포넌트의 상태, 눈에 잘 띄는 정도, 강조하는 정도에 따라 다양한 위치에 사용할 수 있습니다.

• 기본 색은 눈에 잘 띄는 버튼, 활성 상태, 높은 표면의 색조와 같은 주요 구성 요소에 사용되는 기본 색상입니다.
• 보조 키 컬러는 필터 칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 사용되며 색상 표현의 기회를 넓혀줍니다.
• 세 번째 키 색상은 기본 색상과 보조 색상의 균형을 맞추거나 요소에 대한 주의를 환기시키는 데 사용할 수 있는 대비되는 액센트의 역할을 도출하는 데 사용됩니다.

 

답장 샘플 앱 디자인은 기본 컨테이너 위에 기본 컨테이너 색상을 사용하여 선택한 항목을 강조합니다.

 기본 컨테이너 및 기본 컨테이너 색상이 있는 텍스트 필드

 

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,
    )
}

 

여기에서 댓글 Navigation drawer에서 보조 및 보조 컨테이너 색상을 대조적으로 사용하여 강조와 악센트를 만드는 방법을 확인할 수 있습니다.

 

 

 

 

플로팅 액션 버튼에 대한 3차 컨테이너와 온-테리 컨테이너 조합.

 

Typography

 

머티리얼 디자인 3은 머티리얼 디자인 2에서 적용된 텍스트 스타일을 포함한 유형 배율을 정의합니다. 이름 지정 및 그룹화는 디스플레이, 헤드라인, 제목, 본문, 라벨로 단순화되었으며 각각 대, 중, 소 크기로 나뉘어 있습니다.

머티리얼 디자인 3의 기본 타이포그래피 스케일

 

 

 

M3	Default Font Size/Line Height
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

M2 타이포그래피 클래스와 달리 M3 타이포그래피 클래스에는 현재 defaultFontFamily 매개변수가 포함되어 있지 않습니다. 대신 각 개별 TextStyles에서 fontFamily 매개 변수를 사용해야 합니다.

 

Define typography

 

Compose는 기존 TextStyle 및 폰트 관련 클래스와 함께 M3 Typography 클래스를 제공하여 머티리얼 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
    ),
    // ..
)
// ..

 

 

다양한 타이포그래피 용도에 따른 본문 대형, 본문 중형 및 라벨 중형

제품에 머티리얼 디자인 유형 스케일의 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
),

 

 

타이포그래피를 정의했으면 M3 MaterialTheme에 전달합니다

 

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

 

Use text styles

 

MaterialTheme.typography를 사용하여 M3 MaterialTheme 컴포저블에 제공된 타이포그래피를 검색할 수 있습니다:

 

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

 

타이포그래피 적용에 대한 자세한 내용은 머티리얼 가이드라인을 참조하세요.

 

Shapes

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

모양 스케일은 컨테이너 모서리의 스타일을 정의하며, 정사각형부터 완전한 원형까지 다양한 둥근 모양을 제공합니다.

 

Define shapes

Compose는 새로운 M3 도형을 지원하기 위해 확장된 매개변수를 M3 도형 클래스에 제공합니다. M3 셰이프 스케일은 유형 스케일과 비슷하여 UI 전체에서 다양한 셰이프를 표현할 수 있습니다.

 

다양한 크기의 모양이 있습니다:

• Extra Small
• Small
• Medium
• Large
• Extra Large

기본적으로 각 도형에는 기본값이 있지만 이를 재정의할 수 있습니다:

 

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

 

 

셰이프를 정의한 후에는 M3 MaterialTheme에 전달할 수 있습니다:

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

 

 

Use shapes

MaterialTheme의 모든 컴포넌트에 대해 모양 배율을 사용자 지정하거나 컴포넌트별로 사용자 지정할 수 있습니다.

 

기본값으로 중간 및 큰 모양을 적용합니다:

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

 

답장 샘플 앱에서 카드의 중간 모양과 플로팅 작업 버튼의 큰 모양

 

다른 두 가지 도형인 직사각형 모양과 원 모양이 있으며, 이는 작성 기능의 일부입니다. 직사각형 모양은 테두리 반경이 없고 원 모양은 가장자리가 완전히 동그라미로 표시됩니다:

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

 

 

아래 예시는 기본 모양 값이 적용된 일부 컴포넌트를 보여줍니다:

 

 

모든 머티리얼 3 컴포넌트의 기본 모양 값입니다.

 

모양 적용에 대한 머티리얼 가이드라인에 대한 자세한 내용을 확인할 수 있습니다.

 

 

Emphasis

 

M3의 강조 기능은 다양한 색상과 색상 조합을 사용하여 제공됩니다. M3에서는 UI에 강조를 추가하는 두 가지 방법이 있습니다:

• 확장된 M3 색상 시스템에서 표면, 표면 변형 및 배경을 표면, 표면 변형 색상과 함께 사용할 수 있습니다. 예를 들어 표면을 표면상의 변형과 함께 사용하고 표면상의 변형은 표면상의 변형과 함께 사용하여 다양한 수준의 강조를 제공할 수 있습니다.

강조를 위해 중성적인 색상 조합 사용.

• 텍스트에 다른 글꼴 가중치 사용하기. 위에서 유형 눈금에 사용자 지정 가중치를 제공하여 다양한 강조를 제공할 수 있음을 확인했습니다.

 

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

 

M3에서 비활성화된 상태의 경우 알파값이 있는 "on-x"(여기서 x는 기본, 보조, 표면 등일 수 있음) 색상을 사용할 수 있습니다.

 

 

Elevation

Material 3은 주로 톤 컬러 오버레이를 사용하여 높이를 나타냅니다. 이는 컨테이너와 표면을 서로 구별하는 새로운 방법으로, 그림자와 더불어 더 눈에 띄는 톤을 사용하여 톤의 높이를 높입니다.

그림자 높이가 있는 톤 

 

어두운 테마의 Elevation 오버레이도 머티리얼 3에서 톤 컬러 오버레이로 변경되었습니다. 오버레이 색상은 기본 색상 슬롯에서 가져옵니다.

머티리얼 디자인에서 그림자 높이와 톤 높이 비교 3

 

 

대부분의 M3 컴포넌트 뒤에 구성 가능한 배경인 M3 Surface는 톤 및 섀도 엘리베이션을 모두 지원합니다:

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

 

 

Material components

머티리얼 디자인에는 버튼, 칩, 카드, 탐색 모음 등 머티리얼 테마를 따르고 멋진 머티리얼 디자인 앱을 만드는 데 도움이 되는 다양한 Material components  세트가 함께 제공됩니다. 기본 속성이 있는 컴포넌트를 바로 사용할 수 있습니다.

 

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

 

M3는 강조점과 주목도에 따라 다양한 역할에 사용할 수 있도록 동일한 구성 요소의 여러 버전을 제공합니다.

 

 

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 3는 다양한 사용 사례와 화면 크기에 맞게 특별히 설계된 버튼, 앱 바, 탐색 컴포넌트 등 다양한 컴포넌트 제품군을 제공합니다.

 

 

Navigation components

머티리얼은 또한 다양한 화면 크기와 상태에 따라 Navigation 을 구현하는 데 도움이 되는 여러 Navigation 구성 요소를 제공합니다.

 

내비게이션바는 destinations 을 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 = { }
        )
    }
}

 

 

하단 Navigation 모음(왼쪽) 및 NavigationRail(오른쪽)의 댓글 쇼케이스

 

기본 테마에서 두 가지를 모두 사용하여 댓글을 작성하면 모든 디바이스 크기에 맞는 몰입형 사용자 경험을 제공할 수 있습니다.

 

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

 

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

 

PermanentNavigationDrawer 쇼케이스

 

 

Navigation options은 사용자 경험, 인체공학 및 접근성을 향상시킵니다. Material navigation 컴포넌트에 대한 자세한 내용은 적응형 컴포넌트 작성 코드랩에서 확인할 수 있습니다. (Compose adaptive codelab.)

 

 

Customize a component's theming

 

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
}

 

 

머티리얼 3 커스터마이징에 대한 자세한 내용은 여기를 참조하세요.

 

 

System UI

 

머티리얼 유는 Android 12 이상에서 새로운 시각적 스타일과 시스템 UI를 제공합니다. 변경된 두 가지 주요 영역은 리플과 오버스크롤입니다. 이러한 변경 사항을 구현하기 위해 추가 작업이 필요하지 않습니다.

Ripple

Ripple now uses a subtle sparkle to illuminate surfaces when pressed. Compose Material Ripple uses a platform RippleDrawable under the hood on Android, so sparkle ripple is available on Android 12 and above for all Material components.

Ripple in M2 versus M3

 

Overscroll

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

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

 

Accessibility

 

머티리얼 컴포넌트에 내장된 접근성 표준은 포용적인 제품 설계를 위한 기반을 제공하도록 설계되었습니다. 제품의 접근성을 이해하면 저시력, 시각 장애, 청각 장애, 인지 장애, 운동 장애 또는 상황적 장애(예: 팔 부러짐)를 가진 사용자를 포함한 모든 사용자의 사용성을 향상시킬 수 있습니다.

 

Color accessibility

 

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

 

머티리얼의 색상 시스템은 접근 가능한 명암비를 충족하는 데 사용할 수 있는 표준 톤 값과 측정값을 제공합니다.

샘플 앱: 기본, 보조 및 3차 색조 팔레트(위쪽에서 아래쪽)

모든 머티리얼 컴포넌트와 동적 테마는 접근성 요구 사항을 충족하도록 선택된 색조 팔레트 세트에서 위의 색상 역할을 이미 사용하고 있습니다. 그러나 컴포넌트를 사용자 지정하는 경우 적절한 색상 역할을 사용하여 불일치를 피해야 합니다.

 

기본 위에 기본을, 기본 컨테이너 위에 기본 컨테이너를 사용하고 다른 강조 색상과 중성 색상도 동일하게 사용하여 사용자가 쉽게 대비를 확인할 수 있도록 합니다.

 

1차 컨테이너 위에 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
    )
) {
}

 

충분한 대비(왼쪽)와 낮은 대비(오른쪽) 비교

 

Typography accessibility

 

M3 유형 스케일은 정적 유형 램프와 값을 업데이트하여 여러 디바이스에서 확장 가능한 단순하지만 동적인 크기 카테고리의 프레임워크를 제공합니다.

예를 들어, M3에서는 휴대폰이나 태블릿 등 디바이스 상황에 따라 '작게 표시'에 다른 값을 지정할 수 있습니다

 

Large screens

Material은 적응형 레이아웃과 폴더블에 대한 지침을 제공하여 앱의 접근성을 높이고 대형 기기를 사용하는 사용자의 인체공학적 환경을 개선할 수 있습니다.

 

Material은 대형 디바이스에서 더 나은 사용자 경험을 제공할 수 있도록 다양한 종류의 Navigation 기능을 제공합니다.

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

 

 

 

 

 

 

참고 : https://developer.android.com/develop/ui/compose/compiler