{3줄 요약}

Google은 여러 제품이 같은 말과 행동을 갖도록 Material Design 같은 축을 두어요.
디자인 시스템은 규칙집 넘어 팀이 같은 기준으로 결정하게 하는 공유 언어에 가까워요.
이 사례는 대규모 조직이 일관성을 어떻게 문서로 붙잡는지 보여주는 대표적인 참고점이에요.

Google이 Design System을 만든 이유

2014년 이전 Google의 제품들은 제각각이었어요.
Gmail은 한 스타일, Google+는 다른 스타일, Google Drive는 또 달랐어요.
사용자는 Google 서비스를 쓰는데도 매번 새로운 인터페이스를 다시 배워야 했어요.

내부적으로도 문제가 있었어요.
서로 다른 팀이 같은 문제를 반복해서 풀었어요.
"버튼은 어떻게 생겨야 하는가", "에러 메시지는 어떻게 써야 하는가" — 이런 결정을 팀마다 따로 했어요.

Material Design(2014년 발표)은 이 두 문제를 동시에 해결하려 했어요.
사용자에게는 일관된 경험을, 팀에게는 공유된 결정 기준을.

많은 사람들이 Material Design을 "Google의 UI 스타일"로만 생각해요.
하지만 스타일은 표면이에요.
핵심은 그 아래의 원칙과 시스템이에요.

Google Design System의 세 가지 레이어

1레이어 — 디자인 원칙

Material Design의 기반 원칙은 "Material(재료)"이라는 은유예요.
디지털 화면을 물리적 재료처럼 다루는 거예요.

  • 각 요소는 종이(Material)처럼 서로 다른 높이(Elevation, 고도)를 가져요
  • 높이가 다른 요소는 그림자로 구분돼요
  • 요소들은 물리 법칙처럼 자연스럽게 움직여요 (애니메이션이 물리 법칙을 따라요)

이 원칙이 "왜 이 버튼은 그림자가 있는가", "왜 팝업은 이렇게 등장하는가"에 대한 답을 줘요.

2레이어 — 디자인 토큰과 스타일

색상 팔레트, 타이포그래피 스케일, 간격 규칙, 모서리 반경 — 이것들이 제품 전반에서 일관되게 쓰이는 값이에요.

토큰(Token)이라고 부르는 이 값들은 이름으로 관리돼요.
#1A73E8 같은 hex 값 대신 color. primary.500처럼요.
토큰 하나를 바꾸면 그것을 쓰는 모든 곳이 한 번에 바뀌어요.
리브랜딩이나 다크 모드 지원이 훨씬 쉬워져요.

3레이어 — 컴포넌트

Button, Card, Dialog, Navigation Bar, Text Field — 자주 쓰이는 UI 요소들이 컴포넌트로 정의돼요.

각 컴포넌트에는 시각 명세뿐 아니라 인터랙션 명세도 있어요.
"버튼을 눌렀을 때 어떤 애니메이션이 나오는가", "에러 상태에서는 어떻게 보이는가", "접근성 요구사항은 무엇인가".

개발 팀은 이 컴포넌트를 코드로 구현한 라이브러리를 함께 써요.
디자이너가 Figma에서 Button 컴포넌트를 쓰고, 개발자가 같은 이름의 코드 컴포넌트를 가져오면 디자인과 구현이 자동으로 일치해요.

Design System이 실제로 어떻게 작동하는가

쉬운 예시가 있어요.
Gmail 앱을 업데이트할 때 디자이너가 새 버튼 디자인을 원한다고 해봐요.

Design System이 없으면: 디자이너가 버튼을 새로 만들어요.
개발자가 그것을 코딩해요.
하지만 다른 앱의 버튼은 여전히 예전 스타일이에요.

Design System이 있으면: 디자이너가 Material Design Button 컴포넌트를 업데이트해요.
이 컴포넌트를 쓰는 Gmail, Drive, Docs, Calendar의 버튼이 전부 동시에 바뀌어요.
한 번의 결정이 수십 개 앱에 적용돼요.

구글의 GOV.
UK Design System, 미국 정부의 U.
S.
Web Design System(USWDS)도 같은 원리예요.
여러 팀이 일관된 경험을 만들 수 있게 하는 공유 레이어예요.

오해 — Material Design은 Google 앱에서만 쓰는 거 아닌가요

아니에요.
Material Design은 외부 개발자에게도 공개된 시스템이에요.
전 세계 수천 개의 Android 앱이 Material Design 컴포넌트를 써요.

또 하나의 오해: "Material Design은 고정된 스타일"이에요.
실제로 Material Design 3(Material You, 2021)에서는 사용자 맞춤 색상 팔레트(Dynamic Color)를 지원해요.
사용자의 배경화면 색상에 맞춰 앱 색상이 바뀌는 기능이에요.
시스템이 진화하고 있어요.

Material Design의 구체적인 원칙은 Material Design에서, Design System을 처음부터 만드는 방법은 Design System 구축에서 다뤄요.

관련 아티클

참고 문헌