본문 바로가기
UXUI 아티클 분석

[UXUI 아티클 분석 10] 구글이 디자인에 감성을 담는 방법

by mimi30 2025. 5. 29.

https://brunch.co.kr/@hnjnkm/45

 

01화 구글이 디자인에 감성을 담는 방법

구글 M3 Expressive 업데이트 알아보기 | 프롤로그 구글이 자사의 디자인 시스템인 Material Design 3(이하 M3)의 업데이트인 Expressive를 발표했습니다. Expressive는 Material을 기반으로 하는 자사의 디자인을

brunch.co.kr

 

 

 

Material 3 Expressive 

표현력이 풍부한 인터페이스로 하여금 감정이나 분위기를 불러일으켜 유대감은 강화하고자 함.

"M4"가 아님 감정적으로 강렬한 UX를 구축하기 위한 새 기능, 새 컴포넌트, 디자인 전략의 집합

 

구글이 표현적인 디자인을 시도하는 이유

▷ 모든 연령대의 사람들은 표현력이 풍부한 디자인을 선호

▷ 표현적인(Expressive) 디자인은 장난기, 에너지, 창의성, 친근감 등 사용자 속성에 꾸준히 높은 점수를 받음

▷ 사용자는 M3 Expressive 컴포넌트와 기술을 사용하는 제품을 전환할 가능성이 더 높음

▷ 표현력이 풍부한 디자인은 사용하기 쉽고, 표현력이 풍부한 화면에서 주요 UI 요소를 최대 4배 더 빨리 찾을 수 있음

가장 주요한 목적

▷ 풍부하고 표현적인 디자인을 통해, 사용자가 더욱 빠르고 쉽게 목적을 달성할 수 있도록 하는 것

 

표현적인 컴포넌트

 

더 많은 기능, 모양 옵션, 강조된 텍스트 등의 표현적 업데이트 추가

 

운동 물리학 시스템

스프링 모션을 활용하여 인터랙션과 전환을 더욱 생동감 있고, 유동적이고, 자연스럽게 느끼게 함

명확하고 예측 가능하게 만듦

 

시각적으로 강조된 타이포그래피

정보 계층을 강화하고, 중요한 작업이나 읽지 않은 메시지와 같은 정보에 주의를 환기 시킴

 

확장된 쉐입 라이브러리

이미지 자르기 및 아바타와 같은 요소에 장식적인 디테일 추가 가능

한 모양에서 다른 모양으로 부드럽게 전환할 수 있음

 

생생한 색상 구성표

계층 구조를 더욱 뚜렷하게 하고 주요 동작을 명확하게 표현

풍부한 시각적 스타일은 개인화와 역동적인 색상 지원

 


각각의 내용들에 어떤 목적을 가지고 왜 이렇게 구성했는지 정확히 알 수 없어서 아쉬웠음

'4배가 더 빨라졌다'는 결과에 대해 어떤 테스트를 어떻게 진행했는지 구체적인 근거를 한 글에서 알고 싶었다

 

https://design.google/library/expressive-material-design-google-research?utm_source=blog&utm_medium=referral&utm_campaign=IO25

사용성 테스트에서 일반적으로 노년층이 주요 UI 요소를 시각적으로 찾는 데 시간이 더 오래 걸린다는 것을 발견

M3 Expressive 버전을 사용하면 고정 시간의 노화 효과가 극적으로 지워져 45세 이상의 사용자가 젊은 사용자와 동등한 성능을 발휘할 수 있었음

더 커진 버튼, 고대비 시각적 억제 속성> 모든 사람이 더 유용하게 사용할 수 있도록 함

처음에는 디자인이 조금 촌스럽다고 느꼈지만, 모든 연령대 사용자가 더 쉽게 사용할 수 있었다는 결과를 보고 생각이 바뀜. 다양한 연령대를 한 번에 사로잡는 게 어려운 일인데, 사용자 친화적인 방향으로 똑똑하게 디자인을 강화한 것이었구나 싶었음