Material3는 Compose Multiplatform 앱의 기본 테마 프레임워크이며, 일관된 UI를 위해 필수적입니다. 🎨
Figma 목업을 기반으로 Material Design의 컬러 토큰(primary, surface 등) 및 텍스트 스타일(폰트, 크기, 가중치)을 정의하여 실제 앱 테마로 변환하는 과정을 설명합니다. 📐
kmp.jetbrains.com을 통해 Compose Multiplatform 프로젝트를 생성하고, Android Studio에서 테마 관련 파일을 구성하는 방법을 안내합니다. ⚙️
commonMain 모듈 내 theme 패키지에 Colors.kt 파일을 생성하고, Figma에서 추출한 헥스 코드를 사용하여 각 색상을 Color(0xFFHEXCODE) 형태로 정의합니다. 🌈
theme 패키지에 NoteMarkTheme.kt 파일을 생성하여 lightColorScheme 및 darkColorScheme을 정의하고, isSystemInDarkTheme()을 활용하여 시스템 테마에 따라 동적으로 컬러 스킴을 적용하는 방법을 보여줍니다. 🌓
app.kt 파일에서 기본 MaterialTheme 대신 사용자 정의 NoteMarkTheme 래퍼를 사용하여 앱 전체에 테마를 적용하고, MaterialTheme.colorScheme.primary와 같은 컬러 토큰을 통해 일관된 색상을 참조하는 중요성을 강조합니다. ✨
폰트(예: Space Grotesque, Inter), 폰트 가중치, 크기, 줄 높이 등을 포함하는 일관된 텍스트 스타일을 디자인에서 미리 정의하는 것이 중요함을 언급합니다. 🅰️
사용자의 배경화면에 따라 앱 테마 색상이 자동으로 조정되는 동적 컬러 기능은 현재 Android 플랫폼에만 적용 가능함을 설명합니다. 🤖