[Android/Kotlin] Material Design 알아보기!

 

01. 왜 디자인 시스템이 필요한가?

디자인 시스템이 없을 때 vs. 있을 때

구분 디자인 시스템 없음 디자인 시스템 있음

컴포넌트 제작	매번 새로 만듦	기존 것 가져다 씀
디자이너↔개발자 소통	용어가 달라 오해 빈번	같은 컴포넌트 이름으로 소통
앱 일관성	화면마다 다른 느낌	전체가 통일된 느낌
다크 모드 대응	직접 색상 하나하나 변경	테마 교체 한 번으로 완료

 

 

 

 

 

02. Material Design이란 무엇인가?

공식 표기는 머티리얼 디자인, Material Design은 구글이 2014년 발표한 UX/UI 디자인 가이드라인입니다. 여러 플랫폼을 겨냥하긴 했지만, 그 쓰임이 모바일에 제일 알맞게 구성되었습니다. 현실 세계의 재료(Material)에서 영감을 받아, 빛·그림자·깊이 개념을 디지털 인터페이스에 적용했습니다.

 

버전별 변천사

• Material 1 (2014): 현실 물리 법칙 기반의 레이어와 그림자 도입 (Android 5.0 탑재)
• Material 2 (2018): 더 밝고 둥근 형태, 모션 및 전환 애니메이션 강조
• Material 3 (2021~): Dynamic Color 도입, 개인화 및 접근성 최우선 (Android 12+ 기본값)

현재는 세 번째 버전인 **Material Design 3 (M3)**가 공식 표준입니다.

 

Material Design의 세 가지 목표

• 일관성 - 플랫폼 전체에서 예측 가능한 사용자 경험 제공
• 유연성 - 브랜드 개성을 살리면서도 가이드라인 안에서 커스텀 가능
• 접근성 - 명도 대비, 터치 영역 등 접근성 기준을 시스템 레벨에서 보장

⚠️ Material 라이브러리를 추가한다고 해서 반드시 Material 디자인을 따라야 하는 것은 아닙니다. 라이브러리 내 컴포넌트를 선택적으로 가져다 쓰면서, 필요한 부분만 커스텀해 활용하는 방식이 일반적입니다.

정작 저는 이 디자인 가이드에 맞춰서 작업하는 프로젝트를 지금까지 경험해본 적이 없는데요.. 아무래도 협엽하여 프로젝트를 진행하다 보니 팀에 디자이너가 매번 있었고 앱의 특성을 살리기 위해 좀 더 창의적인 디자인을 제작하여 사용하는 경우가 많아서 그런 것 같습니다.

저같은 경우에는 미적 감각이 1도 없기 때문에, (아마 대부분의 컴공 학생이라면 없지 않을까..) 만약 디자이너 없이 개인 프로젝트를 진행한다고 했을 때, 이 머티리얼 디자인을 사용한다면 그럴싸한 UI를 만들어 낼 수 있어 굉장히 도움이 될 것 같습니다.

 

 

 

 

03. 핵심 토큰: Color · Typography · Shape

M3의 핵심은 세 가지 디자인 토큰 시스템입니다. 토큰이란 "이 색은 Primary야", "이 텍스트는 Title이야" 같은 역할에 이름을 붙인 것이에요.

 

🎨 Color Scheme

M3의 색상은 역할(Role) 기반입니다. 특정 컬러 코드가 아니라 역할에 색을 배정하는 방식입니다. 코드에서 직접 #FF5722 이런 식으로 쓰는 게 아니라, MaterialTheme.colorScheme.primary 이렇게 역할로 참조하는 거죠.

 

 

 

Role 용도

Primary	UI 전반에서 가장 눈에 띄는 구성 요소
(핵심 버튼, 주요 액션 등)
Secondary	UI에서 중요도가 낮은 구성 요소
(보조 액션, 필터 칩 등)
Tertiary	대비를 통한 강조 포인트
Error	오류 상태 표현
Surface / Background	화면 배경 레이어

 

