Google Developers Korea Blog: August 2014

안드로이드 웨어 디자인 스프린트 후기

Wednesday, August 27, 2014

안녕하세요. 구글 Developer Advocate 양찬석 입니다. 8월들어 ‘멀티스크린 해커톤' 이라는 주제로 다양한 행사가 진행되고 있습니다. 지난 월요일에는 행사의 하이라이트라고 할 수 있는 '안드로이드 웨어 디자인 스프린트' 행사가 진행되었는데요, 참석자 분들과 함께 안드로이드 웨어 디자인 원칙과 핵심 기능들을 살펴보고 ‘디자인 스프린트'를 통해 안드로이드 웨어를 위한 서비스를 직접 디자인해 볼 수 있는 시간을 가졌습니다.

월요일 낮시간에 열린 행사였지만 많은 분들이 참가해주셨습니다. 본격적인 디자인 스프린트에 앞서 우선 저와 같은 개발자 플랫폼팀의 Timothy Jordan 이 안드로이드 웨어 디자인 원칙을 소개하고 이어서 같은 팀의 Wayne Piekarski 이 개발자 분들에게 유용한 안드로이드 웨어의 핵심 기능을 정리해 주었습니다. 안드로이드 웨어 플랫폼 전반을 이해할 수 있는 좋은 기회였던 것 같습니다. 아쉽게 참석하지 못한 분들을 위하여 내용을 간단히 정리해 보았습니다.
안드로이드 웨어 디자인 원칙

<안드로이드 웨어는 스마트폰에 비교해 훨씬 짧은 시간안에 필요한 정보를 확인할 수 있습니다>안드로이드 웨어는 왜 만들어졌을까요? 많은 사람들이 하루에도 수 십번씩 습관적으로 주머니 속의 휴대폰을 꺼내 새로운 내용이 있는지 확인하고 다시 폰을 주머니에 넣습니다. 적지 않은 시간이 낭비되고 사용자의 주의가 분산됩니다. 안드로이드 웨어는 필요한 정보를 필요한 순간에 제공하고 사람들이 한눈에 이를 확인할 수 있도록, 그래서 사람들이 다른 사람들 그리고 실제 세상과 좀 더 긴밀하게 연결 될 수 있도록 돕기 위해 만들어졌습니다. 안드로이드 웨어 앱은 다음과 같은 특징을 갖고 있습니다.

상황 인지를 통한 자동 실행

한눈에 알아볼 수 있는 간결한 디자인

제안하기와 요구하기

최소한의 사용자 인터렉션

이 중에서 특히 첫 번째 원칙이 중요합니다. 안드로이드 웨어를 위한 서비스를 디자인할 때는 앱이 언제 어떤 식으로 실행되어 어떤 정보를 사용자에게 제공할지 고민해야합니다. 안드로이드 웨어를 가장 안드로이드 웨어 답게 만들어주는 것이 바로 상황 인지를 통한 자동실행 입니다. 안드로이드 웨어는 스마트폰 혹은 태블릿에서 게임이나 웹 브라우징을 하는 것 처럼특정한 일을 집중적으로 수행하기 위한 플랫폼이 아닙니다. 일상 생활 중에 흘깃 살펴보는 것 만으로 새로운 내용이 있는지 확인하고 필요한 경우 휴대폰을 꺼내 추가적인 내용을 확인할 수 있는 힌트를 제공할 수 있도록 디자인되어야 합니다. 내가 걷고 있는 것을 알아채서 지금까지의 걸음 수를 카드로 표시해주는 만보기 앱이라던가 내가 등록한 달력 스케쥴에따라 자동으로 교통편을 추천해주는 구글 나우가 좋은 예가 될 수 있을 것 같습니다. 안드로이드 웨어 핵심 기능

안드로이드 웨어 플랫폼에서 지원하는 핵심 기능은 크게 다음 4가지로 정리해볼 수 있습니다.

알림 - 기존 안드로이드 플랫폼의 알림은 바로 안드로이드 웨어 디바이스와 연동됩니다. 물론 안드로이드 웨어 디바이스에 특화된 다양한 기능도 함께 제공되고 있습니다.

음성 - 안드로이드 웨어는 사용자가 음성을 통해 명령을 내리고 음성을 통해 노트를 적거나 문자 메세지에 응답하는 기능을 지원합니다. 개발자 여러분도 다양한 음성 지원 기능을 활용할 수 있으며, 사용자에게 보다 자연스러운 사용자 경험을 제공할 수 있습니다.

웨어러블 앱 - 단순한 알림만이 아니라 새로운 형태의 화면이나 사용자 상호작용 혹은 웨어 디바이스의 센서 데이터를 활용할 필요가 있는 경우, 안드로이드 웨어에서 동작하는 앱을 직접 구현할 수 있습니다.

