brunch

매거진 UX 디자인의 모든 것

라이킷 50 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Nov 20. 2017

머티리얼 디자인과 미스터리 미트 내비게이션 문제

UX 디자인 배우기 #123

Today UX 아티클

Material Design and the Mystery Meat Navigation Problem를 번역한 글입니다.

2016년 3월, 구글은 머티리얼 디자인(MaterialDesign)을 업데이트하면서 하단 내비게이션 바를 머티리얼 디자인 UI 라이브러리에 추가하였습니다. 이 새로운 바는 앱의 하단에 배치되며, 유저가 앱에서 상위 레벨의 페이지를 오갈 수 있도록 해주는 3개에서 5개 정도의 아이콘이 들어갑니다.

“Bottom navigation” officially added to Material Design guidelines

Bottom navigation has been added to Google's Material Design guidelines, meaning you'll soon begin seeing it beyond just Google+ and Google Photos.

www.androidauthority.com

익숙하지 않습니까? 하단 내비게이션 바가 이미 몇 년 전부터 iOS의 UI라이브러리에 들어가 있었기 때문입니다 (iOS에서는 탭 바(tab bars)라고 부릅니다).

좌: 머티리얼 디자인의 하단 내비게이션 바 / 우: iOS의 탭 바

하단 내비게이션 바는 햄버거 메뉴보다 더 좋은 대체방법이기 때문에 이것이 구글의 머티리얼 디자인에 추가되었다는 일은 좋은 소식이어야 할 겁니다. 하지만 구글 버전의 하단 내비게이션에는 심각한 문제가 있습니다. 이 내비게이션이 미스터리 미트 내비게이션(mystery meat nevigation)이라는 겁니다.

여러분이 안드로이드 유저 건, 디자이너 건, 개발 자건 상관없이, 여러분에게 문제가 될 겁니다.

미스터리 미트 내비게이션이란 무엇이며, 왜 그렇게 안 좋은 걸까요?

미스터리 미트 내비게이션은 1998년 유명한 웹사이트 Web Pages That Suck의 VincentFlanders가 처음 사용하기 시작한 용어입니다. 어떤 기능을 하는 버튼이나 링크인지 알아볼 수 없을 때 사용됩니다. 어떤 기능인지 파악하려면 눌러보는 방법밖에 없는 경우죠.

(“미스터리 미트”라는 표현은 본래 미국의 공립학교 급식에서 나오는 고기에서 유래된 말로, 너무 가공되어서 어떤 고기인지 알아볼 수 없는 고기를 나타내는 표현입니다.)

미스터리 미트 네비게이션 사례 | Source

미스터리 미트 내비게이션은 기능(function)보다 형식(form)을 우선순위에 두는 디자인의 특징입니다. 이는 나쁜 UX 디자인입니다. 사용자 경험을 희생하면서 심미성을 강조하고 있기 때문입니다. 유저가 길을 찾는 태스크를 할 때 버튼의 의미를 추측해야 하기 때문에 인지부하를 더하게 됩니다. 유저가 추측을 하게 만들었다면, 여러분이 잘못한 것입니다.

여러분은 정체를 알 수 없는 ‘미스터리 미트’를 먹고 싶지 않을 겁니다. 마찬가지로 유저는 미스터리 버튼을 클릭하고 싶지 않을 겁니다.

스트라이크 1. 안드로이드 롤리팝 내비게이션 바

머티리얼 디자인이 만든 최초의 미스터리 미트 내비게이션 문제는 2014년 안드로이드 롤리팝에서 나타났습니다.

안드로이드 롤리팝은 머티리얼 디자인이 데뷔했던 콘퍼런스에서 소개되었는데, 리 디자인된 UI를 구글의 새로운 디자인 언어와 매치해 볼 수 있었습니다.

초기 안드로이드 버전의 네비게이션 바

당시 새롭게 디자인된 UI 요소 중 하나가 내비게이션 바였는데, 뒤로 가기, 홈, 메뉴 버튼이 하드웨어 버튼으로 제공되지 않고 안드로이드 OS 하단에 고정된 바로 제공되었습니다.

안드로이드 롤리팝에서는 이 내비게이션 바가 이렇게 다시 디자인됩니다.

네비게이션바, 안드로이드 롤리팝과 그 이후 버전

문제가 보이시나요?

이전 디자인은 심미적으로 덜 매력적이긴 했지만, 직관적이었습니다. 뒤로 가기와 홈 아이콘은 텍스트 레이블이 없어도 이해할 수 있었죠. 세 번째 아이콘은 살짝 미스터리 미트 같긴 했지만 전반적으로 처음 내비게이션의 UX는 그렇게 나쁘지 않았습니다.

