웹을 통해 새로운 창조를 꿈꾸는 인간 - 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
머티리얼 디자인 1년 “포켓은 어떻게 구글의 비전을 완성했는가?”
Posted by kimdirector | 2015.06.25 | Hit : 2140
구글 머티리얼 디자인
목록보기이전보기
최근 극찬을 받은 두 명의 이름있는 개발자가 함께 안드로이드와 그를 둘러싼 생태계의 얼굴을 바꾸어 놓은 대대적인 변화에 대해 터놓고 이야기했다.
 
구글 I/O 2015가 진행되는 동안 머티리얼 디자인이 1주년을 맞이했다. 머티리얼 디자인은 지난 해 구글 I/O 컨퍼런스에서 공개되어 안드로이드와 기타 구글 제품의 극적인 리디자인을 주도했다.
 
머티리얼 디자인은 안드로이드 운영체제뿐만 아니라 그를 둘러싼 앱 생태계에도 새로운 겉모습을 도입했다. 지난 12개월 동안 개발자들은 자신의 앱을 업데이트하고 최신 안드로이드 환경에 어울리는 느낌을 만들기 위해 쉴 새 없이 일했다. 그 결과, 구글은 이제 플레이 스토어에 머티리얼 디자인을 적용한 앱이 25만 건 이상 등록된 것으로 추정하고 있다.
 
안드로이드 기기 사용자로서 필자에게 머티리얼 디자인을 수용한 앱과 그렇지 않은 앱 간의 차이는 비교할 수 없을 정도로 크다. 머티리얼 디자인의 앱은 안드로이드 경험을 자연스럽게 확장한 느낌이다. 이들 앱은 안드로이드 플랫폼의 일부이고 겉모습과 동작 방식도 일관성을 가진다. 하지만 후자는 과거의 유물, 심한 경우는 다른 플랫폼용 앱이 잘못 등록된 것처럼 어울리지 않게 느껴진다.
 
현재 안드로이드용 앱들은 머티리얼 디자인만으로 두드러지지는 않을 만큼 충분히 많은 앱들이 머티리얼 디자인을 적용하고 있다. 그리고 그 차이점을 알아채기 위해 전문 디자이너가 될 필요도 없다.
 
 
머티리얼 디자인의 현실
 
일반 사용자와 심지어 일부 개발자들도 머티리얼 디자인이란 판에 박힌 구글의 디자인을 따르는 것이라고 잘못 알고 있는 경우가 적지 않다. 구글의 자체 앱을 흉내 내고 자체적인 개성은 없는, 눈에 띄지도 않는 겉모습을 만드는 것이라고 생각한다.
 
잠깐만 생각해 보자. 물론 기본적인 구글 자체 앱을 모방하는 것은 분명 머티리얼 디자인을 도입하는 방법 중 하나이고, 가장 쉬운 방법이기도 하다. 하지만 이미 많은 개발자들이 머티리얼 디자인을 따르면서도 앱 자체의 독특한 정체성과 브랜드를 유지하는 것이 가능하다는 것을 알고 있다.
 
시프트 젤리(Shift Jelly)의 개발자이자 공동 설립자인 러셀 이바노빅은 “우리 앱은 대부분의 플랫폼에서 상당히 두드러진다”라고 강조했다. 시프트 젤리의 포켓 캐스트(Pocket Casts)는 올해 구글 I/O에서 구글의 디자인 대가 마티아스 두아르테가 뽑은 머티리얼 디자인 상 수상 앱 6개 중 하나이다.
 
이바노빅은 “가장 우선적으로 우리 자신에게 다짐했던 것은 새하얀 UI에 떠다니는 버튼이 몇 개 있고, 그림자도 좀 있는 그런 UI를 만들지 말자는 것이었다. 우리는 시간을 들여 작고 세세한 것들을 추가하고 그 위에 우리 도장을 찍어도 될 만큼 매만져서 앱이 시프트 젤리 같은 느낌이 나도록 만들었다”라고 설명했다.
 
시프트 젤리의 이런 개성 찾기 방법의 대표적인 예는 포켓 캐스트가 팟캐스트의 아트워크에서 핵심 색상을 파악해 이를 버튼이나 배경 등의 UI 요소에 사용한 것이다. 이는 미묘한 것으로 어떤 사용자는 전혀 의식하지 못할 수도 있다. 하지만 장기적으로는 사용자 경험을 좀 더 세련되고 응집력 있는 것으로 만들어 준다.

 
포켓 캐스트의 안드로이드 앱

 
흥미롭게도 포켓 캐스트는 머티리얼 디자인의 좀 더 눈에 띄는 특징, 다시 말해 움직이는 실행 버튼과 같은 것에 그다지 많이 의존하지 않는다. 사실 이 밝은 색 원형 아이콘은 많은 머티리얼 디자인 UI의 오른쪽 아래에 배치되고 있다.
 
시프트 젤리의 개발자들에게 이런 요소를 배제한다는 것은 상당한 심사숙고를 필요로 하는 것이었다. 이바노빅은 “우리의 초기 컨셉 디자인 중 일부는 움직이는 실행 버튼을 적용했었다. 하지만 포켓 캐스트를 사용하는 환경에서 거기에 있을 필요가 없다고 느꼈다. 전혀 말이 안 되는 것이었다”라고 설명했다.
 