데이터 전송 - 안드로이드 웨어 앱과 스마트폰/태블릿간에 데이터를 주고 받을 수 있는 3 가지 형식의 API 를 지원합니다. 노드 API 를 이용한 안드로이드 웨어와 디바이스 간의 연결 상태 변화를 감지할 수 있고, 메세지 API 를 통해 간단한 데이터를 주고 받을 수 있습니다. 데이터 API 를 이용해 특정 데이터를 동기화 할 수 있습니다.

디자인 스프린트

안드로이드 웨어에 관한 전반적인 소개 후에는 두 시간에 걸쳐 안드로이드 웨어를 위한 서비스를 디자인하는 '디자인 스프린트' 시간이 이어졌습니다. 디자인 스프린트는 구글 벤처스에서 스타트업에서 제품을 디자인할 때 활용할 수 있는 방법으로 제안하고 다양하게 활용하고 있는 방식입니다. 원래는 5일짜리 코스로 기획되었지만, 이번 행사에서는 실제 제품을 디자인하는 것을 주 목적으로 삼기 보다는 참석자 분들이 디자인 스프린트 방법론을 경험하고, 안드로이드 웨어 디바이스의 디자인 원칙을 직접 체험할 수 있도록 두 시간 정도의 짧은 시간동안 이루어졌습니다.

참석자 분들은 3~4명 정도씩 팀을 짠 후, 미리 주어진 유저 프로파일을 기반으로 안드로이드 웨어 서비스 UX 플로우를 개발하는 시간을 가졌습니다. 주어진 시간이 길지 않았고, 생소한 팀원들간에 많은 협력이 필요한 시간이였습니다. 감사하게도 참석하신 분들은 이해하기, 아이디어 펼치기, 결정하기, 프로토타입 만들기, 평가하기로 이어지는 각각의 디자인 스프린트 단계에 활발히 참가해 주셨고, 마지막에는 마운틴뷰에서 찾아온 다른 구글러들도 놀랄만큼 멋진 결과물을 만들어 주셨습니다.

개인적으로, 길지 않은 시간이였지만 새로운 안드로이드 웨어 플랫폼을 보다 잘 이해할 수 있는 유용한 시간이였습니다. 아쉽게 행사에 참석하지 못한 개발자 여러분을 위하여 안드로이드 웨어 디자인 스프린트 행사를 한국 GDG 커뮤니티 분들과 다시 한번 진행해보려고 계획하고 있습니다. 안드로이드 웨어 그리고 디자인 스프린트에 관심있는 분들이라면 저희 개발자 블로그나 페이스북의 GDG 코리아 페이지의 소식에 귀를 기울여주시면 좋을 것 같습니다.

구글 멀티스크린 코드랩 후기

Wednesday, August 20, 2014

안녕하세요. 구글 Developer Advocate 양찬석입니다. 얼마전 블로그 포스트를 통해 예고드린대로, 8월 18일 월요일 늦은 저녁, 구글 코리아 21층 집현전 회의실에서 멀티스크린 코드 랩 행사가 진행되었습니다. 평일 저녁 늦은 시간임에도 불구하고 많은 개발자 분들이 관심을 갖고 참석해 주셨고, 안드로이드 웨어, 크롬 캐스트, 안드로이드 TV 등 다양한 디바이스를 활용하는 앱을 직접 개발해 보는 시간을 가졌습니다.

코드랩은 저와 GDG Korea Android 운영자이신 김태호님 그리고 김종찬님이 준비한 간단한 미디어 어플리케이션을 시작으로, 노티피케이션을 이용한 안드로이드 웨어 지원, Google Play Service 를 이용한 구글 캐스트 지원, 안드로이드 L 개발자 프리뷰에 포함된 Leanback Library 를 이용한 안드로이드 TV 지원 순으로 진행되었습니다. (코드랩 행사 준비를 위해 지난 2주간 주말에도 함께 코드 작업에 열심이셨던 두 운영자 분께 다시한번 감사의 말씀을 전합니다) 준비된 디바이스가 부족했고, 무선 네트워크등 몇 가지 진행상의 어려운 점이 있었지만, 정말 많은 개발자분들이 밤 10시가 훌쩍 넘는 시간까지 함께 자리해 주셨고 또 저희가 준비한 코드랩의 모든 단계를 잘 마무리하시고 득템에 성공하셨습니다. 열성적으로 참석해주신 모든 개발자 분들께 다시 한번 감사의 인사를 드립니다.

