스타일

시각적으로 매력적이고 일관된 사용자 환경을 얻으려면 위젯의 스타일을 효과적으로 지정하는 것이 중요합니다. 이 섹션에서는 가장 유용하고 매력적인 Android 위젯을 만들기 위해 색상과 서체를 정의하는 주요 개념과 기법을 자세히 알아봅니다.

색상

색상을 사용해 스타일을 표현하고 의미를 전달하세요. 위젯 색상에 적절한 색상을 설정하는 것은 가독성, 맞춤설정 및 앱의 브랜드 아이덴티티를 표현하는 데 매우 중요합니다.

Material 색상 역할 및 토큰을 사용하여 접근성 대비 가이드라인을 준수하고 사용자 생성 색상 및 어둡거나 밝은 테마와 같은 동적 색상 기능을 지원합니다.

자세한 내용은 Material Design 색상 안내를 참고하세요.

동적 테마

Android 12부터 위젯은 버튼, 배경, 기타 구성요소에 기기 테마 색상을 사용할 수 있습니다. 이를 통해 다양한 위젯, 홈 화면 아이콘, 배경화면에서 시각적 일관성을 제공하여 Android 사용자에게 더 일관된 사용자 환경을 제공합니다. 제공된 색상 토큰을 사용하면 위젯이 여러 기기 제조업체에서 제공한 기기 테마와 사용자가 설정한 동적 테마에 통합되어 표시됩니다.

그림 1: 색상 토큰이 표시된 위젯의 이미지

밝은 모드 및 어두운 모드

어두운 모드는 대부분 어두운 표면 색상을 표시하는 어두운 조명 버전의 기기 UI입니다. 배터리 수명을 개선하고 눈의 편안함을 위해 어두운 모드로 전환하는 사용자가 점점 늘어나고 있습니다. 위젯이 어두운 모드에 맞게 조정되지 않으면 부적절하게 표시되어 사용자를 실망시킬 수 있습니다.

그림 2: 왼쪽 화면에는 밝은 모드이고 오른쪽은 어두운 모드의 위젯

서체

서체는 글을 읽기 쉽고 아름답게 만드는 데 도움이 됩니다. 글꼴 크기와 두께를 활용하여 명확한 계층 구조를 설정하고 가장 중요한 요소에 사용자의 눈을 유도합니다. 특히 위젯의 제한된 공간 내에 표시되는 작은 텍스트의 경우 줄 간격과 문자 간격 (커닝)에 주의를 기울여 가독성을 높입니다.

계층 구조

계층 구조는 글꼴 두께, 크기, 줄 간격, 문자 간격의 차이를 통해 전달됩니다. 업데이트된 서체 스케일은 텍스트 스타일을 목적을 설명하는 이름이 지정된 5가지 역할로 구성합니다. 다섯 가지 텍스트 스타일은 표시, 헤드라인, 제목, 부제목, 본문입니다. 새로운 역할은 기기에 구애받지 않으므로 다양한 사용 사례에 더 쉽게 적용할 수 있습니다.

그림 3: 다양한 유형 배율의 사용을 보여주는 위젯