청춘, 구글이 정의 내린 디자인 트렌드

상세페이지

  • HOME > 월별 특집 & 기획

청춘, 구글이 정의 내린 디자인 트렌드

머티리얼 디자인 material design

1. 머리티얼 디자인 가이드의 핵심과 의의
2. 기존 사용자들을 위한 이밥차의 현명한 투자
3. 기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정
4. "앱 체류시간 3배 늘었어요" 해먹남녀의 '머티리얼 디자인' 적용기
5. 청춘, 구글이 정의 내린 디자인 트렌드
6. PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머리티얼 디자인 라이트 함께 보기

구글이 지난해 공개한 머티리얼 디자인 가이드는 모바일 화면 디자인의 혁명이었다. 애플만이 자체 원칙에 따라 철저하게 조작하던 모바일 친화 UI·UX를 시작부터 마무리 단계까지 재정립해 하나의 사조를 완성했다. 이를 계기로 화면이 부족하지 않은 간결하고 유려한 디자인에 사용자 만족도가 높아지고 있다. 최근 구글은 머티리얼 디자인을 적용한 앱들의 성과에 대해서도 공개했는데, 제대로 적용한 앱의 경우 그 성과가 상당히 높아졌다. 과연 머티리얼 디자인은 모바일 UX의 해답일까. 머티리얼 디자인의 핵심과 의의, 머리티얼 디자인을 적용한 후 달라진 앱 서비스, 그리고 웹 디자인에의 적용 가능성까지. 머티리얼 디자인의 모든 것을 알아본다.

진행. 월간 w.e.b. 편집국


구글은 마치 청춘과 같다. 디자인 분야에서는 말이다. 아직 성장하고 있고 그만큼 가능성이 많은 구글. 구글은 왜 2014년 머티리얼 디자인 가이드를 공개했으며, 국내외에서 그것을 적용한 사례로 어떤 앱이 있을까. 장태익 구글 코리아 Developer Relations 부장의 인터뷰를 통해 알아봤다.

글. 남은선 기자 es@websmedia.co.kr





장태익 구글코리아 Developer Relations 부장


머티리얼 디자인(Material Design) 가이드를 구축한 구글. 구글코리아에서 구글의 신기술을 한국 업체들이 잘 활용할 수 있도록 돕는 일을 하는 Developer Relations팀 소속 장태익 부장을 만났다. 그는 “구글에서는 매년 적지 않은 신기술들이 나와요. 일일이 모든 기술을 알려드릴 수 없으니 구글 블로그, 가이드를 활용하도록 안내하고, 업계별 특성에 맞게 최대한 많은 업체를 도와드리려고 합니다.”라고 자신의 업무를 소개했다. 장태익 부장은 주요 안드로이드 앱파트너사의 서비스에 맞는 구글 기술이 무엇인지, 개발, 기획 과정에서 필요한 점을 파악해 컨설팅한다. 구글이 개발하는 신기술은 일주일에 약 두 개씩, 일 년이면 무려 100개에 다다른다.


디자인 획일화가 아닌, 더 중요한 것에 집중할 수 있도록

2013년부터 구글은 안드로이드 앱들의 사용자 경험을 전반적으로 개선할 필요가 있다고 판단했다. 2014년 6월 Google I/O 2014에서 머티리얼 디자인 가이드를 공개했고, 이로써 구글 플레이 앱을 평균 이상의 수준으로 올리고자 했다. ‘최대 다수의 최대 행복’을 실현하려는 셈이다.

“모바일 앱보다 웹사이트에서 플랫디자인이라는 사조가 먼저 생겨났죠. 이런 사조와 구글이 추구하는 디자인 트렌드를 어떻게 연결할지 고민하고 정리한 결과물이 머티리얼 디자인 가이드라고 할 수 있어요.”

