# Material Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: material-design
- **카테고리**: design-language
- **연도**: 2014
- **제작자**: Google

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

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

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

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

## 색상 팔레트
- Purple 600 (#6200EE): Primary — 주요 브랜드 색상
- Deep Purple 900 (#3700B3): Primary Variant
- Teal 200 (#03DAC6): Secondary — 강조·액션
- Teal 700 (#018786): Secondary Variant
- White (#FFFFFF): Background
- Surface (#FFFFFF): Surface — 카드·시트
- Error Red (#B00020): Error — 오류 상태
- On Primary (#FFFFFF): Primary 위 텍스트
- On Surface (#000000): Surface 위 텍스트

## 사용 사례
- 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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=material-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=material-design&merged=true
← 홈으로 돌아가기

Material Design

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

연도

2014

제작자

Google

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

#6200EE

색상 팔레트

Purple 600

#6200EE

Primary — 주요 브랜드 색상

Deep Purple 900

#3700B3

Primary Variant

Teal 200

#03DAC6

Secondary — 강조·액션

Teal 700

#018786

Secondary Variant

White

#FFFFFF

Background

Surface

#FFFFFF

Surface — 카드·시트

Error Red

#B00020

Error — 오류 상태

On Primary

#FFFFFF

Primary 위 텍스트

On Surface

#000000

Surface 위 텍스트

핵심 원칙

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

관련 스타일 탐색

Flat Design

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.

Fluent Design System

마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다.

Carbon Design System

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

Ant Design

엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.