포켓 캐스트는 이런 실행 버튼을 단 한 곳에 사용했는데, 바로 에피소드 대화 화면이다. 이 화면은 사용자가 특정 프로그램이나 에피소드를 선택해 들을 준비가 된 상태임을 의미한다. 이바노빅은 이런 경우에는 눈에 띄는 버튼을 납득할 수 있으며, 움직이는 실행 버튼은 그런 두드러진 동작을 나타내는 합리적인 방법으로 보인다고 말했다.
 
 
머티리얼 디자이너의 균형 잡기
 
이는 머티리얼 디자인에 대해 중요한 문제 하나를 제기한다. 즉 머티리얼 디자인은 가이드라인일 뿐이라는 것이다. 딱딱하고 엄격한 규칙이 아니다. 인기 기사 저장 툴인 포켓(Pocket)의 디자인 팀은 이런 사실을 즉각 알아차렸고, 이를 머티리얼 디자인 어워드에서 인정 받은 것이다.
 
포켓의 선임 안드로이드 개발자인 맥스 웨이너는 “가이드라인은 좋은 출발점이었다. 구글이 말하는 것은 디자인 팀이 없어도 이 가이드라인을 사용하면 앱이 어떤 모습이 될지 알 수 있다는 것”이라고 설명했다.
 
웨이너의 팀은 기존 앱과 구글의 가이드라인을 조합하는 것으로 포켓의 머티리얼 디자인을 시작했고, 다양한 요소가 어떻게 자신들이 원하는 것에 맞춰질 것인지를 신중하게 생각했다. 웨이너의 팀은 머티리얼 디자인에 핵심적인 것으로 보이는 요소는 포함시키기로 결정했는데, 업데이트된 내비게이션 바나 머티리얼 스타일의 아이콘과 강조색 등이었다. 그리고 이런 요소를 포켓의 인터페이스에 구현하면서 앱의 원래 느낌은 그대로 유지할 수 있는 방안을 찾기 시작했다.
 

포켓 안드로이드 앱

 
웨이너는 “브랜드가 그대로 있다는 것이 중요하다”라며, “모순되는 상황을 절충하는 작업이다. 우리는 사람들이 앱을 실행하고는 ‘이건 포켓이군’이라고 말할 수 있기를 원했으며, 다른 한편으로 ‘이건 안드로이드군’이라고도 말하기를 바랬다”라고 설명했다.
 
 
머티리얼 디자인과 움직임
 
아이콘이나 폰트, 색상 등의 요소는 머티리얼 디자인의 가장 분명한 징표인 반면, 애니메이션에 중점을 두는 것은 분명 안드로이드나 안드로이드 생태계에 가장 큰 영향을 미치는 가이드라인이다.
 
디자이너에게 이야기하면, 두아르테 같은 탁월한 디자이너이든 아니면 구글 외의 다른 앱이나 서비스를 만든 평범한 인물이든 “기쁨”에 대해 말하는 것을 자주 듣게 된다. 기본적으로 기능성은 이미 갖추어진 상태에 있다는 것을 전제로 한다. UI가 감각적이고 직관적인 것을 넘어 사용하기 즐거운 것이 되기를 바라며, 사용자가 뭔가를 보고는 미소를 지으며 “오, 이거 멋지네!”라고 말하는 마법의 순간을 만들어내고 싶다는 것이다.
 
이것이 안드로이드 롤리팝 디자인의 핵심이 되는 개념이며, 안드로이드 플랫폼에서 구동되는 앱에게 점점 더 중요해지고 있는 개념이다. 개발자가 설명하자면, 적절하게 실행된 애니메이션은 두 가지 서로 다른, 하지만 가치는 동등한 역할을 수행한다.
 
포켓 캐스트의 이바노빅은 “어떤 애니메이션은 순전히 사용자를 즐겁게 하기 위한 것이다. 우리의 재생 버튼이 일시 정지 버튼으로 바뀌는 애니메이션이 그 예이다. 다른 애니메이션은 사용자에게 어떤 일이 일어나고 있는지를 알려준다. 예를 들어 다른 에피소드 재생 시작을 선택하면, 그 에피소드의 표지가 움직여서 재생 위치로 온다. 이 애니메이션에는 즐거움도 있지만, 특정 목적에도 이용되는 것이다. 즉 움직임을 보여주고 어떤 변화가 일어나고 있는지를 명확하게 알려주는 것이다”라고 설명했다.
 
 
과제로 남아 있는 구 버전 지원
 
자, 이제 칭찬은 잠시 멈추고 솔직하게 현실을 보자. 모든 머티리얼 디자인의 장점에도 불구하고 지난 1년은 개발자들에게 마냥 좋은 시간은 아니었다. 구글의 가이드라인을 가져와 실제로 구현해야 하는 임무를 맡은 사람들에게 너무나 자주 해결해야 하는 한 가지 중대한 과제가 있는데, 바로 ‘파편화’이다.
 
