다크 모드와 동적 색상
시스템과 배경화면에 맞춰 색상을 조정합니다.
다크 모드와 동적 색상은(는) CoddyKit의 무료 Jetpack Compose Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Jetpack Compose Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 팔레트, 하나의 앱
완성도 높은 앱은 밝은 팔레트와 어두운 팔레트를 모두 제공합니다. 이를 별도의 colorScheme 객체로 정의하고 테마 수준에서 전환합니다. 🌙
시스템 설정 감지하기
isSystemInDarkTheme이라는 Composable을 사용해 시스템에 현재 활성화된 모드를 묻습니다. 이 Composable은 사용자가 어두운 모드를 선호하면 true를 반환합니다.
val dark = isSystemInDarkTheme()색상 구성표 선택하기
해당 플래그로 MaterialTheme에 전달할 팔레트를 선택하면 앱이 시스템의 dark mode 설정을 자동으로 따릅니다.
val scheme = if (dark) darkColorScheme()
else lightColorScheme()darkColorScheme 기본값
darkColorScheme 빌더는 어두운 환경에 적합한 기본값을 제공하므로, 사용자 지정하기 전에도 읽기 쉽고 편안한 어두운 표면을 사용할 수 있습니다.
대비도 중요합니다
어두운 모드에서도 같은 색상 roles를 유지하되, 표면은 더 어둡게 하고 그 위에 표시되는 색상은 더 밝게 조정하여 텍스트가 잘 보이도록 하십시오.
동적 색상이란 무엇인가요
Dynamic color는 Material You의 기능입니다. Android 12 이상에서는 시스템이 사용자의 배경화면에서 팔레트를 만들 수 있습니다. 🎨
Android 버전 확인하기
동적 색상에는 API 31 이상이 필요하므로, 배경화면 기반 색상 구성표를 사용하기 전에 버전 확인으로 적용 여부를 결정해야 합니다.
val supported = Build.VERSION.SDK_INT >= 31동적 색상 구성표 만들기
지원되는 경우 컨텍스트와 함께 dynamicLightColorScheme 또는 어두운 변형을 호출하여 배경화면에서 색상을 직접 가져옵니다.
dynamicDarkColorScheme(context)항상 대체 방법 준비하기
이전 기기에서는 동적 색상을 사용할 수 없으므로 직접 만든 colorScheme으로 대체하여 브랜드 정체성을 유지하십시오.
함께 연결하기
테마에서 허용되면 동적 색상을 선택하고, 그렇지 않으면 시스템 설정에 따라 어둡거나 밝은 색상 구성표를 선택합니다. 따라서 하나의 colorScheme 선택으로 모든 경우를 처리할 수 있습니다.
val scheme = when {
dynamicOk && dark -> dynamicDarkColorScheme(ctx)
dark -> darkColorScheme()
else -> lightColorScheme()
}두 모드 테스트하기
밝은 모드와 어두운 모드, 그리고 다채로운 배경화면에서 화면을 미리 확인하여 Dynamic color가 읽기 어려운 색상 조합으로 당황하게 만들지 않도록 하십시오. ✨
빠른 확인
Android 13을 사용하는 사용자가 보라색 배경화면을 설정했습니다. 테마는 무엇을 할 수 있습니까?
복습: 적응형 개인 색상
isSystemInDarkTheme으로 시스템 모드를 감지하고, 팔레트를 전환하며, 안전한 대체 방법과 함께 동적 색상을 적용했습니다. 🎉
AI 튜터와 함께 Kotlin을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“다크 모드와 동적 색상” 강의는 무료인가요?
네 — “다크 모드와 동적 색상” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Jetpack Compose Academy 강의 전체를 잠금 해제할 수 있습니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“다크 모드와 동적 색상”에서 뭘 배우나요?
시스템과 배경화면에 맞춰 색상을 조정합니다. 브라우저에서 직접 실행하는 실습 코드로 Jetpack Compose Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Jetpack Compose Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Jetpack Compose Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“다크 모드와 동적 색상” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Jetpack Compose Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Jetpack Compose Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.