구글 머티리얼 디자인 (Material Design). 다른 디바이스에서 하나의 서비스 흐름을 보여주는 핵심 소개
사전적 의미
material
1. 직물, 천 2. (물건의) 재료 3. (특정 활동에 필요한) 자료
만든 이들의 말, 말, 말...
"안드로이드는 새로운 폼팩터를 지원할 수 있도록 확장되었습니다. 이러한 변화에 발맞추어, 구글은 모바일과 데스크탑 그리고 그 외 다양한 디바이스들을 아우르는 하나의 일관된 디자인 가이드라인을 공개하였습니다. 바로 머티리얼 디자인 (material design) 입니다. 머티리얼 디자인은 질감이 느껴지는 표면 (tactile surfaces) 과 대담하고 선명한 그래픽 디자인 (bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 합니다."
Nicholas Jitkoff, Google’s lead Designer
“진짜 종이와는 다르게, 이 디지털 물질은 확장하고 변형될수 있다. 이 물질은 물리적인 표면과 모서리를 가진다. 이음새와 그림자는 터치할 수 있다는 의미를 가진다.”
Matias Duarte, leads the Android Design team at Google
“우리가 무언가를 만들 때 수천 년 동안 축적된 기술을 적용한다. 그러나 소프트웨어 디자인의 기술은 이제 시작이다.”
“우리는 한 발 물러서 생각해 보았다. 모든 소프트웨어를 살피고, 질문해 보았다. 이것은 무엇으로 만들어졌을까?”
Jon Wiley, Google’s Principal Designer
현실성을 복원하다.
그간 애플이 스큐어모피즘을 통해 디지털 세계에 현실과 같은 감각을 적용하려 했고 이는 낯선 디지털 환경을 접하는 사용자에게 아날로그 기억을 활용하여 높은 어포던스(Affordances, 행동유도성)를 확보할 수 있었고 이는 결국 사용자 편의성이 증대되는 결과를 낳았다.
ipad 팟캐스트 스크린샷.
스큐어모피즘을 통하여 높은 Affordances(행동 유도성)을 확보
하지만 테이프가 돌아가며 소리를 내는 시각적 정보는기능 및 행동 유도와 관련이 없다.
하지만 디지털 세계의 사용자 경험이 늘어나고 다양하고 복잡한 정보를 동시에 전달하게 되면서 스큐어모피즘은 한계에 부딪히게 되었다. 전달하고자 하는 정보와 무관한 시각적 장치가 많아 사용자가 받는 시각 정보가 많았고 이런 과잉 정보로 인해 직관적이지 못하고 사용자 편의성이 떨어지는 문제가 발생했다. 결국 현재 디지털에서 스큐어모피즘은 스스로의 한계 때문에 자취를 감추었고 그와 동시에 스큐어모피즘이 갖고 있는 한계를 보완할 수 있는 Flat하게 디자인하는 것이 2014년의 트랜드였다.Flat(평평한)한 디자인은 불필요한 정보가 없어 직관적이고 명료해서 빠르게 인식하고 판단하는 데 유리했기 때문이다.
하지만 직관적이고 명료하다는 것이 높은 어포던스를 확보한다는 것은 아니다. 갑자기 바뀐 단조로움에 때문에 이것이 누르는 버튼인지 읽는 텍스트인지 이해하기 어려운 현상이 발생했고 이를 구분하고 행동하는 데 지연되다 보니 Flat Scheme에 대한 거부감이 드는 사용자도 늘어났다.
앞서 언급한 스큐어모피즘의 단점인 불필요한 시각적 장치를 배제하면서 장점인 물리적 감각을 구현하여 Flat Scheme에 높은 어포던스를 확보하는 새로운 디지털 디자인 언어를 구축하는 것이 바로 머티리얼 디자인의 제작 핵심이다.
실제 종이와 유사하게
픽셀을 만질 수 있는 어떤 ‘물질’로 규정하는 일은 가상 세계에 동떨어진 어떤 것이 아니라 우리가 익숙하게 다뤄왔던 현실의 어떤 것과 비슷한 느낌을 주기 위함이다. 구글의 디자이너들은 그 해법을 종이(paper)와 잉크(ink)에서 찾았다.
종이 위에 떨어지는 빛과 그림자,
잉크 방울이 떨어질 때 퍼지는 움직임
이런 기본적인 재료들을 사용할 때 발생하는 움직임과 상호작용을 디지털에 적용하는 것을 중점으로 두었다. 이로 인해 사용자가 터치스크린 기기에 친숙함을 느끼고 편의성을 향상시킨다.
픽셀을 종이처럼, 여러 장치로 현실성 있는 종이의 물리적 감각을 강조한 Card Stack UI는 머티리얼 디자인을 정의하는 중요한 개념이다. 물론 이 방식은 새로운 방식의 접근은 아니다. 이미 facebook이나 Pinterest 등 단위 콘텐츠로 서비스를 제공하는 UI에서 선호도가 높았던 방식이다. 하지만 구글은 한 발 더 나아가 그림자를 이용하여 UI 요소들이 진짜 카드(종이 질감의)처럼 보이도록 구현했다. 마치 실제 종이로 인터페이스를 만드는 것 처럼 말이다. 구글의 이런 접근은 모든 디자인 트랜드가 평평함(Flat)을 강조하며 디지털 UX에서 실종되다시피 한 깊이 값(Elevation)을 부활시켰을 뿐만 아니라 계층 구조를 통하여 어포던스를 보완했다.
Card Stack UI 구조
마치 종이로 겹겹히 쌓아 만든 인터페이스의 느낌을 표현한다.
디지털 물리학
머티리얼 디자인의 큰 원칙 중 하나, 구글이 가진 디지털 왕국에 가상 물리 감각을 구축하는 것이다. 사용자에게 어떠한 관계성을 보여주거나 느끼게 하는 것은 UX에서 중요한 부분이다. 이런 관계성이 직관적인 app을 구현하는 중요한 장치이기 때문이다. 머티리얼 디자인은 사용자들이 직관에 의해 쉽게 사용할 수 있도록 UI안에 시각적인 관계를 만들고자 했다. 그리고 그것을 현실의 물리법칙을 적용하여 독특한 애니메이션, 그림자, 색상, 서체로 이런 관계성을 현실화했다.
특히 중점을 둔 것은 움직임이다.
이전에는 움직이는 오브젝트의 속도감이 시작-중간-끝이 항상 일정했다면 머티리얼 디자인에서는 실제로 공을 하늘로 던질 때와 같은 운동의 법칙이 적용되어 사용자에게 좀 더 현실적인 움직임을 제공하도록 강조한다.
또 이런 질량과 무게를 강조한 현실적 움직임 뿐만 아니라 사용자가 터치했을 때 질감과 형태의 변화를 다양하게 제공하여 사용자에게 뚜렷하고 부드럽게, 미려하고 논리적인 상호 작용을 한다.
이렇게 사용자와 신뢰성 있는 관계를 구축하는 것, 이것이 구글이 디지털 물리 감각을 만들려고 하는 가장 큰 목적이다.
곡선 그래프로 본 움직임.
현실성을 강조하기 위해 빠른 가속과 부드러운 감속을 구현한다.
구글뿐만 아니라 세계적인 거대 회사들이 IoT(Internet Of Things)에 미래가 있음을 증명하는 행보를 계속 보이고 있다.
작은 시계부터 커다란 TV까지 다양한 종류의 디바이스와 화면 크기를 소화할 수 있는 디자인 플랫폼이 필요했다는 구글, 어쩌면 제한된 디스플레이를 넘어 주변 모든 것에 Google 플랫폼을 침투시키고 Google이 제시한 모든 사용자 경험(UX)이 인간의 삶에 표준 플랫폼이 되는 세상을 꿈꾸고 실현하는 것은 아닐까?
구글이 공개한 다음세대의 웹을 위한 UI 툴킷, Polymer
https://www.polymer-project.org
이런 목표에 사용자와의 인터페이스가 되는 디자인의 중요성을 누구보다도 잘 아는 그들이 야심 차게 발표한 것이 바로 머티리얼 디자인이다.
결국 머티리얼 디자인은 구글의 다양한 기기와 서비스를 하나로 묶기 위한 방법이다.이 디자인의 기반에는 여러 기기들을 사용할 때 끊김이 없는 사용 흐름을 위한 똑똑한 기술들이 담겨있다. 단순히 디바이스를 넘나드는 흐름이 아닌 구글의 다른 서비스들을 마치 하나의 서비스처럼 느낄 수 있도록 설계하고 만들어 나간다는 점이다.
예를 들면 메일과 캘린더, 주소록과 같은 서로 다른 서비스를 마치 하나의 서비스로 인식할 수 있도록 흐름을 이어주는 것, 그래서 사용하지 않았던 다른 구글의 서비스를 마치 사용했던 서비스처럼 바로 사용할 수 있는 그런 경험을 주변의 모든 환경에 적용한다면(구글의 야심이 실현된다면) 앞으로 머티리얼 디자인은 인터랙션 디자인의 처음으로 축척된 경험 사례로 꼽히지 않을까?
머티리얼 디자인이 적용된 서비스의 다양한 디바이스 형태.
언제 어디서나 일관성 있는 모습으로
'UI 디자인 > Android' 카테고리의 다른 글
[안드로이드 디자인]안드로이드 컬러 알파(alpha)값(투명도) 계산기 (2) | 2016.06.02 |
---|---|
[안드로이드 디자인]텍스트 줄 간격 설정에 대한 가이드는?(lineSpacing) (5) | 2016.01.22 |
개발 협업을 위한 안드로이드 디자인 가이드 #02 (27) | 2015.08.24 |
개발 협업을 위한 안드로이드 디자인 가이드 #01 (34) | 2015.03.17 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.