테마

테마는 색상, 유형, 도형과 같은 스타일 또는 속성의 집합입니다. 사용자의 모바일 또는 대형 화면 기기의 디자인과 분위기에 영향을 미칠 수 있습니다. 인앱 경험을 제공할 수 있습니다.

요약

• 사용자에게 더욱 맞춤화되고 접근성이 우수한 환경을 제공하려면 앱이 밝거나 어둡거나 동적인 테마와 같은 테마를 포함한 시스템 환경설정을 채택 대비입니다.
• 동적을 사용할 수 없는 경우 대체로 사용할 맞춤 테마를 만듭니다.
• 다양한 테마를 사용할 때는 유형 설정을 고려하세요.
• 가독성을 보장하기 위해 항상 텍스트와 표면 대비를 확인합니다.

테마 유형

테마는 시스템 기반 또는 앱 기반입니다. 시스템 테마는 사용자의 전체 기기 설정에서 해당 컨트롤을 제공하는 동안 테마는 테마가 구현된 앱에만 영향을 미칩니다.

앱을 표시하려면 두 가지 유형의 테마 중 하나를 구현해야 하지만 앱 테마가 적용됩니다. 앱 내에서만 그리고 기기의 다른 곳에서는 할 수 없습니다. 또한 일부 Cloud Functions를 인앱 설정이 포함된 시스템 테마 설정

시스템 테마

시스템 테마는 개별 앱을 포함한 전체 Android 기기에 적용됩니다. 새 창을 열 수 있습니다. 시스템 테마에는 밝은 테마와 어두운 테마, 사용자 제작 테마, 제조업체 테마가 포함됩니다.

밝은 테마와 어두운 테마

밝은 테마 또는 주간 모드는 밝은 디스플레이 모드로 구성되며 휘도 및 표면을 생성합니다. 반대로 어두운 테마는 야간 모드의 경우 UI를 이동하여 휘도를 줄입니다. 표면은 어둡게부터 제작됩니다. 낮은 색조 값을 포함하는 것이 좋습니다.

어두운 테마에는 맑거나 어두운 곳에서 화면 가독성을 높이는 데 도움이 되는 여러 가지 이점이 있습니다. 밝기를 낮추고 눈의 피로를 줄이고 배터리 수명을 연장할 수 있습니다. 또한 사용자가 가장 많이 요청하는 앱 기능이기도 합니다.

</ph>

밝은 테마와 어두운 테마를 구현할 때 다음 사항을 고려하세요.

• 더 풍부한 표현을 위해 색 구성표를 맞춤설정할 수 있습니다. 스킴을 만드는 머티리얼 테마 빌더로, 자동으로 어두운 색을 만듭니다. 스키마입니다. Material 및 색상 시스템을 맞춤설정하여 만드는 방법에 관해 자세히 알아보세요. 브랜드 테마입니다.
• 사용자는 시스템 수준의 디스플레이 설정에서 밝은 테마 또는 어두운 테마를 설정할 수 있습니다. 상시 사용 설정, 항상 사용 중지 또는 시간에 따라 자동으로 설정할 수 있습니다. 권장 조치 시스템 설정을 모두 반영할 수도 있지만 인앱 컨트롤을 만들어 사용자에게 더 세분화된 수정사항을 제공합니다.
• WebView의 웹 콘텐츠에는 밝은 스타일, 어두운 스타일 또는 기본 스타일도 사용할 수 있습니다. 읽기 WebView에서 어두운 테마가 지원되는 방식
• 사용자가 사용 설정한 경우 Android에서 강제로 어두운 테마를 적용할 수 있습니다. 또한 더욱 세밀하게 제어할 수 있습니다.
• 사용자가 다른 테마나 설정을 활성화하지 않은 경우 '잠금' 앱을 밝은 테마로 바꿀 수 있습니다. 그러나 이렇게 하는 것은 권장하지 않습니다. 사용자의 접근성 및 맞춤설정 니즈에 반대할 수 있기 때문입니다

</ph> <ph type="x-smartling-placeholder"></ph>

사용자 제작 테마

사용자 제작 테마는 Google에서 지원하는 동적 색상의 도움을 받습니다. Android 12부터 Material You를 지원합니다. 사용 설정하면 동적 color는 사용자의 배경화면에서 맞춤 색상을 가져와 앱에 적용합니다. 만들 수 있습니다 이 색상 팔레트는 밝은 색과 어두운 색 구성표.

기기 설정 내에서 글꼴 설정을 업데이트하여 사용자의 환경설정과 접근성 요구사항을 충족하는 데 도움이 됩니다. 이러한 설정은 가 포함되어야 합니다. 따라서 글꼴에 확장 가능한 픽셀 값을 활용해야 합니다.

</ph>

</ph>

제조업체 테마

기기 제조업체에서 독점적인 테마 설정 기능을 추가로 제공할 수 있음 시스템 UI와 디스플레이 설정에 영향을 미칠 수 있습니다.

앱 테마

기준

머티리얼 라이브러리의 머티리얼 구성요소는 기준 테마를 제공합니다. 은 자주색 색 구성표와 Roboto 글꼴을 사용합니다. 테마를 정의하지 않는 모든 앱 속성은 이러한 기준 속성으로 되돌아갑니다.

맞춤 (브랜드)

