Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Kotlin Android 기초 10.1: 스타일 및 테마

이 Codelab은 Android Kotlin 기초 교육 과정의 일부입니다. Codelab을 순서대로 진행한다면 이 과정을 통해 최대한의 가치를 얻을 수 있을 것입니다. 모든 과정 Codelab은 Android Kotlin 기초 Codelab 방문 페이지에 나열되어 있습니다.

디자인 소개

이 Codelab 시리즈에서는 Android 개발, 앱 디자인의 가장 중요한 측면 중 하나에 초점을 맞춥니다. 앱 디자인에서 눈에 띄는 측면은 뷰, 텍스트, 버튼, 화면의 위치뿐 아니라 사용하는 색상과 글꼴입니다. 사용자에게 다음 단계에 관해 암시하는 것도 디자인의 핵심입니다. 사용자가 무엇을 보고 중요한지, 무엇을 할 수 있는지 한눈에 살펴볼 수 있어야 합니다.

아래 두 화면을 비교해 보세요. 요소를 이동하고 중요한 요소를 그리면 사용자가 현재 상황을 이해할 수 있습니다. 단순한 화면의 경우 적절한 디자인을 사용하면 더 적게 표시됩니다. 중요한 정보가 많은 화면에서는 적절한 디자인을 통해 한눈에 파악할 수 있는 밀도로 한눈에 이해할 수 있습니다. Android 앱 관련 작업을 할 때 정보 아키텍처(IA)라는 개념을 들은 경우가 있을 것입니다.

또 다른 수준의 설계는 일관된 사용자 흐름 또는 사용 사례를 빌드하여 사용자가 작업을 수행할 수 있도록 하는 것입니다. 이러한 형태의 디자인을 사용자 환경 디자인 (UXD)이라고 하며, 일부 디자이너는 이를 전문화합니다.

디자이너가 없는 경우 시작하기 위한 몇 가지 팁을 소개합니다.

사용 사례 정의. 사용자가 앱에서 무엇을 해야 하는지, 어떻게 작동하는지 기록하세요.
디자인을 구현합니다. 첫 번째 초안에 첨부하지 마세요. 그러면 실제 사용자가 어떻게 상호작용했는지 확인한 후에만 초안을 변경하기만 하면 됩니다.
의견 받기 가족, 친구, Google 개발자 그룹에서 만난 사용자 등 앱을 테스트해볼 수 있는 사람을 찾아보세요. 앱을 사용하고 자세한 메모를 작성하는 동안 앱을 사용하여 사용 사례를 활용하도록 안내하세요.
상세검색 이 정보를 모두 활용하여 앱을 개선하고 다시 테스트하세요.

다음은 훌륭한 앱 환경을 설계할 때 자문해 볼 수 있는 다른 질문입니다. 이전 Codelab에서 이러한 문제를 해결하는 기법을 배웠습니다.

사용자가 기기를 회전하면 앱이 상태를 잃나요?
사용자가 앱을 열면 어떻게 되나요? 사용자에게 로딩 스피너가 표시되나요? 아니면 데이터가 오프라인 캐시에 준비되나요?
앱이 효율적이고 항상 사용자 터치에 반응하도록 보장하는 방식으로 코딩되었나요?
앱이 비정상적이거나, 부정확하거나, 오래된 데이터로 이어지지 않도록 백엔드 시스템과 상호작용하나요?

더 많은 사용자를 위해 앱을 개발할 때 최대한 많은 유형의 사용자가 앱에 액세스할 수 있도록 하는 것이 중요합니다. 예를 들면 다음과 같습니다.

많은 사용자가 다양한 방식으로 컴퓨터 시스템과 상호작용합니다. 색맹인 사용자가 많으며, 사용자마다 대비되는 색상이 다른 사용자에게 효과가 없을 수 있습니다. 시각 장애가 있는 사용자는 대부분 독서를 통해 독서를 해야 하는 경우가 많습니다.
일부 사용자는 터치스크린을 사용할 수 없으며 버튼과 같은 다른 입력 기기를 통해 상호작용합니다.

