# Material Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: material-design
- **카테고리**: design-language
- **연도**: 2014
- **제작자**: Google
## 설명
구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.
## 역사·배경
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)으로 화면 간 관계 표현.
## 사용 사례
- Android 앱
- Google 제품군 (Gmail, Drive 등)
- 크로스 플랫폼 모바일 앱
- 기업용 웹 대시보드
## 추천 프로젝트 유형
- Android 앱 개발
- Google 생태계 제품
- 기업용 SaaS
- 크로스 플랫폼 앱
## 장점
- 전 세계적으로 인지도 높아 학습 비용 낮음
- 풍부한 공식 컴포넌트 라이브러리 (MUI)
- 명확한 가이드라인으로 일관성 유지 쉬움
- 접근성 기본 탑재
## 단점·한계
- Google 스러운 느낌이 강해 차별화 어려움
- 스큐어모피즘 대비 감성적 깊이 부족
- 고급 브랜드 제품에는 부적합할 수 있음
## 실제 사용 제품·서비스
- Gmail
- Google Drive
- Google Maps
- Android UI
## 접근성
WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.
## 관련 스타일
- [flat-design](https://ui.buildersgate.com/styles/flat-design)
- [fluent-design](https://ui.buildersgate.com/styles/fluent-design)
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [ant-design](https://ui.buildersgate.com/styles/ant-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #6200EE
- secondary: #03DAC6
- accent: #BB86FC
- background: #FFFFFF
- surface: #F5F5F5
- text: #000000
- textSecondary: #666666
- border: #E0E0E0
### 헤더
- background: linear-gradient(135deg, #6200EE 0%, #3700B3 100%)
- textColor: #FFFFFF
- accentColor: #BB86FC
### 타이포그래피
- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0.01em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
- md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
- lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
- xl: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E0E0E0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
### 애니메이션
- duration: 300ms
- easing: cubic-bezier(0.4, 0, 0.2, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=uppercase
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=pill / style=solid
- 아이콘: package=material / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Material Design이란 무엇인가요?
A: 구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다. 2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
### Q: Material Design의 핵심 디자인 원칙은 무엇인가요?
A: Material Design의 핵심 원칙은 재료는 은유다 (Material is the metaphor), 대담하고, 그래픽적이며, 의도적이다, 모션은 의미를 제공한다입니다.
### Q: Material Design은 어떤 프로젝트에 적합한가요?
A: Material Design은 Android 앱, Google 제품군 (Gmail, Drive 등), 크로스 플랫폼 모바일 앱, 기업용 웹 대시보드, Android 앱 개발, Google 생태계 제품, 기업용 SaaS, 크로스 플랫폼 앱 등의 프로젝트에 적합합니다.
### Q: Material Design의 장단점은 무엇인가요?
A: 장점으로는 전 세계적으로 인지도 높아 학습 비용 낮음, 풍부한 공식 컴포넌트 라이브러리 (MUI), 명확한 가이드라인으로 일관성 유지 쉬움, 접근성 기본 탑재이 있습니다. 단점으로는 Google 스러운 느낌이 강해 차별화 어려움, 스큐어모피즘 대비 감성적 깊이 부족, 고급 브랜드 제품에는 부적합할 수 있음이 있습니다.
### Q: Material Design에서 색상은 어떻게 사용하나요?
A: 역할 기반 색상 토큰 시스템 (Material You). Primary 한 색에서 전체 팔레트를 자동 파생 색상 역할은 primary: CTA 버튼, 링크, 선택된 상태, 핵심 인터랙션, secondary: 보조 버튼, 필터 칩, 덜 강조된 UI 요소, tertiary: 대비 강조, 관련 없는 요소 구분입니다. 주의사항: primary 단색에서 tonal palette(5단계 명도) 자동 생성 — 직접 변형 색을 만들지 않음, surface와 background 간 명도 차이는 최소화 (tone 6 이하).
### Q: Material Design에 어울리는 폰트 스타일은 무엇인가요?
A: Material Design에는 휴머니스트 또는 기하학적 산세리프. 읽기 편하고 중립적인 느낌. 브랜드에 따라 교체 가능 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: heading과 body 동일 폰트 패밀리 사용 권장 — weight로만 계층 구분, Display: 57/45/36px, Headline: 32/28/24px, Body: 16/14/12px 스케일 준수.
### Q: Material Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Material Design에서 피해야 할 것: 그림자를 장식용으로 사용 금지 — elevation(고도)에 따라 의미 있게만 사용, 색상만으로 상태 구분 금지 — 아이콘·텍스트 병행 필수, 임의 색상 추가 금지 — Material Color System 역할 밖의 색 사용 자제, 컴포넌트 형태를 임의로 변형 금지 (버튼 높이, 터치 타겟 48dp 등).
### Q: Material Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Material Design을 적용한 대표적인 제품·서비스로는 Gmail, Google Drive, Google Maps, Android UI 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=material-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=material-design&merged=true
2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
#6200EE
핵심 원칙
1
재료는 은유다 (Material is the metaphor)
2
대담하고, 그래픽적이며, 의도적이다
3
모션은 의미를 제공한다
주요 특징
그림자와 깊이를 통한 계층 구조
대담한 색상과 타이포그래피
의미 있는 모션과 애니메이션
반응형 그리드 시스템
일관된 아이콘과 이미지
장단점
장점
+전 세계적으로 인지도 높아 학습 비용 낮음
+풍부한 공식 컴포넌트 라이브러리 (MUI)
+명확한 가이드라인으로 일관성 유지 쉬움
+접근성 기본 탑재
단점 / 한계
−Google 스러운 느낌이 강해 차별화 어려움
−스큐어모피즘 대비 감성적 깊이 부족
−고급 브랜드 제품에는 부적합할 수 있음
적합한 사용처
사용 사례
Android 앱
Google 제품군 (Gmail, Drive 등)
크로스 플랫폼 모바일 앱
기업용 웹 대시보드
이런 프로젝트에 추천
Android 앱 개발Google 생태계 제품기업용 SaaS크로스 플랫폼 앱
접근성
WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.
실제 사용 예시
GmailGoogle DriveGoogle MapsAndroid UI
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Elevated Buttons
그림자로 높이를 표현하는 Material Design의 대표적인 버튼
Material Cards
깊이감 있는 그림자로 레이어를 표현하는 카드
Card Title
Material Design 카드는 그림자를 통해 깊이를 표현합니다.
Another Card
호버 시 그림자가 더 깊어지며 상호작용을 나타냅니다.
Floating Action Button (FAB)
화면에서 떠있는 듯한 주요 액션 버튼
Text Fields
Material Design의 입력 필드 스타일
Chips
정보를 표현하거나 액션을 나타내는 작은 컴포넌트
React
TypeScript
Verified
Material Typography
Roboto 폰트 기반의 체계적인 타입 스케일 — Display부터 Label까지
Display Large (57px)
Material Design
Headline Large (32px)
재료는 은유다
Title Large (22px)
Roboto 폰트 시스템
Body Large (16px)
Material Design은 구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용하여 그림자와 깊이를 통해 시각적 계층 구조를 만듭니다.
Label Medium (12px)
Google Design · 2014
자주 묻는 질문
Material Design이란 무엇인가요?
구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다. 2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
Material Design의 핵심 디자인 원칙은 무엇인가요?
Material Design의 핵심 원칙은 재료는 은유다 (Material is the metaphor), 대담하고, 그래픽적이며, 의도적이다, 모션은 의미를 제공한다입니다.
Material Design은 어떤 프로젝트에 적합한가요?
Material Design은 Android 앱, Google 제품군 (Gmail, Drive 등), 크로스 플랫폼 모바일 앱, 기업용 웹 대시보드, Android 앱 개발, Google 생태계 제품, 기업용 SaaS, 크로스 플랫폼 앱 등의 프로젝트에 적합합니다.
Material Design의 장단점은 무엇인가요?
장점으로는 전 세계적으로 인지도 높아 학습 비용 낮음, 풍부한 공식 컴포넌트 라이브러리 (MUI), 명확한 가이드라인으로 일관성 유지 쉬움, 접근성 기본 탑재이 있습니다. 단점으로는 Google 스러운 느낌이 강해 차별화 어려움, 스큐어모피즘 대비 감성적 깊이 부족, 고급 브랜드 제품에는 부적합할 수 있음이 있습니다.
Material Design에서 색상은 어떻게 사용하나요?
역할 기반 색상 토큰 시스템 (Material You). Primary 한 색에서 전체 팔레트를 자동 파생 색상 역할은 primary: CTA 버튼, 링크, 선택된 상태, 핵심 인터랙션, secondary: 보조 버튼, 필터 칩, 덜 강조된 UI 요소, tertiary: 대비 강조, 관련 없는 요소 구분입니다. 주의사항: primary 단색에서 tonal palette(5단계 명도) 자동 생성 — 직접 변형 색을 만들지 않음, surface와 background 간 명도 차이는 최소화 (tone 6 이하).
Material Design에 어울리는 폰트 스타일은 무엇인가요?
Material Design에는 휴머니스트 또는 기하학적 산세리프. 읽기 편하고 중립적인 느낌. 브랜드에 따라 교체 가능 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: heading과 body 동일 폰트 패밀리 사용 권장 — weight로만 계층 구분, Display: 57/45/36px, Headline: 32/28/24px, Body: 16/14/12px 스케일 준수.
Material Design 디자인에서 하면 안 되는 것은 무엇인가요?
Material Design에서 피해야 할 것: 그림자를 장식용으로 사용 금지 — elevation(고도)에 따라 의미 있게만 사용, 색상만으로 상태 구분 금지 — 아이콘·텍스트 병행 필수, 임의 색상 추가 금지 — Material Color System 역할 밖의 색 사용 자제, 컴포넌트 형태를 임의로 변형 금지 (버튼 높이, 터치 타겟 48dp 등).
Material Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Material Design을 적용한 대표적인 제품·서비스로는 Gmail, Google Drive, Google Maps, Android UI 등이 있습니다.