맞춤 테마를 사용하면 더 다양한 방식으로 앱 디자인을 표현할 수 있습니다. 특정 시스템 테마를 사용할 수 없을 때 대체로 작동하도록 할 수 있습니다. 이것은 전체 맞춤 디자인 시스템, 작은 규모의 좋아하는 색상 몇 가지를 선택할 수도 있습니다.

앱에는 사용자가 전체 스키마를 사용할 수 있는지와 관계없이 여러 개의 맞춤 스키마도 있을 수 있습니다. 콘텐츠에서 영감을 받은 콘텐츠, 하위 브랜드 요소 중에서 선택할 수 있습니다.

</ph>

</ph>

콘텐츠

일부 콘텐츠에 더 집중할 수 있도록 UI에서 동적 색상을 사용하여 색상을 상속할 수 있음 삭제할 수 있습니다 콘텐츠 색상은 하나의 기본 콘텐츠 소스에서 잘 작동하지만 여러 콘텐츠 소스가 있는 뷰에서 주의해서 사용해야 합니다.

</ph>

테마는 일반적으로 앱 전체에 영향을 미치지만 선택적으로 적용할 수도 있습니다. 다른 테마와 함께 표시할 수 있습니다. 너무 많은 테마와 조합은 피하는 것이 좋습니다. 기본 테마 소스 (동적 또는 커스텀)를 기반으로 UI의 대부분에 적용됩니다.

</ph>

머티리얼

Material Design은 기준 테마와 테마 설정 시스템 (색상, 유형, 도형). Material Theming도 확장하면 속성을 테마에 추가합니다.

브랜드

Material Design 테마 시스템이 원하는 디자인과 분위기와 맞지 않는 경우 완전한 맞춤 테마를 구현할 수 있습니다. 커스텀 에이전트, 사용할 수 있습니다.

Compose에서 맞춤 시스템을 구현하는 방법을 참고하세요.

테마 속성

테마 속성은 UI 디자인에 사용되는 일반적인 시각적 스타일에 맞춰 다양한 미학을 불러일으킵니다. 인앱에서 이러한 속성은 주로 Material에 연결됩니다. 앱 메이커 맞춤설정을 허용하는 테마 설정 시스템이 필요합니다.

색상

색상을 사용하여 스타일을 표현하고 의미를 전달하세요. 앱 색상 설정 맞춤설정, 의미론적 목적 정의, 브랜드 아이덴티티 정의하기

테마 내에서 색 구성표는 특정 역할에 할당된 색조 그룹입니다. 매핑되는 레이어입니다. Android의 색상 자세히 알아보기 UI와 Material 3 색상 시스템의 조합입니다.

</ph>

유형

Android의 시스템 글꼴은 모든 앱에서 무료로 사용할 수 있는 Roboto이지만 유형을 맞춤설정할 수 있습니다. 선택한 글꼴의 가독성을 고려하여 역할을 맡습니다 유형 적용에 대해 알아보기

</ph>

도형

기준 기본값을 초과하는 컨테이너 모서리의 모양을 맞춤설정하면 도움이 됩니다. 앱의 특성을 정의합니다. 예를 들어 완전히 둥근 모서리를 사용하여 부드럽고 재미있는 느낌을 가미하거나 앵글 컷을 사용해 좀 더 심각한 느낌을 줍니다. Material 구성요소의 도형 토큰과 스타일을 확인합니다.

</ph>

아이콘

머티리얼 아이콘은 채움, 윤곽선 있음, 선명함, 원형, 투톤 캠페인 전반에서 동일한 아이콘 스타일을 을 사용하여 일관되고 세련된 디자인을 유지할 수 있습니다.

</ph>

기타 테마 속성

색상, 서체, 도형이 기본 Material 테마 설정 시스템을 구성하는 동안 Material Design 시스템은 머티리얼이 사용하는 개념으로 제한되지 않습니다. 다음과 같은 작업을 할 수 있습니다. 완전히 새로운 시스템을 도입할 수 있도록 기존 시스템을 다른 개념을 테마와 호환되도록 만듭니다. 또한 다음을 수행해야 할 수도 있습니다. 기존 시스템을 확장 또는 교체하여 커스텀 속성을 제공됩니다 예를 들어 그라데이션 또는 간격 시스템을 추가하여 측정기준에 따라 달라집니다.

앱에 테마 적용

테마와 스타일 플러스 클래스 비교

테마와 스타일은 모두 여러 디자인 속성을 가질 수 있습니다. 스타일은 은 테마와 무관하며 개별 요소 (또는 여러 요소와 요소 전체에 걸쳐 테마를 설정할 수도 있고 있습니다. 스타일은 페이지의 스타일이나 토큰과 유사한, 재사용 가능한 스타일 선택입니다. 설계 소프트웨어입니다. 예를 들어 '큰 본문'은 스타일이지만 '밝게' 및 '어두움'은 테마입니다.

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 플러그인을 사용하여 다음을 수행할 수 있습니다. 머티리얼 테마를 맞춤설정합니다. 이를 사용하여 테마를 만들면 구현 가능한 이미 생성된 밝은 색 구성표와 어두운 색 구성표로 파일의 테마 설정을 사용하면 내보낸 테마 파일을 정확한 값일 수 있습니다.

</ph>