<코드랩 행사에 사용된 샘플 미디어 앱, 안드로이드 TV앱>안드로이드 웨어, 구글 캐스트, 안드로이드 TV 각각의 기술에 대해 깊이있는 내용을 다루지는 못했지만, 각 디바이스를 지원하기위해 꼭 필요한 핵심 내용들과 이미 개발자 분들에게 익숙한 안드로이드 개발 도구들을 이용하여 다양한 멀티스크린을 지원할 수 있다는 점을 확인하실 수 있었을 것 같습니다.
구글의 다양한 멀티스크린 기술들을 소개하고 개발자 여러분이 이를 활용하여 사용자들에게 지금보다 더욱 멋진 사용자 경험을 선사할 수 있는 멀티스크린 해커톤 행사가 계속해서 진행되고 있었는데요, 야심한 월요일 밤, 열혈 코딩으로 즐거웠던(?) 멀티스크린 코드랩 행사에 이어 돌아오는 월요일에는 구글 엔지니어들과 함께 하는 안드로이드 웨어 디자인 스프린트 행사가 이어질 예정입니다. 안드로이드 웨어 개발의 핵심이라고 할 수 있는 좋은 UX 디자인에 관해 전반적인 내용과 통찰을 얻을 수 있는 좋은 기회가 될 것이라고 생각합니다. 더욱 많은 관심과 참가 부탁드립니다.
마지막으로 꼭 참가하고 싶으셨지만, 여러가지 이유로 아쉽게 행사에 참석하지 못하신 분들은 너무 실망하지 마세요. 행사에 사용된 코드와 개발 가이드라인은 내용이 정리되는대로 구글 코리아 개발자 블로그를 통해 공개해 드릴 예정입니다.

Google Sign-in을 통해 Google ID와 PW만으로 주요 서비스들을 사용해 보세요

Wednesday, August 13, 2014

작성자: Daniel Sung Jin Kim, Partner Development Manager, APAC Knowledge Lead, Google APAC
국내 최대 신문사인 조선일보의 온라인/모바일 자회사인 디지털 조선일보/미디어조선에서 최근 Google ID와 PW를 사용하여 조선일보의 프리미엄 온라인/모바일 서비스를 가입/사용할 수 있는 Google Sign-in 서비스를 적용했습니다. 조선일보는 월평균 1천만명 가량의 독자들이 온라인 웹 서비스를 통해 조선일보 기사를 구독하는 국내 최대의 온라인 뉴스 서비스이기도 합니다.
조선닷컴은 한차원 높은 독자 편의성 개선을 위해 소셜 로그인, 즉 Google Sign-in과 같이 이메일이나 소셜서비스의 ID와 비밀번호를 사용하여 손쉽게 조선닷컴의 서비스를 가입하여 프리미엄 콘텐츠를 사용 혹은 볼 수 있게끔 2014년 7월 26일에 온라인/모바일 웹과 안드로이드 앱 서비스 개편하였고, 그리고 8월 1일에는 iOS 버전 앱에 Google Sign-in을 적용하였습니다. 이제 조선일보의 프리미엄 뉴스도 Google Sign-in의 손쉬운 회원가입을 통해 쉽게 접하실 수 있습니다.

