표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Material Design
구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.
- YEAR
- 2014
- BY
- MOOD
- 신뢰감 · 친근·발랄
- PRIMARY#6200EE
- SECONDARY#03DAC6
- ACCENT#BB86FC
- BG#FFFFFF
- SURFACE#F5F5F5
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 신뢰감
- 친근·발랄
함께 보면 좋은 스타일
어디에 쓰나
실제로 쓰는 곳
- Gmail
- Google Drive
- Google Maps
- Android UI
사용 사례
- Android 앱
- Google 제품군 (Gmail, Drive 등)
- 크로스 플랫폼 모바일 앱
- 기업용 웹 대시보드
이런 프로젝트에 맞습니다
- Android 앱 개발
- Google 생태계 제품
- 기업용 SaaS
- 크로스 플랫폼 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
핵심 원칙
- 재료는 은유다 (Material is the metaphor)
- 대담하고, 그래픽적이며, 의도적이다
- 모션은 의미를 제공한다
주요 특징
- 그림자와 깊이를 통한 계층 구조
- 대담한 색상과 타이포그래피
- 의미 있는 모션과 애니메이션
- 반응형 그리드 시스템
- 일관된 아이콘과 이미지
장점과 한계
장점
- 전 세계적으로 인지도 높아 학습 비용 낮음
- 풍부한 공식 컴포넌트 라이브러리 (MUI)
- 명확한 가이드라인으로 일관성 유지 쉬움
- 접근성 기본 탑재
한계
- Google 스러운 느낌이 강해 차별화 어려움
- 스큐어모피즘 대비 감성적 깊이 부족
- 고급 브랜드 제품에는 부적합할 수 있음
컬러 시스템
역할 기반 색상 토큰 시스템 (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(0~5) 시스템 — 컴포넌트 깊이를 그림자로 표현
- Ripple 또는 상태 레이어(hover/focus/press) 인터랙션
- 48dp × 48dp 최소 터치 타겟
- 모든 인터랙션에 의미 있는 피드백 (모션 또는 색상 변화)
하지 말 것
- 그림자를 장식용으로 사용 금지 — elevation(고도)에 따라 의미 있게만 사용
- 색상만으로 상태 구분 금지 — 아이콘·텍스트 병행 필수
- 임의 색상 추가 금지 — Material Color System 역할 밖의 색 사용 자제
- 컴포넌트 형태를 임의로 변형 금지 (버튼 높이, 터치 타겟 48dp 등)
모션 — 표준 이징: cubic-bezier(0.4, 0, 0.2, 1) 300ms. 진입은 decelerate, 퇴장은 accelerate. 공유 축 전환(Shared Axis)으로 화면 간 관계 표현.
접근성
WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.
자주 묻는 질문
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 등이 있습니다.