좋은 디자인은 사용자가 앱을 사용하도록 유도하는 가장 중요한 방법입니다.

이러한 Codelab은 Android에 관한 모든 것을 가르쳐주기에는 너무 짧지만, 좋은 방향으로 시작할 수 있으며 계속해서 학습하고 개발할 수 있습니다.

기본 요건

다음을 잘 알고 있어야 합니다.

활동과 프래그먼트가 있는 앱을 만들고 데이터를 전달하는 프래그먼트 간에 이동하는 방법
뷰와 뷰 그룹을 사용하여 RecyclerView를 포함한 사용자 인터페이스 레이아웃 (UI)
ViewModel를 포함한 아키텍처 구성요소를 권장 아키텍처와 함께 사용하여 잘 구조화되고 효율적인 앱을 만드는 방법
데이터 결합, 코루틴 및 클릭 처리 방법
Room 데이터베이스를 사용하여 인터넷에 연결하고 데이터를 로컬에 캐시하는 방법
뷰 속성을 설정하는 방법
XML 리소스 파일에서 리소스를 추출하고 리소스를 사용하는 방법

학습할 내용

Android의 스타일 지정 시스템 기본사항
속성, 스타일, 테마를 사용하여 앱을 맞춤설정하는 방법

실습할 내용

뷰 속성, 스타일 및 테마로 시작 앱의 디자인 개선하기

GDG-finder 앱 시작 과정에서는 지금까지 학습한 모든 내용을 바탕으로 합니다.

앱이 ConstraintLayout를 사용하여 화면 3개를 배치합니다. 두 화면은 Android에서 색상과 텍스트를 탐색하는 데 사용할 수 있는 레이아웃 파일입니다.

세 번째 화면은 GDG 파인더입니다. GDG(Google Developer 그룹스)는 Android를 비롯한 Google 기술에 중점을 둔 개발자 커뮤니티입니다. 전 세계 각지의 GDG에서 모임, 컨퍼런스, 스터디 그룹, 기타 이벤트를 개최합니다.

이 앱을 개발할 때 GDG의 실제 목록에서 작업합니다. 파인더 화면은 기기 위치를 사용하여 GDG를 거리별로 정렬합니다.

거주 지역에서 GDG가 있는 경우 웹사이트를 확인하고 이벤트에 참가할 수 있습니다. GDG 이벤트는 다른 Android 개발자를 만나고 이 과정에 적합하지 않은 업계 권장사항을 배울 수 있는 좋은 방법입니다.

아래 스크린샷은 이 Codelab의 시작부터 끝부분에 앱이 어떻게 변경되는지 보여줍니다.

Android는 앱에서 모든 뷰의 모양을 조정할 수 있는 풍부한 스타일링 시스템을 제공합니다. 테마, 스타일, 뷰 속성을 사용하여 스타일 지정에 영향을 줄 수 있습니다. 아래 다이어그램에는 각 스타일 지정 방식의 우선순위가 요약되어 있습니다. 시스템에 따라 스타일 지정 메서드가 적용되는 순서를 아래에서 위로 나타낸 피라미드 다이어그램 예를 들어 테마에서 텍스트 크기를 설정한 다음 뷰 속성에서 텍스트 크기를 다르게 설정하면 뷰 속성이 테마 스타일 지정을 재정의합니다.

뷰 속성

뷰 속성을 사용하여 각 뷰의 속성을 명시적으로 설정합니다. 뷰 속성은 스타일을 재사용할 수 없으므로 재사용하지 않습니다.
스타일이나 테마를 통해 설정할 수 있는 모든 속성을 사용할 수 있습니다.

여백, 패딩 또는 제약 조건과 같은 맞춤 또는 일회성 디자인에 사용합니다.

스타일

스타일을 사용하여 글꼴 크기나 색상과 같은 재사용 가능한 스타일 지정 정보 모음을 만들 수 있습니다.
앱 전반에 사용되는 작은 설계의 집합을 선언하는 데 적합합니다.