Primary, Secondary, Tertiary처럼 역할별로 색이 정해지면, 테마만 바꿔도 앱 전체 색상이 한 번에 바뀌는 거예요.

 

 

Color roles - Material Design 3

 

 

 

Dynamic Color

• 사용자 배경화면에서 색상을 자동 추출해 앱 전체에 적용.
• 별도 코드 없이 개인화된 테마가 완성됨.
• Android 12 이상에서 사용 가능.

 

Dynamic color - Material Design 3

 

 

 

 

Material Theme Builder (m3.material.io/theme-builder)

• 브랜드 색상 1개만 입력하면 전체 Color Scheme을 자동 생성하고 Kotlin 파일로 Export까지 해줍니다.
• 더 자세한 내용 알고 싶다면
• M3 색상 시스템 정리

M3 색상 시스템 정리 | Notion

 

---

✏️ Typography

 

기본형 15가지와 강조형 15가지, 총 30가지 글씨 스타일을 제공 5계층 타이포그래피 시스템으로 별도 스타일 없이 시각적 계층 구조를 만들 수 있습니다.

스타일 크기 범위 용도

Display	57sp / 45sp / 36sp	히어로 텍스트, 대형 숫자
Headline	32sp / 28sp / 24sp	화면 제목
Title	22sp / 16sp / 14sp	섹션 제목, 카드 제목
Body	16sp / 14sp / 12sp	본문 텍스트
Label	14sp / 12sp / 11sp	버튼 레이블, 캡션

 

코드에서는 MaterialTheme.typography.titleMedium 이런 식으로 사용.

 

 

📐 Shape

7단계 모서리 반경 시스템으로 컴포넌트마다 기본 Shape이 지정되어 있어 통일감이 자동으로 부여됩니다.

None → Extra Small → Small → Medium → Large → Extra Large → Full
 0dp       4dp        8dp     12dp     16dp       28dp       50%

예시: Button은 기본 Full로 둥글고,Card는 Medium으로 약간 둥글다.

 

 

 

M3에서는 모서리 반경 외에도 35가지 프리셋 도형을 MaterialShapes API로 제공합니다.

Circle, Oval, Triangle부터 Heart, Clover, Burst까지 다양한 형태를 코드 한 줄로 바로 적용할 수 있어요.

Surface(
    shape = MaterialShapes.Circle // .Heart, .Cookie4Sided, .Clover4Leaf 등
) { }

 

 

 

 

MaterialShapes  |  API reference  |  Android Developers

 

 

 

 

그 밖의 스타일들

Elevation

M2에서는 높이를 그림자로 표현했는데, M3에서는 그림자 대신 색상 톤(Tonal Elevation)으로 표현해요. 다크 모드에서 훨씬 자연스럽게 보인다는 장점이 있습니다.

 

 

 

 

 

 

 

 

 

 

 

M2: 모든 레벨에 그림자가 적용됨

 

 

 

 

 

 

 

 

 

 

 

M3: 그림자 대신 색상을 사용하여 높이를 표현하기

 

 

 

Surface(
    modifier = Modifier,
    tonalElevation = 6.dp,  // 색상 톤으로 높이 표현 (M3 권장)
    shadowElevation = 0.dp  // 그림자로 높이 표현
) {
    Column(content = content)
}

 

 

Icon

하나의 폰트 파일로 두께, 채움, 기울기를 조절하는 가변 폰트 기반의 Material Symbols 도입

• Fill (채움): 선택된 상태(Active)와 선택되지 않은 상태(Inactive) 구분
• Weight (두께): 화면의 시각적 강조도에 맞춰 굵기 조절
• Grade (강조): 다크 모드나 텍스트 대비에 맞춰 렌더링 최적화

 

Material Symbols and Icons - Google Fonts

 

 

Component

