# Material Design

> 구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

- 층: 레퍼런스 (디자인 언어)
- ID: material-design
- 연도: 2014
- 제작자: Google
- 무드 태그: 신뢰감, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/material-design

## 정의

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

## 역사·배경

2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.

## 주요 특징

- 그림자와 깊이를 통한 계층 구조
- 대담한 색상과 타이포그래피
- 의미 있는 모션과 애니메이션
- 반응형 그리드 시스템
- 일관된 아이콘과 이미지

## 핵심 원칙

- 재료는 은유다 (Material is the metaphor)
- 대담하고, 그래픽적이며, 의도적이다
- 모션은 의미를 제공한다

## 컬러 시스템

역할 기반 색상 토큰 시스템 (Material You). Primary 한 색에서 전체 팔레트를 자동 파생

### 색상 역할

- primary: CTA 버튼, 링크, 선택된 상태, 핵심 인터랙션
- secondary: 보조 버튼, 필터 칩, 덜 강조된 UI 요소
- tertiary: 대비 강조, 관련 없는 요소 구분
- surface: 카드, 시트, 메뉴 배경
- background: 페이지 전체 배경
- on-primary: primary 위의 텍스트·아이콘 (반드시 high contrast)
- error: 오류 상태, 경고 메시지
- outline: 텍스트필드 테두리, 구분선

### 색상 제약

- primary 단색에서 tonal palette(5단계 명도) 자동 생성 — 직접 변형 색을 만들지 않음
- surface와 background 간 명도 차이는 최소화 (tone 6 이하)
- on-xxx 색은 해당 xxx 색 위에서 WCAG AA(4.5:1) 이상 확보 필수
- 색상 역할을 목적 외 용도로 혼용 금지 (e.g. error 색을 강조용으로 쓰지 않음)

### 다크모드 전략

Light/Dark 두 세트의 토큰을 별도로 정의. 같은 역할명 유지하되 tone 값만 반전 (primary light=40, primary dark=80)

### 대비 요구사항

WCAG AA (4.5:1) 기본, 중요 텍스트는 AAA (7:1) 권장

## 타이포그래피

- 폰트 성격: 휴머니스트 또는 기하학적 산세리프. 읽기 편하고 중립적인 느낌. 브랜드에 따라 교체 가능
- 권장 폰트 수: 최대 1개
- 타입 스케일: Material Type Scale 고정 (Display/Headline/Title/Body/Label 5단계)

### 타이포그래피 제약

- heading과 body 동일 폰트 패밀리 사용 권장 — weight로만 계층 구분
- Display: 57/45/36px, Headline: 32/28/24px, Body: 16/14/12px 스케일 준수
- letter-spacing은 Display에서 -0.25px, Body에서 0.5px 내외
- line-height는 body 기준 1.5배 이상

## 설계 제약

### 하면 안 되는 것

- 그림자를 장식용으로 사용 금지 — elevation(고도)에 따라 의미 있게만 사용
- 색상만으로 상태 구분 금지 — 아이콘·텍스트 병행 필수
- 임의 색상 추가 금지 — Material Color System 역할 밖의 색 사용 자제
- 컴포넌트 형태를 임의로 변형 금지 (버튼 높이, 터치 타겟 48dp 등)

### 반드시 포함할 것

- Elevation(0~5) 시스템 — 컴포넌트 깊이를 그림자로 표현
- Ripple 또는 상태 레이어(hover/focus/press) 인터랙션
- 48dp × 48dp 최소 터치 타겟
- 모든 인터랙션에 의미 있는 피드백 (모션 또는 색상 변화)

### 모션 가이드

표준 이징: cubic-bezier(0.4, 0, 0.2, 1) 300ms. 진입은 decelerate, 퇴장은 accelerate. 공유 축 전환(Shared Axis)으로 화면 간 관계 표현.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- Android 앱
- Google 제품군 (Gmail, Drive 등)
- 크로스 플랫폼 모바일 앱
- 기업용 웹 대시보드

## 추천 프로젝트 유형

- Android 앱 개발
- Google 생태계 제품
- 기업용 SaaS
- 크로스 플랫폼 앱

## 장단점

### 장점

- 전 세계적으로 인지도 높아 학습 비용 낮음
- 풍부한 공식 컴포넌트 라이브러리 (MUI)
- 명확한 가이드라인으로 일관성 유지 쉬움
- 접근성 기본 탑재

### 단점·한계

- Google 스러운 느낌이 강해 차별화 어려움
- 스큐어모피즘 대비 감성적 깊이 부족
- 고급 브랜드 제품에는 부적합할 수 있음

## 실제 사용 제품·서비스

- Gmail
- Google Drive
- Google Maps
- Android UI

## 접근성

WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.

## 자주 묻는 질문

### Q1. Material Design이란 무엇인가요?

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다. 2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.

### Q2. Material Design의 핵심 디자인 원칙은 무엇인가요?

Material Design의 핵심 원칙은 재료는 은유다 (Material is the metaphor), 대담하고, 그래픽적이며, 의도적이다, 모션은 의미를 제공한다입니다.