여러 뷰에 스타일을 적용하여 기본 스타일을 재정의합니다. 예를 들어 스타일을 사용하여 일관되게 스타일이 지정된 헤더 또는 버튼 집합을 만듭니다.

기본 스타일

Android 시스템에서 제공하는 기본 스타일입니다.

테마

테마를 사용하여 앱 전체의 색상을 정의합니다.
테마를 사용하여 앱 전체의 기본 글꼴을 설정할 수 있습니다.
텍스트 보기나 라디오 버튼과 같은 모든 보기에 적용합니다.
전체 앱에 일관되게 적용할 수 있는 속성을 구성하는 데 사용합니다.

TextAppearance

fontFamily와 같은 텍스트 속성으로만 스타일을 지정하는 경우

Android에서 뷰의 스타일을 지정할 때 맞춤설정할 수 있는 테마, 스타일, 속성의 조합을 적용합니다. 속성은 스타일 또는 테마에 지정된 모든 항목을 항상 덮어씁니다. 또한 스타일은 항상 테마에 지정된 모든 항목을 덮어씁니다.

아래 스크린샷은 밝은 테마 (왼쪽)와 어두운 테마 (오른쪽) 및 맞춤 글꼴과 헤더 크기로 구성된 GDG-finder 앱을 보여줍니다. 여러 방식으로 구현할 수 있으며 이 Codelab에서 몇 가지 방법을 알아봅니다.

이 작업에서는 속성을 사용하여 앱 레이아웃의 텍스트 헤더 스타일을 지정합니다.

GDG-finder 시작 앱을 다운로드하여 실행합니다.
홈 화면에는 동일한 서식의 텍스트가 많아서 페이지의 내용과 중요한 내용을 파악하기 어렵습니다.
home_fragment.xml 레이아웃 파일을 엽니다.
레이아웃은 ConstraintLayout을 사용하여 ScrollView 내에 요소를 배치합니다.
제약 조건 및 여백 레이아웃 속성은 각 뷰에 고정되며 이는 뷰와 화면에 따라 맞춤설정되는 경향이 있기 때문입니다.
title 텍스트 뷰에서 textSize 속성을 추가하여 텍스트 크기를 24sp로 변경합니다.

sp는 배율 독립적인 픽셀을 의미하며, 이 크기는 픽셀 밀도와 사용자가 기기 설정에서 설정한 글꼴 크기 환경설정에 따라 조정됩니다. Android는 텍스트를 그릴 때 화면에서 텍스트가 얼마나 커야 하는지 파악합니다. 텍스트 크기에는 항상 sp를 사용합니다.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

title 텍스트 뷰의 textColor를 ARGB 값 #FF555555로 설정하여 불투명 회색으로 설정합니다.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Android 스튜디오에서 Preview 탭을 열려면 View > Tool Windows > Preview를 선택하거나 Layout Editor의 오른쪽 가장자리에서 세로 Preview 버튼을 클릭합니다. 미리보기에서 제목이 아래와 같이 회색 및 이전보다 큰지 확인합니다.