앞서 정의한 Token(Color, Typo, Shape, Elevation)들이 조립되어 만들어진 완성품입니다.

디자이너가 없어도 이 컴포넌트들을 블록처럼 조립하면 훌륭한 UI가 탄생합니다. 크게 6가지 카테고리로 나뉩니다.

카테고리 설명 주요 컴포넌트

카테고리	설명	주요 컴포넌트
Actions	사용자의 행동을 유도	Button, FAB(Floating Action Button), Segmented Button
Communication	상태나 정보를 전달	Badge, Progress Indicator, Snackbar
Containment	관련 있는 정보들을 그룹화	Card, Dialog, Bottom Sheet, Divider
Navigation	앱 내 화면 이동	Navigation Bar(하단 탭), Top App Bar, Navigation Drawer
Selection	옵션 선택 및 필터링	Checkbox, Radio Button, Switch, Slider, Chip
Text Input	텍스트 입력	TextField, Search Bar

 

 

Components – Material Design 3

 

 

 

04 안드로이드에서 활용하기

안드로이드에서는 두 가지 방식으로 Material 3를 사용할 수 있습니다.

 

방식 비교: XML vs Compose

구분 XML (View System) Jetpack Compose

대상	기존/레거시 프로젝트	신규 프로젝트 (권장)
라이브러리	material-components-android	androidx.compose.material3
테마 설정	styles.xml 에서 색상 오버라이드	MaterialTheme Composable
다크 모드	별도 -night 리소스 폴더	isSystemInDarkTheme() 한 줄

 

 

XML 방식

1. 의존성 추가 (build.gradle)

dependencies {
    implementation 'com.google.android.material:material:1.x.x'
}

 

 

2. 색상 선언 (res/values/colors.xml)

<resources>
    <color name="my_primary">#FF6200EE</color>
    <color name="my_secondary">#FF03DAC5</color>
</resources>

 

 

3. 컴포넌트 스타일 (res/values/styles.xml)

<style name="Widget.MyApp.Button" parent="Widget.Material3.Button">
    <item name="android:textColor">@color/my_secondary</item>
    <item name="cornerRadius">8dp</item>
</style>

 

 

4. 테마 설정 (res/values/themes.xml)

<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/my_primary</item>
    <item name="colorSecondary">@color/my_secondary</item>
    <item name="materialButtonStyle">@style/Widget.MyApp.Button</item>
</style>

 

 

5. 테마 적용 (AndroidManifest.xml)

<application
    android:theme="@style/Theme.MyApp">

 

 

6. 컴포넌트 사용

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="확인" />

 

 

---

 

Compose 방식 (권장)

1. 의존성 추가

dependencies {
    implementation "androidx.compose.material3:material3:1.x.x"
}

 

 

2. 테마 설정 (Theme.kt)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

 

 

3. 컴포넌트 사용

 

HomeContentSection(
    contentList = listOf(
        R.drawable.img_content1,
        R.drawable.img_content2,
        R.drawable.img_content3
    ).toImmutableList(),
) {
    Text(
        text = "예능부터 드라마까지!",
        style = MaterialTheme.typography.titleMedium,
        color = MaterialTheme.colorScheme.onPrimary
     )
}

 

 

 

Material Theme Builder 활용 흐름

브랜드 색 입력 → Theme Builder 자동 생성 → Kotlin 파일 Export → 프로젝트에 붙여넣기

 

→ m3.material.io/theme-builder 에서 무료로 사용 가능

 

 

 

Material Theme Builder

 

 

 

05. Material 3 Expressive: 무엇이 달라졌나?

M3 Expressive는 M4가 아닌 M3의 진화입니다. 기존 코드는 유지되며 새로운 표현 도구가 추가됩니다.

 

 

탄생 배경 → "왜 앱들은 다 똑같이 생겼는가?"

2025년 5월 발표된 M3 Expressive는 "왜 이 앱들이 모두 비슷하게 보이는가?" 라는 물음에서 시작되었습니다.

