Material You in Compose apps

[fornewid]

https://youtu.be/xS4GpdIQUEo

[fornewid]

Material You는 작년에 발표한 Material Design의 차세대 버전입니다.

역사적으로 앱은 모두에게 적합한 단일 크기였습니다. 모두가 동일한 색상, 동일한 대비 및 동일한 텍스트 크기를 사용했습니다.

당연히 사용자마다 앱에서 서로 다른 것을 원하고 필요로 합니다. 어떤 사람들은 매우 높은 색상 대비가 필요하고, 어떤 사람들은 자신의 기분에 맞는 스타일을 원합니다.

Material 3는 색맹이든, 스크린 리더가 필요하든, 현재 분홍색에 꽂혀 있든, 앱이 기능적일 뿐만 아니라 편안하도록 만드는 첫 번째 단계입니다.

Compose Material 3 Jetpack 라이브러리는 Material 3 디자인 시스템을 기반으로 하는 Material You의 구현입니다. 첫 번째 Stable Release가 막 출시되었으므로 이제 앱에서 사용하기에 좋은 시기입니다.

[fornewid]

Key Features

Compose Material 3의 몇 가지 주요 기능을 살펴보겠습니다.

라이브러리에는 Theme 및 Component 업데이트 뿐만 아니라, Dynamic Color 같은 새로운 기능이 있습니다. 업데이트된 테마 시스템은 브랜드를 표현하는 데 더 많은 유연성을 제공합니다.

또한 최신 OS의 시각적인 스타일 및 System UI 와 결합되도록 설계되었습니다. 따라서 앱은 Android 12, 13 이상에서 편안하게 느껴집니다.

색 구성표의 기초는 1차, 2차, 3차, 오류 및 중립의 주요 색상 세트입니다. 색 구성표는 인터렉션 상태, 오류 및 접근가능한 대비를 표현하는 데 필요한 색 집합을 제공합니다.

type scale에는 용도 및 크기에 따라 이름이 간소화된 텍스트 스타일이 포함되어 있습니다.

shape scale은 구성 요소 모서리의 스타일을 정의하여 정사각형에서 완전한 원형까지 제공합니다.

MaterialTheme Composable에서 이를 연결하여 앱을 브랜딩할 수 있습니다.

MaterialTheme Builder 도구를 사용하여 브랜드 색상에서 파생된 Color Scheme을 생성하고 compose theme를 export하는 것이 좋습니다. material-theme-builder-intro

---

Dynamic Color는 Material You의 핵심 개인화 기능입니다. Android 12부터 사용자는 배경화면 선택을 통해 개별화된 색 구성표를 생성할 수 있습니다.

Compose에서 Dynamic Color scheme을 구현하려면 먼저 Build.Version.SDK_INT를 확인하세요. Dynamic Color를 사용할 수 없는 경우, 이전과 같이 light/dark color scheme을 사용하도록 대체할 수 있습니다.

여기에서 샘플 앱의 Dynamic Color scheme이 사용자의 배경화면 선택에 맞게 조정되는 것을 볼 수 있습니다.

Compose Material 3에는 Button, Chip, Dialog 및 Switch와 같은 구성 요소에 대한 다양한 업데이트도 포함되어 있습니다. 이러한 업데이트는 새로운 Material 3 테마 값을 사용하고 각 구성 요소 사양에 대한 새로운 업데이트를 포함합니다. 또한 app bar와 navigation 구성 요소를 업데이트하여 Window Inset 지원이 포함되었습니다.

라이브러리는 네 가지 유형의 상단 앱 바를 제공합니다. (default(=small), center aligned, medium, large) 스크롤하면 상단 앱 바가 대비되는 색상으로 채워져 아래 콘텐츠와 시각적으로 구분됩니다.

또한 라이브러리에는 Navigation을 위한 Composable 들이 있습니다.

• Navigation Bar (= Bottom Navigation)
• Rail
• Navigation Drawer의 3가지 변형 (modal, dismissable, permanent)

Material 3에서 Navigation Drawer는 scaffold에서 분리되었습니다. drawer 내용을 보다 쉽게 커스텀할 수 있는 새로운 drawer sheet 구성 요소도 있습니다.

navigation component를 Material 3와 함께 사용하면 Window Size Class API를 통해 사용 가능한 화면 크기에 따라 적절한 탐색을 정의할 수 있습니다.

Components 및 Compose Material 3에 대한 다양한 업데이트가 있습니다. Component의 전체 Overview와 사용 방법을 보려면 developer.android.com에서 API 참조를 확인하세요. goo.gle/compose-material-3

[fornewid]

Resources & Tooling

Android 앱에서 Compose Material 3를 사용하기에 적절한 시기입니다. 시작하는 데 도움이 되는 도구를 준비했습니다.

첫째, 모든 새로운 Android Studio 프로젝트는 기본적으로 Material 3을 사용합니다. Material Theme Adapter 라이브러리와 Material Theme Builder 도구도 업데이트했습니다.

다음으로, Material 3 및 Material 2에서 마이그레이션에 대한 새로운 가이드와 관련된 코드랩이 있습니다.

마지막으로 Compose Samples 및 Compose Material Catalog 앱도 업데이트되었습니다.

Material You로 구축하는 방법에 대해 자세히 알아보려면 이 세션을 확인하십시오.