그러면 조선일보와 같이 자체 로그인을 사용하지 않고 Google이나 해외 유수 업체들이 제공하는 소셜 로그인 (Social sign-in 혹은 3rd party authentication) 서비스를 사용하는 이유는 무엇일까요? 여러 관점에서 소셜 로그인의 혜택 혹은 장점을 생각해 볼 수 있습니다.
- 유저/독자 편의성 개선: 수십, 수백개의 온라인/모바일 서비스를 사용하는 현대인의 입장에서는, 수많은 서비스를 가입할 때 마다 새로운 아이디를 생성하고 비밀번호를 만드는 것이 곤욕스럽고 귀찮기도 합니다. 더 큰 문제는 이 서비스들을 사용하면서 아이디와 패스워드를 분실하는 경우가 많아 아이디와 비밀번호를 찾기 위해 적게는 몇 분에서 몇 시간까지 시간을 허비하는 경우가 많은데요. Google Sign-in과 같은 소셜 로그인 서비스는 이러한 불필요한 시간 낭비를 줄여주고 하나의 아이디와 비밀번호로 많은 다양한 3rd party 서비스들을 사용하게 해줍니다. 물론 모바일 환경 상에서 수많은 개인 정보를 입력하며 회원가입을 해야하는 번거로움, 그리고 개인정보 유출에 대한 걱정도 덜어주는 매우 고마운 서비스라고 할 수 있습니다. 한국인의 95%에 가까운 스마트폰 사용자가 Android 기반의 단말기를 사용하고 있다는 점은 그 많은 사람들이 Google ID를 모두 보유하고 있다는 것인데 이 점이 시사하는 바가 큽니다.
- 사용자의 개인정보 보호 강화: Google과 같이 개인정보 보호에 가장 높은 우선순위를 두는 선두 글로벌 IT기업의 경우 지속적으로 유저의 개인정보 보호에 많은 투자와 노력을 기합니다. Hacking 등으로 개인정보가 노출될 수 있는 가능성을 최소화 시켜주고 새로운 서비스 가입 시 불필요하게 개인정보를 새로 입력하는 과정에서 생기는 개인정보 노출 혹은 비밀번호 노출을 사전에 방지해 줍니다.
- Bounce rate 감소: 개인정보를 요구하며 회원가입을 강요하는 사이트들의 경우 높은 bounce rate을 경험하게 마련입니다. Bounce rate는, 서비스 사이트 메인 홈페이지에서 콘텐츠를 보려고 클릭 했을 때 요구되는 회원가입 때문에 개인정보 유출을 꺼려하는 사용자들, 혹은 회원가입을 귀찮아하는 사용자들이 회원가입을 하지 않고 페이지를 바로 빠져나가는 것을 일컫습니다. 이렇게 회원가입이나 로그인을 하지 않고 사이트를 바로 빠져나가는 사람이 10명 중 한 명일 경우 bounce rate이 10%입니다. 하지만 이미 보유하고 있는 Google ID와 비밀번호만 사용해서 간단하게 회원가입이 가능할 경우 bounce rate을 현저히 줄일 수 있습니다. 실제로 일본의 Pixiv라는 아티스트/만화 커뮤니티 사이트의 경우 Google Sign-in을 통해 bounce rate를 25%나 감소한 것으로 나타났습니다.
- 해외에서 낮은 brand 인지도 극복 효과: 국내에서는 유명하지만 해외 사용자/유저들에게는 생소한 브랜드로 들리는 국내 업체들이 아직 많이 있습니다. 이들 기업들이 제공하는 해외 서비스의 경우 해외 유저들이 개인의 개인정보를 제공할만큼 신뢰를 쌓지 못한 경우가 많아 회원 가입에 많은 어려움을 겪는 경우가 있습니다. Google Sign-in과 같은 전세계적으로 브랜드 인지도가 높은 기업이 제공하는 소셜 로그인 서비스를 이러한 장벽을 넘는 수단으로 활용할 수 있습니다. Google의 인증 서비스를 적용하였다는 것만으로도 해당 서비스에 대한 신뢰가 개선되고, 개인정보를 추가로 새로운 업체에 노출하지 않아도 된다는 것만으로도 회원 가입 증대에 큰 도움을 받을 수 있습니다.
이렇게 소셜 로그인을 적용하면, 유저들이 직접 개인정보를 제공하면서 가입을 하지 않아도 기존에 유저들이 이미 보유하고 있는 구글 아이디 혹은 다른 구글의 경쟁 서비스의 아이디와 비밀번호 만으로 서비스를 가입/사용할 수 있기 때문에 웹/모바일 유저들에게 폭넓은 선택권을 제공하여 유저 유입 효과를 볼 수 있습니다. 중요한 건 기존의 자체 로그인 서비스를 유지하면서 Google Sign-in과 같은 소셜 로그인 서비스를 추가 보충재로 활용할 수 있다는 겁니다.
하지만 여기서 왜 그럼 굳이 다른 경쟁 서비스가 아니라 Google Sign-in을 업체들은 선택을 하는 것일까요? 그 이유로는
첫째, Google은 Gmail, Google Play, YouTube 등 구글의 전 서비스에 걸쳐 하나의 ID를 사용하는 single sign on 서비스를 채택하고 있습니다. 즉 Google의 그 어느 서비스 하나만 사용하더라도 Google의 모든 서비스를 자유롭게 사용할 수 있다는 뜻입니다. 이를 달리 설명 드리면 Google Sign-in을 적용하신 파트너사들은 Google+라는 Google의 소셜 서비스의 유저들에게만 서비스를 노출시키는 것이 아니라 수십억명의 사용자를 보유한 Google의 검색, Gmail, Google Play, YouTube의 사용자 들에게 자사의 브랜드와 서비스를 노출 시킬 수 있다는 이야기 입니다.
둘째, Google Sign-in은 다른 경쟁 업체들이 보유하지 못한 over-the-air (OTA) app installation이라는 차별화된 기능을 보유하고 있습니다. 예를 들어 처음으로 조선일보 웹사이트에 한 사용자가 Google 아이디와 비밀번호를 사용해서 가입을 했을 경우 Google은 자동으로 사용자가 보유한 Android 디바이스들에 조선일보의 모바일 앱이 설치가 되었는지 감지를 하게 됩니다. 만약 앱이 설치가 안 되어 있다면 Google은 자동으로 해당 사용자에게 조선일보의 앱을 귀사가 보유한 안드로이드 디바이스 중 하나에 다운로드 하겠냐는 안내창을 보여줍니다. 이러한 안내 메시지에 노출된 사용자의 40%가 실제로 앱을 다운로드 받는 것으로 나타났으며 이는 모바일앱 다운로드를 유도하기 위해 많은 현금을 PR과 마케팅에 쏟아붙는 IT에게 좋은 비용절감 수단으로 활용되고 있습니다. 이 기능은 온라인 user base가 큰데 반해 모바일 유저 베이스가 약한 파트너사들에게 유용하게 활용이 될 수 있습니다. 이밖에도 새롭게 차별화된 기능이 올 하반기 그리고 2015년에 계속하여 출시될 예정입니다.
또 하나 중요한 점은, 그렇다면 기존의 업체들이 Google Sign-in을 적용하고 어떤 효과를 보고 있는지 인데요. 많은 Google Sign-in 적용 파트너사들이 평균 두자리수의 신규 가입자 증가를 경험 했습니다. 그리고 Snapette과 Fancy.com과 같은 업체들의 경우 Android platform 상에서 40% 정도의 사용자들이 Google Sign-in을 사용하는 것으로 나타났습니다.
이러한 장점들과 Google Sign-in의 국내외에서의 파급력 혹은 잠재력을 보고, Digital Chosun, Cymera, Blueribbon, Vingle, Funding21 등의 많은 국내 기업과 서비스들이 이미 지난 한해 동안 Google Sign-in을 적용을 하였습니다.

