Material Design, 종이와 잉크라는 비유

한 줄로

2014년 Google이 발표한 디자인 언어입니다. "디지털도 물리적 재료처럼 작동해야 한다"는 비유 하나로 안드로이드 전체를 통일했습니다.

어디서 왔나

2010년대 초, Google의 디자인은 흩어져 있었습니다. Gmail, YouTube, 검색, 안드로이드, 모두 다른 디자인 언어로 만들어졌습니다. 일관성이 없었습니다.

2014년 6월 Google I/O 컨퍼런스. Matías Duarte (안드로이드 디자인 부사장)와 그의 팀이 Material Design을 발표했습니다.

핵심 비유는 "종이와 잉크"입니다.

• 디지털 화면의 모든 표면은 종이입니다. 위치(elevation), 두께를 가집니다.
• 컴포넌트는 종이 위 잉크처럼 동작합니다. 정해진 물리 법칙을 따릅니다.
• 종이는 떠오르고(elevate), 그림자를 만들고, 다른 종이 위에 놓일 수 있습니다.

이 비유로 Google은 두 가지를 동시에 달성했습니다.

1. 시각적 일관성: 모든 Google 제품이 같은 언어를 씁니다.
2. 확장성: 새 컴포넌트도 같은 원칙으로 만들면 됩니다.

2014~2018년 사이에 Material Design은 안드로이드 표준이 됐습니다. 2018년 Material Design 2.0(브랜딩 강화), 2021년 Material You(개인화) 로 진화했습니다.

핵심 원칙

• Elevation: 모든 컴포넌트는 z축 높이를 가집니다 (0~24dp). 그림자로 표현.
• Motion: 컴포넌트는 자연스러운 가속, 감속으로 움직입니다.
• Color: 강한 primary color + 보조 색.
• Typography: Roboto 기본 + 시각적 위계.
• Grid: 8dp 기반 그리드.

영향

Material Design 이후 모든 큰 회사가 자기 디자인 시스템을 만들기 시작했습니다.

• Apple: HIG (1987 첫 출간, 계속 진화).
• Microsoft: Fluent (2017).
• IBM: Carbon.
• Shopify: Polaris.
• Salesforce: Lightning.
• Adobe: Spectrum.

바이브 메이커가 챙길 한 가지

1인 랩에서도 디자인 시스템은 필요합니다. 다만 Material 같은 거대 시스템 전체를 만들 필요는 없습니다. (1) 색 토큰 3~5개 (2) 폰트 스케일 5단계 (3) 간격 토큰 4단계 (4) 컴포넌트 10개부터 시작하면 충분합니다. Material의 진짜 교훈은 "시작은 단순한 규칙 몇 가지면 된다"입니다.

관련

FAB · Design tokens · Atomic design · HIG