웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
구글의 머티리얼 디자인 가이드 함께 보기
Posted by kimdirector | 2015.04.29 | Hit : 2509
머티리얼 디자인 구글 가이드
목록보기이전보기
작년 6월, 구글은 Material Design을 정식으로 발표했습니다.
그 전에도 다양한 디자인 정책(asset)들이 존재했었지만, 이처럼 타이틀을 거창하게 걸고 발표한 적은 없었습니다.





 
구글로서는 대단히 성대한 런칭이었지만, 아주 HOT한 대중의 반응을 이끌어 내지는 못했습니다.
구체적인 형상이 없이 개념정도에 머물러 있었기 때문이죠. 게다가, 구글은 작년(2013)에 Polymer라는 UI 툴킷을 발표한 적이 있었는데, 이 형상이 Material Design과 상당히 유사해서 ‘구글의 그저 그런 통합’으로 여기는 분위기였습니다.

한 달쯤 후, 구글은 Noto 폰트를 발표합니다.

구글은 “전 우주를 데이터베이스화 한다”라는 거창한 모토가 있는 기업이니만큼, 폰트에서도 바벨탑을 세우고 싶었나보다 했었지요. 폰트 덕후로써 열광할만 했지만, 이 역시 구글 안드로이드의 큰 변화라고는 생각하지 못했었습니다.

그런데 지난 10월, 구글이 소리소문없이 Google (Developers’) Guideline을 Google Design으로 독립시키고  본격적으로 Material Design에 대한 실체적인 가이드라인을 배포하기 시작했습니다.
그리고, 곧이어 구글은 모든 구글 앱들에 Material Design을 적용하여 업데이트 했습니다.
구글이 큰 회사인 건 알았지만, 거의 모든 구글앱들을 반년만에 판올림한 건 정말 엄청난 일이지요.

확인해 본 바로는,
Play Store, Google +, Music, Movies & TV, Play Book, Play Newsstand, Play Games, Photos, Camera(!), Maps(!),  HangOut, Google I/O 2014, Google Now, Gmail 은 모두 Material Design을 적용완료하였고, Calendar, YouTube,  Peoples(연락처), Email 등은 아직 변경 전인 것 같습니다. (이 모든 것들이 지난 한달 안에 벌어진 일입니다. ㅎㄷㄷ)

개념으로 알고 있던 것보다 실제로 만져보고 다뤄보니, 정말 큰 변화이고, 좋은 변화라는 것을 체감할 수 있었습니다.

한 번쯤 Google Design을 일독해 보시고, 아래의 리뷰(?)를 참고하시길 바랍니다. ^^


1. Card UI의 온전한 생태계를 구성했다.

– FlipBoard와 (Windows) Modern UI가 등장했던 2010년 이래로 UI/GUI의 중점적인 화두는  ‘어떻게 콘텐츠를 모듈화할 것이냐’ 였습니다. 이 때 Big Data라는 단어도 한참 회자되었었지요.




 
콘텐츠를 모듈화하는 방법으로 제시되었던 격자형 구조는, RWD에 유리하다던지,
다양한 연동규격을 활용하기 쉽다는 등의 이점으로 초기에 각광을 받았으나, 금방 한물간 유행이 되어버렸습니다.

아마도
(1) Skeuomorphic한 기존의 UI 문화에서 갑자기 바뀐 단조로움에 대한 거부감 / 또는 이해하기 어려움
(2) 다양한 종류의 컨텐츠를 동일한 면적에 우겨넣다보니 오히려 몰개성해지는 톤/태도.
(3) 디벨로퍼나 컨텐츠 생산자들에겐 너무 가혹한 가이드라인
(4) 지나치게 이미지(+아이콘) 쪽으로 치중된 무게중심
등이 이유가 아닐까 하는 생각을 합니다만, 순전히 개인적인 생각입니다. ^^

그러다가, 2011~12년간 ‘정보의 Curation’이 화두가 되었지요.

Big Data에 대한 조작 노하우들이 좀 쌓이기도 했고, Siri처럼 정보를 ‘알아서’ 제공하는 것에 대한 관심이 높아진 시기였습니다.

때마침 클라우드 기반 서비스들도 만개하기 시작했던 터라, 2010년 이전에는 정보를 생산/축적/개인화하는 기술 쪽에 관심이 모였다면,  이후에는 방만한 정보를 유저에게 되돌려 주는 기술, 즉 정보를 세련되게 제시하는 기술에 대한 관심이 높아지는 추세였습니다.

그리고 이에 맞는 Pinterest, Behance 등의 서비스도 급흥행을 하게 됩니다.
더불어 Card UI에 대한 관심도 높아졌지요.  이 시기에 맞추어 Facebook이나 Google도 자신의 서비스에 Card UI 를 적용하기 시작했습니다.


     
(페이스북의 Card UI 적용 이전/이후)

Card UI가 Modern UI보다 나은 장점은,