### Q3. Material Design은 어떤 프로젝트에 적합한가요?

Material Design은 Android 앱, Google 제품군 (Gmail, Drive 등), 크로스 플랫폼 모바일 앱, 기업용 웹 대시보드, Android 앱 개발, Google 생태계 제품, 기업용 SaaS, 크로스 플랫폼 앱 등의 프로젝트에 적합합니다.

### Q4. Material Design의 장단점은 무엇인가요?

장점으로는 전 세계적으로 인지도 높아 학습 비용 낮음, 풍부한 공식 컴포넌트 라이브러리 (MUI), 명확한 가이드라인으로 일관성 유지 쉬움, 접근성 기본 탑재이 있습니다. 단점으로는 Google 스러운 느낌이 강해 차별화 어려움, 스큐어모피즘 대비 감성적 깊이 부족, 고급 브랜드 제품에는 부적합할 수 있음이 있습니다.

### Q5. Material Design에서 색상은 어떻게 사용하나요?

역할 기반 색상 토큰 시스템 (Material You). Primary 한 색에서 전체 팔레트를 자동 파생 색상 역할은 primary: CTA 버튼, 링크, 선택된 상태, 핵심 인터랙션, secondary: 보조 버튼, 필터 칩, 덜 강조된 UI 요소, tertiary: 대비 강조, 관련 없는 요소 구분입니다. 주의사항: primary 단색에서 tonal palette(5단계 명도) 자동 생성 — 직접 변형 색을 만들지 않음, surface와 background 간 명도 차이는 최소화 (tone 6 이하).

### Q6. Material Design에 어울리는 폰트 스타일은 무엇인가요?

Material Design에는 휴머니스트 또는 기하학적 산세리프. 읽기 편하고 중립적인 느낌. 브랜드에 따라 교체 가능 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: heading과 body 동일 폰트 패밀리 사용 권장 — weight로만 계층 구분, Display: 57/45/36px, Headline: 32/28/24px, Body: 16/14/12px 스케일 준수.

### Q7. Material Design 디자인에서 하면 안 되는 것은 무엇인가요?

Material Design에서 피해야 할 것: 그림자를 장식용으로 사용 금지 — elevation(고도)에 따라 의미 있게만 사용, 색상만으로 상태 구분 금지 — 아이콘·텍스트 병행 필수, 임의 색상 추가 금지 — Material Color System 역할 밖의 색 사용 자제, 컴포넌트 형태를 임의로 변형 금지 (버튼 높이, 터치 타겟 48dp 등).

### Q8. Material Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Material Design을 적용한 대표적인 제품·서비스로는 Gmail, Google Drive, Google Maps, Android UI 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #6200EE
- secondary: #03DAC6
- accent: #BB86FC
- background: #FFFFFF
- surface: #F5F5F5
- text: #000000
- textSecondary: #666666
- border: #E0E0E0

### 타이포그래피

- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
- shadow md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
- shadow lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: rounded / hover lift / text uppercase
- card: elevated / hover lift
- input: outlined / focus border
- badge: pill / solid
- icon: material / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 300ms cubic-bezier(0.4, 0, 0.2, 1)

## 관련 링크

### 관련 스타일

- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Fluent Design System](https://ui.buildersgate.com/styles/fluent-design)
- [Carbon Design System](https://ui.buildersgate.com/styles/carbon-design)
- [Ant Design](https://ui.buildersgate.com/styles/ant-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/material-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/material-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/material-design)

### 비교

- [Material Design vs Ant Design](https://ui.buildersgate.com/compare/ant-design-vs-material-design)
- [Material Design vs Astryx (Meta 디자인 시스템)](https://ui.buildersgate.com/compare/astryx-vs-material-design)
- [Material Design vs Atlassian Design System](https://ui.buildersgate.com/compare/atlassian-design-vs-material-design)
- [Material Design vs Bootstrap](https://ui.buildersgate.com/compare/bootstrap-vs-material-design)
- [Material Design vs Carbon Design System](https://ui.buildersgate.com/compare/carbon-design-vs-material-design)
- [Material Design vs Flat Design](https://ui.buildersgate.com/compare/flat-design-vs-material-design)
- [Material Design vs Fluent Design System](https://ui.buildersgate.com/compare/fluent-design-vs-material-design)
- [Material Design vs Human Interface Guidelines (HIG)](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-material-design)
- [Material Design vs KRDS (대한민국 정부 디자인 시스템)](https://ui.buildersgate.com/compare/krds-vs-material-design)
- [Material Design vs LINE Design System (LDS)](https://ui.buildersgate.com/compare/line-lds-vs-material-design)
- [Material Design vs SEED Design (당근)](https://ui.buildersgate.com/compare/material-design-vs-seed-design)
- [Material Design vs Shopify Polaris](https://ui.buildersgate.com/compare/material-design-vs-shopify-polaris)
- [Material Design vs Toss Design System (TDS)](https://ui.buildersgate.com/compare/material-design-vs-toss-design-system)

### 쓰임새별 추천

- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)
- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/material-design

이 문서는 https://ui.buildersgate.com/styles/material-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.