부제목이 18sp의 더 작은 글꼴과 헤더와 같은 색상을 가지도록 스타일을 지정합니다. (기본 알파는 불투명, FF 알파 값을 변경하지 않으면 이 값을 생략할 수 있습니다.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

이 Codelab의 목표는 전문적이고 엉뚱한 모습으로 앱의 스타일을 지정하는 것이지만, 원하는 대로 스타일을 지정할 수 있습니다. subtitle 텍스트 뷰에 다음 속성을 사용해 보세요. 미리보기 탭을 사용하여 앱이 어떻게 변경되는지 확인할 수 있습니다. 그런 다음 이 속성을 삭제합니다.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

계속하기 전에 subtitle 뷰에서 textAllCaps, textStyle, background 속성을 실행취소해야 합니다.
앱을 실행하면 앱이 더 잘 표시됩니다.

앱에서 글꼴을 사용할 때 필요한 글꼴 파일을 APK의 일부로 제공할 수 있습니다. 이 솔루션은 간단하지만, 앱을 다운로드하고 설치하는 데 시간이 더 오래 걸리기 때문에 일반적으로 권장되지 않습니다.

Android는 다운로드 가능한 글꼴 API를 사용하여 런타임에 앱에서 글꼴을 다운로드할 수 있도록 합니다. 앱이 기기의 다른 앱과 동일한 글꼴을 사용하는 경우 Android는 한 번만 글꼴을 다운로드하여 기기의 저장공간을 절약합니다.

이 작업에서는 다운로드 가능한 글꼴을 사용하여 앱에서 테마를 사용하는 모든 뷰의 글꼴을 설정합니다.

1단계: 다운로드 가능한 글꼴 적용

Design 탭에서 home_fragment.xml을 엽니다.
Component Tree 창에서 title 텍스트 뷰를 선택합니다.
Attributes 창에서 fontFamily 속성을 찾습니다. All Attributes 섹션에서 속성을 검색하거나 검색합니다.
드롭다운 화살표를 클릭합니다.
글꼴 더보기로 스크롤한 후 선택합니다. Resources 창이 열립니다.

Resources 창에서 lobster 또는 lo만 검색합니다.
결과에서 랍스터 2를 선택합니다.
오른쪽의 글꼴 이름 아래에서 다운로드 가능한 글꼴 만들기 라디오 버튼을 선택합니다. 확인을 클릭합니다.
Android 매니페스트 파일을 엽니다.
매니페스트 하단에서 name 및 resource 속성이 "preloaded_fonts"로 설정된 새 <meta-data> 태그를 찾습니다. 이 태그는 앱에서 다운로드한 글꼴을 사용하고자 함을 Google Play 서비스에 알립니다. 앱이 실행되고 Lobster 2 글꼴을 요청하면 글꼴 제공업체가 기기에서 글꼴을 아직 사용할 수 없는 경우 인터넷에서 글꼴을 다운로드합니다.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

res/values 폴더에서 이 앱에 다운로드할 수 있는 글꼴을 모두 나열하는 배열을 정의하는 preloaded_fonts.xml 파일을 찾습니다.
마찬가지로 res/fonts/lobster_two.xml 파일에는 글꼴에 관한 정보가 있습니다.
home_fragment.xml를 열고 코드에서 Lobster 2 글꼴이 title TextView에 적용되어 제목에 적용되는지 확인합니다.

res/values/styles.xml을 열고 프로젝트용으로 생성된 기본 AppTheme 테마를 검사합니다. 현재 아래와 같이 표시됩니다. 새로운 Lobster 2 글꼴을 모든 텍스트에 적용하려면 이 테마를 업데이트해야 합니다.
<style> 태그에서 parent 속성을 확인합니다. 모든 스타일 태그는 상위 요소를 지정하고 모든 상위 속성을 상속받을 수 있습니다. 이 코드는 Android 라이브러리에서 정의한 Theme를 지정합니다. 버튼의 작동 방식부터 툴바 그리기 방법에 이르기까지 모든 항목을 지정하는 MaterialComponents 테마 테마에는 적절한 기본값이 있으므로 원하는 부분만 맞춤설정할 수 있습니다. 위 스크린샷에서 볼 수 있듯이 앱은 작업 모음 (NoActionBar) 없이 이 테마의 Light 버전을 사용합니다.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme 스타일에서 글꼴 모음을 lobster_two로 설정합니다. 상위 테마가 둘 다 사용하므로 android:fontFamily과 fontFamily를 모두 설정해야 합니다. Design 탭에서 home_fragment.xml을 확인하여 변경사항을 미리 볼 수 있습니다.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

앱을 다시 실행합니다. 새 글꼴이 모든 텍스트에 적용됩니다. 탐색 창을 열고 다른 화면으로 이동하면 글꼴도 적용됩니다.

2단계: 제목에 테마 적용

home_fragment.xml에서 lobster_two 글꼴 속성이 있는 title 텍스트 뷰를 찾습니다. fontFamily 속성을 삭제하고 앱을 실행합니다. 테마는 동일한 글꼴 모음을 설정하므로 변경되지 않습니다.
다른 fontFamily 속성을 title 텍스트 뷰에 다시 추가합니다.
app:fontFamily="serif-monospace"app 공간에 있어야 합니다.

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

앱을 실행하면 보기 로컬 속성이 테마를 재정의합니다.

title 텍스트 뷰에서 fontFamily 속성을 삭제합니다.

테마는 기본 글꼴 및 기본 색상과 같은 일반적인 테마 설정을 앱에 적용하기에 적합합니다. 속성은 특정 뷰의 스타일을 지정하고 여백, 패딩, 제약 조건 등 각 화면에 따라 달라지는 레이아웃 정보를 추가하는 데 유용합니다.

중앙에는 계층 구조 피라미드가 스타일입니다. 스타일은 선택한 보기에 적용할 수 있는 재사용 가능한 속성 그룹입니다. 이 작업에서는 제목과 부제목의 스타일을 사용합니다.

1단계: 스타일 만들기

res/values/styles.xml를 엽니다.
<resources> 태그 내부에서 아래와 같이 <style> 태그를 사용하여 새 스타일을 정의합니다.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

스타일 이름을 지정할 때 의미론적으로 고려하는 것이 중요합니다. 스타일이 영향을 미치는 속성이 아닌 스타일의 용도에 따라 스타일 이름을 선택합니다. 예를 들어 LargeFontInGrey과 같은 스타일이 아닌 Title 스타일을 호출합니다. 이 스타일은 앱의 모든 위치에서 사용됩니다. 규칙에 따라 TextAppearance 스타일은 TextAppearance.Name로, 이 경우 이름은 TextAppearance.Title입니다.

테마에는 상위 요소가 있을 수 있는 것과 마찬가지로 스타일에 상위 요소가 있습니다. 그러나 이번에는 테마를 확장하는 대신 스타일이 TextAppearance.MaterialComponents.Headline6 스타일을 확장합니다. 이 스타일은 MaterialComponents 테마의 기본 텍스트 스타일이므로 처음부터 시작하는 대신 기본 스타일을 수정합니다.

새 스타일 내에서 두 항목을 정의합니다. 한 항목에서 textSize를 24sp로 설정합니다. 다른 항목에서 textColor를 이전에 사용한 것과 같은 어두운 회색으로 설정합니다.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

자막의 다른 스타일을 정의합니다. 그 이름을 TextAppearance.Subtitle으로 지정합니다.
TextAppearance.Title의 유일한 차이점은 텍스트 크기이므로 이 스타일을 TextAppearance.Title의 하위 요소로 만듭니다.
Subtitle 스타일 내에서 텍스트 크기를 18sp로 설정합니다. 완성된 스타일은 다음과 같습니다.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

2단계: 생성한 스타일 적용

home_fragment.xml에서 TextAppearance를 추가합니다.Title 스타일을 title 텍스트 뷰로 변경합니다. textSize 및 textColor 속성을 삭제합니다.

테마는 설정된 TextAppearance 스타일보다 우선 적용됩니다. (Codelab 시작 부분에 있는 피라미드 다이어그램은 스타일 지정이 적용되는 순서를 보여줍니다.) textAppearance 속성을 사용하여 스타일을 TextAppearance로 적용하여 Theme에 설정된 글꼴이 여기에서 설정한 글꼴보다 우선 적용되도록 합니다.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

또한 subtitle 텍스트 뷰에 TextAppearance.Subtitle 스타일을 추가하고 textSize 및 textColor 속성을 삭제합니다. 테마에서 설정된 글꼴이 여기에서 설정한 글꼴보다 우선 적용되도록 이 스타일을 textAppearance으로 적용해야 합니다.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

앱을 실행하면 이제 텍스트의 스타일이 지정됩니다.

Android 스튜디오 프로젝트: GDGFinderStyles

뷰의 테마, 스타일, 속성을 사용하여 뷰의 모양을 변경합니다.
테마는 앱 전체의 스타일에 영향을 미치며 색상, 글꼴, 글꼴 크기 등 여러 가지 미리 설정된 값이 함께 제공됩니다.
속성은 속성이 설정된 보기에 적용됩니다. 패딩, 여백, 제약 조건 등 하나의 뷰에만 적용되는 스타일이 있는 경우 속성을 사용합니다.
스타일은 여러 뷰에서 사용할 수 있는 속성 그룹입니다. 예를 들어 모든 콘텐츠 헤더, 버튼, 텍스트 뷰의 스타일을 지정할 수 있습니다.
테마와 스타일은 상위 테마와 스타일에서 상속됩니다. 스타일의 계층 구조를 만들 수 있습니다.
뷰에 설정된 속성 값이 스타일을 재정의합니다. 스타일이 기본 스타일을 재정의합니다. 스타일이 테마를 재정의합니다. 테마는 textAppearance 속성에 의해 설정된 모든 스타일 지정을 재정의합니다.

<style> 리소스와 <item> 태그를 사용하여 styles.xml 리소스 파일에서 스타일을 정의합니다.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

다운로드 가능한 글꼴을 사용하면 사용자가 APK의 크기를 늘리지 않고도 글꼴을 사용할 수 있습니다. 뷰에 다운로드 가능한 글꼴을 추가하려면 다음 단계를 따르세요.

Design 탭에서 뷰를 선택하고 fontFamily 속성의 드롭다운 메뉴에서 글꼴 더보기를 선택합니다.
Resources 대화상자에서 글꼴을 찾고 다운로드 가능한 글꼴 만들기 라디오 버튼을 선택합니다.
Android 매니페스트에 미리 로드된 글꼴의 메타데이터 태그가 포함되어 있는지 확인합니다.

앱에서 처음 글꼴을 요청하고 글꼴을 아직 사용할 수 없는 경우 글꼴 제공업체는 인터넷에서 다운로드합니다.

Android 개발자 문서:

기타 리소스:

이 섹션에는 강사가 진행하는 과정의 일부로 이 Codelab을 통해 작업하는 학생들의 숙제 과제가 나와 있습니다. 강사는 다음을 처리합니다.

필요한 경우 과제를 할당합니다.
학생에게 과제 과제를 제출하는 방법을 알려주세요.
과제 과제를 채점합니다.

강사는 이러한 추천을 원하는 만큼 사용할 수 있으며 다른 적절한 숙제를 할당해도 좋습니다.

이 Codelab을 직접 학습하고 있다면 언제든지 숙제를 통해 지식을 확인해 보세요.

답변

질문 1

테마를 정의하는 데 사용되는 태그는 무엇인가요?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

질문 2

다음 중 스타일을 제대로 사용하지 않는 것은 무엇인가요?

▢ 뷰의 제약 조건을 지정합니다.

▢ 제목의 배경색을 지정합니다.

▢ 다양한 보기에서 글꼴 크기 통합

▢ 뷰 그룹의 텍스트 색상을 지정합니다.

질문 3

테마와 스타일은 어떻게 다른가요?

▢ 테마는 전체 앱에 적용되지만 개발자가 특정 뷰에 스타일을 적용할 수 있습니다.

▢ 테마는 다른 테마에서 상속될 수 없지만 스타일은 다른 스타일에서 상속될 수 있습니다.

▢ 스타일은 다른 스타일에서 상속될 수 없지만 테마는 다른 테마에서 상속될 수 있습니다.

MRAID 테마는 Android 시스템에서 제공하지만 스타일은 개발자가 정의합니다.

질문 4

앱의 TextView에 글꼴 크기를 12sp로 설정하는 Theme, 14sp로 설정하는 정의된 스타일, 16sp의 fontSize 속성이 있는 경우 화면에 표시되는 글꼴의 크기는 얼마인가요?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

다음 강의인 10.2: 머티리얼 디자인, 크기, 색상

이 과정의 다른 Codelab 링크는 Android Kotlin 기초 Codelab 방문 페이지를 참고하세요.