테마는 사용자의 휴대기기나 대형 화면 기기 및 인앱 환경의 디자인과 분위기에 영향을 줄 수 있는 스타일 또는 속성(예: 색상, 유형, 모양)의 집합입니다.
테이크어웨이
- 사용자에게 더욱 맞춤설정되고 접근성 높은 환경을 제공하려면 앱이 밝은 테마나 어두운 테마, 동적 테마, 대비와 같은 시스템 환경설정을 채택하도록 해야 합니다.
- 동적을 사용할 수 없는 경우 대체로 사용할 맞춤 테마를 만듭니다.
- 다양한 테마를 사용할 때는 유형 설정을 고려하세요.
- 가독성을 보장하기 위해 항상 텍스트와 표면 대비를 확인합니다.
테마 유형
테마는 시스템 기반 또는 앱 기반입니다. 시스템 테마는 사용자의 전체 기기 UI에 영향을 미치고 기기 설정에서 상응하는 컨트롤을 제공할 수 있는 반면, 앱 테마는 구현된 앱에만 영향을 미칩니다.
앱은 두 가지 유형의 테마 중 하나를 구현하여 표시해야 하지만 앱 테마는 앱 내에서만 적용되며 기기의 다른 곳에는 적용되지 않습니다. 인앱 설정을 사용하여 일부 시스템 테마 설정을 재정의할 수도 있습니다.
시스템 테마
시스템 테마는 사용자 설정에 따라 개별 앱을 비롯하여 Android 기기 전체에 적용됩니다. 시스템 테마에는 밝은 테마와 어두운 테마, 사용자 생성 테마, 제조업체 테마가 포함됩니다.
밝은 테마 및 어두운 테마
밝은 테마 또는 데이 모드는 휘도가 높은 밝은 디스플레이 모드와 높은 색조 값으로 구성된 노출 영역으로 구성됩니다. 반대로 어두운 테마, 즉 야간 모드는 UI를 전환하여 휘도를 줄입니다. 표면은 어두운 회색이나 낮은 색조 값으로 구성됩니다.
어두운 테마는 맑거나 조명이 어두운 환경에서 화면 가독성을 높이고, 낮은 밝기로 인한 눈의 피로를 줄이고, 배터리를 절약하는 등 여러 가지 이점이 있습니다. 또한 사용자들 사이에서 가장 많이 요청되는 앱 기능입니다.
밝은 테마와 어두운 테마를 구현할 때 다음 사항을 고려하세요.
- 색 구성표를 맞춤설정하여 표현력을 높일 수 있습니다. Material 테마 빌더를 사용하여 스키마를 만들면 자동으로 어두운 스키마를 만듭니다. Material 및 색상 시스템을 맞춤설정하여 브랜드 테마를 만드는 방법을 자세히 알아보세요.
- 사용자는 시스템 수준의 디스플레이 설정에서 밝은 테마나 어두운 테마를 항상 켜짐, 항상 꺼짐 또는 시간에 따라 자동으로 설정하도록 설정할 수 있습니다. 사용자가 선호하는 시스템 설정을 반영하는 것이 좋지만 사용자에게 더 세분화된 수정을 제공하는 인앱 컨트롤을 만드는 것도 좋습니다.
- WebView의 웹 콘텐츠에서도 밝은 스타일이나 어두운 스타일, 기본 스타일을 사용할 수 있습니다. WebView의 어두운 테마가 지원되는 방식 알아보기
- 사용자가 사용 설정한 경우 Android에서 어두운 테마를 강제로 적용할 수 있습니다. 더 세밀한 제어를 위해 맞춤 어두운 테마를 만들 수도 있습니다.
- 사용자가 다른 테마나 설정을 사용 설정하지 않았다면 앱을 밝은 테마로 '잠금' 설정할 수 있습니다. 그러나 이 방법은 사용자의 접근성 및 맞춤설정 요구사항을 위반할 수 있으므로 권장하지 않습니다.
사용자 제작 테마
사용자 생성 테마는 Android 12부터 Material You에서 제공되는 동적 색상으로 지원됩니다. 사용 설정하면 동적 색상이 사용자의 배경화면에서 맞춤 색상을 가져와 앱과 시스템 UI에 적용합니다. 이 색상 팔레트는 밝은 색 구성표와 어두운 색 구성표를 만드는 시작점으로 사용됩니다.
사용자의 환경설정 및 접근성 요구사항에 맞게 기기 설정 내에서 글꼴 설정을 업데이트할 수도 있습니다. 이러한 설정은 앱에 적용할 수 있고 적용되어야 하므로 글꼴에 확장 가능한 픽셀 값을 활용해야 합니다.
제조업체 테마
기기 제조업체는 시스템 UI 및 디스플레이 설정에 영향을 미칠 수 있는 추가적인 독점 테마 설정 기능을 제공할 수도 있습니다.
앱 테마
기준
Material 라이브러리의 Material 구성요소는 보라색 색 구성표와 Roboto 글꼴을 사용하는 기준 테마를 제공합니다. 테마 속성을 정의하지 않는 앱은 이러한 기준 속성으로 되돌아갑니다.
맞춤 (브랜드)
맞춤 테마를 사용하면 앱의 디자인과 분위기를 더 다양하게 표현하거나 특정 시스템 테마를 사용할 수 없을 때 대체 역할을 할 수 있습니다. 이는 전체 맞춤 디자인 시스템, 소규모 브랜드 가이드 또는 선호하는 색상을 사용하는 경우에 유용합니다.
또한 사용자가 선택할 수 있는 전체 스키마, 영감을 받은 콘텐츠, 하위 브랜드 요소 등 여러 맞춤 스키마가 앱에 있을 수 있습니다.
콘텐츠
콘텐츠에 더 집중할 수 있도록 UI가 동적 색상을 사용하여 콘텐츠에서 색상을 상속할 수 있습니다. 콘텐츠 색상은 하나의 기본 콘텐츠 소스에서 잘 작동하지만 여러 콘텐츠 소스가 있는 뷰에서 주의해서 사용해야 합니다.
테마는 일반적으로 전체 앱에 영향을 미치지만 선택적으로 다른 테마와 함께 적용할 수도 있습니다. 계층 구조를 유지하여 너무 많은 테마와 조합을 피하세요. 기본 테마 소스 (동적 또는 맞춤)는 대부분의 UI에 적용됩니다.
소재
Material Design은 기준 테마와 테마 설정 시스템 (색상, 유형, 도형)을 제공합니다. Material Theming을 확장하여 테마에 관한 추가 속성을 달성할 수도 있습니다.
브랜드
Material Design 테마 시스템이 앱에 원하는 디자인과 분위기가 맞지 않으면 완전 맞춤 테마를 구현할 수 있습니다. 대비와 가독성을 위한 맞춤 속성을 테스트해야 합니다.
Compose에서 맞춤 시스템을 구현하는 방법을 참고하세요.
테마 속성
테마 속성은 UI 디자인에 사용되는 일반적인 시각적 스타일에 맞춰 다양한 미학을 불러일으킵니다. 인앱에서는 이러한 속성이 Material 테마 설정 시스템에 연결되어 앱 제작자를 맞춤설정할 수 있는 경우가 많습니다.
색상
색상을 사용해 스타일을 표현하고 의미를 전달하세요. 앱의 색상 설정은 맞춤설정, 시맨틱 목적 정의, 브랜드 아이덴티티 정의에 중요할 수 있습니다.
테마 내에서 색 구성표는 구성요소에 매핑되는 특정 역할에 할당된 색조 그룹입니다. Android UI의 색상 및 Material 3 색상 시스템에 관해 자세히 알아보세요.
유형
Android의 시스템 글꼴은 모든 앱에서 무료로 사용할 수 있는 Roboto이지만 유형을 맞춤설정할 수 있습니다. 선택한 글꼴의 가독성을 고려하여 해당 역할에 맞게 조정합니다. 유형 적용에 관해 알아보기
모양
기준 기본값을 초과하여 컨테이너 모서리의 모양을 맞춤설정하면 앱의 문자를 정의할 수 있습니다. 예를 들어 전체 둥근 모서리를 사용하여 더 부드럽고 재미있는 느낌을 전달하거나 더 진지한 느낌을 위해 각진 컷을 사용할 수 있습니다. Material 구성요소의 도형 토큰과 스타일을 확인합니다.
아이콘
Material Icon은 앱에서 5가지 스타일(채우기, 윤곽선 있음, 선명함, 둥근 모양, 2가지 색조)으로 사용할 수 있습니다. 앱 전체에서 동일한 아이콘 스타일을 활용하여 일관되고 세련된 디자인을 유지하세요.
기타 테마 속성
색상, 서체, 모양은 기본 Material 테마 설정 시스템을 구성하지만 디자인 시스템은 Material이 사용하는 개념으로 제한되지 않습니다. 기존 시스템을 수정하고 새 클래스와 유형으로 완전히 새로운 시스템을 도입하여 다른 개념을 테마와 호환되도록 만들 수 있습니다. 제공된 것 이외의 커스텀 속성을 활용하기 위해 기존 시스템을 확장하거나 대체해야 할 수도 있습니다. 예를 들어 그라데이션 시스템 또는 간격 치수를 추가할 수 있습니다.
앱에 테마 적용
테마 대 스타일 + 수업
테마와 스타일 모두 여러 디자인 속성을 가질 수 있습니다. 스타일은 테마와 독립될 수 있으며 개별 요소 (또는 뷰)의 모양을 의미하지만 여러 요소 및 앱 전체에 걸쳐 테마를 설정할 수 있습니다. 스타일은 재사용 가능한 스타일이며 디자인 소프트웨어의 스타일이나 토큰과 유사합니다. 예를 들어 본문 대형은 스타일이고 밝은 테마와 어두운 테마는 테마입니다.
Compose에서 테마 구현
일반적으로 테마는 공통 시각적 개념과 동작 개념을 그룹화하는 여러 시스템으로 구성되며, 테마 설정 값이 있는 클래스를 사용하여 이러한 개념을 모델링합니다.
Jetpack Compose를 사용하여 Material Design 3 테마 구현을 만드는 방법에 관한 자세한 내용은 Compose의 Material Design 3을 참고하세요.
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)
뷰에서 테마 구현
테마는 앱 전체에서 사용할 수 있는 의미론적으로 이름이 지정된 리소스의 모음입니다. 테마는 동일한 스타일 구문을 공유합니다.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebView
WebView의 웹 콘텐츠에서도 밝은 스타일이나 어두운 스타일, 기본 스타일을 사용할 수 있습니다. WebView의 어두운 테마가 지원되는 방식 알아보기
Material 테마 맞춤설정
Material 테마 빌더 Figma 플러그인을 사용하여 Material 테마를 맞춤설정할 수 있습니다. 이를 사용하여 테마를 빌드하면 이미 생성된 밝은 색 구성표와 어두운 색 구성표로 구현 가능한 테마 설정 파일이 제공되므로 내보낸 테마 파일을 정확한 값으로 업데이트하여 맞춤설정이 더욱 수월해집니다.