Cymera

Vingle

Blue Ribbon Survey

Nexon, Com2us(all Com2us games), Gamevil(Hive log-in applies Google Sign-in for all games), Raon Games 의 모바일 게임 앱들도 Google sign-in을 적용 중입니다.

Nexon

Gameville

Raon Games

Com2us

Google Sign-in과 함께 좀 더 손쉽고 편하게 서비스 가입 및 아이디와 비밀번호 관리 및 보호를 시작해 보시겠습니까? 강추합니다. 관심있는 개발자 분들은 https://developers.google.com/+/features/sign-in을 참고해 주세요.

구글 멀티스크린 코드랩 참석자 모집~!

Monday, August 11, 2014

구글 멀티스크린 코드랩은 참석자 여러분이 직접, 사전에 준비된 간단한 안드로이드 미디어 어플리케이션의 기능을, 안드로이드 웨어, 구글 캐스트, 안드로이드 TV로 확장해 보는 시간입니다.
여러분의 안드로이드 앱에 안드로이드 웨어/구글 캐스트(크롬캐스트)/안드로이드 TV 지원을 추가하시고자 한다면 이번 코드랩에서 구체적인 방법들을 실습해 보실 수 있으므로 이후 실제 작업때 많은 도움이 될 것입니다.

일시: 2014년 8월 18일 월요일 오후 6시 30분 ~ 10시 30분

장소: 구글 코리아 사무실

참고로, 당일 코드랩 진행시에도 안내를 드리겠지만 다음과 같은 개발 환경을 미리 준비해 주시면 훨씬 원활하게 진행 가능합니다.

안드로이드 API Level 16 (젤리빈) 이상의 플랫폼이 설치된 스마트 폰 혹은 태블릿

L 개발자 프리뷰 시스템 이미지가 설치된 디바이스도 좋습니다.

안드로이드 웨어 / 크롬 캐스트 / 안드로이드 TV(ADT-1) 디바이스

각 디바이스가 없는 분들도 개발하실 수 있도록 공용 디바이스는 준비할 예정입니다만 디바이스를 직접 가지고 오시면 좀더 편리하게 실습해 보실 수 있습니다.

최신 안드로이드 스튜디오 (버전 0.8.2 이상 )

준비된 샘플 프로젝트는 안드로이드 스튜디오 기반 프로젝트입니다.
안드로이드 스튜디오는 무료로 다운로드 받으실 수 있습니다.

안드로이드 SDK

SDK 매니저를 통해 아래와 같은 SDK 를 설치하시기 바랍니다.
Tools 폴더 아래

Android SDK Tools 23.0.2
Android SDK Platform-tools 20
Android SDK Build-tools 20

Android L (API 20, L Preview) SDK
Androdi 4.4W (API 20) SDK
Extras 폴더 아래

Android Support Repository
Android Support Library
Google Play Services
Google Repository
Intel x86 Emulator Accelerator

GitHub 계정

샘플 프로젝트는 GitHub 계정을 통해 공유됩니다. GitHub 계정이 없는 분들은 위 링크를 통해 계정을 생성하시기 바랍니다.

저녁 식사와 음료가 제공됩니다.

노트북, 테스트용 폰 혹은 태블릿, USB 케이블 등 개발에 필요한 기본적인 장비는 직접 가지고 오셔야 합니다.

주차는 제공되지 않으니 대중교통을 이용해 주세요.

참고로 이번 코드랩은 구글 멀티스크린 해커톤의 일부로서 진행됩니다. 참석자 모집은 선착순이 아니니 꼭 구글 멀티스크린 해커톤 관련 공지를 먼저 읽어 보세요. (기존에 구글 멀티스크린 해커톤에 참가 신청을 완료하신 경우에는 이미 접수가 된 것이므로 코드랩을 위해 별도로 신청을 하실 필요가 없습니다.)
안드로이드 개발자 여러분들의 많은 관심 부탁드립니다~
구글 멀티스크린 코드랩 참가 신청하기!

2014 구글 I/O 앱의 머티리얼 디자인