이바노빅은 “개발자가 아닌 사람의 관점에서 보면, 사람들은 서로 다른 크기의 안드로이드 디바이스를 보고는 정말로 어렵겠다고 생각한다. 하지만 구글은 안드로이드 4.0 이전부터 앱을 서로 다른 크기에 맞춰 쉽게 확장할 수 있도록 지원했다”라고 설명했다.
 
파편화가 문제가 되는 것은 디바이스의 다양성 때문이 아니라 이들 수많은 스마트폰과 태블릿 상에서 구동하는 소프트웨어의 다양성 때문이다. 안드로이드 업그레이드 상황을 훑어보기만 해도 개발자들이 처한 문제를 쉽게 알 수 있다. 시프트 젤리가 포켓 캐스트의 머티리얼 디자인을 출시했을 때, 사용자의 1/4 정도가 안드로이드 5.0 롤리팝이었다. 이 수치는 이제 50%까지 높아졌다. 이는 아직 절반 이상의 사용자가 구 버전 안드로이드를 사용하고 있으며, 이들 사용자를 따로 지원해야 한다는 것을 의미한다.
 
이바노빅은 “힘든 부분이다. 구글이 안드로이드 5.0에 새로운 API를 발표할 때 어떤 경우는 구 버전에서도 사용할 수 있는 지원 라이브러리를 제공하고, 어떤 경우에는 제공하지 않는다. 많이 구글이 제공하지 않으면, 구 버전 사용자도 개발자가 구현한 것을 사용할 수 있도록 하기 위해 스스로 뭔가를 해야 한다”고 설명했다.
 
포켓 캐스트는 현재 2012년의 안드로이드 4.1 젤리빈을 사용하는 디바이스까지 지원한다. 그리고 애니메이션 같은 머티리얼 디자인 요소는 안드로이드 5.0 이상의 디바이스로 제한되는데, 시프트 젤리 팀은 제법 어려운 결정을 내려야만 했다.
 
이바노빅은 “구글이 지원하지 않는 것을 위해 오픈소스를 찾을 수도 있고, 자체적으로 구현할 수도 있고, 아니면 포기하고 구 버전 디바이스는 지원하지 않는다고 할 수도 있다”고 말했다.
 
시프트 젤리는 구 버전 안드로이드에서도 포켓 캐스트가 롤리팝에서처럼 괜찮아 보이도록 할 수 있는 해법을 찾는 데 적지 않은 시간을 들였다. 하지만 많은 개발자가 자원도, 지식도, 그리고 그럴 만한 동기도 없다. 이는 머티리얼 디자인의 개선과 개발자 관점에서 머티리얼 디자인을 좀 더 실용적으로 만들기 위해서 개발자들이 구글에 가장 우선적으로 요청하는 사항이 될 것이다.
 
맥스 웨이너는 “현실에서 롤리팝만을 지원할 수는 없다”라며, “구 버전을 지원해야만 하며, 심지어 때로는 2011년 아이스크림 샌드위치까지 지원해야 할 때도 있다. 이 때문에 자연스러운 애니메이션과 같은 것들을 제대로 구현될 수 있는 툴이 더 필요하다”라고 설명했다.
 
한편 구글은 올해 I/O 컨퍼런스에서 머티리얼 디자인 요소를 구 버전 디바이스에서도 구현할 수 있도록 새로운 자원을 발표했다. 하지만 애니메이션이나 엘리베이션과 같은 일부 영역은 여전히 지원되지 않는다.
 
여러 가지 과제를 안고 있지만, 머티리얼 디자인이 안드로이드가 발전해 나가는 데 도움이 되는 디자인 표준이라는 데에는 별다른 이견이 없다. 이전의 업데이트가 새로운 느낌의 페인트를 칠하거나 부분적으로 광택을 낸 것 같은 느낌이었다면, 머티리얼 디자인은 실질적으로 안드로이드를 완전히 새로운 플랫폼으로, 그리고 새로이 응집력을 가진 플랫폼으로 느껴지게 한다.
 
이바노빅은 “옛날에는 보기 흉했다고 말하려는 것은 아니다. 하지만 과거 안드로이드는 세계에서 가장 보기 좋은 운영체제는 아니었다”라며, “머티리얼 디자인으로 구글은 디자이너에게 이곳 저곳을 손 보는 수준이 아니라 모든 것을 새로 만들 수 있는 자유로운 영역을 부여한 것 같다”고 강조했다. 
Posted by kimdirector | 2015.06.25 | Hit : 2140
Origin http://www.itworld.co.kr/news/93967
Tags 구글 머티리얼 디자인
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=449

COMMENT
목록보기 이전보기
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
메일폼 홈페이지 모바일 로고 웹디자이너 기획 프로그램 Awwwards 인터렉티브 CX 시리 디자인 패러다임 Adobe 디자인 환경 color HTML5 BIP HTML5 직원 윈도우 파이어폭스 모바일 CI 폰트 성공 자산 트렌드 Mobile 데이터 컬러 무료 리소스 어도비 디자인 로고 포토샵