반면 새롭게 디자인된 바는 굉장히 예쁘죠. 정삼각형과 원과 정사각형은 기하학적으로 완벽함의 상징입니다. 하지만 동시에 굉장히 유저 친화적이지 않기도 합니다. 추상적이죠. 내비게이션 컨트롤은 절대 추상적이면 안됩니다. 미스터리 미트 내비게이션의 특성을 전부 담고 있다고 보면 됩니다.

삼각형 아이콘은 아마 “뒤로라기” 화살표를 나타낸 것 같지만, 원과 정사각형은 내비게이션 컨트롤과 관련하여 무엇을 의미하는 걸까요?

위의 네비게이션 바 아이콘 이해하기

스트라이크 2: 플로팅 액션 버튼

플로팅 액션 버튼(floating action button)은 앱에서 다른 UI 요소 위에 보이는 특별한 버튼입니다. 이상적으로는, 앱의 주요 액션을 촉진하는 데 사용되도록 만들어진 것이죠.

플로팅 액션 버튼의 스펙 | Source

플로팅 액션 버튼 역시 미스터리 미트 내비게이션의 문제를 담고 있습니다. 디자인을 살펴보면, 플로팅 액션 버튼은 아이콘을 담고 있는 동그라미 모양입니다. 순전히 아이콘만 사용된 버튼으로, 텍스트 레이블이 들어갈 자리는 없습니다.

문제는 아이콘이 다양하게 해석될 여지가 있기 때문에 그 의미를 파악하기가 매우 어렵다는 점입니다. 우리는 문화나 과거 경험을 통해 아이콘을 해석합니다. 불행하게도 디자이너들은 (특히 머티리얼 디자이너들은)이 진실을 외면하려고 하는 것 같습니다.

아이콘만 사용한 버튼이 나쁜 아이디어라는 증거가 필요하신 가요? 수수께끼 게임을 해봅시다.

아래는 머티리얼 디자인 가이드라인에 따라 봤을 때 플로팅 액션 버튼으로 사용될 수 있는 버튼 리스트입니다. 각 버튼의 의미를 예상할 수 있겠습니까?

미스터리 버튼 1

자, 준비 운동하는 의미에서 간단한 것부터 시작해봅시다. 이건 “길 찾기(Directions)” 버튼이었습니다.

미스터리 버튼2

이건 어떤가요? iOS나 맥 유저라면, “사파리”라고 할 것입니다. 사실은 “탐색(Explore)” 버튼입니다.

미스터리 버튼3

점점 재미있어(혹은 어려워) 지네요! “연락처 열기”일까요? 아니면 “도와주세요, 누가 절 쫓아와요”일까요? 아마 “친구에게 전화 걸기” 버튼일 겁니다.

미스터리 버튼4

잠깐만요, 이게 “연락처 열기” 버튼인 것 같은데요, 그렇지 않나요? 아니면 말풍선 안에 사람이 있으니까 “친구 뒷담 하기” 버튼일까요?

마지막 라운드에 들어갈 준비가 되셨나요? 다음은 최악의 (그리고 가장 많이 쓰이는) 아이콘입니다.

미스터리 버튼 5

“+” 버튼은 이해하기 쉬울 거라고 생각할 수도 있습니다. 분명 “추가하기” 액션을 하는 버튼일 겁니다. 하지만 무엇을 추가하는 건가요?

무엇을 추가하느냐. 이게 바로 이 버튼의 문제입니다. 유저가 이런 질문을 던져야 한다면, 그 버튼은 공식적으로 미스터리 미트가 되는 겁니다. 슬프게도, 머티리얼 디자인 앱의 개발자들과 디자이너들은 “+” 플로팅 액션 버튼과 사랑에 빠진 것 같습니다.

“+” 버튼은 이해하기 매우 쉬워 보인다는 이유 때문에 가장 남용되는 플로팅 액션 버튼이 되었습니다. 구글의 인박스 앱에서 “+” 플로팅 버튼을 누르면 보이는 추가적인 버튼들을 생각해보세요. 이는 유저가 예상했던 것이 아닐 겁니다.

“+” 버튼은 더 많은 버튼이 보이는 메뉴인 건가요…?

상황을 더 악화시키는 것은 여러 앱에서 같은 버튼이 서로 다른 의미로 사용되고 있다는 점입니다. 구글은 연필 모양 아이콘은 “이메일 작성하기”의 의미로 인박스와 지메일 앱에서 사용했지만, 사진 앱 스냅 시드(Snapseed)에서는 “편집하기”를 나타내는 데 사용되었습니다.

같은 아이콘, 다른 의미. 지메일과 인박스 앱에서는 “이메일 작성하기”, 스냅 시드 앱에서는 “편집하기”로 사용합니다.

플로팅 액션 버튼은 주요 액션에 유저가 쉽게 접근하게 해주기 위해 만들어진 것이었습니다. 하지만 그렇게 되지 못했습니다. 아이콘만 사용한 버튼은 미스터리 미트가 되기 쉽기 때문입니다.

