테마와 스타일
위젯에 재사용 가능한 스타일을 정의하고 앱에 테마를 적용합니다. Material 3 색상 역할, 타이포그래피 크기 체계, 사용자 지정 글꼴, 다크 모드를 설정합니다.
테마와 스타일은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 5개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 5개의 강의가 포함되어 있습니다.
스타일과 테마 비교
자주 혼동하는 두 가지 개념:
- 스타일 — 하나의 위젯에 적용되는 뷰 속성 모음입니다(예: 텍스트 크기, 색상, 여백).
style="@style/MyButton"으로 설정합니다. - 테마 — Activity 또는 앱에 적용되는 의미 기반 속성 모음입니다. 뷰는
?attr/colorPrimary를 사용해 테마 속성을 조회합니다.
스타일 정의
res/values/styles.xml에서 스타일을 만듭니다. 스타일은 상위 스타일을 상속할 수 있습니다.
<!-- res/values/styles.xml -->
<resources>
<style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
<item name="android:textColor">@color/on_surface</item>
<item name="android:fontFamily">@font/roboto_bold</item>
</style>
<style name="PrimaryButton" parent="Widget.Material3.Button">
<item name="android:paddingHorizontal">24dp</item>
<item name="cornerRadius">8dp</item>
</style>
</resources>
<!-- Using a style in XML: -->
<TextView
style="@style/TitleText"
android:text="Hello!" />테마 정의
테마는 Material 3 상위 테마를 상속하고 색상 및 모양 속성을 재정의합니다.
<!-- res/values/themes.xml -->
<resources>
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Color -->
<item name="colorPrimary">@color/primary</item>
<item name="colorOnPrimary">@color/on_primary</item>
<item name="colorSecondary">@color/secondary</item>
<item name="colorSurface">@color/surface</item>
<item name="colorBackground">@color/background</item>
<!-- Typography -->
<item name="textAppearanceBodyMedium">@style/BodyMedium</item>
<!-- Shape -->
<item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
</style>
</resources>Material 3 색상 시스템
Material 3는 원시 16진수 값 대신 의미 기반 색상 역할을 사용합니다. 주요 역할은 다음과 같습니다.
colorPrimary— 기본 브랜드 색상colorOnPrimary— 기본 배경 위의 텍스트/아이콘 색상colorSecondary— 강조 색상colorSurface— 카드/시트 배경 색상colorError— 오류 상태 색상colorBackground— 창 배경 색상
색상 리소스
res/values/colors.xml에서 색상을 정의합니다.
<!-- res/values/colors.xml -->
<resources>
<color name="primary">#6750A4</color>
<color name="on_primary">#FFFFFF</color>
<color name="secondary">#625B71</color>
<color name="on_secondary">#FFFFFF</color>
<color name="surface">#FFFBFE</color>
<color name="background">#FFFBFE</color>
<color name="error">#B3261E</color>
</resources>다크 테마
Material 3 DayNight 테마는 다크 모드를 자동으로 처리합니다. 색상에 야간 변형을 추가합니다.
<!-- res/values-night/colors.xml (night override) -->
<resources>
<color name="primary">#D0BCFF</color>
<color name="on_primary">#381E72</color>
<color name="surface">#1C1B1F</color>
<color name="background">#1C1B1F</color>
</resources>
// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto타이포그래피
Material 3는 타이포그래피 크기 체계를 정의합니다. 일관된 텍스트를 위해 textAppearance 속성을 사용합니다.
<TextView
android:textAppearance="?attr/textAppearanceDisplayLarge"
android:text="Big Title" />
<TextView
android:textAppearance="?attr/textAppearanceHeadlineMedium"
android:text="Section Header" />
<TextView
android:textAppearance="?attr/textAppearanceBodyMedium"
android:text="Body text content here" />
<TextView
android:textAppearance="?attr/textAppearanceLabelSmall"
android:text="Caption" />사용자 지정 글꼴
res/font/에 글꼴을 추가하고 테마나 스타일에서 참조합니다.
<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
<font app:fontStyle="normal" app:fontWeight="400"
app:font="@font/roboto_regular" />
<font app:fontStyle="normal" app:fontWeight="700"
app:font="@font/roboto_bold" />
</font-family>
<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
<item name="android:fontFamily">@font/my_font</item>
</style>Activity에 테마 적용
AndroidManifest.xml에서 테마를 설정합니다. Activity마다 다른 테마를 사용할 수 있습니다.
<!-- AndroidManifest.xml -->
<application
android:theme="@style/Theme.MyApp">
<!-- Different theme for splash screen -->
<activity
android:name=".SplashActivity"
android:theme="@style/Theme.MyApp.Splash" />
<activity
android:name=".MainActivity" />
</application>코드에서 테마 속성 읽기
런타임에 Kotlin 코드에서 모든 테마 속성에 접근할 수 있습니다.
fun getColorFromTheme(context: Context, attrResId: Int): Int {
val typedValue = TypedValue()
context.theme.resolveAttribute(attrResId, typedValue, true)
return typedValue.data
}
// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)Material Theme Builder
Material Theme Builder(m3.material.io/theme-builder)를 사용하면 브랜드 색상에서 완전한 Material 3 색상 구성표를 생성할 수 있습니다. colors.xml과 themes.xml에 바로 사용할 수 있는 XML 파일을 내보냅니다. 일관된 디자인 시스템을 구축하는 가장 빠른 방법입니다.
빠른 확인
Android에서 스타일과 테마의 핵심적인 차이점은 무엇인가요?
복습: 테마 및 스타일
일관된 디자인은 여기에서 시작합니다.
- 스타일 — 위젯 수준의 속성으로, 여러 뷰에서 재사용할 수 있습니다.
- 테마 — 앱/Activity 수준의 속성으로, 의미 기반 색상 역할을 사용합니다.
- Material 3 색상 역할:
colorPrimary,colorSurface,colorError등 values-night/colors.xml+MODE_NIGHT_FOLLOW_SYSTEM을 통한 다크 모드textAppearance속성을 통한 타이포그래피 크기 체계- Material Theme Builder를 사용해 색상 구성표를 빠르게 생성
다음: 처음부터 사용자 지정 뷰 그리기
자주 묻는 질문
“테마와 스타일” 강의는 무료인가요?
네 — “테마와 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 5개의 강의가 포함되어 있습니다.
“테마와 스타일”에서 뭘 배우나요?
위젯에 재사용 가능한 스타일을 정의하고 앱에 테마를 적용합니다. Material 3 색상 역할, 타이포그래피 크기 체계, 사용자 지정 글꼴, 다크 모드를 설정합니다. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 5개 중 2번째 강의입니다.
“테마와 스타일” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.