더 나은, 더 쉬운, 감성적인 UX
구글 Expressive 가이드를 마무리하며
M3 Expressive 컴포넌트 중 일부에필로그
‘구글 Expressive 가이드’ 시리즈는 25년 5월에 업데이트된 Material Design 3 Expressive의 주요 컴포넌트 변화를 설명한 글입니다. 전체 14개 컴포넌트 중에서도 변화의 폭이 크고 대표적인 6가지를 중심으로, 일반적인 컴포넌트를 어떻게 표현적으로 구현할 수 있는지를 살펴보았습니다.
비록 모든 컴포넌트를 다루지는 않았지만, 보다 차별화된 사용성과 비주얼을 지닌 컴포넌트를 설계하기 위한 맥락과 방법을 전하고자 했습니다. 많은 양의 글을 작성하진 않았지만, 그 흐름을 따라가다 보니 이제 이 시리즈를 마무리할 시점이 되었다고 판단해 에필로그를 준비하게 되었습니다.
이번 글에서는 구글이 공개한 Expressive 업데이트의 여정, 그 배경에 담긴 생각들을 함께 풀어보고자 합니다. Expresssive의 주요 컴포넌트가 궁금하다면 아래 글에서 확인하실 수 있습니다.
1️⃣ 구글의 Expressive 비하인드
Material 3 Expressive는 지금까지 구글 디자인 시스템 역사상 가장 많은 연구가 진행된 업데이트입니다. 디자인 결정을 단순히 데이터에만 의존한 방식이 아니라, 리서치·디자인·엔지니어링이 함께한 협업적 탐구를 통해 탄생했습니다.
감정을 좀 더 표현할 여지는 없을까?2022년, 당시 리서치 인턴이 구글 앱에서의 Material Design에 대한 사용자 감정 반응을 연구하던 중, 뮌헨의 한 맥주홀에서 초기 결과를 동료들에게 공유하게 되었습니다. 그 순간, “왜 우리 앱들은 이렇게 비슷하고 지루할까?”, “감정을 좀 더 표현할 여지는 없을까?”라는 전사적 디자인 논의가 촉발되었다고 합니다.
그 후 3년에 걸쳐, 그들은 수십 차례의 디자인 및 리서치 반복 과정을 통해 Material Design의 다음 진화를 모색했습니다. 전 세계 18,000명 이상의 참여자들과 함께한 46건의 독립적인 리서치 스터디, 수백 개의 디자인 테스트를 거치며, 아름다움과 사용성을 모두 갖춘 시스템을 정교하게 다듬을 수 있었습니다.
2️⃣ 컨셉 구상 단계
구글 디자인팀은 보다 표현적인 디자인 철학이 구글 제품 전반에서 어떻게 작동할 수 있을지를 고민하며, 초기 컨셉을 구상하는 단계부터 다양한 방식의 리서치를 함께 진행했습니다. 사용자의 실제 반응과 사용성을 확인하기 위해 다음과 같은 연구 방법이 활용되었습니다.
시선 추적(Eye tracking): 사용자가 어디에 주의를 두는지를 분석
설문조사 및 포커스 그룹: 다양한 디자인에 대한 감정적 반응을 수집
실험(Experiment): 선호도와 정서적 반응을 비교
사용성 테스트: 인터페이스를 얼마나 빠르게 이해하고 사용할 수 있는지 관찰
가장 먼저 시작한 것은 개별 컴포넌트에 대한 세부 리서치였습니다. 예를 들어, 프로그레스 인디케이터(Progress Indicator)의 경우 어떤 스타일이 대기 시간을 더 짧게 느끼게 하면서도 프리미엄 디바이스에 어울리는지를 검토했습니다.
새롭게 설계된 플로팅 툴 바는 눈에 잘 띄고 사용하기 쉬우며, 동시에 현대적이고 깔끔한 인상을 줄 수 있도록 여러 차례 디자인과 리서치 과정을 반복하며 다듬어졌습니다. 또한, 모든 컴포넌트는 접근성 기준과 Best Practice를 철저히 준수하도록 설계되었으며, 탭 타깃 크기나 색상 대비 같은 핵심 요소에서는 기존 기준을 넘어서는 수준까지 고려했습니다.
이러한 연구와 검증의 축적이 결국, Material Design의 다음 진화를 위한 탄탄한 구성 요소와 설계 가이드라인으로 이어졌습니다.
3️⃣ 사람들은 표현적인 디자인을 선호합니다
구글이 말하길, 디자인에 있어서 사람들은 실제로 ‘무언가를 느끼는 것’을 선호합니다. 구글 디자인 팀은 표현적인 디자인이 잘 적용된 경우, 모든 연령대에서 강한 선호도가 나타났으며, 특히 18세에서 24세 사이 사용자들은 최대 87%가 표현적 디자인을 더 선호한다는 결과를 확인했습니다.
젊을수록 반응이 좋은 표현적 디자인모든 연령층에서 긍정적인 반응이 있었지만, 특히 젊은 참여자들은 Material 3 Expressive 디자인에 가장 열정적인 반응을 보였습니다. 이들은 해당 디자인을 ‘시각적으로 매력적’이고 ‘사용하고 싶은 디자인’으로 평가했습니다.
의도한 감정적 반응을 이끌어낼 수 있도록 최적화하지만 이런 상위 수준의 선호 데이터만으로는 충분하지 않았습니다. 디자인 팀은 어떤 요소가 이러한 선호를 이끌어내는지 더 깊이 이해하고자 했습니다. 지난해 Google I/O에서 구글은 Material 팀이 디자인을 비교할 때 사용하는 속성(attributes) 세트를 소개했는데, 이 속성들은 대부분 감정과 관련된 단어들로 구성되어 있었습니다. 예를 들어, playful(장난기 있는), energetic(에너제틱한), creative(창의적인), friendly(친근한), positive vibe(긍정적인 분위기) 같은 표현들입니다.
Material 3 Expressive를 개발하는 과정에서도, 연구팀은 디자이너들과 협업하여 다양한 화면 디자인을 이러한 감성 속성에 따라 반복적으로 테스트했고, 의도한 감정적 반응을 이끌어낼 수 있도록 디자인을 최적화해 나갔습니다. 동시에 이 시스템을 통해 만들어진 디자인이 보다 현대적이고 시각적으로 매력적으로 보일 수 있도록 하는 것도 주요 목표 중 하나였습니다.
4️⃣ 표현적인 디자인은 관련성이 있다고 느껴집니다
표현적 디자인은 단순히 제품을 보기 좋게 만드는 것이 아니라, 사용자가 제품 자체를 어떻게 인식하는지를 향상할 수 있습니다. 이러한 디자인의 선호도를 측정하는 과정에서 이러한 사실이 실제로 확인되었습니다. Caleb Warren 외 연구진(2019)의 기존 연구는 어떤 제품은 모두가 원하는 트렌디하고 필수품이 되는 반면, 어떤 제품은 (동일한 기능을 갖췄음에도) 그러한 매력을 갖지 못하는 이유를 설명하는 요인들을 탐구했습니다.
표현적 디자인의 결과 더욱 현대적이고, 트렌드에 민감하고, 기존 틀에 벗어나려는 존재로 인식됩니다‘소문화(subculture) 인식’이 32% 증가한 것을 발견했는데, 이는 표현적 디자인이 브랜드를 더 ‘관련성 있고 트렌드에 민감한 존재’로 느끼게 한다는 것을 의미합니다. (감각적이고 시대 흐름을 반영한 스타일을 통해 사용자의 정서·취향·가치를 공감시켰다는 의미 같습니다.)
또한 ‘현대성(modernity)’이 34% 증가해 브랜드가 신선하고 미래지향적으로 느껴졌고, ‘반항성(rebelliousness)’은 30% 증가해 표현적 디자인이 브랜드를 대담하고 혁신적이며 기존 틀에서 벗어나려는 존재로 인식되도록 만듭니다.
5️⃣ 표현력이 풍부한 디자인은 사용하기가 더 쉽습니다
가장 중요한 것은 표현적 디자인의 핵심은 사용자 경험 향상입니다. M3 Expressive가 색상, 크기, 형태 등을 전략적으로 활용하는 방식은 오랜 디자인 원칙과 모범 사례를 바탕으로 핵심 요소에 집중하고 사용자가 더 빠르게 탐색할 수 있도록 지원합니다.
다양한 사람들을 최신 시선 추적 안경을 착용한 실험실로 데려와 Material 3 Expressive와 현재 Material 3 버전에서 무작위로 선택된 10개의 앱을 사용해 상호작용하게 했습니다. 참가자들은 M3 Expressive 디자인에서 주요 UI 요소를 최대 4배 더 빠르게 인식했으며, 이는 사용자의 주의를 화면에서 가장 중요한 부분으로 유도한다는 것을 시사합니다. 이러한 수준의 개선은 단순히 시선 고정 시간을 넘어서는 것으로, 많은 앱에서 확인되었습니다. 예를 들어, 테스트한 다양한 표현형 디자인에서 주요 동작을 탭하는 데 걸리는 시간이 몇 초 단축되었습니다.
이메일 앱 내의 더 큰 보내기 버튼이메일 앱 사례 연구는 표현 원칙의 이점을 설득력 있게 보여줍니다. 예를 들어, 새로운 디자인(오른쪽)의 보내기 버튼은 더 크고 키보드 바로 위에 배치되었으며, 시선을 끌기 위해 보조 색상을 사용했습니다. 반면, 표현이 없는 디자인은 작은 보내기 버튼을 파일 첨부와 같은 다른 컨트롤과 함께 화면 상단 툴바에 배치했습니다. 참가자들에게 "이메일 보내기"를 요청했을 때, 표현적 디자인에서 참가자들의 눈은 버튼을 4배 더 빨리 보았다고 합니다.
특히 흥미로운 점은 표현형 디자인이 모든 연령대의 사용자에게 공평한 경쟁의 장을 마련해 주는 것 같다는 점입니다. 사용성 테스트에서는 일반적으로 고령층이 주요 UI 요소를 시각적으로 찾는 데 더 오랜 시간이 걸리는 것으로 나타났습니다. 하지만 M3 표현형 버전을 사용하면 고정 시간에서 연령에 따른 영향을 극적으로 제거하여 45세 이상 사용자도 젊은 사용자와 동등한 수준의 성능을 발휘할 수 있게 되었습니다.
6️⃣ 맥락은 여전히 중요합니다
표현력이 풍부한 디자인은 흥미로운 가능성을 제공하지만, 모든 상황에 맞는 완벽한 해결책은 아닙니다. 미디어 플레이어나 이메일 앱에서는 잘 작동하는 디자인이 뱅킹 인터페이스에는 적합하지 않을 수 있습니다. 제품 제작자는 잘 정립된 UI 패턴과 표준을 준수해야 합니다.
현대적이고 흥미롭지만 사용성은 떨어지는 디자인테스트한 디자인 중 하나는 구글의 디자인 시스템의 패턴과 기준을 따르지 않았습니다. 재생목록의 경우, 익숙한 세로 스크롤 방식의 노래 목록을 앨범 아트 이미지로 마구잡이로 배열하여 대체했습니다. 사용자들은 인터페이스가 현대적이고 흥미롭다고 평가했지만, 사용성 점수는 떨어졌습니다. 또 다른 예로, 이메일 액션에서 텍스트 레이블을 제거한 결과 사용성이 저하되었습니다. 이것이 바로 표현적인 구성 요소를 사용하는 방법을 알려주는 디자인 시스템을 구축한 이유입니다. 기본적인 상호작용 패러다임이 무너지면 표현적인 디자인은 사용성 저하나 부정적인 감정으로 이어질 수 있습니다.
표현형 디자인이 선호도와 사용성을 향상했지만, 사용자의 익숙함 부족이 영향을 미쳤다는 점도 주목할 만합니다. 이는 디자이너들이 해결해야 할 과제이지만, 앞으로 몇 달 동안 이 새로운 스타일을 채택하는 앱이 점점 더 많아짐에 따라 사용자들의 익숙함이 높아질 것으로 예상됩니다.
객관적이고 명료한 Expressive의 탄생 과정
구글이 진행한 실험 중 하나인 시선 추적의 실험 결과가 실제 사용성과 완전히 비례한다고 보긴 어렵습니다. 이메일 앱의 전송 버튼처럼 사용자가 한 번 위치를 인지한 이후에는, 오히려 과도하게 눈에 띄는 디자인이 시각적 노이즈로 작용할 수도 있기 때문입니다.
구글 역시 표현력이 만능 해법은 아니라는 점을 시인합니다. 기존에 정립된 UI 패턴과 상호작용의 표준을 무시한 채 시선을 끄는 데만 집중한다면, 오히려 기본적인 사용성 패러다임을 해칠 위험이 있기 때문입니다.
이런 맥락에서 보면, M3 Expressive는 단순히 ‘표현적인 디자인이 필요하다’는 선언을 넘어, 기존의 UI 패러다임을 해치지 않는 선에서 어느 수준까지 표현력을 확장할 수 있을지를 끈질기게 탐구한 결과물이라 할 수 있습니다. 아마도 표현적인 디자인이 필요하다는 결론에 도달하는 것보다, 그 표현력을 어디까지 끌어올릴 수 있을지를 실험하고 검증하는 과정이 훨씬 더 오래 걸리고 복잡했을 것입니다.
물론 이러한 고민과 과정 자체가 일반 사용자에게 직접적으로 체감되기는 어려울 수 있습니다. 하지만 그 여정이 충분히 합리적이고 일관된 목표를 향해 설계되었다면, 결국 그 결과는 사용자 경험 속에서 자연스럽게 드러날 것이라 믿습니다.
마치며
더 자세한 내부사정을 알 수는 없지만, 구글의 M3 Expressive가 표면적으로는 훌륭한 과정 속에서 탄생된 것처럼 보입니다. 물론 과정이 좋다고 해서 반드시 결과가 좋으리라는 보장은 없고, 우리 삶에서는 종종 결과를 정해두고 과정을 유도하는 일 역시도 종종 마주한다고 생각합니다.
하지만 허술한 과정 끝에 울림 있는 결과가 나오는 일은 드물다고 생각합니다. M3 Expressive는 데이터뿐 아니라, 제작되는 과정에서도 다양한 직군의 전문가가 협업하여 검증하고 발전시키고자 한 점이 인상 깊습니다. 구글 M3 Expressive도 3년이라는 시간 동안 표현력이라는 본질에 집중하며 만들어낸 결과물이 아닐까 생각하고, 앞으로의 그 확장을 기대하며 이 시리즈를 마무리합니다.
M3 Expressive의 모션, 쉐입 등이 포함된 파운데이션도 다룰까 고민했지만, 본 시리즈는 컴포넌트에 집중하고 다음 브런치북에서 다뤄보도록 하겠습니다.
부족한 글이지만 읽어주셔서 감사드리며 지금까지 ‘구글 Expressive 가이드’였습니다. 곧 ‘디자인 시스템: 파운데이션’으로 다시 찾아뵙겠습니다.
