M3 Expressive Design 겉핥기
Better, Easier, Emotional UX
요 근래에 구글의 로고에 그라데이션이 생겼다는 소식으로 떠들썩한데 구글 디자인 시스템인 M3에도 변화가 찾아왔습니다. 애플의 HGI와 함께 디자인 시스템계의 양대산맥인데요.
맥북 뒤에 에어가 붙는 것처럼, M3 뒤에 Expressive가 붙었네요.
기존에 M3에 있었던 emphasis를 더 극적인 형태로 표현하는 특징이 있습니다.
https://m3.material.io/components/button-groups/overview#84444632-5a90-4781-89fa-34dec63fe0b9위 이미지는 새로 추가된 'Button groups의 standard와 connected'인데 눌림과 눌리지 않음을 아주 강하게 표현했다는 것을 알 수 있어요. Expressive는 "한눈에 파악"하는 시간을 줄이기 위해 연구가 된 만큼 모양, 아이콘, 색상, 모션 등을 적극적으로 활용했다고 해요.
https://design.google/library/expressive-material-design-google-research구글의 리서치에 따르면 개성만 강해진 게 아니라 기능도 좋아졌다고 하는데요, 이메일에서 '보내기' 버튼을 인지하는 속도가 4배 빨랐다고 합니다. 버튼이 4배 커져서 그런 게 아닐까 잠깐 생각해 봤는데 10개 앱에서 테스트를 했을 때 모두 긍정적인 수치가 나왔다고 합니다.
https://design.google/library/expressive-material-design-google-researchFixation: 시선이 이리저리 튀다가 0.1초 이상 머무는 구간
Expressive 한 디자인은 그렇지 않은 디자인 보다 "중요 액션의 진입점"을 더 빠르게 인지할 수 있게 도와줬다고 합니다. 45+ 연령 그룹이 Expressive 디자인에서 25-45 연령 그룹보다 짧은 시간에 인지한 게 재미있는 포인트네요.
맥락은 중요하다.
https://design.google/library/expressive-material-design-google-research이 예시를 보면 expressive가 '기능 경계선'을 넘어버리면 무슨 현상이 생기는지를 알 수 있습니다.
스타일을 살리겠다고 메타데이터 라벨을 다 빼버리니까 무슨 기능을 하는 화면인지를 모르겠네요.
Spotify의 Wrapped 같기도 하고요. 즉 기능보다는 감성의 영역으로 넘어간 것 같네요.
결론은
표현은 기능 맥락 위에서만 빛납니다. 행동이 중요한 화면에서는 절제하고 감성적이어야 하는 화면에서는 아낌없이 표현하는 접근 방식이 필요할 것 같습니다.
구글 디자인 블로그와 M3 Expressive 홈페이지에서 직접 살펴보시는 걸 추천드립니다.
제가 캐서 먹는 건 잘하는데 이걸 다른 사람에게 설명을 잘할 능력이 없습니다.
https://design.google/library/expressive-material-design-google-research