플로팅 액션 버튼에 대해 더 알고 싶으시다면 아래 글을 참고하세요.

Material Design: Why the Floating Action Button is bad UX design

Material Design is a design language introduced by Google a year ago, and represents the company’s bold attempt at creating a unified user…

medium.com

스트라이크 3. 새로운 하단 내비게이션 바

이렇게 2016년 3월 소개된 하단 내비게이션 바가 등장하기까지의 역사를 살펴보았습니다.

버튼이 3개 들어간 하단 내비게이션 바의 경우, 구글 가이드라인에서는 텍스트 레이블과 아이콘이 모두 보여야 한다고 명시하고 있습니다. 아직까진 좋습니다. 여기엔 미스터리 미트가 없네요.

버튼이 3개 들어간 네비게이션 바. 아직까진 좋습니다.

버튼이 4개에서 5개 정도 들어간 하단 내비게이션의 경우, 구글에서는 활성화되지 않은 뷰는 아이콘으로만 보여주라고 얘기합니다.

버튼이 4개 들어간 하단 네비게이션 바. 미스터리 미트가 되었습니다.

플로팅 액션 버튼 아이콘의 의미를 파악하기가 얼마나 어려웠는지 기억하시죠? 이제 앱에서 길을 찾는 데 사용되는 아이콘들의 의미를 추측해보세요.

이건 그냥 나쁜 UX 디자인입니다. 사실, 닐슨 노먼 그룹은 아이콘에 텍스트 레이블이 필요하다고 주장합니다. 특히 내비게이션 아이콘의 경우는 더 그렇다고 합니다.

“거의 모든 아이콘이 직면한 애매모호성을 극복하는 데 도움을 주기 위해서는, 반드시 텍스트 레이블이 아이콘과 함께 제공되어야 합니다. 해당 맥락에서 아이콘이 가지는 의미를 분명하기 보여주기 위해서입니다. 내비게이션 아이콘의 경우, 레이블은 특히 대단히 중요합니다.”

미스터리 미트를 용납한 머티리얼 디자인의 최신 UI 컴포넌트는 실망스러울 뿐만 아니라 이상하기도 합니다. 버튼이 3개인 경우는 레이블이 꼭 있어야 한다면서 왜 4-5개인 경우에는 숨겨야 하나요?

아마 공간 부족 때문이라고 할 겁니다.

그런데 iOS 탭 바에는 5개의 아이콘이 들어가는데도 아이콘과 각 아이콘의 텍스트 레이블을 전부 보입니다. 그러니 공간 부족은 타당한 근거가 되지 못합니다.

iOS의 앱스토어, 시계 앱, 음악 앱 탭 바. 5개의 아이콘과 텍스트 레이블

구글은 아이콘이 충분히 내비게이션 액션을 대표할 수 있도록 아이콘을 만들거나 (이것도 좋은 방법은 아니지만), 심미적 깔끔함을 사용성보다 더 중요하게 여깁니다 (이건 더 최악이죠). 어떤 결정을 내리건, 그들의 결정은 수백만 안드로이드 유저의 사용자 경험을 나쁘게 만들 것입니다.

‘머티리얼 디자인’과‘기능보다 중요한 형식’

머티리얼 디자인이 2014년도 론칭되었을 때, 화려한 팡파르가 울렸었습니다. 강렬했으며, 플랫 디자인 트렌드를 따르면서도 그보다 한 발 앞서간 것이었죠. 강렬한 색상과 애니메이션의 조합은 예뻐 보이게 만들어줬습니다.

“예쁘게만들어요!” – 머티리얼 디자인 디자이너 | Source

하지만 좀 과하게 예뻤던 것 같습니다. 머티리얼 디자인 작업을 하면서 디자이너들이 너무 거기에 몰입했던 것 같습니다.

몇 번이고 되풀이해서, 중요 버튼과 바에 대한 구글의 가이드라인은 기능보다 형식을 더 우선순위에 둔 것 같습니다. 기하학적인 아름다움이 안드로이드 내비게이션 바의 인지 가능성보다 더 중요하게 여겨진 것이죠. 심미적인 간결성은 플로팅 액션 버튼에서 달성되긴 했지만, 오히려 유저의 프로세스에 혼란을 주는 결과를 초래했습니다.

마지막으로, 하단 내비게이션 바에 쓰인 의미 있는 레이블보다는 비주얼적인 깔끔함이 더 중요하게 여겨졌습니다.

그렇다고 해서 미스터리 미트 내비게이션이 구글만의 문제라는 얘기는 아닙니다. 물론, iOS 앱에서도 미스터리 미트는 찾을 수 있습니다. 하지만 보통은 중요한 내비게이션 컨트롤이나 버튼에서는 잘 사용되지 않습니다. 그리고 iOS는 미스터리 미트를 양산하는 디자인 가이드라인을 만들지도 않았습니다.