[PM교육] 머티리얼 디자인(Material Design Kit3)

[ 머티리얼 디자인(Material Design Kit3) ]

 

머티리얼 디자인이란?

머티리얼 디자인(Material Design)은 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인으로, 2014년에 처음 발표되었다. 이 디자인 철학은 디지털 환경에서 더 직관적이고 일관성있는 사용자 경험을 제공하기 위에서 고안되었다

머티리얼 디자인은 간결하고 직관적인 디자인을 추구하면서도, 시각적 계층성과 깊이감을 표현함으로써 사용자 경험을 향상시키는 것을 목적으로 한다. 이를 위해 머티리얼 디자인은 그림자, 투명도, 색상, 레이아웃 등 디자인 요소들의 상호작용을 정교하게 조절하여, 사용자가 자연스럽게 요소들 간의 관계를 이해할 수 있도록 한다. 

 

---

 

 

Material Design Kit3

 

Material Design Kit3는 구글의 머티리얼 디자인의 최신 버전인 Material Design 3(M3)에 맞춰 제공하는 디자인 리소스이다. M2의 발전된 버전으로 보다 유연하고 사용자 중심적이며 개발화된 디자인을 구현할 수 있도록 설계되었다. Material Design Kit3는 구조화된 컴포넌트와 디자인 리소스로 이루어져있고, 그중 가장 핵심이 되어지는 것이 UI 컴포넌트이다. 

 

Material Design

 

---

UI 컴포넌트 (UI Components)

머티리얼 디자인의 핵심이 되는 UI 컴포넌트는 아래처럼 다양한 형태로 제공이 되어지고 있다. 컴포넌트의 형태, 활용 방식, 세부적인 디자인에 대해 잘 설명이 되어 있다. 나는 컴포넌트 중 (24년도 12월 기준) 가장 최근에 추가된 컴포넌트인 Carousel이 가장 인상깊었다. '회전목마'를 뜻하는 Carousel과 너무나도 잘 어울리는 컴포넌트라고 생각했다.  

 

---

스타일 (Styles)

스타일(Styles)는 디자인의 전반적인 일관성 유지를 위한 다양한 요소들을 모아놓은 섹션이다. 색상, 타이포그라피, 아이콘, 엘리베이션 등 디자인 시스템의 기본적인 구성 요소를 포함하고 있다. 스타일은 개별 컴포넌트나 레이아웃에 적용할 수 있으며, Web이나 App 서비스 전반에서 통일성을 제공하게 된다. 

 

여러 스타일의 섹션 중, 나는 Color와 Typography의 내용이 가장 흥미로웠다. 

 

Material Design Color System은 디자인의 Source Color를 바탕으로 색상, 채도, 명도를 조절하여 각각 목적에 맞에 5가지의 Key Color를 만들고, 목적에 따른 사용 방식을 구분하고 있다. 크게는 Primary, Secomdary, Tertiary, Background, Error 로 구분되며, on primary, primary container처럼 세부적으로 나눌 수 있다. 

 

타이포그래피(Typography)는 정보 전달과 브랜드 아이덴티티를 형성하는데 매우 중요한 요소이다. 우리가 서비스를 제공하고자 할 때 필요한 텍스트 스타일은 원초적으로는 제목과 내용 2가지를 필요로 한다. 하지만 효과적인 정보 전달을 위해서는 Headline, Title Body, Label,  Display 5가지의 텍스트 스타일이 기본적으로 요구되어진다. 

 

---

인터랙션(Interaction)

인터랙션(Interaction)은 사용자가 화면과 상호작용하는 방식과 이에 따른 피드백과 전환을 설계하는 핵심 요소이다. 사용자 경험(UX)을 직관적이고 즐겁게 만드는 데 중요한 역할을 한다. Material Design은 인터랙션이 단순히 동작을 수행하는 것으로 제한하지 않고, 사용자 경험의 맥락을 제공하고 사용자의 의도를 강화하는 데에도 초점을 맞추고 있다. 

 

인터랙션의 주요 요소로는 Gestures, Inputs, Selection, States가 있다.

 

---

 

실제 사이트에 들어가보면 머티리얼 디자인이 이외에도 정말 많은 내용을 담고 있는 것을 확인할 수 있다. 천천히 하나의 카테고리씩 뜯어보며 이해한다면 앞으로 서비스 기획을 함에 있어서 큰 도움이 될 것이라고 생각한다.