김 성지님의 아티클 더 보기

UI/UX 뉴스

구글 머티리얼 디자인의 변화로 본 인사이트

기업과 사용자의 진정한 Co-creation을 향해서

구글 제품의 디자인 기본 원칙으로 고안된 구글의 ‘머티리얼 디자인(Material Design)’은 안드로이드 스마트폰에 적용하면서 널리 퍼진 개념입니다. ‘머티리얼’이 붙은 것처럼 물리적으로 실제와 비슷하게 구현하려는 지향점이 내포된 말이기도 합니다. 카드 스톡(Card Stock) 기반 머티리얼 디자인은 그림자를 통해 공감각을 확보했고 전반적인 스타일•레이아웃•컴포넌트에 이르기까지 전체적인 가이드를 제공합니다. 이러한 가이드는 구글이 제공하는 다양한 서비스에서 ‘일관된 경험’을 제공하기 위한 기반으로 활용됩니다.

이미지 1. 2014년 구글 머티리얼 예시

2014년 구글에서 발표한 머티리얼 디자인은 카드 UI의 논리적 재구축에 초점을 맞추며 디바이스별 동일한 경험을 추구할 수 있는 가이드를 제시했다는 점에 의미가 있습니다. 대부분 2차원적 해석으로 가이드를 제공하다 보니 다양한 UI를 흡수하기 어렵다는 단점도 있지만 구글은 다양한 서비스를 제공하는 거대 플랫폼 사업자로서 사용자가 총체적 경험을 가져갈 수 있는 가이드를 마련했습니다. 머티리얼 디자인은 안드로이드 최적화 디자인 시스템으로, 2014년 당시에는 대담하고 아름다우면서 일관적인 디자인에 초점을 맞췄다면 2018년에는 조금 더 통합적이고 적응력을 높인 시스템으로 업데이트됐습니다. 사용자 지정 색•서체•레이아웃 등을 지원해 이전보다 사용자 관여도를 높였습니다.

이미지 2. 2018년 구글 머터리얼 예시

이후 머티리얼 디자인은 지속해서 업데이트됐지만, 사용자의 요구와 수준은 높아지고 디바이스 범위가 확장됩니다. 점차 다각적인 요구사항 충족과 문제점 개선 등 한계에 도달하며, 사용자 니즈를 수용해야 한다는 주장과 함께 변화가 시작됐습니다.


“기존처럼 일률적인 것을 강조하는 방식은 인간적이지 않다”

“휴대폰을 구매한 후 본인의 것으로 만들려면 시간과 노력이
필요하고 개인의 기기는 자신의 개성이 묻어나야 한다”


이미지 3. 머티리얼 디자인의 변화 과정

구글은 이러한 변화의 결과물로 안드로이드12에서 기기를 사용하는 사용자의 개성을 잘 드러낼 수 있도록 인간의 행동•필요•바람 등에 따라 나타낼 수 있는 제품 표현을 지원하겠다고 발표했습니다. 새로운 시각과 접근법으로 고안한 머티리얼 유(Material You)가 출시됩니다. 지난 5월 비대면으로 발표된 머티리얼의 변화 지점에 대한 소개와 함께 이러한 변화가 주는 시사점에 대해 이야기하고자 합니다.

머티리얼 유(Material You)의 주요 변화

1. 편안한 경험을 주는 다이내믹 컬러(Dynamic Color)

이미지 4. 컬러 관련 구글의 머티리얼 유

사용자는 자신이 원하는 즉, 심리적으로 즐거움과 편안함을 주는 이미지로 디바이스의 배경화면을 설정하게 됩니다. 사용자가 선택한 이미지에서 추출한 컬러를 머티리얼 팔레트로 지정합니다. 이러한 다이내믹한 컬러는 이러한 사용자의 원초적 심리 자극합니다. 내가 직접 선택한 컬러가 모든 UI에 적용되며 이미지에서 파생한 컬러 무드로 편안한 경험을 제공합니다. 또한 이 팔레트는 밝기를 기준으로 계산해 추출된 색상이기 때문에 다크 모드에서도 조화로운 대비로 표현됩니다. 사용자가 색상을 하는 것만으로 취향을 존중받는 경험을 선사합니다.

2. 적응형 스크린과 가변 폰트를 활용한 유연한 시스템 태도(Flexible Attitude)

이미지 5. 시스템 태도 관련 구글의 머티리얼 유