Thursday, August 7, 2014

By Roman Nurik, lead designer for the Google I/O Android App
매년 구글 I/O에서는, 안드로이드용 I/O 앱이 두 가지 목적에서 출시됩니다. 첫 번째는 컨퍼런스 참석자들을 위한 안내 및 집에서 각자의 스케줄에 맞추어 컨퍼런스를 즐길 수 있도록 해주는 것입니다. 두 번째는, 어떻게 보면 더 중요한 목적인데, 새로운 안드로이드 디자인과 기능을 가장 잘 적용한 예제로 활용하기 위해서 입니다. 저번 주 구글 I/O 2014 앱 소스코드가 공개되어, 각각의 디자인 요소가 어떻게 구현되었는지 자세히 살펴보실 수 있습니다. 이 포스팅에서는 이번 2014년 I/O 앱의 디자인에 대해 간략히 소개해 봅니다.
이번 I/O 앱에서는 새로운 머티리얼 디자인이 적용되었으며, 합리적이고 실제 적용 가능한 안드로이드 L 개발자 프리뷰의 특징들을 살려 보여주고 있습니다. 그럼 이번 앱의 디자인 원리와 결과물에 대해 더 자세히 살펴볼까요?

표면과 그림자
머티리얼 디자인에서는 앱의 구조를 표현하는데 표면과 그림자가 중요한 역할을 합니다. 머티리얼 디자인 가이드라인에는 앱의 구성 요소를 배치할 때 참고할 수 있는 레이아웃 원칙이 포함되어있습니다. 이를 참고하면 언제 어느 곳에 그림자가 나타아야 하는지 감을 잡을 수 있는데요, 한 가지 예로 아래 스케줄 화면에 어떤 반복이 나타나는지 한번 살펴보시길 바랍니다.

예시1

예시2

예시3

첫번째 예시에는 여러가지 문제가 있습니다. 우선, 앱 바 아래 그림자로 인해 화면이 두 개의 시트로 나누어져 있는 것으로 보입니다. 이렇게 되면, 하단의 시트에는 탭 바를 포함하여, 텍스트 뷰와 같은 다양한 요소들이 추가로 포함됩니다. 시트 안의 내용물을 표시하는 “잉크" 는 가능한 단순하게 유지되어야 합니다.

예시1에서는 잉크가 단순하지 않아 시작적으로 다소 지저분 해 보입니다. 그 외 앱 바와 콘텐츠 사이에 있는 이 탭을 아예 제3의 시트로 만들 수도 있겠으나 그렇게 되면 한 화면 안에 지나치게 많은 레이어링이 들어가게 됩니다. 두 번째와 세 번째 예시는 보다 깔끔하며 잉크가 글자, 아이콘, 강조된 영역에만 쓰이도록 구현되어 있습니다.

“표면” 영역 또한 페이지의 디테일에서 중요한 역할을 합니다. 아래 예시를 보면 첫번 번째 릴리즈 버전에서 페이지 스크롤을 내림에 따라 맨 위의 배너가 세션 이미지에서 세션 컬러로 자연스럽게 바뀌는 것을 볼 수 있습니다. 또한 세센 이미지 부분의 스크롤 속도는 세션 타이틀 부분 스크롤 속도의 절반으로 시차적(parallax) 효과를 줍니다. 한 가지 문제는 머티리얼 디자인의 이런 효과가 실제 물리적 현상을 지나치게 왜곡한다는 점이었습니다. 텍스트가 슬라이딩 되면서, 마치 배경 종이의 투명도가 애니메이션 동작에 따라 바뀌는 것처럼 보였습니다.

그래서 6월 25일 릴리즈 된 업데이트 버전에서는 타이틀 텍스트가 놓여지는 표면을 분리했습니다. 이 표면은 컬러와 투명도가 동일하게 유지됩니다.스크롤을 내리기 전에 이 표면은 본문 텍스트를 담고 있는 시트와 맞붙어 경계선(seam)을 형성합니다. 스크롤을 내리기 시작하면 이 표면은 본문 텍스트 위로 올라오며, 본문 텍스트가 이 표면의 아래로 들어가도록 합니다.

이러한 정렬 방식은 머티리얼 디자인의 원리를 잘 반영하고 있으며 사용자들이 더 유기적인 비주얼, 실제적인 동작을 느낄 수 있도록 해줍니다. (코드 보기 : Fragment / Layout XML)

컬러
머티리얼 디자인의 중요한 원칙 중 하나는 인터페이스가 “선명하고(bold), 그래픽적이며(graphic), 의도적(intentional)”으로 디자인 되어야 하며, 각각의 요소들을 디자인 할 때는 출판물 디자인의 핵심 원칙을 잘 준수해야 한다는 것 입니다. 그 중 두 가지 요소는 컬러와 여백입니다.