(1) 서드파티의 데이터에 대해 유연하게 대처할 수 있고,
(2) 단위 컨텐츠의 소비가 빠르고 이해하기 쉬우며,
(3) (IA 구성의 입장에서) 상대적으로 단순한 구성을 만들어 낼 수 있고,
(4) 이 때문에 시각적으로 단순한 레이아웃을 만들 수 있다는 점  등이 아닐까 합니다. 그리고, 이에 대한 모범사례는 페이스북과 핀터레스트 였지요.




구글이 이번에 Material UI를 들고 나오면서 한 일은,

그간 “딱히 정해지진 않았지만 다들 알고 있는” Card UI를 논리적으로 재구축하고,  동시에 기존의 Modern UI 등 격자구조를 흡수하여 좀 더 풍부하고 ‘예외가 없는’  온전한 하나의 싸이클을 만들어 낸 것이라고 할 수 있겠습니다.

또한 모든 디바이스 ( 폰/타블렛, TV, 자동차 네비게이션- google auto, 스마트워치 )를
최대한 동일한 경험으로 아우르는 생태계를 구성한 것도 신의 한 수 였지요.


2. Skeuomorphism과 Flat Scheme의 절충안

결정적인 한 방은 iOS7의 디자인이었지만, 스큐어모피즘은 스스로의 한계 때문에 점점 지위를 잃어가기 시작했고,  UI 업계는 이를 대체할만한 cue를 모색하기 시작했습니다.

Apple과 Microsoft는 각각 ‘flat하게 디자인하기’와 ‘아이콘을 적극 사용하기’로 전략을 잡았지만,  “층위와 어포던스”에서 스큐어모피즘을 대체할만한 아이디어는 부족한 것이 사실이었습니다.



(그림자와 ‘올록볼록’함으로 계층과 어포던스를 확보했었던
옛 iOS UI – 이전 포스팅인 Skeuomorphism과 Sizzling 참고)

플랫한 것이 직관적이고 명료해서 이미지를 빠르게 인식하고 판단하는 데 크게 유리한 것이 사실이지만,  작은 화면안에서 다양한 층위를 설명해야 할 때는 불리한 것이 사실이었습니다.

Apple의 경우, 이를 위해 Blur를 UI요소로 차용했지만, 그것이 아름답기는 하더라도
다양한 경우에 적용하기엔 제한적인 단점이 있었고, 또한 범용적이지도 못했습니다.




(blur를 계층의 cue 로 이용하는 iOS7, 8 – iOS7 참조 – ‘당신이 언제든 이전으로 돌아갈 수 있다’라는
안정감을 주는 데는 최고이지만, 한 번 이상의 Blur를 쓸 수 없는데다,
Blur가 적용된 부분의 UI 사용에 제한적인 약점을 갖고 있습니다 (ex. 색상의 사용))


구글은 이에, 구글 월렛 제작시에 톡톡히 재미를 보았던 Shadow를 적극적으로 차용합니다.



( 많은 호응과 유행을 만들어낸 45도의 곧은 그림자.
하지만 UI에 흡수되지는 못하고 아이콘 디자인에만 남게 됨 )


 그림자와 빛의 활용은, 스큐어모피즘이 강력하게 사용하던 매체였지만,  구글은 빛을 없애고 그림자만으로 이야기함으로써 내용을 더욱 압축하고 플랫함을 강조하였습니다. 따라서, 시각적으로는 플랫함을 유지하면서도 다양한 시도들을 이전처럼 자유롭게 할 수 있게 되었지요.


3. 애니메이션의 강화

가이드를 훑어보시면 그 어떤 가이드보다 유난히 ‘동영상’ 참조가 많은 것을 보실 수 있을 겁니다.
구글은 다양한 애니메이션/트랜지션/피드백 모션등을 함께 정리함으로써 Material UI의 특장점을 역설하고 있습니다.  모션가이드가 이렇게 전면에 등장한 것은 가이드계에서 거의 처음 있는 일이 아닌가 합니다.


4. 한계와 제약

물론, 남아있는 문제들도 많습니다.





모든 UI디자인을 2차원적으로 제한하다보니 다양한 UI를 흡수하기 어려워졌습니다.



 
그러다보니, “접거나 구부릴 수 없다”라는 룰도 가이드라인에 들어가게 되었습니다. (위의 이미지는 ‘안좋은 예시’)

모든 UI를 평면내에서 완성해야 하고, 부득이한 경우가 생기면 더 ‘높은 곳에’ 하나의 평면을 추가로 생성해야 하는 난제가 생기지요.  ( IA를 만드는 사람들의 고생이 더 늘어났습니다 ㅠㅠ)  위에서 설명한 ‘애니메이션 가이드’ 역시 표현에 제약이 되는 조항입니다.

문서를 보면 아시겠지만, 개방형 플랫폼 치고는 잔소리가 지나칠 지경입니다.

그리드를 반복해서 쓰지 마라, Keyline(모듈)을 지켜라, 심지어 네비게이션 바의 바탕색을 디바이스(폰)의 기기색과 일치시켜라… 라고까지 지시하고 있습니다.

꽤 구글답지 않아요. 뭐 안지키면 그만이긴 하지만요. 가이드라는 것 자체가 ‘우리는 이런 개념을 사용해서 우리의(구글) 앱들을 만들거다’라는 것이지,  ‘너희들 꼭 이렇게 만들어야 해’라는 강요는 아니니까요. ^^


