웹을 통해 새로운 창조를 꿈꾸는 인간 - 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
“구글 머티리얼 디자인 미리 적용해 봤어요“
Posted by kimdirector | 2015.06.15 | Hit : 2351
목록보기이전보기
구글이 안드로이드5.0(코드명 롤리팝)을 다음달 정식 배포할 예정이다. 안드로이드4.x버전과 비교해 가장 눈에 띄는 큰 변화는 역시 디자인이다. 지난 6월 말 열린 연례 개발자대회 구글 I/O를 통해 안드로이드L이라는 이름으로 처음 공개됐을 때부터 구글이 가장 강조하고 있는 부분도 새 디자인이다. 구글은 왜 2년 만에 업데이트에서 디자인을 대대적으로 바꾸고 이름도 뜻도 생소한 ‘머티리얼 디자인(Material Design)’을 외치는 걸까?
 


▲ 구글 머티리얼 디자인


구글 플레이 스토어 애플리케이션 소개란에 당당히 '머티리얼 디자인 적용'이라고 써놓은 당일 호텔 예약앱 ‘핫텔’ 개발팀은 그 이유를 알 것 같다고 한다. 핫텔은 구글 I/O 직후인 7월부터 바로 머티리얼 디자인을 앱에 적용하기 시작해 9월에 개편된 앱을 공개했다. 안드로이드5.0버전부터 구현 가능한 애니메이션을 제외하곤 대부분 구글 가이드라인에 맞췄다고 한다. 최근 판교 테크노밸리에서 만난 핫텔 개발팀은 머티리얼 디자인이 단순히 심미성에서 바라볼 것이 아니라 안드로이드 플랫폼 전체에서 통일감 있는 사용자 경험을 주기 위한 구글의 노력으로 봐야 한다고 강조했다. 안드로이드 내 사용자 경험을 운영체제부터 서드파티 애플리케이션까지 통일감 있게 만들기 위한 장치라는 설명이다.

 

▲ 핫텔 개발팀


"종이와 잉크에서 영감을 받은 직관적인 디자인"

구글은 개발자 블로그를 통해 “질감이 느껴지는 표면(tactile surfaces), 선명한 그래픽 디자인(bold graphic design), 자연스러운 애니메이션”이라는 키워드로 머티리얼 디자인을 설명하고 있다. 이 중에서도 가장 중요한 요소는 질감이 느껴지는 표면이다. 구글은 질감을 표현하기 위해 현실 세계에서 종이에 정보가 표현되는 방법을 많이 연구했다고 한다.  서드파티 개발사들이 느끼는 머티리얼 디자인도 다르지 않다. 핫텔 이승재 디자이너는 "종이가 진짜 쌓이는 것처럼 보여주는 게 중요하다"고 설명했다. 그림자로 표현되는 깊이감(depth)이 머티리얼 디자인에서 자주 언급되는 이유다. 현실에서 물체가 쌓이면, 그림자가 생기는 것을 표현한 것이다. 얼마나 밑에 있느냐에 따라 그림자도 달라진다고 한다. 

여기에 소프트웨어 안에서 구현할 수 있는 자유로운 움직임들을 결합했다. 실제처럼 보이지만 가상세계에서의 이동의 유연함을 적용한 것이다. 핫텔 앱을 예로 들면 첫 화면에서 검색버튼이 가장 위에 올라와 있다. 호텔 앱을 켜는 이유가 예약이기 때문에 원하는 호텔 조건을 선택할 수 있는 검색이 사용자에게 가장 필요한 핵심 기능으로 맨 위에 위치한 것이다. 상단바가 본문 위에 떠 있고 스크롤을 내리면 따라 내려오는 것도 레이어 한 단계 위에 있는 것처럼 느끼게 하는 장치다. 그림자가 있어서 위에 떠 있는 느낌이 좀 더 확실하다.


 

▲ 머티리얼 디자인을 적용해 리뉴얼한 핫텔앱


"머티리얼 디자인 핵심은 상세한 디자인 가이드라인"

구글은 머티리얼 디자인 소개 페이지를 통해 이 디자인의 목표를 "다양한 플랫폼과 각기 다른 크기의 디바이스에서 모두 일관된 사용자 경험을 제공하는 밑바탕이 되는 시스템을 개발하기 위함"이라고 설명하고 있다. 모바일, 태블릿, PC, 스마트워치 등 다양한 디바이스에서 구글이 제공하고자 하는 사용자 경험에 통일성을 갖추겠다는 얘기다. 또 주목해야 하는 것이 이런 통일성을 구글 생태계 안에 들어와 있는 서드파티 애플리케이션들도 지켜줬으면 하는 것이 구글의 바람이다. 그럼 가능성은? 물론 상당히 높아 보인다. 

