웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UX Planner & Designer


웹을 통해 새로운 창조를 꿈꾸는 인간
Humans dreaming of new creation through the web
WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
머티리얼 디자인(Material Design)의 핵심은 무엇인가?
Posted by kimdirector | 2015.03.09 | Hit : 2510
목록보기이전보기
Being Limited를 운영하고 있는 Paula Borowska가 DesignModo에 쓴 What is the point of material design?의 번역입니다. 되도록 원문의 의도가 나타나도록 했지만 내용에 따라 의역한 부분이 있습니다.
 
 
 
 
이번 구글 I/O에서 발표된 ‘머티리얼 디자인’이란 간단하게 말해 “구글의 다양한 플랫폼 안에서 사용자 경험을 하나로 묶는다”입니다. 이런 “통합”은 서비스(기술)를 더 쉽고, 간결하고, 직관적으로 만들어 전체적인 사용자 경험을 향상시킬 것입니다.
 

구글이 발표한 머티리얼 디자인 데모
 

 
구글의 머티리얼 디자인
 
아시다시피 구글은 매우 매우 큰 회사이고, 검색엔진부터 브라우저, OS, 안경(Glasses)까지 수많은 기술과 서비스를 가진 회사입니다. 언뜻 보면 일관성 없어 보이는 다양한 기기와 서비스에 대한 경험을 통합하고 서로 연결해야 할 텐데요. 머티리얼 디자인은 단지 새로운 UI의 하나가 아니라 “구글과 함께하는 모든 경험”입니다.
 
다양한 플랫폼(기기, 서비스)에서의 머티리얼 디자인

 
머티리얼 디자인의 큰 부분은 사용자가 다양한 기기를 사용할 때, 그 흐름이 끊김 없이 자연스럽게 이어진다는 것입니다. 만약 누군가 걸어가면서 이메일을 쓰다가 그냥 열어 두었다면, 시계나 휴대폰, 태블릿에서 이메일을 이어서 쓸 수 있습니다. 따로 저장할 필요도 없고 동기화할 필요도 없습니다. 그저 찾아서 마무리 짓고 보낼 수 있습니다.
 
그리고 퇴근하고 집으로 돌아왔다면 업무 관련 이메일은 잠시 미루고 친구나 가족들이 보낸 이메일 알림이 나타납니다. 퇴근 후의 시간을 고려해서 알림을 보여주는 것이지요.  이렇게 눈에 보이지 않는 배려들은 단순히 시각적인 UI라고만 할 수 없습니다. 사용자의 삶을 보다 똑똑하고 만드는 것이 머티리얼 디자인입니다.
 
 
UI
 
앞으로 구글의 주요 인터페이스가 될 머티리얼 디자인. 머티리얼 디자인이 어떻게 만들어졌는지 알아보겠습니다. 머티리얼 디자인 제작의 핵심은 “물리적인 세계”입니다. 무슨 의미일까요? 구글의 Jon Wiley는 Fast company와의 인터뷰에서 이렇게 말합니다.
 
“우리가 무언가를 만들 때 수천 년 동안 축적된 기술을 적용한다. 그러나 소프트웨어 디자인의 기술은 이제 시작이다”
 
구글이 머티리얼 디자인의 UI를 만들 때 무언가 화려하고 빛나는 것을 만들고 싶었지만, 디자인에 큰 영향을 줄 머티리얼 디자인 개념을 만들어 가면서 여러 연구가 필요했습니다.
존 웨일리는 이어서 말합니다.
 