머티리얼 디자인에서 UI 컬러 팔레트는 하나의 주요 색, 하나의 강조 색으로 구성됩니다. 앱 바의 배경색과 같이 큰 크기의 영역은 주요 색의 500 shade로 들어가고, 상태 바와 같이 작은 영역들은 700 shade처럼 더 짙은 색으로 들어갑니다. 강조 색은 사용자의 주의를 끌어야 하는 영역에 사용됩니다. 이렇게 톤을 달리한 주요 색들과 밝은 컬러의 강조 색의 병렬은, 실제 내용을 압도하지 않으면서 앱이 더 대담하고 컬러풀해 보이도록 합니다.
I/O 앱에서는 두 가지 컬러가 다양하게 활용되었습니다. 대부분의 강조 색은 Pink 500 이 쓰였고, Add to Schedule 메뉴의 경우는 좀 더 차분한 느낌의 Light Blue 500 이 쓰였습니다. (코드 : XML color definitions / Theme XML )

세션 컬러에는 각각의 디테일에 따라 다른 컬러를 사용했습니다. 우리는 일관된 밝기를 유지하고 플로팅 액션(floating action) 버튼과 세션 이미지의 최적화 된 대비 효과를 위해 기본 머티리얼 디자인 컬러 팔레트를 사용했습니다.

컬러 간 대비 효과를 보기 위해 플로팅 액션 버튼들을 모아 정렬한 세션 컬러들입니다.

밝기를 비교하기 위해 채도를 뺀 세션 컬러들입니다.

여백

우리가 생각한 “전통적 프린트 디자인”의 또다른 중요한 요소는 여백으로, 그 중 특히 키라인(keyline)에 중점을 두었습니다. 이미 수직 4dp 그리드(버튼과 간단한 리스트 아이템은 48dp, 표준 액션 바는 56dp, etc.) 를 사용하고 있지만 키라인 자체에 대한 가이드는 머티리얼 디자인에서 새롭게 추가된 내용입니다. 특히 다른 텍스트 아이템들을 키라인 2 (핸드폰에서는 72dp, 태블릿에서는 80dp)로 정렬하는 것은 깨끗하고, 용지에 인쇄된 것 같은 느낌이 스크린에서 표현되도록 해줍니다. 동시에 스크린에서 텍스트 내용을 빠르게 훑어볼 수 있도록 해주기도 하죠.

그리드

머티리얼 디자인은 “모든 경우에 적용 가능”해야 합니다.

통합적인 디자인 시스템은 상호작용과 공간을 잘 정리해 줍니다. 동일한 디자인 시스템이 각각의 기기에 맞게 재단되고 적절한 상호작용이 적용되어 사용자들에게 보여집니다. 컬러, 아이콘, 정렬 방식, 공간 활용은 그대로 유지되어야 합니다.

현재 I/O 앱의 많은 스크린들은 여러 세션을 모아서 보여주고 있습니다. 이 여러 세션을 보여주는 데에 있어서 카드. 리스트, 그리드가 사용되었습니다. 본래는 카드 방식이 주로 사용되었으나 세션들이 비슷한 콘텐츠들을 포함하고 있기 때문에 카드는 부적절한 방법이라고 판단했습니다. 카드의 가장 자리의 그림자는 지나치게 많은 시각적 효과를 주었고 시각적으로 콘텐츠를 분류해서 보여주지 못했기 때문입니다. 이런 경우 그리드가 더 적절한 방법입니다. 스크린 사이즈에 따라 행렬을 다양하게 정리할 수 있고 (코드) 텍스트와 이미지를 원하는 자리에 배치해 공간을 자유롭게 사용할 수 있습니다.

세심한 디테일

2014 I/O 앱에서 특히 L 개발자 프리뷰와 관련해 심혈을 기울인 부분은 터치 잔물결 효과와 Add to Schedule 플로팅 액션 버튼이었습니다. 우리는 클립된 물결과 클립되지 않은 물결 두 가지를 모두 사용했고 배경색에 상관없이 물결이 보일 수 있도록 물결 효과의 컬러를 지정했습니다. (코드 : 밝은 물결 / 어두운 물결 )

하지만 가장 심혈을 기울인 부분은 세션이 개인 스케줄에 추가되었는지 아닌지, 모양이 바뀌며 알려주는 플로팅 액션 버튼입니다.

이 구현을 위해 많은 L 프리뷰의 API 를 사용했습니다.

1. View.setOutline and setClipToOutline 원형 클리핑과 동적인 그림자 렌더링

2. android:stateListAnimator 손가락으로 누르는 위치에 버튼이 떠오르도록 하기

3. RippleDrawable 터치 했을 때의 피드백 잉크

4. ViewAnimationUtils.createCircularReveal 블루/화이트 컬러 배경의 상태 변화

5. AnimatedStateListDrawable 프레임 애니메이션이 아이콘 상태에 따라 변하도록 정의(체크됨, 체크 안됨 상태)

다음 단계는?

