Google Material Design

Dynamic Color와 대담한 형태가 반응하는 Material 3 Expressive

서양디자인 시스템소비자복합modern-minimalhumanism고딕comfortableroundlayered라이트다크공식한글 지원출시 2014개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Google Material Design (Material 3 / Material You / M3 Expressive)
한 줄 정체성: 색·형태·크기·모션·컨테인먼트로 기능을 선명하게 드러내면서 개인에게 적응하는 오픈 디자인 시스템
공식 디자인 철학: "Personal, adaptive, expressive" — 감정적 표현을 장식이 아니라 사용성과 접근성을 높이는 수단으로 활용
시그니처 요소 1개: Dynamic Color (Material You) — 사용자 배경화면에서 추출한 동적 색상 팔레트와 HCT(Hue/Chroma/Tone) 기반 토큰

Tone & Mood

톤 & 무드

핵심 키워드 3개: 적응적, 표현력 있는, 친근한
무드 설명: 깨끗한 베이스 위에 둥글고 풍부한 동적 색이 자연스럽게 얹힌다. M3 Expressive는 형태·크기·모션의 대비로 핵심 행동에 시선을 모으고, 그림자보다 tonal elevation으로 깊이를 만든다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (M3는 더 둥글고 컬러풀해짐)
밀도(Density): Comfortable — 모바일 우선 터치 친화 (FAB 56dp, 최소 48dp 타깃)
모서리 성향: Round (12~28px, M3 Expressive에서 더 큰 라운드)
평면성: Layered — tonal elevation (5단계 dp + tone shift)

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Material Blue (M3 baseline) */
  --color-primary-50:  #E8F0FE;
  --color-primary-100: #D2E3FC;
  --color-primary-200: #AECBFA;
  --color-primary-300: #8AB4F8;
  --color-primary-400: #669DF6;
  --color-primary-500: #4285F4;  /* Google Blue 기본 */
  --color-primary-600: #1A73E8;  /* hover/pressed */
  --color-primary-700: #1967D2;
  --color-primary-800: #185ABC;
  --color-primary-900: #174EA6;

  /* Secondary - Material Tertiary 영역에 해당 */
  --color-secondary-500: #7B1FA2;  /* M3 tertiary 예시 */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F9FA;  /* surface dim */
  --color-neutral-100:  #F1F3F4;
  --color-neutral-200:  #E8EAED;
  --color-neutral-300:  #DADCE0;  /* outline-variant */
  --color-neutral-500:  #9AA0A6;  /* outline */
  --color-neutral-700:  #5F6368;
  --color-neutral-800:  #3C4043;
  --color-neutral-900:  #202124;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F4EA;
  --color-success-fg: #34A853;  /* Google Green */
  --color-warning-bg: #FEF7E0;
  --color-warning-fg: #FBBC04;  /* Google Yellow */
  --color-error-bg:   #FCE8E6;
  --color-error-fg:   #EA4335;  /* Google Red */
  --color-info-bg:    #E8F0FE;
  --color-info-fg:    #4285F4;

  /* Surface (M3 tonal elevation) */
  --bg-base:     #FFFFFF;        /* surface */
  --bg-subtle:   #F8F9FA;        /* surface-container-low */
  --bg-elevated: #F1F3F4;        /* surface-container */
  --bg-overlay:  #E8EAED;        /* surface-container-high */

  /* Text */
  --text-primary:    #1F1F1F;    /* on-surface */
  --text-secondary:  #5F6368;    /* on-surface-variant */
  --text-tertiary:   #80868B;
  --text-on-primary: #FFFFFF;
  --text-disabled:   rgba(31,31,31,0.38);

  /* Border */
  --border-default: #DADCE0;     /* outline-variant */
  --border-subtle:  #E8EAED;
  --border-strong:  #9AA0A6;     /* outline */
  --border-focus:   #4285F4;
}

