머티리얼 디자인은 다른 것이지, 나은 것이 아니다
(출처 : [Material Design is Different, Not Better]의 기사를 번역 및 가공한 콘텐츠입니다.)
Material Design이 발표되었을 때, 저는 디자인 분야에 대한 Google의 노력에 깊은 감동을 받았습니다.
이 분야는 애플이 애플이 항상 앞서 가고 있었던 것으로, 그전까지 안드로이드 디자인이라 하면 통일성 부족, 문서화의 부족, 어두운 테마 및 모호한 햄버거 메뉴의 남용에 대해 많이 불평했던 것을 기억합니다.
머티리얼 디자인은 많은 것을 해결했습니다. 이제는 잘 고려된 견고한 지침을 바탕으로 더욱 가볍고 다채롭고 일관된 디자인 언어를 제공합니다.
게다가, 머티리얼 디자인은 색상이 예쁘고 카드뷰의 사용으로 깊이감과 촉감을 더했습니다.
하지만 저는 종종 스스로에게 질문을 던집니다.
"머티리얼 디자인이 많은 다른 디자이너들의 말처럼 Apple의 iOS Design보다 더 나을까?"
저는 그 생각에 동의하지 않습니다. 이 기사에서 머티리얼 디자인이 더 나은 것이 아니라 그 둘이 다를 뿐이라는 생각을 하는 이유를 설명하겠습니다.
iOS와의 유사점
iOS의 3 가지 핵심 원칙, 즉 선명도(Clarity), 콘텐츠에 대한 존중(Deference) 및 깊이(Depth)부터 시작하도록 하겠습니다.
선명도(Clarity)는 텍스트의 가독성과 직관적인 아이콘 및 좋은 대조에 관한 것입니다.
명확성(선명도)은 플랫폼에 따라 다를 수 있습니다.
iOS 또는 Android 사용자들은 그들이 익숙한 것에 크게 의존합니다.
iOS의 아이콘은 익숙한 컴포넌트들의 반복된 사용으로 사용자가 즉시 인식할 수 있지만 Android 사용자는 플랫폼마다 UI가 다른 경우가 있어서 즉각적으로 인식하지 못할 수 있습니다.
깊이(Depth)는 두 플랫폼이 공유하는 같은 원칙입니다.
그러나 그들은 개념에 다르게 접근합니다.
iOS는 뿌옇게 보이는 블러기능 및 그라디언트를 사용하고 안드로이드는 쉐도우 및 종이 메타포를 사용합니다.
스큐어모피즘 2.0
iOS와 안드로이드, 두 플랫폼 모두 실제 우리가 생활하는 현실을 복제합니다.
이 둘은 사실성과 물리학 법칙을 사용하는 그림자 및 애니메이션을 사용하여 현실과 비슷하게 디자인합니다.
스큐어모피즘 디자인은 익숙한 메타포를 사용하여 새로운 디지털 개념을 사용하는 데 도움이 되었지만 지나치게 세밀한 텍스처와 3D 효과가 확실히 적용되었습니다.
하지만 이제 기술은 더 이상 사용자들에게 생소하지 않습니다.
우리는 더 이상 스큐어모피즘 같이 자세한 설명이 필요하지 않고, 올드한 디자인의 디지털화는 사용자들을 혼란스럽게 만듭니다.
아무도 이 캘린더를 더 이상 사용하지 않습니다.
이 디자인에는 약점이 있습니다.
예를 들어, 겹쳐진 여러 레이어가 서로 겹치는 것처럼 보입니다. 또한, 밝고 튀는 색상이 너무 많을 수 있습니다.
메티리얼 디자인의 핵심인 카드 콘셉트의 디자인은 원형 화면에서 웹뷰와 완전히 다르게 보입니다.
전체 폭을 사용하는 카드뷰가 원형으로 구현되면서 굴곡진 부분에 불필요한 간격이 많아집니다.
이는 텍스트의 불안전한 정렬을 불러옵니다.
리스트 뷰 또한 원형 화면으로 구현된다면 모서리가 잘려나가므로 사용하기 어렵습니다.
이러한 Android Wear은 멋지게 보입니다.
마치 UI가 원형 스크린을 위해 만들어진 것처럼 느껴집니다.
하지만 머티리얼 디자인의 요소로는 이런 느낌을 내기가 어렵습니다.
머티리얼 디자인은 콘텐츠가 메인이 아니다.
콘텐츠에 대한 존중(Deference)은 그 둘이 많이 다른 점입니다.
Android는 카드의 개념을 사용하여 콘텐츠를 더 만질 수 있어 보이게 하므로 화면의 왼쪽과 오른쪽 부분에서 중요한 공간을 잃어버리는 반면, iOS는 콘텐츠를 최우선 순위로 제공합니다.
Android의 압도적인 색상 또한 콘텐츠보다 눈에 먼저 들어옵니다.
FAB (플로팅 액션 버튼) 또한 콘텐츠의 내용을 숨기고 자연스러운 인터렉션을 방해합니다.
머티리얼 디자인은 색상 및 행동을 불러일으키기에 중점을 둡니다. (이것은 새로운 Material Design Lite로 웹용으로 제작되었습니다)
반대로 iOS에서는 콘텐츠에 더 초점을 둡니다.
UI의 색상은 더 중립적이며 상황에 따라 다릅니다 (내용에 따라 변경됩니다). 생동감 넘치는 색상은 최소한으로 사용되며 대부분 실용적인 아이템입니다.
Apple Music과 Google Music을 빠르게 비교하면 Material Design이 밝은 색상과 일러스트를 훨씬 더 많이 사용한다는 것을 알 수 있습니다.
Apple Music의 경우 밝은 색상이 사용되는 곳은 "지금 시도"버튼뿐입니다.
탭 바 vs 햄버거 메뉴
햄버거 메뉴에 대해서는 오랜 논란이 있었고, 아직도 그 논쟁은 끝나지 않았습니다.
Apple은 몇몇 군데에 그들의 디자인에서 햄버거 메뉴를 사용합니다.
Material Design에서는 햄버거 메뉴를 권장하기 때문에 Android에서 더 많이 볼 수 있습니다.
iOS는 탐색을 위해 탭 막대를 선호합니다.
루크(LukeW)는 명백한 것이 항상이기는 것이라고 말했습니다.
페이스북은 iOS 용 탭 바로 자체 UI를 전환했으며 그 덕에 사용자 참여도가 크게 증가한 것을 확인했습니다.
Google Inbox는 Hamburger 메뉴를 사용합니다.그러나 햄버거 메뉴가 좋은 아이디어가 될 수 있는 상황이 있습니다.
예를 들어 가장 중요한 콘텐츠가 첫 페이지인 경우입니다.
내부의 옵션은 설정 및 로그 아웃과 같이 2차 뎁스인 햄버거 메뉴 같은 곳에서 보여야 합니다.
색상의 사용
머티리얼 디자인은 눈에 띄는 색상을 사용합니다. 플랫 UI 색상 팔레트도 마찬가지였습니다.
그 색들은 아름답고, 파스텔 색상이 CSS 또는 Xcode에서 기본적으로 제공되는 화려한 색상과 달리 대부분의 상황에서 매우 멋지다고 생각할 수 있습니다.
iOS Colors (왼쪽), Flat UI (가운데), Material Design Palette (오른쪽)그러나 머티리얼 디자인은 헤더에 강렬한 색상을 사용하고 심지어 때로는 콘텐츠를 대체하기도 합니다.
경쟁 색상이 많으면 다른 요소들의 우선순위를 낮춥니다.
색상에는 의미가 있지만 그 의미는 매우 제한적일 수 있습니다 (E.G. 레드 계통은 경고를 의미하고 노란 계통은 경고를 의미).
색상은 브랜드를 표현하지만 색상을 통한 브랜드가 앱의 UI에서 가장 중요한 중심이 되어서는 안 됩니다.
앱 아이콘은 브랜딩이 가장 적합한 장소입니다.
헤더에서 브랜드의 색상만 사용하기 전에 앱이 무엇인지 정확하게 설명하는 것에 대한 표현을 더 많이 하는 것이 좋습니다.
iOS에서는 브랜드 색상 위주로 앱을 꾸미지 않습니다.
이미지가 천 단어의 가치가 있다면, 색상은 열 가치가 있습니다.
플랫폼의 분화 VS 플랫폼의 통일화
제가 디자인을 할 때, 모든 플랫폼에서 일관된 디자인 언어를 사용하는 것이 가장 좋은 방법이라고 생각했습니다.
하지만 iOS 디자인 언어를 사용하여 Android 앱을 설계할 때, 저에게는 의미가 있었지만 궁극적으로 사용자에게는 좋지 않았습니다.
Android 사용자는 iOS에 익숙하지 않습니다.
모든 플랫폼을 통합하려는 Material Design의 목표는 이 점에서 제가 만든 디자인보다 낫습니다.
하지만 실제로 이게 가장 좋은 방법일까요?
FAB는 웹에 정말로 적합할까요? 작은 화면에 적합한 카드일까요?원형 화면이 있는 Android wear에서 카드 개념이 실제로 사용될까요?
메티리얼 디자인은 장치가 먼저 고려되었다기보다 디자인이 먼저 사용되고 Android wear는 추후에 고려된 것처럼 느껴집니다.
Apple Watch를 살펴보면 Apple Watch UI는 Watch를 완전히 고려한 것입니다.
즉, Force Touch, Digital Crown, 손목 감지 및 검은색 베젤을 위해 특별히 고려해야 하는 새로운 UI 패러다임이 포함되어 있습니다.
머티리얼 디자인은 보다 명확합니다
머티리얼 디자인에서는 컴포넌트의 사용법, 요소들을 플로팅 시키는 방법과 색상을 결합하는 방법에 이르기까지 모든 것이 가이드에서 설명됩니다.
일관된 구조를 만들기 위해 각 디자인 요소를 사용하는 방법.
특정 색상 팔레트와 그 색상을 결합하는 방법.
머티리얼 디자인은 전체 시스템 아이콘 집합을 제공합니다.머티리얼 디자인은 엄격한 스타일 가이드를 가지고 있기 때문에, 잘못 디자인하기가 어렵습니다.
이는 부트 스트랩과 같습니다.
일관되고 편리한 시스템을 제공합니다.
반면에, 나쁜 점은 창의성을 제한하고 대부분의 앱을 동질화한다는 것입니다.
머티리얼 디자인이 빛을 발하는 곳들
머티리얼 디자인이 사용되면 좋을 곳이 많이 있습니다.
하지만 무조건 좋다고 말하기 전에, 위에서 말한 단점들은 한 번쯤 생각해 볼 문제입니다.
디자인은 사람들의 삶을 최우선으로 하는 끊임없이 변화하는 스펙입니다. 우리의 삶이 변하는 한 디자인도 마찬가지입니다.
머티리얼 디자인은 디자인 스펙이 세계 최고 수준이며 단순히 디자인의 범위를 넘어서서 다양한 디자인 주제에 대한 가이드라인을 제공합니다.
머티리얼 디자인의 컬러 및 애니메이션 가이드는 정말 탁월합니다.카드뷰 개념은 유연하고 모듈 형식을 가지고 있습니다.
이는 웹에서 확실히 좋은 UI이고, 디자이너는 모바일이 등장하기 전에도 이러한 방식을 사용하고 있습니다.
그러나 저는 카드뷰 개념은 화면이 작을수록 의미가 적어진다고 생각합니다.
앞서 언급했듯이 파스텔 색상은 거의 새로운 것이 아닙니다.
그러나 플랫 UI 트렌드와 머티리얼 디자인은 그것을 대중화했습니다.
하지만, 너무 튀는 색상보다 조화로운 색상과 아름다운 활자체를 얻기 위해 기본으로 돌아갈 것입니다.
머티리얼 디자인의 애니메이션은 우아하고 즐겁습니다. 하지만 사람들이 말하는 것처럼 혁신적이지는 않습니다.
iOS 7이 출시되기 전에는 트랜지션 인터페이스가 여전히 새로운 개념이었습니다.
저는 iOS와 Android가 사용자에게 부드럽고 진보적인 애니메이션을 사용할 수 있게 가이드해주는 점에 대해서는 기쁘게 생각합니다.
완벽한 디자인 언어는 없습니다.
완벽한 디자인 언어 나 템플릿은 결코 없을 것입니다.
디자인은 의도를 위해 최선을 고르는 것입니다.
따라서 실험을 하고 제품에 적합한 것이 무엇인지 확인해야 합니다. 유저와 디바이스를 고려하는 것을 잊지 말아야 합니다.
감사합니다.
