Material Design

구글 머터리얼 디자인

2014년 구글은 Material Design 가이드라인을 발표하였습니다. 플랫디자인 처럼보이지만, 개념이나 사용성에서는 차이를 보이는 머터리얼 디자인은 구글의 다양한 서비스를 간결하고 통일감 있게게 보여주고 있습니다.

구글은 material design의 소재의 두께나, 그림자, 움직임에도 제한을 두고 사용하고 있습니다.

머터리얼의 두께는 1dp로 모든 요소가 동일하게 적용되나, 두껍거나, 0dp의 두께는 가질 수 없도록 제한하고 있습니다. 

이러한 두께 외에 머터리얼 디자인에서 가장 돋보이는 점은 바로 Z 축을 표현한다는 점이라 할 수 있는데 종이처럼 사용되는 디자인에 Z축의 그림자를 더해 깊이감을 더하였습니다. 또한 요소의 기능에 따라 깊이를 제한하여, 일관성을 유지해 사용자들이 혼란스럽지 않도록도 와 주고 있습니다. 구글 머터리얼 디자인 가이드를 살펴보면 가장 흥미로웠던 점이 바로 해야 할 것과 하지 말아햐 할 부분을 확실히 알려주고 있다는 점이었습니다. 

단순히 말로만 설명이 되어있었다면 헷갈릴 수 있는 부분을 구글은 Do와  Don't로 나누어 정보를 주고 있기 때문에 처음 접하는 사람이라도 쉽게 이해할 수 있도록 도와주고 있습니다. 

다음으로 머터리얼디자인은 사용자의 감정과 감각을 중시합니다. 머터리얼 디자인 가이드를 보면 생각보다 많은 모션을 보여주고 있다는 걸 알 수 있습니다. 이러한 모션들은 사용자가 어떤 식의 행동을 취하는지, 현실의 물리법칙을 적용해 터치에 자연스럽게 반응하고 움직이는 것을 볼 수 있습니다.

보통 애플리케이션의 반응이 투명도로만 조정되었다면, 머터리얼 디자인은 사용자가 어느 부분을 터치하는지, 터치되는 부분부터 퍼져나가면서  실행되기 때문에 사용자들에게 맞춰져 있다는 느낌을 제공합니다. 

또한 머터리얼 디자인은 갑작스럽게 실행되는 부분을 없애고, 자연스럽게 나타나는 모션을 보여줍니다. 예를 들어 클릭한 버튼이 확대되어 다른 화면으로 전환되는 점이나, 플로팅버튼에서 다른 버튼들이 나온다는 점을 들 수 있습니다. 이런 점에서 머터리얼 디자인은 사용자의 반응을 중시하고 터치한 버튼이 어떤 기능인지 정확하고 쉽게 인지시켜 주어 시각적 연송성을 제공합니다.

다음으로 머터리얼 디자인은 사용자를 당황하게 하는 화면 전환은 피하고 있습니다. 규칙성이 없는 모션은 자제하고, 순서대로 들어오는 모션을 활용하거나 버튼 혹은 리스트가 자연스럽게 확대되고 정보를 노출한다는 점에서 갑자기 전환되는 화면이나, 연관성이 없는 모션은 지양하고 있습니다. 

이러한 모션을 통해 버튼의 개수를 줄이고, 같은 위치에 있지만 다른 기능으로 전환되는 모습을 보여주어 혼란을 줄이고, 불필요한 곳에 버튼이 있지 않도록 보여주고 있습니다.

이외에도 머터리얼 디자인은 Card UI를 논리적으로 재구축하였습니다. 핀터레스트나 페이스북과 같은 카드 형식의 UI를 정리하여 시각적으로 단순하고 깔끔한 레이아웃을 만들어 낼 수 있도록 하였습니다. 때문에 다양한 정보를 통일된 형태로 보여주고, 정확하게 알 수 있습니다.

pinterest card UI

이뿐만 아니라, 컬러에서 폰트, 아이콘에 이르기까지 모든 구성요소를 정의하고 적용하고 있다는 점이 인상 깊었습니다. 특히 비비드 한 컬러를 사용해 사용자의 시선을 사로잡고, 플랫 한 디자인이 심심하지 않도록 생기를 더해주고 있습니다. 또한 과도한 장식이나 투시는 제거해 직관적인 아이콘들을 지향하고 있습니다.

머터리얼 디자인이 가장 잘 적용되어 있다고 생각한 애플리케이션은 dribbble의 Rippple입니다.

아래와 같이 사용자들의 디자인 이미지나, 사진의 색상을 분석해 아래 리스트 버튼에 비슷한 색상을 나타내 주고 있어 사용자들에게 자연스러운 변화를 제공합니다. 또한 스크롤을 내리게 되면 자연스럽게 높이가 줄어들어 글을 읽는데 불편함이 없도록  디자인되었습니다. 

머터리얼 디자인 가이드를 살펴보면서 안드로이드 디자인은 ios디자인에 뒤쳐져 있다는 생각을 바꿔주는 계기가 되었습니다. 안드로이드 디자인을 보면 항상 통일성이 부족하다는 느낌을 받았는데 머터리얼 디자인에서는 작은 것에도 규칙을 두어서 사용자들에게 새롭지만 익숙한 경험을 제공합니다. 제약이 많다는 점에서 왜 개방형 플랫폼인가 라는 생각이 드는 사용자들도 많지만, 이러한 제약 덕분에 각기 다른 애플리케이션들이 통일감을 주고 있다고 생각합니다. 머터리얼 디자인 덕분에 사람들은 어렵지 않게 좋은 디자인이 적용된 애플리케이션을  디자인할 수 있게 되었습니다. 한때 애플의 스큐어모피즘이 아날로그를 디지털의 세계로 옮겨주었다면, 머터리얼 디자인은 플랫 한 디자인에 모션을 더해 사용자들에게 상호작용을 통한 감성을 제공하고 있습니다. 머터리얼 디자인 모션과, 플랫디자인에 애니메이션을 더한 UI Animation이 유행하고 있는 지금 앞으로는 어떠한 디자인 트렌드들이 나와 반영될지 기대됩니다.