사람들은 매일 일상 속에서 물질을 사용합니다. 그리고 우리는 사람들에게 소프트웨어도 같은 방식으로 사용할 수 있다는 점을 이해시키고 싶었죠.
'머티리얼 디자인(Material design)'이란 안드로이드 앱 개발사를 위해 구글이 명시해놓은 디자인 가이드라인이다. 안드로이드 OS를 기반으로 하는 디지털 디바이스의 개수는 점점 늘어나고 있다. 구글이 TV, 자동차, 모바일 등 다양한 분야의 기기를 생산하고 있기 때문이다. 구글은 사용자가 다양한 안드로이드 기기를 사용하면서도 일관된 사용자 경험을 느끼게 하기 위해 이 디자인 지침서를 작년 6월 구글 개발자 회의에서 처음 소개했다.
스큐어모피즘 VS 플랫 디자인 VS 머티리얼 디자인
iOS의 인터페이스(UI)가 갑자기 전반적으로 판판해져서 낯설었던 시기가 한 번 있었다. iOS6에서 iOS7으로 넘어갔던 2013년 경이었다. iOS6 때까지 존재하는 사물의 모양을 그대로 본뜨는 디자인 양식인 스큐어모피즘(skeuomorphism)을 채택했던 애플은 이때를 기점으로 플랫(flat) 디자인으로 과감하게 방향을 틀었다. 조너선 아이브의 미니멀리즘 철학이 확실히 반영된 결과였다.
스큐어모피즘과 플랫 디자인의 차이는 명확하다. 스큐어모피즘을 활용했던 애플은 아이북스 앱에는 나무 질감을 그대로 살린 책장을 그려 넣었고, 카메라 아이콘에는 렌즈에 비친 빛까지 모두 표현했다. 메모장 상단에는 가죽 노트를 꿰맨 바늘땀까지 그려져 있었다.
스큐어모피즘이 실제 세상의 사물을 그대로 묘사한 정밀화라면, 플랫 디자인은 디지털 세계관 속에만 존재하는 추상화다. 스큐어모피즘을 대표하는 볼록한 3D 효과나 그라디언트, 세밀한 장식 등을 모두 제거한 것이 특징이다. 단순하고 선명한 표현으로 사용자의 기능성을 우선으로 했다.
반면 머티리얼 디자인은 단순히 플랫 디자인의 확장 버전이라고 정의되기도하고, 플랫 디자인과 스큐어모피즘의 혼합체라고 이해되기도 한다. 플랫 디자인과 머티리얼 디자인의 차이를 확실하게 선 긋기가 애매하기 때문이다. 머티리얼 디자인의 차별점은 다음과 같다.
먼저 플랫 디자인이 X와 Y축만 사용하는 2차원적 표현을 한다면, 머티리얼 디자인은 입체감을 부여하는 Z축을 더했다. 즉 머티리얼 디자인에서는 디지털 종이들이 층위를 이룬다. 각각의 표면 뒤에는 그림자가 생성되어 깊이감을 드러낸다. 구글은 머티리얼 디자인 구상 단계에서, 실제 종이와 그림자가 만들어내는 질감을 표현하기 위해 직접 종이를 자르고 45도 그림자를 만들어 관찰하기도 했다. 구글은 머티리얼 디자인 페이지를 통해 "이러한 깊이감이 정보 사이의 계급과 의미, 중점을 만들어낸다"고 밝혔다.
플랫 디자인에 비해 더 역동적인 애니메이션의 활용 역시 머티리얼 디자인의 특징이다. 세심하게 사용된 모션을 통해 사용자는 현재 앱의 상태와 일어나고 있는 일에 대해 쉽게 알아챌 수 있다.
머티리얼 디자인의 세부 스타일 요소 3가지
 |
 |
 |
1. 플로팅 액션 버튼 (FAB)
그야말로 떠 있는 액션 버튼이다. 디지털 종이 최상단에 떠 있는 이 동그란 버튼은, 각 앱의 핵심 기능을 담게 된다. 사진 앱이라면 '사진 찍기' 기능이, 쇼핑 앱이라면 '장바구니 담기' 기능이 들어갈 수 있는 것이다. 구글은 "네 다섯 개의 복잡한 메뉴 버튼을 없애고, 딱 하나만 남겨라"고 앱 디자이너들에게 주문했다.
2. 내비게이션 드로어 (Navigation drawer)
메인 화면에 넣기 어려운 주요 정보나 개인 설정 등을 넣을 수 있는 곳으로 왼쪽 상단의 메뉴 아이콘을 이용해 빠르게 접근할 수 있다.
3. 히어로 전환 애니메이션
일반적으로 머티리얼 디자인에서 UI 와 콘텐츠 요소는 갑자기 나타나거나 사라지지 않으며, 자신의 위치로 자연스럽게 이동해야 한다. 어떤 아이템을 클릭하여 상세 화면으로 전환되는 경우, 옆의 그림과 같이 선택된 아이템이 목록 화면에서 상세 화면으로 자연스럽게 전환되는 '히어로(Hero) 전환' 을 적용한다. (더 자세한 가이드라인 보러 가기)
국내 스타트업의 머티리얼 디자인 성공 사례
머티리얼 디자인을 가장 먼저 받아들이고 있는 곳은 미국과 유럽이지만, 국내 개발사들도 적극적으로 이를 적용하는 추세다. 한국은 미국에 이어 두 번째로 구글플레이 내에 머티리얼 디자인 앱 콜렉션 코너를 만들기도 했다.
국내 스타트업도 머티리얼 디자인을 적용해 실제 신규 사용자 유입이나 트래픽 증가 측면에서 이득을 봤다.
명합 앱 리멤버는 UX 변경 후 5개월 동안 일평균 앱 다운로드 수는 10%, 활성사용자 당 화면 조회 수는 20%가 증가했다. 화장품 리뷰 앱 언니의 파우치는 한 달 여간의 디자인 변경 끝에 콘텐츠 조회수는 31%, 앱 체류 시간은 1분 2초가 증가했다. 가장 큰 증가폭을 보인 요리 레시피 앱 이밥차는 일평균 페이지뷰가 66%, 앱 신규 다운로드 수가 17% 증가했다.
머티리얼 디자인의 레이아웃을 적용한 명합 앱 '리멤버' (자료 제공: 드라마앤컴퍼니)
화장품 리뷰 앱 '언니의 파우치'의 머티리얼 디자인 적용 사례 (자료제공: 라이클)
머터리얼 디자인 적용 후, 요리 레시피 앱 '이밥차'의 수치 변화 (자료제공: 메조미디어)
구글의 머티리얼 디자인은 경험과 인력 부족으로 앱 디자인에 애를 먹는 초기 스타트업에게는 유용한 지침서가 될 수 있다. 고민의 시간을 줄여주면서도, 운영 체제에 최적화된 UI와 UX를 구현할 수 있기 때문이다. 사용자 입장에서도 일관성 있는 UI를 경험하게 되므로, 따로 앱 사용법을 배울 필요가 없다.
그러나 제한된 틀이 존재한다는 것은 그만큼 각 앱의 개성과 특징을 살려낼 수 있는 여지가 줄어든다는 점을 의미하기도 한다. 이에 대해 구글 플레이 사업개발팀 정지연 팀장은 "구글은 앱 개발사에게 A부터 Z까지 머터리얼 디자인을 따르길 강요하지는 않고 있다"면서, "각 개발사가 사용자 경험에 대해 고민한 뒤 필요한 부분을 차용해 쓰도록 조언하고 있다"고 밝혔다.
▲구글의 머티리얼 디자인 제작 과정