구글은 과거 2009년 '41 shades of blue' 사건을 반성합니다. 당시 구글은 어떤 파란색 버튼이 더 많은 클릭을 받는지 41가지 색상을 A/B 테스트했고, 이 극단적인 데이터 중심 의사결정에 반발한 디자인 책임자가 회사를 떠났습니다.

M3 Expressive는 그 반대 방향을 제시합니다 —> 46개의 별도 연구, 18,000명 이상의 전 세계 참가자를 통해 개발된 공동 연구의 산물입니다.

 

연구 결과 수치

지표 결과

주요 UI 요소 발견 속도	4배 빠름
연구 수	46개
참가자 수	18,000명 이상
신규·업데이트 컴포넌트	15개

 

 

 

업데이트 3가지 축

1. Expressive Components — 신규 컴포넌트 추가

 

 

새로 추가되거나 업데이트되는 컴포넌트는 총 15가지가 있다.

 

 

2. Expressive Styles — 더 넓은 표현 범위

4가지 주요 스타일 요소를 통해 더 감성적이고 생동감 있는 사용자 경험을 구현.

 

Motion-physics system

모션 스프링 기반

• 상호작용과 전환이 더 생동감 있고, 유동적이며 자연스럽게 느껴지도록 모션 스프링 시스템 도입
• Spatial Springs : 물체의 실제 움직임의 물리적 원리를 반영하여 명확하고 예측 가능한 애니메이션 제공
• Effects Springs : 색상 및 투명도 변화에 대한 매끄러운 전환

 

 

 

Visually Emphasized Typography

• 가변 및 고정 글꼴에 대한 새로운 유형 스타일을 사용하여 다양한 감정 상태를 표현
• 가독성을 위해 변수를 자동으로 조정
• Bold 편집 레이아웃을 지원

 

 

 

 

Expanded Shape Library

• 새로운 35가지 도형
• 내장된 도형 변형 애니메이션을 통해 한 도형에서 다른 도형으로 부드럽게 전환 가능

 

 

 

 

Vibrant Color Schemes

다양한 색상을 활용하여 계층 구조를 명확히 하고 핵심 기능을 강조

 

 

 

 

3. Expressive Tactics — 감성적 모션

화면에서 가장 중요한 요소에 사용자의 시선을 집중시키는 데 도움이 되는 일련의 디자인 전략을 수립 → 개발자들이 M3를 통해 이전보다 훨씬 더 유연하게 디자인할 수 있다.

1. 다양한 모양을 사용하세요
2. 풍부하고 섬세한 색상을 적용하세요
3. 타이포그래피를 활용하여 시선을 유도하세요
4. 강조할 내용을 그룹화하세요
5. 유연하고 자연스러운 움직임을 추가하세요
6. 컴포넌트의 유연성을 활용하십시오
7. 다양한 전술을 조합하여 히어로 모먼트를 만들어내세요

 

 

06 정리

 

핵심 요약

• Material Design은 일관성·생산성·사용자 경험을 동시에 해결하는 구글의 디자인 공통 언어입니다.
• Color Scheme, Typography, Shape 세 토큰 시스템이 핵심. Theme Builder 하나면 전체 팔레트 자동 생성.
• 안드로이드에서는 XML 또는 Compose 두 가지로 적용. 신규 프로젝트는 Compose가 권장됩니다.
• M3 Expressive는 M4가 아닌 M3의 진화. 기존 코드 유지하면서 새 컴포넌트·스타일을 점진적으로 도입 가능.

 

 

 

참고 링크

 

Material Design 3 공식 사이트

Material Design

 

테마 자동 생성 도구

Material Theme Builder

 

Compose에서 M3 적용 가이드

Compose의 Material Design 3  |  Jetpack Compose  |  Android Developers

 

XML 기반 Material 컴포넌트

GitHub - material-components/material-components-android: Modular and customizable Material Design UI components for Android