“우리는 한 발 물러서 생각해 보았습니다. 모든 소프트웨어를 살피고, 질문해 보았다. 이것은 무엇으로 만들어졌을까?”

 
카드스탁 디자인
 
 
카드처럼 레이어를 겹겹이 쌓아올린 디자인

 
구글은 디지털 세계에 실제와 같 물리적인 감각을  넣고 싶었습니다. 애플이 스큐어몰피즘을 통해 이를 만들려고 했었지요. 구글이 보기에 스큐어몰피즘은 훌륭했지만 그보다 더 잘할 수 있었습니다. 머티리얼 디자인에는 스큐어몰피즘과 같은 장식적인 질감이 없습니다. UI는 깔끔하고 심플하지요. 스큐어몰피즘은 이와 비교하면 매우 과장되어 보입니다. 그러면 카드스탁은 어떨까요?




 
카드스탁은 머티리얼 디자인을 정의하는데 중요한 개념입니다. 구글의 디자이너들은 디지털 세상을 최대한 물리적으로 만들고 싶었고, UI 요소들을 마치 카드를 쌓은 것처럼 겹겹히 쌓아 나갔습니다. 많은 디자이너들이 좋아하는 이 방식은 새로운 것은 아닙니다. 그러나 구글은 한 발 더 나아가 그림자 도구를 적용해  UI요소들이 진짜 (종이)카드처럼 보이도록 했습니다. 구글의 디자이너들에게 있어 현실의 (물리적)세계는 매우 중요하고 지키고 참고해야할  무언가입니다.
 
 
머티리얼 디자인이 모바일 디자인에 적용된 모습
 

 
실제 종이와 비슷하게
 
구글은 디자인의 중심에 종이를 놓았습니다. 안드로이드 디자인의 리더인 Matias Duarte는 머티리얼 디자인에 대해 이렇게 말했습니다.
 
“터치에 대해 반응으로 단순히 스크린의 모양과 색상이 바뀌는 대신 픽셀이 가지고 있는 본연의 form을 향상킬 것으로 기대한다”
 
디지컬 세계에서 실제와 같은 경험을 주려면, 실제 종이를 연구해야 했습니다. 실제 그림자가 어떻게 보이는지 알아보려고 다양한 레이어로 종이 아이콘을 만들어 연구했습니다. 비록 실제 종이가 머티리얼 디자인 UI처럼 형태가 변하거나 하지는 않더라도 연구에 큰 도움이 되었습니다. 결국 머티리얼 디자인은 디자인을 한 발 더 나아가도록 했습니다. 무엇보다 중요한 것은 이를 구글에서 펼쳐가고 있다는 점입니다. 머티리얼 디자인이 진보적이지 않더라도 사용자에게 영향을 주고 있는 디자인 작업에 중요한 척도가 될 것입니다.
 
 
현실의 물리법칙을 적용. 사용자의 터치에 자연스럽게 움직입니다.
 

 
디지털 물리학
 
머티리얼 디자인의 큰 원칙은 디지털 왕국에 가상 물리 감각을 만드는 것이었습니다. 사용자가 스크린을 보고 여러가지 앱을 사용하는데 있어, 머리티얼 디자인은 감각과 관계에 대한 어떤 형태을 만들어 냈습니다.
 
물리학이 디지털 세계에 적용되기 이전에도 어떠한 관계를 보여주는 것은 중요한 일입니다. 이유는 간단합니다. “직관적인” 앱 디자인을 구현하기 위해서 입니다. 앱이나 웹사이트 디자인은 무엇보다 직관에 의해서 결정되고, 특정한 규칙에 얽메이지 않습니다. 그렇지 않다면 앱이나 웹사이트는 사용하기 어려워질 것입니다.
 
머티리얼 디자인은 사용자들이 직관에 의해 쉽게 사용할 수 있도록 UI안에 시각적인 관계를 만들고 싶어합니다. 중요한 점은 이런 관계를 현실화 시키는 것입니다. 실제 UI는 머티리얼 디자인과 더 즐겁게 상호작용하기 위한 독특한 애니메이션, 그림자, 색상을 가지고 있기 때문입니다.
 
 
머티리얼 디자인의 핵심은 무엇일까?
 
