구글이 디자인에 감성을 담는 방법
구글 M3 Expressive 업데이트 알아보기
프롤로그
구글이 자사의 디자인 시스템인 Material Design 3(이하 M3)의 업데이트인 Expressive를 발표했습니다. Expressive는 Material을 기반으로 하는 자사의 디자인을 더욱 감성적으로 표현하기 위한 업데이트입니다.
우리가 흔히 접하는 컴포넌트는 일반적인 사용성과 비주얼을 따라가는 반면, 다소 파격적이고 흥미로운 변화에 저 역시도 이에 대해 다뤄봐야겠다고 생각했습니다. 구글이 컴포넌트에 어떻게 감성을 담았는지 말이죠.
Material 3 Expressive가 뭔가요?
구글이 생각한 유저들은, 자신의 기기를 도구가 아닌 자신의 연장선으로 생각한다고 합니다. 표현력이 풍부한 인터페이스로 하여금 감정이나 분위기를 불러일으켜 유대감을 강화하고자 합니다. M3 Expressive는 M3의 진화된 버전으로, 감성적으로 강렬한 UX를 구축하기 위한 새 기능, 새 컴포넌트, 디자인 전략의 집합입니다.
구글이 표현적인 디자인을 시도하는 이유
구글은 역시나 아무런 근거 없이 이러한 실험적인 디자인을 내어 놓지는 않았습니다. 그들이 제시한 연구 결과는 다음과 같습니다.
모든 연령대의 사람들은 표현력이 풍부한 디자인을 선호한다.
표현적인(Expressive) 디자인은 장난기, 에너지, 창의성, 친근감 등 사용자 속성에 꾸준히 높은 점수를 받는다.
사용자는 M3 Expressive 컴포넌트와 기술을 사용하는 제품으로 전환할 가능성이 더 높다.
표현력이 풍부한 디자인은 사용하기 쉽고, 표현력이 풍부한 화면에서 주요 UI 요소를 최대 4배 더 빨리 찾을 수 있다.
가장 주요한 목적은 풍부하고 표현적인 디자인을 통해, 사용자가 더욱 빠르고 쉽게 목적을 달성할 수 있도록 하는 데 있을 것 같습니다. 그리고 제품에 대한 감성과 애착이 있을 수 것 같죠. 이번 업데이트의 내용은 다음과 같습니다.
표현적인 컴포넌트
15개의 새 컴포넌트 및 업데이트된 컴포넌트에는 더 많은 기능, 모양 옵션, 강조된 텍스트 등의 표현적 업데이트가 추가되었습니다. 본 브런치 북에서는 이러한 컴포넌트들을 알아봅니다. (본 브런치 북을 구독하시면 매주 월요일 내용을 받아보실 수 있습니다.)
운동 물리학 시스템
스프링 모션을 활용하여 인터랙션과 전환을 더욱 생동감 있고, 유동적이고, 자연스럽게 느끼게 합니다. 이는 실제 움직임을 물리적으로 반영하여 애니메이션을 명확하고 예측 가능하게 만듭니다.
시각적으로 강조된 타이포그래피
강조된 타이포그래피는 정보 계층을 강화하고, 중요한 작업이나 읽지 않은 메시지와 같은 정보에 주의를 환기시킵니다.
확장된 쉐입 라이브러리
35개의 새로운 쉐입 세트를 사용하여 이미지 자르기 및 아바타와 같은 요소에 장식적인 디테일을 추가할 수 있습니다. 쉐입 변형 애니메이션을 사용하여 한 모양에서 다른 모양으로 부드럽게 전환할 수 있습니다.
생생한 색상 구성표
더욱 다양해진 색상 범위를 활용하여 계층 구조를 더욱 뚜렷하게 하고 주요 동작을 명확하게 표현할 수 있습니다. 풍부한 시각적 스타일은 개인화와 역동적인 색상을 지원합니다.
브런치 북의 목표
구글은 과연 선(?)을 얼마나 넘었을까요저는 비주얼 인터랙션 직군으로서, 목적에 부합하는 선에서는 프로덕트에 최대한 아이덴티티를 부여하고 싶어 하고 비주얼적인 차별성에 항상 목말라 있기도 합니다.
그러나 개인 프로젝트가 아닌 회사에서, 컴포넌트를 도대체 어디까지 특이하게 만들어도 되는지에 대한 선이 궁금했습니다. 본 브런치 북을 통해 구글이라는 거대 기업의 선은 어디까지인지, 그 선을 왜 거기까지로 두었을지 알아보고자 합니다.
구글이 제품에 감성을 담는 목적과 방법
컴포넌트에 적용할 수 있는 비주얼적 실험의 한계
맥락과 친숙함의 중요성
Robby Payne이 말한 다음 내용이 저 역시도 공감이 됩니다. 표현적인 디자인은 마법의 지팡이가 아니며, 맥락이 중요합니다. 익숙한 패러다임을 깨는 디자인은 현대적으로 보일 수 있지만 사용성이 떨어집니다. 구글 또한 익숙하지 않은 요소가 처음에는 인식에 영향을 미칠 수 있다는 점을 인정할 것입니다.
표현적인 것은 좋지만, 일단 인식할 수 있어야 합니다그러나 감성적 매력과 측정 가능한 사용성 개선을 조화롭게 결합하여, 디자인 언어를 더욱 생동감 넘치는 영역으로 끌어올리는 동시에 모든 사용자의 접근성과 효율성을 향상하는 것을 목표로 합니다.
마치며
이전 브런치 북 시리즈인 '디자인 시스템 : 컴포넌트 가이드'가 컴포넌트를 얕고 넓게 알아보았다면, 이번 브런치 북에서는 컴포넌트에 프로덕트의 감성을 담는 방법에 초점을 두고 알아볼 수 있을 것 같습니다.
컴포넌트에 대해 아직 전반적인 이해가 필요하거나, 컴포넌트의 종류에 대해 알고 싶으신 분은 아래 브런치 북을 참고해 주세요!
브런치 북 연재를 완결한 시점에서 구글이 시의적절한 업데이트를 해주어 흥미롭습니다. M3 Expressive에 대한 전반적인 내용은 아래 링크에서 자세히 알아보실 수 있습니다. 매주 월요일, 구글 M3 Expressive 컴포넌트 소개로 돌아오겠습니다.