5. 신개념들

구글이 한 생태계를 만들려다보니 새로운 개념들이 좀 생겨났습니다. 꽤나 고개가 끄덕여지는 내용이 많았습니다. 간단히 리뷰하겠습니다.

(1) 버튼 구분



위 이미지의 피라미드는, 버튼의 사용비율을 설명한 것인데요.

버튼을 세 종류로 나누어서 ‘플랫버튼’을 많이 쓰고, ‘레이즈드버튼’은 조금 쓰고, ‘플로팅 액션 버튼’은 한두개만 쓰라는 내용입니다.

버튼을 이렇게 세 단위로 구분한 것은 사실, 플랫버튼을 강력하게 강조한다는 뜻으로 읽을 수 있습니다.  기존에 흔히 쓰이던 ‘박스형태의 버튼’을 레이즈드 버튼이라 부르며 적게 쓰기를 권장하는 대신,  텍스트만으로 버튼 역할을 수행하는 ‘플랫버튼’의 사용으르 권장하는 것이지요.

화면을 간소하게 하고, 기존에 체계화되어 있지 않던 버튼을 정리함으로써,
보다 일관적인 look을 유지할 수 있으리라는 기대인 것 같습니다. 하지만, 비-알파벳 문화권에서 괜찮을지는 모르겠어요. 특히나 한국처럼 어포던스를 강조하는 UI문화에서는 어렵지 않을까 싶구요.

(2) 타일과 카드의 구분


새로운 개념은 아니지만, 이렇게 못박고 가는 건 처음이 아닌가 합니다.
왼쪽이 카드이고, 오른쪽은 ‘카드가 아니라 타일이다’라고 설명하고 있는데요.
이는 오히려 ‘어떤 경우에는 타일을 써도 된다’ – 즉, Modern UI를 일부 수용한다는 느낌입니다.
이번에 밀고 있는(?) z-depth에 의한 그림자를 보완하기 위한 장치인 것 같습니다.

(3) 토스트 팝업… 스낵바?



 
제가 알고 있던 토스트 팝업은 위와 같은 모양이었습니다.  화면 하단에서 튀어나와서 간단한 정보만 보여주고 알아서 쏙 들어가는 팝업을 토스트 팝업이라고 불렀지요.




 
그런데, 이런 형태도 토스트 팝업이라고 부르게 되었습니다.
굳이 라운딩이 붙지 않아도, 바닥(?)에서 떨어져 있지 않아도 다 토스트 팝업이라고 부르게 된거지요.  그런데, 위 이미지처럼 UNDO등 버튼이 추가되는 것을 Snack Bar라고 부르기로 했나봐요.  이번에 새로 생긴건지, 이전부터 있었는지는 모르겠지만, 앞으로 스넥바란 이름도 알아두어야 겠어요.


6. 전체적인 감상평(?)


다른 건 모르겠고, 그냥 숨넘어가게 잘했다..가 총평입니다. 구글이 이렇게 잘했던 적이 있었나 싶어요.  위 이미지만 봐도, 색이며, 비례며, 아이콘의 스케일이나 위치등도 Honeycomb의 버전업이라고는 믿겨지지 않을 디테일과 감각입니다.

제게는 ‘구글이 애플보다 낫다’는 느낌을 주는 첫 진화로 기억될 것 같습니다.
디자인적으로는 껌뻑 죽게 잘했지만, OS의 컨셉이라기엔 좀 아쉬운 점이 있습니다.
한 앱의 컨셉트라면 100점 만점에 300점쯤 줘도 좋겠지만, 다양한 개발자/사용자/사업자의 요구를 모두 수용하기엔 너무 제한적이고도 빈약하단 느낌이 없지 않습니다.

하지만, 무엇보다도, Lollipop부터 구글이 ‘디자인’에 많은 신경을 써 주는 것 같아 정말 고맙습니다. 두서가 없었지만, 두루 작업에 도움이 되었으면 합니다.

– 가치디자인그룹 BS Kim
Posted by kimdirector | 2015.04.29 | Hit : 2509
Origin http://blog.rightbrain.co.kr/?p=3019
Tags 머티리얼 디자인 구글 가이드
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=441

COMMENT
Commented by kimdirector
2015.04.29 14:03:16 X
예전에 포스팅된 글입니다. 지금과는 약간 차이가 있을 수 있겠지만, 머티리얼 디자인에 대해서 공부하고 있는 분들이라면 도움이 되지 않을까 생각해 봅니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
스마트폰 최적화 코펜하겐 로고 아이콘 디자인 메타포 생각 UX 콘텐츠 아이패드 직장 회사원 브라우저 셀렉트박스 일러스트 CIP 관리자 아이폰 로고디자인 파이어폭스 마크업 퍼스널 브랜드 웹디자이너 웹표준 자바스크립트 UX 다운로드 날씨 PC 홈페이지 웹디자이너 독창성 기획자 셔터스톡 이벤트 HTML 웹사이트 코딩 개발자