결국 머티리얼 디자인은 구글의 다양한 기기와 서비스를 하나로 묶기 위한 방법입니다. 이 디자인의 기반에는 여러 기기들을 사용할 때 끊김이 없는 사용 흐름을 위한 똑똑한 기술들이 있습니다. 사용하기 불편한 이메일을 생각해 봅시다. 여러 개의 이메일 앱을 각각 확인해야 하고, 어떤 앱은 크로스 플랫폼을 지원하지 않습니다. 파일이나 사진을 공유할 때도 문자 메세지를 보낼 때도 마찬가지입니다.
 
 
언제 어디서나 일관성 있는 모습으로
 
 
사용자와 상호작용하는 UI
 
 
만약 TV나 시계, 스마트폰을 쉽게 동기화할 수 있다면? 아니면 실제로 자동차를 통해서도 끊김 없는 편리함을 누릴 수 있습니다. 이제 메세지나 파일을 동기화할 때 걱정하지 않아도 됩니다. 집에서는 폭주하는 업무 이메일을 걱정할 필요가 없습니다. 거꾸로 어젯밤에 보낸 사진이 업무 시간에 나타나는 일도 없을 것입니다.
 
머티리얼 디자인은 멋진 UI 이상입니다. 구글이 하고 있는 일은 전반적인 경험을 쫓고 있다는 것입니다. 무엇보다 구글은 사용자들의 기술을 사용하는데 보다 쉽고 나은 방향을 제공하려고  노력중이라는 겁니다.
 
 
결론
 
구글은 다양한 플랫폼에 적용될 머티리얼 디자인을 발표했습니다. 수많은 기술과 서비스를 가지고 있는 기업인만큼 이들을 하나의 경험으로 묶어서 제공해야만 합니다. 머티리얼 디자인에 대해 어떻게 생각하시나요? 다양한 서비스를 이용할 때 통합적인 경험을 갖도록 하는 것이 과연 옳은 방향일까요? 머티리얼 디자인이 디자이너들에게 애플의 스큐어몰피즘만큼의 영감을 줄 수 있을까요? 함께 생각해볼 문제입니다
 
 
참고
Posted by kimdirector | 2015.03.09 | Hit : 2510
Origin http://blog.slowalk.co.kr/?p=1937
Tags 머티리얼 디자인 Material Design UI 구글
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=436

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
소프트웨어 스큐어몰픽 웹기획 디지털 pxd 기획자 소프트웨어 모바일 서비스 기획자 전략 스티브 잡스 생산성 성공 폰트 프로젝트 프레임워크 BIP 모바일 앱 홈페이지 UED 디자인 컨셉 자산 사회적기업 크롬 trend 모니터 홈페이지 디자인 디자이너 프리젠테이션 UI Kit UI 윈도폰 로고디자인 웹사이트 비즈니스 변화 한글폰트 워드 포트폴리오 기획 jQuery 캘린더 사용자 Mobile Design 개발툴 바른돋움체 습관 대화 월페이퍼 웹진 디바이스 무료 트랜드 PSD iOS 관리 직원
Tags
로고디자인 가이드 홈페이지 디자인 디자인 UI 관리 소모품 iOS B2B 원칙 서비스 기획자 디자이너 번들 기능 HTML5 메트로 디자인 정글 브라우저 브레인스토밍 로고 안철수 머티리얼 디자인 기획자 홈페이지 리더 공짜 메일폼 셀렉트박스 구독자 스마트 기획 jQuery 근무 전원끄기 UX 모바일 앱 어플리케이션 웹사이트 마케팅 노하우 서비스
Category Cloud
About us Review Portfolio Design Review 
Leaders Story Mobile UXD IT Information
Web Identity Everyday Story Mobile Life
Webdesign Report Web Standard Homepage Work
Web Plan Report Practical Use Tip Design Inspiration
Dowmload Review Recommend Site
Search
Contact us
Phone : 010-8555-0503
E-mail : kimdirector@gmail.com