[data-theme="dark"] {
  --bg-base: #1F1F1F;
  --bg-subtle: #2D2D2D;
  --bg-elevated: #3C3C3C;
  --text-primary: #E3E3E3;
  --text-secondary: #C4C7C5;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Roboto (Apache 2.0) / Roboto Flex (가변폰트)
- 한글: Noto Sans KR (OFL)
위계 (M3 type scale):
- Display Large: 57px / 400 / 1.12 / -0.25px
- H1 (Headline Large): 32px / 400 / 1.25 / 0
- H2 (Headline Medium): 28px / 400 / 1.29 / 0
- H3 (Headline Small): 24px / 400 / 1.33 / 0
- Body Large (Title Medium): 16px / 500 / 1.5 / 0.15px
- Body: 14px / 400 / 1.43 / 0.25px
- Body Small: 12px / 400 / 1.33 / 0.4px
- Caption (Label Small): 11px / 500 / 1.45 / 0.5px

Spacing

스페이싱

Base unit: 4dp (모든 간격은 4의 배수)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1440px, 좌우 패딩 16px (compact) / 24px (medium) / 200px+ (expanded)

Border Radius

--radius-none: 0;
--radius-sm: 4px;     /* 작은 칩 */
--radius-md: 12px;    /* 버튼 (M3는 full corner 권장) */
--radius-lg: 16px;    /* 카드 */
--radius-xl: 28px;    /* dialog, FAB extended */
--radius-full: 9999px;

Shadow / Elevation

M3는 그림자보다 surface tonal shift를 우선하지만, 표준 5단계 elevation은 유지:

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);   /* Level 1 — 카드 */
--shadow-md: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);   /* Level 2 — 버튼 elevated */
--shadow-lg: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.30);   /* Level 3 — FAB, top app bar */
--shadow-xl: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.30);  /* Level 4-5 — modal, navigation drawer */

Iconography

스타일: Outline / Filled / Rounded / Sharp / Two-tone (Material Symbols 가변 axis 지원)
Stroke 굵기: 가변 (100~700 weight axis)
모서리 처리: Round 기본 (Material Symbols Rounded)
추천 라이브러리: Material Symbols (공식, 3,000+) / Material Icons

Component Guide

컴포넌트 가이드

Button (M3 5종: Filled / Tonal / Elevated / Outlined / Text)

.btn {
  font: 500 14px/1.43 'Roboto', 'Noto Sans KR', sans-serif;
  letter-spacing: 0.1px;
  border-radius: var(--radius-full);
  padding: 10px 24px;
  height: 40px;
  transition: background 100ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: rgba(31,31,31,0.12); color: var(--text-disabled); }

.btn-secondary { background: var(--color-primary-50); color: var(--color-primary-700); } /* Tonal */
.btn-ghost { background: transparent; color: var(--color-primary-500); padding: 10px 12px; }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input (Outlined Text Field)

.input {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-primary);
}
.input:focus {
  outline: none;
  border-color: var(--border-focus);
  border-width: 2px;
  padding: 13px 15px;
}
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }

Card

.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.card-elevated { background: var(--bg-base); box-shadow: var(--shadow-sm); }
.card-outlined { background: var(--bg-base); border: 1px solid var(--border-default); }

Badge / Chip

.chip { padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.chip-solid   { background: var(--color-primary-500); color: #fff; }
.chip-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.chip-outline { border: 1px solid var(--border-strong); color: var(--text-primary); }

Navigation (Top App Bar)

.appbar {
  height: 64px;
  background: var(--bg-base);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.appbar.scrolled { background: var(--bg-elevated); }
.appbar h1 { font-size: 22px; font-weight: 400; margin: 0; }

Motion

M3 표준 emphasized easing 사용:

--duration-fast: 100ms;
--duration-base: 250ms;
--duration-slow: 500ms;
--ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);    /* emphasized decelerate */
--ease-in-out: cubic-bezier(0.2, 0, 0, 1);      /* emphasized */

Anti-patterns

1. 그림자만으로 elevation 표현하지 말 것 — M3는 tonal shift 우선 2. Primary/Secondary/Tertiary 색을 컴포넌트별로 임의 매핑 금지 — 토큰 역할 위반 3. 작은 라운드(<4px)와 큰 라운드(>24px)를 한 화면에 섞지 말 것 4. Roboto 본문에 letter-spacing 0 사용 금지 — 가독성 의도가 깨짐 5. FAB을 페이지에 2개 이상 배치 금지 — primary action 모호

Google Material Design

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처