장 부장은 구글이 머티리얼 디자인 가이드를 만든 가장 큰 이유를 설명했다. 모바일이라는 작은 화면에 많은 정보를 넣으려고 하다 보니 이미지를 과도하게 사용하는 경향이 많았다. 어떻게 해서든지 짧은 시간 내에 사람들을 사로잡고 싶었던 것. 하지만 문제는 해당 서비스 앱이 모바일이 아닌 다른 디바이스에서 작동할 때다. 일관된 레이아웃으로 안정적인 사용자 경험을 주기엔 역부족이었다. 그래서 이런 점을 파악해 머티리얼 디자인 가이드는 색상, 폰트, 여백 간격 등과 관련 개발 소스를 제공해 다양한 디바이스에 적용해도 무리가 없도록 하고, 사용자 경험의 만족도도 높이도록 만들었다.

모두가 같은 디자인 가이드를 따른다면 브랜드 아이덴티티가 사라지지 않을까. 이에 대해 장 부장은 “업체들이 가장 많이 문의한 부분이 그 점이에요. 디자이너, 기획자들은 디자인이 독특하면 사용자들이 쉽게 기억하고 많이 사용할 거로 생각해요. 하지만 사실 사용자들은 껍데기보다 내부 콘텐츠에 더 관심이 많은 것을 알 수 있었어요.” 라고 답했다. 머티리얼 디자인이라는 도구를 활용해 개발과 기획에 들어가는 시간을 절약하고, 콘텐츠 자체의 질과 콘텐츠가 어떻게 하면 잘 노출될지에 더 집중하도록 돕자는 것이 구글의 생각. 그저 디자인에 최대한 신경 쓰지 말라는 건가. 아니다. 구글은 이 결론을 내기까지 적지 않은 시간을 소요했다. 구글 자체 서비스를 약 3년 동안 테스트하면서 내린 결론이라고 장 부장은 밝혔다. “한 화면에서 보이는 정보량을 7~8개에서 4~5개로 줄여보고, 여백도 줄였다가 늘려보고 다양한 테스트를 해봤어요. 사용자 반응도 꼼꼼하게 확인했습니다.” 현재는 지메일, 구글 플레이 뮤직, 유투브 등 모든 구글 서비스에 머티리얼 디자인을 적용한 상태다. 

그렇다면 머티리얼 디자인을 적용한 앱은 어떤 것들이 있는지 알아보자. 구글은 머티리얼 디자인 어워드에서 총 여섯 개 앱(Pocket, Weather Timeline, Tumblr, NY Times - Latest News, B&H Photo Video Pro Audio, Pocket Casts)을 선정했다. 그 중 뉴욕타임즈는 머티리얼 디자인 특징 중의 하나인 Print-like Aesthetic, 즉 마치 인쇄물 같은 느낌을 잘 살린 앱이다. 종이가 여러 장 겹쳐져 정말 신문을 보는 듯하다. 글자 및 배경 색상도 파스텔 톤으로 과하지 않다. Pocket은 Adaptive Layouts의 모범 사례. 여러 디바이스에 따라 레이아웃이 유연하게 변한다. Tumblr는 Delightful Animation 사례로 꼽혔으며 페이지 간의 이동이나 클릭 버튼의 효과를 다양하게 반영했다. 구글은 그 밖에 총 열두 개의 앱을 좋은 사례로 공개했다. 해당 앱들은 Buzzfeed, Circle for BitCoin, Evernote, GroupMe, The Hunt, Indiegogo, Instacart, Lyft, Runtastic, SeriesGuide, Telegram, WiMan이다. 장 부장은 모범 사례로 핀터레스트도 예시로 들었다. 핀터레스트는 미국 구글과 함께 최초로 머티리얼 디자인을 적용했다고 한다. 한국에서는 최근 오지큐(OGQ)가 개발한 배경화면 HD(Backgrounds HD)앱을 모범사례로 추가했다. 이 앱을 내려받은 횟수는 무려 8천만. 그 외에 구글 플레이 웹사이트의 ‘아름답게 디자인된 앱 모음’이라는 코너에서도 국내외 모범사례를 볼 수 있다.