기존보다 적극적으로 적응형 스크린을 제공합니다. 폴더블 디바이스 등장처럼 스크린의 물리적 사이즈 또한 이슈이기 때문입니다. 공급자 입장에서는 정형을 깨고 순간의 필요에 따라 변화하는 가변형 글꼴을 통해 다양한 수정사항이나 버전을 하나의 파일로 고려할 수 있습니다. 사용자 입장에서도 그간 웹 접근성이라는 표준에 갇혀 있던 본인 취향을 더욱 적극적으로 표현할 수 있습니다. 본인이 원하는 폰트와 사이즈로 자신이 보유한 기기에 대한 관여도를 확장합니다. 결과적으로 이 시스템을 통해 UI는 일관성을 유지하고 다양한 화면 크기와 유형에 쉽게 적응하면서 사용자에게 일관된 브랜드 이미지 전달과 신뢰를 이끌어내는 데 효과적으로 작용할 것으로 보입니다.

3. 고도화된 인터랙션으로 활기찬 생태계(Spirited Ecosystem) 구축

이미지 6. 인터랙션 관련 구글의 머티리얼 유

기존에 음영에 의존하는 대신 넓어진 색상 표현과 세밀한 인터랙션을 통해 포그라운드와 백그라운드를 구분합니다. 은은한 빛이 반짝거리는 등의 새로운 표면효과를 도입하며 다이내믹한 전환, 전후가 분명한 디자인 변화보다 최대한 자연스럽게 색상을 표현하고자 하는 시도가 돋보입니다. 특히 단순히 오버레이와 페이드가 아닌 부드러운 전환 화면 및 맥락 변경 입력 등 디테일 요소에도 적용됩니다. 이러한 고도화된 인터랙션을 통해 유기적 움직임을 모방하고 화면에 생기를 불어넣습니다. 또한 사용자에게 상황 및 디바이스 스크린 상의 공간 인지에 도움을 줄 뿐만 아니라 스토리텔링을 강화하고 사용자가 기술에 접근하기 쉽게 만듭니다.

4. 제어권을 사용자에게 주는 커스텀 UI(Customize UI)

이미지 7. UI 관련 구글의 머티리얼 유

접근성은 구글의 핵심 사명입니다. 하지만 접근성이 지속해서 필요한 사람도 있고 UI를 조정해야 하는 상황별 요구가 있는 사람도 있습니다. 구글은 이러한 다양한 요구 사항에 대응하고자 대비•크기•선 너비에 대한 제어권을 사용자와 공유하고 UI를 이전보다 다양한 방법으로 사용자 지정할 수 있는 상황 인식 시스템을 제공합니다. 즉, 기존보다 사용자는 적극적으로 맞춤 UI를 설정할 수 있습니다.

공급자와 사용자가 함께 완성하는 Co-create!

머티리얼 유를 통해 관습을 타파하고 개인화 중심의 새로운 시스템을 제공하며, 모션과 반응하는 화면 등으로 인간미 있는 인상과 사용자가 구글과 Co-create를 통해 상호작용하고자 하는 것을 알 수 있습니다.

 이미지 8. 머티리얼 디자인과 머티리얼 유

구글이 강조하는 Co-create는 ‘공급자와 사용자가 공동으로 제품을 만든다’는 협의의 개념보다 ‘사용자가 제품이나 서비스를 단순히 사용한다’는 차원을 뛰어넘어 경험의 한 분야로서 서비스를 이용하는 단계로 발전한다고 예상합니다. 그만큼 사용자는 다양한 범위의 경험을 통해 기업과 상호작용할 수 있습니다.

모든 사용자를 위한 제품을 구축하겠다는 것이 구글의 비전입니다. 이전 머티리얼 디자인은 모든 사람에게 기술을 단순하고 아름답게 만들고 모바일과 웹 전반에서 경험을 합리화하는 것이었다면, 머티리얼 유는 앱의 기능적 기반을 손상하지 않으면서 모든 스타일에 개인화된 다양한 요구에 접근할 수 있습니다. 이렇게 모든 화면에 생생하고 적응할 수 있는 디자인을 만들고자 하는 것이 구글의 목표입니다. 이러한 변화로 머티리얼 유는 한 사람 한 사람, 즉 개인을 한 단위로 보고 보편적 아름다움의 가치 판단 기준은 주관적이며, 개인적이라는 것을 인정하고 새로운 관점으로 시스템을 구축했다는 것을 알 수 있습니다.