{3줄 요약}

머티리얼 디자인은 디지털 화면의 구조와 움직임을 하나의 원리로 설명한 체계예요.
겹침과 깊이와 움직임을 물리적 은유로 풀어 사용자가 상태를 이해하게 도와요.
이 개념을 알면 버튼과 모달과 그림자 같은 디테일을 더 일관되게 설계할 수 있어요.

Material이라는 은유가 왜 중요한가

디지털 인터페이스를 설계할 때 가장 어려운 질문 중 하나가 있어요.
"요소들의 관계를 어떻게 보여주는가?"

예를 들어 버튼을 눌렀을 때 나타나는 팝업은 버튼보다 "위에" 있어요.
사이드 메뉴는 화면 콘텐츠 "위로" 슬라이드해서 나타나요.
이 공간적 관계를 어떻게 표현할까요?

Material Design의 답: 물리 세계의 종이와 잉크 은유.

화면의 모든 요소는 얇은 종이(Material) 위에 그려진 잉크예요.
이 종이들은 서로 다른 높이(Elevation)에 떠 있어요.
높이가 다르면 그림자가 생겨요.
높이가 높을수록 그림자가 진하고 퍼져요.

이 한 가지 원칙이 UI 전체의 공간적 언어를 만들어요.
"왜 이 요소에 그림자가 있는가"에 대한 답이 항상 "이게 더 위에 있기 때문이에요"로 통일돼요.

이 원칙을 무시하면 어떻게 될까요?
어떤 버튼은 그림자가 있고 어떤 건 없고, 모달이 어떨 때는 위에서 내려오고 어떨 때는 아래서 올라오면 — 사용자는 공간적 논리를 파악할 수 없어요.

Material Design의 네 가지 핵심 시스템

1. Elevation(고도) 시스템

Elevation은 0에서 24dp까지의 값으로 요소의 높이를 표현해요.

기본 화면: Elevation 0 (평평) 카드: Elevation 1 (약한 그림자) 버튼: Elevation 2 (중간 그림자) FAB(Floating Action Button): Elevation 6 (강한 그림자) Navigation Drawer: Elevation 16 (매우 강한 그림자) 모달/다이얼로그: Elevation 24 (가장 높은 위치)

이 숫자가 시각적 그림자로 표현돼요.
Elevation이 높은 요소가 낮은 요소 위에 있어요.
사용자는 어떤 요소가 더 "앞에" 있는지 직관적으로 이해해요.

2. Motion(모션) 시스템

Material Design의 애니메이션은 물리 법칙을 따라요.
요소가 등장하고 사라지고 이동할 때 "자연스럽게" 움직여요.

핵심 원칙:

  • Easing(완급 조절): 선형 움직임이 아니라 시작엔 빠르게, 끝엔 천천히 (ease-out)
  • Duration(지속 시간): 짧은 이동은 짧게(100ms), 복잡한 전환은 길게(300ms)
  • Choreography(안무): 여러 요소가 동시에 움직일 때 순서와 방향이 이야기를 만들어야 해요

Shared Element Transition이 이 원칙의 대표 예예요.
목록에서 카드를 탭하면, 그 카드가 상세 화면으로 "확장"돼요.
같은 요소가 위치를 이동하는 것처럼 보여서 사용자가 "어디서 왔는지"를 이해해요.

3. Color(색상) 시스템

Material Design의 색상은 역할(Role)로 정의돼요.

  • Primary: 브랜드의 주요 색, 주요 CTA
  • Secondary: 보조 액션, 강조 요소
  • Tertiary: 추가 강조
  • Error: 오류, 경고
  • Surface: 배경, 카드 표면

각 역할에 따라 밝은 버전, 어두운 버전, 텍스트용 색이 자동으로 생성돼요.
이 구조가 다크 모드 지원을 훨씬 쉽게 만들어요.

Material You(Material Design 3)에서는 사용자의 배경화면에서 색상을 추출해 앱 색상을 자동 생성하는 Dynamic Color가 도입됐어요.

4. Typography(타이포그래피) 스케일

Display, Headline, Title, Body, Label — 5개 카테고리에 각각 Large, Medium, Small 변형이 있어요.
총 15개의 텍스트 스타일이에요.

이 스케일이 있으면 "지금 이 텍스트에 어떤 크기를 써야 할까"를 매번 고민하지 않아도 돼요.
"이건 Body Medium이야"라고 하면 팀 전체가 같은 것을 생각해요.

이 원칙을 적용할 때 스스로에게 물어보세요

  • 이 요소의 Elevation이 다른 요소들과 관계적으로 맞는가요? (팝업이 배경보다 낮은 Elevation이면 안 돼요)
  • 애니메이션이 물리적으로 자연스럽게 느껴지나요?
  • 색상이 역할(Role)에 따라 일관되게 쓰이나요?
  • 텍스트 스타일이 정의된 스케일에서 왔나요?

Material Design을 처음 접한다면 https://m3.material.
io/ 에서 공식 가이드라인을 직접 보는 게 가장 좋아요.
설명보다 실제 예시가 원칙을 훨씬 빠르게 이해하게 해줘요.

관련 아티클

참고 문헌

  • Google, Material Design 3 — https://m3.material.io/ — Material Design 공식 가이드라인의 최신 버전이에요.