핫텔 개발팀이 발 빠르게 머티리얼 디자인을 적용한 이유도 이 디자인이 대세가 될 것이라는 확신이 들었기 때문이다. 핫텔 홍정의 대표는 “안드로이드가 매우 파편화 되어있기 때문에 사용자들도 UI/UX적 측면에서 헷갈리는 게 많은데, 구글이 이번에 내 놓은 디자인 가이드가 상당히 자세하고 보기 편하게 돼 있기 때문에 다른 앱들도 많이 따를 것으로 예상된다”고 말했다. 그는 이어 “이후 사용자들이 머티리얼 디자인 가이드라인을 지키지 않은 앱을 쓰면 완성도가 떨어진다고 느끼게 될 것”이라고 강조했다. 

이승재 디자이너도 통일성이 중요하다고 강조했다. 그가 살펴본 결과 구글 가이드라인에는 폰트 사이즈, 첫 줄과 다음 줄 사이 픽셀 간격, 버튼 아이콘 픽셀, 동그랗게 굴릴 때 라운드 값, 터치 했을 때 상황에 따라 적용되는 애니메이션 효과까지 굉장히 잘 정리가 되어 있다. 그는 '안드로이드 앱 통일성을 위해 구글이 스스로 연구해서 이런 값을 정한 것으로, 여러 앱을 써도 UI/UX에 통일감이 있으면 사용자들이 혼돈하지 않고 자연스럽게 사용하도록 하는 게 머티리얼 디자인에서 가장 중요하다"고 설명했다.


 

▲ 머티리얼 디자인이 적용된 G메일


구글이 천편일률적인 디자인을 요구하는 건 아닌가라는 의문도 든다. 실제 상단바, 왼쪽에 메뉴바, 핵심기능은 우측하단 동그란버튼에 위치시키는 등 가이드라인을 따르면 마치 탬플릿을 쓴 것처럼 엇비슷한 디자인이 된다. 애니메이션 기능을 제외하고 머티리얼 디자인 가이드를 모두 적용한 핫텔 앱을 보면, 구글 G메일 앱과 비슷해 보인다. G메일에서는 우측하단 동그란 버튼을 누르면 핵심기능인 메일쓰기 기능이 열린다. 색다른 사용자 경험과 남달라 보이는 디자인을 적용하고 싶은 서드파티 개발사들의 욕심을 머티리얼 디자인 안에 묶어 둘 수 있을까?

이승재 디자이너는 "모든 디자인 목표는 장식을 예쁘게 하는 게 아니라, 어떻게 하면 전달하고자 하는 정보가 사용자에게 정확하게 전달될 수 있느냐에 있다”며 “머티리얼 디자인을 지키면 사용자들이 보기 편한 형태로 전달 할 수 있게 될 것 같다"고 답했다. 통일된 사용자 경험에 방점을 찍은 디자이너들은 머티리얼 디자인을 수용해도 디자인 본래 목표를 충분히 지킬 수 있다는 설명이다.

 
Posted by kimdirector | 2015.06.15 | Hit : 2351
Origin http://www.zdnet.co.kr/news/news_view.asp?artice_id=20141028155839
Tags 머티리얼 디자인 구글
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=448

COMMENT
Commented by kimdirector
2015.06.15 11:29:30 X
본 내용은 지난해 10월 쯤에 지디넷에서 작성된 글입니다. 시간이 많이 지나긴 했지만 참고가 될만해서 소개해 드립니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
평면 웹브라우저 웹기획 반응형 기업 소프트웨어 홈페이지 Sass 포토샵 사용성 디자인 개발자 셀렉트박스 안드로이드 개발자 모바일 비즈니스 솔루션 애플 PSD 유틸리티 UI 스큐어모피즘 퀄리티 트렌드 업무 앱디자인 구인 호환성 웹사이트 사파리 무료 Code PM 아이패드 웹사이트 화장품 포트폴리오 HTML5 사람 평판 포트폴리오 폰트 마케팅 로고 CMS 메일폼 표현 김성근 감독 한글 날씨 브라우저 개발 로고디자인 생각의 함축 Flash 마크업 ciokorea
Tags
HTML5 아이콘 데이터 비평 사용자 경험 콘텐츠 웹디자인 개발자 디자인씽킹 디자인 MS Office IT 대화 홈페이지 팀장 업무 HTML5 웹사이트 웹 사이트 웹사이트 타이포그래피 UX 디자이너 맥 무료 오픈소스 앱 웹기획 GUI 아이패드 자바스크립트 아이덴티티 무료 html 라이브러리 애플 프로젝트 글로벌 속도 혁신 유저빌리티 저작권 퀄리티 무료 이미지 사이트 쇼핑몰 대쉬보드 디자인 인맥
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