Material Design: 주요 개념, Material You 및 Material 3

Material Design이란?

Material Design(코드명 Project Quantum)은 Google의 디자인 시스템으로, Google I/O 2014에서 처음 발표되었고 Android 5.0 Lollipop에서 처음 구현되었습니다. Material Design의 목표는 종이와 잉크의 물리적 특성 — “소재”(material) — 을 기반으로 모든 Google 제품 및 Android 앱을 위한 통합된 시각적 언어를 만드는 것입니다. 플랫 디자인과 달리 Material Design은 물리적 깊이, 그림자, 레이어 및 사실적인 애니메이션을 추가합니다.

2014년 이후 Material Design은 세 가지 주요 버전을 거쳤습니다: Material 1(2014) — 카드 및 플로팅 액션 버튼이 포함된 원본 가이드라인; Material 2(2018) — 단순화된 시각적 언어, 증가된 간격, 타이포그래피 강조; Material 3 / Material You(2021) — 기기 배경화면에서 생성된 동적 색상 구성표, 개인화. Google Play Console(2024)에 따르면, 상위 1000개 Google Play 앱 중 78%가 Android용 Material Components를 사용합니다.

Material Design은 단순한 UI 키트가 아니라 완전한 디자인 시스템입니다: 접근성(a11y), 애니메이션(Motion), 반응형 레이아웃, 구성 요소(TopAppBar, BottomNavigation, Navigation Drawer), 타이포그래피(Material Type Scale) 및 아이콘(Material Symbols)에 대한 가이드라인을 제공합니다. IT Sectr에서는 2014년부터 Android 프로젝트의 기본 디자인 시스템으로 Material Design을 사용해 왔으며, Material Theme Builder를 통해 클라이언트의 브랜드에 맞게 커스터마이징하고 있습니다.

Material Design의 기본 원칙: 물질성, 깊이, 움직임

물질성(재료로서의 은유) — Material Design의 핵심 원칙으로, 종이의 물리적 특성을 차용합니다: 소재는 표면, 두께(1dp)가 있고, 그림자(Elevation)를 드리우며, 공간(Bounds)을 차지합니다. 인터페이스 요소 — 카드, 버튼, 패널 — 는 물리적 객체처럼 행동합니다: 누르면 떠오르고(리플 효과), 서로 겹치며(Z축), 나타날 때 애니메이션됩니다(motion).

깊이(Depth)는 Elevation을 통해 생성됩니다 — Z축에서의 위치를 결정하는 소재 속성입니다. Elevation(8dp, 16dp)이 높을수록 요소가 드리우는 그림자가 커집니다. 카드의 Elevation은 1–2dp, FAB는 6dp, Modal BottomSheet는 16dp입니다. 깊이는 계층 구조를 전달하는 데 사용됩니다: 모달 창과 대화상자는 항상 콘텐츠 위에 있고, Navigation Drawer는 Action Bar 위에 있습니다. 깊이는 3D 원근법을 평평한 Z-레이어로 대체하여 렌더링 성능을 유지합니다.

움직임(Motion) — Material Design의 애니메이션은 장식적이지 않고 기능적입니다. 애니메이션은: 1) 사용자의 주의를 유도하고(세부 정보와 함께 확장되는 카드), 2) 공간적 관계를 설명하고(스크롤 시 AppBar가 TopAppBar로 변환), 3) 부드러운 전환을 보장해야 합니다(화면 간 공유 요소 전환). Google Material Guidelines(2024)에 따르면, 애니메이션은 마이크로 상호작용의 경우 300ms, 화면 전환의 경우 500ms를 초과해서는 안 됩니다 — 더 긴 애니메이션은 지연으로 인식됩니다.

Material You(Material Design 3): 동적 색상 및 개인화

Material You(Material Design 3)는 디자인 시스템의 가장 큰 업데이트로, 2021년 Android 12와 함께 도입되었습니다. 주요 혁신 — 동적 색상(Monet): 시스템이 기기 배경화면에서 자동으로 5개의 주요 색상을 추출하고 계산된 WCAG AA 대비 비율과 함께 15톤(primary, secondary, tertiary, error 및 해당 light/dark 변형)의 완전한 색상 팔레트를 생성합니다.

Material You의 색상 모델은 HCT(Hue, Chroma, Tone)를 기반으로 합니다 — Google이 개발한 색상 공간으로, 인간의 인식(Hue)을 채도(Chroma) 및 명도(Tone)와 결합합니다. HSL/HSV와 달리 HCT는 생성된 모든 톤이 흰색 및 검은색 배경에서 필요한 대비를 가지도록 보장합니다. Google Material Guidelines(2024)은 텍스트에는 기본 팔레트의 톤별 변형만, 배경에는 surface 톤, 강조 표면에는 primary-container를 사용할 것을 권장합니다.