안드로이드 L 개발자 프리뷰의 요소와 폴백 코드 패스(fallback code path)가 포함된 이 코드 소스들을 활용해 여러분의 앱에 디자인을 적용해 보세요. I/O 앱의 디자인이 어떤 원리로 구현되었는지 설명한 이 포스트를 통해, 여러분이 아름다운 안드로이드 앱을 제작하는 데에 도움이 되었길 바랍니다.

두번째 Google Launchpad에 참여할 스타트업을 모집합니다~!

Tuesday, August 5, 2014

Google Launchpad는 전세계의 스타트업들을 위해 구글에서 만들어 나가고 있는 일종의 멘토링 프로그램으로서 스타트업에 필요한 지식과 경험들을 함께 나누는 자리입니다. 한국에서도 스타트업들을 위한 다양한 활동들을 확대하기 위해 노력 중인데요. 그 시작으로 "Google Launchpad 파일럿 데이"라는 이름으로 지난 6월 29일에 작은 실험이 있었고 그때의 경험과 시행착오를 바탕으로 좀더 개선된 프로그램을 진행합니다.
이번 Google Launchpad에 멘토로 참여해 주실 분들은 다음과 같습니다. 크게 기술과 관련해서 조언을 주실 분들과 데이터 기반 의사결정에 관련해서 조언을 주실 분들로 나뉘어져 있다고 생각하시면 됩니다. (가나다순)

- 강경원 (Google) : 검색 서비스를 개발하고 있는 소프트웨어 엔지니어입니다. 패턴인식을 전공하고 그와 관련된 다양한 과제를 수행해 왔습니다.

- 권정민 (SK Planet) : 데이터 분석가로서, 데이터로 사람들을 널리 이롭게 하는데 관심을 가지고 있습니다. 데이터로부터 가치를 찾아낼 수 있는 일을 좀더 즐겁고 지속적으로 할 수 있는 방안을 매일 고민하고 연구합니다.

- 민혜경 (Google) : 구글의 브랜드 스튜디오 아시아 팀 매니저로 일하고 있습니다. 디자인과 UX에 많은 관심을 가지고 있으며 최근에는 전세계 사용자들을 위한 멀티스크린을 위한 웹에 관심을 쏟고 있습니다.

- 박장시 (Box and Whisker) : 데이터 기반 의사결정에 도움을 주는 스타트업을 창업하여 운영하고 있습니다. 특히 다양한 측정을 통해 모바일 앱과 게임의 품질을 개선하는데 많은 관심이 있습니다.
- 서하연 : 모바일 데이터 분석 서비스를 제공하는 스타트업에서 컨설턴트로 일했습니다. 지표에 기반한 모바일 앱/게임 운영 노하우와 마케팅 비용 최적화 기법을 전해드리고자 합니다.

- 엄태욱 (SK Planet) : 데이터 프로그래머로, 데이터 분석을 통한 효과적인 데이터 기반 의사결정을 지원하기 위해 백엔드 시스템과 데이터 프로덕트를 개발하고 있습니다.

- 이충식 (Google) : 검색 서비스를 개발하고 있는 소프트웨어 엔지니어입니다. 기계학습(머신러닝)과 인공지능에 관심과 경험이 많습니다.

- 이해민 (Google) : 제품의 비전과 전략을 수립하고 이를 엔지니어들과 함께 실현하는 Product Manager로 일하고 있습니다. 여성 엔지니어를 더욱 늘리는데도 많은 관심과 노력을 기울이고 있습니다.

참여 대상으로 선정된 스타트업은 하루 동안 구글 코리아 사무실에서 다양한 분야별 전문가들과 자유롭게 시간을 보내면서 사업에 필요한 지식과 경험을 습득하실 수 있습니다. 또한 이후 Google Launchpad 프로그램이 한국에서 정착되는 과정에서 한국은 물론이고 다른 나라의 Launchpad에 참여한 스타트업들과의 네트워킹 기회도 마련될 예정입니다.
- 일시: 8월 12일 화요일 오전 9시 30분 ~ 오후 6시 - 장소: 구글코리아 사무실
- 신청은 선착순이 아니며 8월 8일 오전 10시까지 신청 받습니다. - 선정되신 분들께는 8월 8일 오후에 별도로 연락을 드립니다. - 식사와 음료가 제공됩니다. - 주차는 지원되지 않습니다.
신청하기
부디 많은 관심과 지원 부탁드립니다. 감사합니다~

안드로이드 웨어 디자인 스프린트 후기

구글 멀티스크린 코드랩 후기

Google Sign-in을 통해 Google ID와 PW만으로 주요 서비스들을 사용해 보세요

구글 멀티스크린 코드랩 참석자 모집~!

2014 구글 I/O 앱의 머티리얼 디자인

두번째 Google Launchpad에 참여할 스타트업을 모집합니다~!

Tag

Archive

Feed

Google Korea

Products

Developers