1. 시작하기 전에
Material은 개발자가 Android 및 기타 플랫폼을 위한 고품질 디지털 환경을 빌드할 수 있도록 Google에서 만든 디자인 시스템입니다. 전체 Material 시스템에는 앱의 시각적 디자인, 모션 디자인, 상호작용 디자인에 관한 디자인 가이드라인이 포함되어 있지만 이 Codelab에서는 Android 앱의 색상 테마 변경에 중점을 둡니다.
이 Codelab은 Empty Activity 앱 템플릿을 사용하지만, 작업 중인 Android 앱을 사용해도 됩니다. Android 기초 과정의 일부로 이 과정을 진행하는 경우 Tip Time 앱을 사용할 수 있습니다.
기본 요건
- Android 스튜디오의 템플릿에서 Android 앱을 만드는 방법을 알아야 합니다.
- 에뮬레이터 또는 Android 스튜디오 기기에서 Android 앱을 실행하는 방법을 알아야 합니다.
- API 28(Android 9) 또는 API 29(Android 10) 이상을 실행하는 Android 기기나 에뮬레이터가 있어야 합니다.
- XML 파일을 수정하는 방법을 알아야 합니다.
학습할 내용
- Material Design 원칙에 따라 앱에 효과적인 색상을 선택하는 방법
- 앱 테마의 일부로 색상을 설정하는 방법
- 색상의 RGB 구성요소
View에 스타일을 적용하는 방법- 테마를 사용하여 앱 디자인 변경
- 색상 대비의 중요성 이해
필요한 항목
- Android 스튜디오의 최신 안정화 버전이 설치된 컴퓨터
- Material 색상 도구에 액세스하기 위한 웹브라우저 및 인터넷 연결
2. 디자인 및 색상
Material Design
Material Design은 물체가 빛을 반사하고 그림자를 드리우는 방식을 비롯하여 실제 세계와 그 질감에서 영감을 받았습니다. Material Design은 읽기 쉽고 매력적이며 일관된 방식으로 앱 UI를 빌드하는 방법에 관한 가이드라인을 제시합니다. Material Theming을 사용하면 색상, 서체, 도형 맞춤설정에 관한 안내를 참고하여 앱에 맞게 Material Design을 조정할 수 있습니다. Material Design에는 그대로 사용할 수 있도록 기본으로 제공되는 기준 테마가 있습니다. 이 테마를 내 앱에 맞게 원하는 만큼 맞춤설정할 수 있습니다.
색상에 관한 설명
색은 우리 주변, 즉 실제 세계와 디지털 세계 모두에 있습니다. 색에 관해 첫 번째로 알아야 하는 것은 사람마다 색을 보는 방식이 다르다는 것입니다. 따라서, 사용자가 앱을 효과적으로 사용할 수 있도록 앱의 색상을 선택하는 것이 중요합니다. 충분한 색상 대비가 이뤄지도록 색상을 선택하면 더욱 접근성이 높은 앱을 빌드할 수 있습니다.
색상은 색의 빨간색, 녹색, 파란색(RGB) 구성요소를 나타내는 3개의 16진수 숫자(#00~#FF(0~255))로 표현할 수 있습니다. 숫자가 클수록 그 구성요소의 색이 더 많이 포함됩니다.
색상은 투명도를 나타내는 알파 값(#00~#FF)을 포함하여 정의할 수 있습니다(#00=0%=완전 투명, #FF=100%=완전 불투명). 알파 값이 포함되는 경우 이 값은 4자리 16진수(ARGB) 숫자 중 첫 번째 숫자입니다. 알파 값이 포함되지 않으면 이 값은 #FF=100%, 즉 불투명으로 간주됩니다.
그러나 16진수 숫자를 직접 생성할 필요는 없습니다. 색상 선택에 도움이 되는 도구를 사용하여 숫자를 생성하면 됩니다.
Android 앱의 colors.xml 파일에서 볼 수 있는 예에는 100% 검은색(R=#00, G=#00, B=#00)과 100% 흰색(R=#FF, G=#FF, B=#FF)이 있습니다.
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
3. 테마
스타일을 사용하여 글꼴 색상, 글꼴 크기, 배경 색상 등 View의 속성을 지정할 수 있습니다.
테마는 개별 View뿐 아니라 앱이나 활동, 뷰 계층 구조 전체에 적용되는 스타일 모음입니다. 앱이나 활동, 뷰, 뷰 그룹에 테마를 적용하면 테마가 요소와 그 요소의 모든 하위 요소에 적용됩니다. 또한 테마를 통해 상태 표시줄 및 창 배경과 같이 뷰가 아닌 요소에도 스타일을 적용할 수 있습니다.
Empty Activity 프로젝트 만들기
자체 앱을 사용하고 있다면 이 섹션을 건너뛰어도 됩니다. 작업할 앱이 필요하다면 다음 단계를 따라 Empty Activity 앱을 만듭니다.
- Android 스튜디오를 엽니다.
- Empty Activity 템플릿을 사용하여 새 Kotlin 프로젝트를 만듭니다.
- 'TipTime'이라는 이름을 사용합니다. 다른 Codelab을 실행하고 있지 않다면 기본 이름인 'My Application'을 그대로 사용해도 됩니다.
- 최소 API 수준 19(KitKat)를 선택합니다.
- Android 스튜디오에서 앱 만들기를 완료한 후에는
activity_main.xml(app > res > layout > activity_main.xml)을 엽니다. - 필요하다면 Code 뷰로 전환합니다.
- 모든 텍스트를 다음 XML로 바꿉니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:gravity="center_vertical"
android:text="@string/primary_color"
android:textAllCaps="true"
android:textSize="12sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:text="@string/secondary_color"
android:textAllCaps="true"
android:textSize="12sp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:contentDescription="@string/email_icon"
app:srcCompat="@android:drawable/ic_dialog_email" />
</LinearLayout>
strings.xml(app > res > values > strings.xml)을 엽니다.- 모든 텍스트를 다음 XML로 바꿉니다.
<resources>
<string name="app_name">TipTime</string>
<string name="primary_color">Primary color</string>
<string name="button">Button</string>
<string name="secondary_color">Secondary color</string>
<string name="email_icon">email icon</string>
</resources>
- 앱을 실행합니다. 앱은 아래의 스크린샷과 같이 표시됩니다.
앱에는 TextView와 Button이 포함되어 있어 선택한 색상이 실제 Android 앱에 어떻게 표시되는지 확인할 수 있습니다. 이후 단계에서는 버튼 색상을 테마의 기본 색상으로 변경합니다.
테마 색상 자세히 알아보기
Android 앱은 UI별로 서로 다른 색상을 사용합니다. 테마 시스템은 앱에 의미 있는 방식으로 색상을 사용하고 전체적으로 일관성 있게 적용할 수 있도록 텍스트, 아이콘 등에서 사용하는 색상과 관련된 12개의 속성에 이름을 지정하여 색상을 그룹화합니다. 테마에 이러한 항목을 모두 지정할 필요는 없습니다. 기본 색상과 보조 색상을 선택하고, 이러한 색상 위에 표시되는 텍스트 및 아이콘의 색상을 선택하면 됩니다.
'대비' 색상은 다양한 표면에 그려지는 텍스트와 아이콘에 사용됩니다.
# | 이름 | 테마 속성 |
1 | 기본 |
|
2 | 기본 변형 |
|
3 | 보조 |
|
4 | 보조 변형 |
|
5 | 배경 |
|
6 | 표면 |
|
7 | 오류 |
|
8 | 기본(대비) |
|
9 | 보조(대비) |
|
10 | 배경(대비) |
|
11 | 표면(대비) |
|
12 | 오류(대비) |
|
기본 테마에 정의된 색상을 살펴보세요.
- Android 스튜디오에서
themes.xml(app > res > values > themes > themes.xml)을 엽니다. - 앱 이름에 기반하는 테마 이름(
Theme.TipTime)을 확인합니다.
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
- XML 줄은 상위 테마
Theme.MaterialComponents.DayNight.DarkActionBar도 지정합니다.DayNight는 Material Components 라이브러리에서 미리 정의된 테마입니다.DarkActionBar는 작업 모음이 어두운 색상을 사용한다는 의미입니다. 클래스가 상위 클래스의 속성을 상속받는 것처럼 테마는 상위 테마의 속성을 상속받습니다.
- 파일에 있는 항목을 살펴보면 이름이 위 다이어그램의 이름과 유사한 것을 알 수 있습니다(
colorPrimary,colorSecondary등).
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
모든 색상 테마 속성이 정의되는 것은 아닙니다. 정의되지 않은 색상은 상위 테마의 색상을 상속합니다.
- 또한, Android 스튜디오는 왼쪽 여백에 작은 색상 샘플을 표시합니다.
- 마지막으로, 색상은 RGB 값을 직접 사용하는 것이 아니라 색상 리소스(예:
@color/purple_500)로 지정됩니다. colors.xml(app > res > values > colors.xml)을 열면 각 색상 리소스의 16진수 값을 볼 수 있습니다. 맨 앞의#FF는 알파 값이며 색상이 100% 불투명하다는 의미입니다.
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>
4. 앱 테마 색상 선택
테마 속성을 살펴보았으니 이제 색상을 선택해 보겠습니다. 색상을 선택하는 가장 쉬운 방법은 Material팀에서 제공하는 웹 기반 앱인 색상 도구를 사용하는 것입니다. 이 도구는 미리 정의된 색상의 팔레트를 제공하며 이를 통해 다양한 UI 요소에 사용된 색상이 어떻게 보이는지 쉽게 확인할 수 있습니다.
색상 선택
- 먼저 기본 색상(
colorPrimary)을 선택합니다(예: Green 900). 색상 도구는 이 색상이 앱 모형에서 어떻게 보이는지 표시하고 Light 변형 및 Dark 변형도 선택합니다.
- 보조 섹션을 탭하고 원하는 보조 색상(
colorSecondary)을 선택합니다(예: Blue 700). 색상이 앱 모형에서 어떻게 보이는지 표시되며 보조 색상의 Light 변형 및 Dark 변형도 선택됩니다. - 앱 모형에는 서로 다른 모의 '화면'이 6개 있습니다. 모형 위의 화살표를 탭하여 선택한 색상이 각각 다른 화면에서 어떻게 보이는지 살펴보세요.
- 색상 도구에는 접근성 탭도 있어 검은색이나 흰색 텍스트와 함께 사용할 때 색상이 읽기에 충분히 선명한지 알 수 있습니다. 앱의 접근성을 높이려면 색상 대비가 매우 높아야 합니다. 작은 텍스트의 경우 4.5:1 이상, 큰 텍스트의 경우 3.0:1 이상이어야 합니다. 색상 대비에 관해 자세히 읽어보세요.
primaryColorVariant및secondaryColorVariant의 경우 추천하는 밝은 변형이나 어두운 변형을 선택할 수 있습니다.
앱에 색상 추가하기
색상에 관한 리소스를 정의하면 동일한 색상을 앱의 여러 부분에서 일관되게 재사용하기가 쉬워집니다.
- Android 스튜디오에서
colors.xml(app > res > values > colors.xml)을 엽니다. - 기존 색상 다음에 위에서 선택한 값(
#1B5E20)을 사용하여green이라는 색상 리소스를 정의합니다.
<color name="green">#1B5E20</color>
- 다른 색상의 리소스를 계속 정의합니다. 이러한 색상의 대부분은 색상 도구에서 가져옵니다.
green_light및blue_light값은 도구에 표시되는 값과 다릅니다. 이러한 값은 이후 단계에서 사용합니다.
|
|
|
|
|
|
|
|
|
|
|
|
검은색과 흰색은 이미 정의된 색상 리소스가 있으므로 정의하지 않아도 됩니다.
이제 앱의 colors.xml 파일이 다음과 같이 표시됩니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="green">#1B5E20</color>
<color name="green_dark">#003300</color>
<color name="green_light">#A5D6A7</color>
<color name="blue">#0288D1</color>
<color name="blue_dark">#005B9F</color>
<color name="blue_light">#81D4FA</color>
</resources>
테마에 색상 사용하기
선택한 색상에 이름을 지정했으므로 테마에서 이름을 사용해보겠습니다.
themes.xml(app > res > values > themes > themes.xml)을 엽니다.colorPrimary를 선택한 기본 색상(@color/green)으로 변경합니다.colorPrimaryVariant를@color/green_dark로 변경합니다.colorSecondary를@color/blue로 변경합니다.colorSecondaryVariant를@color/blue_dark로 변경합니다.- P의 텍스트와 S의 텍스트가 여전히 흰색(
#FFFFFF)과 검은색(#000000)인지 확인합니다. 독자적인 색상 도구를 사용하고 있고 다른 색상을 선택한다면 색상 리소스를 추가로 정의해야 할 수도 있습니다.
이 과정을 완료하면 다음과 같이 테마가 표시됩니다.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
- 에뮬레이터 또는 기기에서 앱을 실행하여 앱에 새로운 테마가 적용된 모습을 확인해 보세요.
5. 어두운 테마
앱 템플릿에는 기본 밝은 테마가 포함되어 있으며 어두운 테마 변형도 포함되어 있습니다. 어두운 테마는 어둡고 더 부드러운 색상을 사용하며 아래와 같은 이점이 있습니다.
- 전력 사용을 크게 줄일 수 있습니다(기기의 화면 기술에 따라 다름).
- 시력이 낮은 사용자와 밝은 빛에 민감한 사용자를 위한 가시성을 개선합니다.
- 조명이 어두운 환경에서 더 편하게 기기를 사용할 수 있습니다.
어두운 테마의 색상 선택
어두운 테마의 색상도 읽기 쉬워야 합니다. 어두운 테마는 제한된 강조 색상과 함께 어두운 표면 색상을 사용합니다. 가독성을 보장하기 위해 기본 색상은 일반적으로 밝은 테마의 기본 색상보다 채도가 낮은 버전입니다.
어두운 테마에서 유연성과 사용성을 더 많이 제공하려면 기본 색상 테마(900~500 사이의 강렬한 톤) 대신 어두운 테마의 밝은 톤(200~50)을 사용하는 것이 좋습니다. 앞서 녹색 200과 연한 파란색 200을 밝은 색상으로 선택했습니다. 앱에서는 밝은 색상을 기본 색상으로 사용하고 기본 색상을 변형으로 사용하게 됩니다.
어두운 버전의 테마 업데이트
themes.xml (night)를 엽니다. Project 창에서 Android를 선택하고 app > res > values > themes > themes.xml (night)로 이동합니다.
colorPrimary를 선택한 기본 색상의 밝은 변형(@color/green_light)으로 변경합니다.colorPrimaryVariant를@color/green으로 변경합니다.colorSecondary를@color/blue_light로 변경합니다.colorSecondaryVariant를@color/blue_light로 변경합니다.colorSecondaryVariant는colorSecondary와 같은 색상일 수 있습니다.
이 과정을 완료하면 themes.xml (night) 파일이 다음과 같이 표시됩니다.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Application theme for dark theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green_light</item>
<item name="colorPrimaryVariant">@color/green</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue_light</item>
<item name="colorSecondaryVariant">@color/blue_light</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
- 이 시점에서
colors.xml에 정의된 원래 색상(예:purple_200)은 더 이상 사용되지 않으므로 삭제해도 됩니다.
어두운 테마 사용해보기
기기에서 어두운 모드를 사용 설정하여 어두운 모드에서 테마가 어떻게 표시되는지 확인할 수 있습니다.
API 28(Android 9)의 경우
- 앱을 다시 실행합니다.
- 설정 앱으로 전환합니다.
- 배터리 섹션에서 절전 모드를 찾습니다.
- 지금 켜기를 누릅니다.
다음 단계로 진행합니다.
API 29(Android 10) 이상의 경우
- 앱을 다시 실행합니다.
- 설정 앱으로 전환합니다.
- 디스플레이 섹션에서 어두운 테마 스위치를 찾습니다.
- 어두운 테마를 '사용' 위치로 전환하면 기기가 야간 모드로 전환됩니다.
공통 사항
- 앱으로 돌아가 차이점을 확인합니다.
가장 두드러진 변화는 어두운 텍스트가 있는 밝은 배경 대신 밝은 텍스트가 포함된 어두운 배경입니다. 또한 버튼에 사용된 색상이 밝은 테마보다 어두운 테마에서 덜 강렬합니다.
축하합니다. 밝은 테마와 어두운 테마가 모두 포함된 새로운 앱 테마를 만들었습니다.
6. 솔루션 코드
이 Codelab에서는 테마의 색상을 맞춤설정하는 데 중점을 두었지만 텍스트, 도형, 버튼 스타일 등 테마에서 맞춤설정할 수 있는 속성이 많이 있습니다. 앱 테마를 맞춤설정할 수 있는 다른 방법을 알아보려면 이 도움말을 참고하세요. Android 스타일 지정: 일반적인 테마 속성
이 Codelab의 솔루션 코드는 아래와 같습니다.
colors.xml(app > res > values > colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="green">#1B5E20</color>
<color name="green_dark">#003300</color>
<color name="green_light">#A5D6A7</color>
<color name="blue">#0288D1</color>
<color name="blue_dark">#005B9F</color>
<color name="blue_light">#81D4FA</color>
</resources>
values/themes.xml(app > res > values > themes > themes.xml)
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
values-night/themes.xml(app > res > values > themes > themes.xml (night))
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Application theme for dark theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green_light</item>
<item name="colorPrimaryVariant">@color/green</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue_light</item>
<item name="colorSecondaryVariant">@color/blue_light</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
7. 요약
- Material 색상 도구를 사용하여 앱 테마의 색상을 선택합니다.
- 또는 Material 팔레트 생성기를 사용하여 색상 팔레트를 선택할 수도 있습니다.
- 리소스를 쉽게 재사용할 수 있도록
colors.xml파일에 색상 리소스를 선언합니다. - 어두운 테마를 사용하면 전력 사용량을 줄일 수 있고 조명이 어두운 곳에서 앱을 더 쉽게 읽을 수 있습니다.