사용자는 4가지 개인화 구성표 중에서 선택할 수 있습니다: TonalSpot(배경화면의 기본 색상), Vibrant(가장 채도가 높은 색상), Expressive(추가 밝은 색상), Neutral(단색 팔레트). Material Theme Builder(material-foundation.github.io)는 Material 3 테마를 XML, Compose Theme, CSS 및 Figma 플러그인으로 내보낼 수 있습니다.

Android용 Material Components: XML 및 Compose를 통한 구현

Android용 Material Components(MDC-Android)는 Material Design 가이드라인을 따르는 즉시 사용 가능한 View 구성 요소를 제공하는 Google의 공식 라이브러리입니다. XML 레이아웃의 경우, 라이브러리는 com.google.android.material:material 종속성을 통해 사용할 수 있으며, 2026년 6월 기준 최신 버전은 1.12.0입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

예제는 MaterialToolbar(TopAppBar), 사용자 지정 패딩 및 획이 있는 MaterialCardView, 드롭다운 목록이 있는 TextInputLayout 및 Material3 스타일의 MaterialButton이 있는 Material 화면을 보여줍니다. FAB는 Toolbar에 고정되어 있습니다 — 마스터-디테일 인터페이스의 표준 패턴입니다.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("도시") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("제출")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

코드는 Compose의 Material You 테마를 보여줍니다: dynamicLightColorScheme()은 기기 배경화면을 기반으로 자동으로 색상 구성표를 생성합니다. Scaffold는 TopAppBar 및 FAB와 함께 표준 구조를 제공합니다. OutlinedTextField와 Button은 동적 colorScheme에서 색상을 가져오는 Material 3 구성 요소입니다. 배경화면이 변경되면 모든 앱 색상이 자동으로 업데이트됩니다 — 코드 변경 없이 개인화됩니다.

iOS의 Material Design: iOS용 Material Components

iOS용 Material Components(MDC-iOS)는 iOS에서 Material Design을 구현하는 네이티브 UIKit 구성 요소를 제공하는 라이브러리입니다. iOS에는 자체 디자인 시스템(Human Interface Guidelines)이 있기 때문에 iOS에서 Material 구성 요소는 덜 자주 사용되지만, Android와 iOS 간에 통일된 시각적 스타일이 필요한 크로스 플랫폼 앱에서 수요가 있습니다.

MDC-iOS에는 Material Design 스타일의 AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs 및 TextFields가 포함됩니다. 라이브러리는 CocoaPods(pod 'MaterialComponents') 및 Swift Package Manager를 통해 사용할 수 있습니다. Apple Human Interface Guidelines(2024)은 네이티브 UIKit 구성 요소를 Material 등가물로 완전히 교체하는 것을 권장하지 않지만, 네이티브 탐색(NavigationStack, UITabBarController)을 유지하는 조건으로 사용자 지정 인터페이스에 Material 구성 요소를 사용하는 것을 허용합니다.

IT Sectr에서는 Android에서 포팅된 앱(Flutter 또는 Kotlin Multiplatform을 사용한 크로스 플랫폼 프로젝트)에 대해서만 iOS에서 Material Components를 사용합니다. 네이티브 iOS 앱의 경우 HIG를 따르고 사용자 지정 브랜딩과 함께 UIKit/SwiftUI를 사용합니다. Swift Community 설문 조사(2024)에 따르면, iOS용 Material Components는 주로 하이브리드 프로젝트에서 8%의 개발자가 사용합니다.

Material Design 대 다른 디자인 시스템

Material Design이 시장에서 유일한 디자인 시스템은 아닙니다. 주요 경쟁자: Apple Human Interface Guidelines(iOS/macOS), Fluent Design(Microsoft), Carbon(IBM), Polaris(Shopify), Lightning(Salesforce). 각 시스템은 해당 플랫폼에 최적화되어 있습니다: Material Design은 Android, HIG는 iOS, Fluent는 Windows용입니다. 디자인 시스템의 선택은 대상 플랫폼과 생태계에 따라 결정됩니다.

Material Design의 주요 장점은 개방성과 크로스 플랫폼 특성입니다. 가이드라인, 구성 요소 및 도구(Material Theme Builder)는 무료로 제공되어 스타트업과 독립 개발자 사이에서 인기가 있습니다. Apple HIG는 Apple 생태계에 밀접하게 연결되어 있지만 플랫폼 기대치에 가장 잘 부합합니다. 크로스 플랫폼 프로젝트의 경우 Flutter와 Jetpack Compose Multiplatform 덕분에 Material Design이 최적의 선택입니다.