한국에 머티리얼 디자인이 자리 잡도록 구글코리아는 주요 업체를 대상으로 간담회 형식의 행사를 주최했다. 주요한 기능, 적용 시 주의사항 등에 대해 마치 ‘족집게 과외’처럼 안내했다. 당시 행사에는 약 40개 업체가 참여했다. 2015년 6월 정도 안으로 앱 개편을 마무리할 경우, 구글 코리아에서 공식적으로 공개하는 컬렉션에 포함하고 홍보도 할 수 있도록 했다. 당시 개편했던 ‘리멤버’, ‘이밥차’, ‘언니의 파우치’는 올해 6월 구글코리아가 개최한 공식 행사에서 적용 사례 및 효과를 공개했다. 이중 리멤버, 이밥차에 대한 내용은 이번 특집기사에서 자세히 다뤘으니 참고하길 바란다.




머티리얼 디자인 어워드 수상작 리스트(goo.gl/LxSpEv)




아름답게 디자인된 앱 모음(goo.gl/AlFV4p)




Pocket(Adaptive Layouts 모범 사례)



잘 활용하면 효율성 상승, 그렇지 않으면 무용지물

머티리얼 디자인을 적용한 모범 사례 외에도 실무자들이 말하는 장점은 무엇일까. 가장 큰 장점은 업무 효율성, 비용 대비 훌륭한 효과다. 장 부장은 “디자인이 중요하지가 않아서가 아니라, 기획자, 개발자와 딱 맞는 디자이너를 구하지 못한 상황이 있어요. 그럴 때 개발자가 머티리얼 디자인 가이드 덕분에 디자이너의 빈자리를 채울 수 있었다고 하더라고요.”라며 실무자의 경험을 들려줬다. 가이드에는 단순히 기능 설명만 있는 게 아니라, 그에 따라 필요한 개발 소스, 폰트까지 제공한다. 작년에 이어 올해도 계속해서 업데이트하고 있으며, 안드로이드 디자인 서포트 라이브러리에 가면 확인할 수 있다. OS 버전 업데이트 때마다 가이드 내용 자체는 바뀌지 않지만, 필요한 소스를 업데이트한다.

구글이 제공한 가이드는 전부 다 영어다. 영어가 모국어가 아닌 사람들은 이 때문에 아쉬움을 토로한다. 레퍼런스 소개도 가이드에 더 자세히 다루면 좋지 않았을까. 이에 대해 장 부장은 “그런 점을 보완하는 것이 제 역할이에요. 가려운 곳이 있다면 그것을 긁는 법을 알려드리죠. 그러면 수월하게 진행하시더라고요. 영어로 돼 있고 레퍼런스가 부족해도, 결국 가이드 안에 주 내용은 다 있거든요. 아느냐 모르느냐의 문제지 따라 할 수 있느냐 없느냐의 문제가 아니라고 봅니다.” 라고 답했다.

하지만 무조건 머티리얼 디자인을 적용한다고 잘 되는 건 아니다. 예를 들어 어느 업체는 내비게이션 드로어(Navigation Drawer)의 속성을 잘못 이해하고 해당 서비스의 사용자를 고려하지 않고 기능을 적용했다. 기능 수정 전에는 첫 화면에 띄웠던 중요한 콘텐츠를 내비게이션 드로어에 넣어버렸고, 결과적으로 사용자 반응이 안 좋아졌다. 내비게이션 드로어는 개인 설정과 같이 자주 사용하지는 않아도 중요하므로 언제든지 실행할 수 있도록 배치하는 게 좋다. 이렇듯 ‘머티리얼 디자인 가이드를 참고하되 각 서비스 콘셉트, 사용자 경험에 맞게 활용’하는 것이 비결이다.  




Weather Timeline(Crafted Simplicity 모범 사례)



NY Times - Latest News(Elegant Typography 모범 사례)




Pocket Casts (Seamless Browsing 모범 사례)




Tumblr(Delightful Animation 모범 사례)

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 남은선 기자 , 구글 , 구글 코리아 , 장태익 박사 , 머티리얼 디자인 , Developer Relations , 아름답게 디자인된 앱 모음 , 머티리얼 디자인 적용 사례 ,

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사


정기구독신청