Korea Blog
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 앱의 디자인이 어떤 원리로 구현되었는지 설명한 이 포스트를 통해, 여러분이 아름다운 안드로이드 앱을 제작하는 데에 도움이 되었길 바랍니다.
No comments :
Post a Comment
ラベル
ad
AdMob
admob_sdk
Advanced Power Searching
Android
Android App Quality
android back button
Android back end
Android navigation
Android Player API
android server
android up button
androidL
androidtv
androidwear
App Translate Service
Audio Focus
Chrome
Chromecast
Code-in 2012
Core App Quality Guidelines
Daydream
design
designing for Tablets
designsprint
dialog
Drive SDK
Game Developers Conference
GCi
GCi 참가자
GDA
GDC
gdg
gdgkorea
Go
Google Cast
Google Code-in
Google Play
Google Play 스토어
Google Search
Google Summer of Code
Google+ Sign-In
Google+ Sign-In Bootcamps
Google+ 로그인
Google+ 로그인 부트캠프
googleanalytics
googleio
GooglePlay #AndroidDevStory #PlayStore #MaterialDesign #AndroidStudio #DeveloperConsole
GSOC
hackathon
HackFair 출품작
In-app Billing
io
io2014
ioapp
iobytes
ioextended
IRC Talk
IRC 서버
java7
kitkat
launch
Marshmallow
materialdesign
mobile ad
mobile_ads_sdk
multiscreen
NaCl
Native YouTube Player API
NRRN 사용 제한
Power Searching
product launch
SD 카드에 앱 설치
SecureKeyFactory
ux
webview
YouTube
YouTube Android Player API
YouTube API
YouTube API 3.0
YouTube API Update RSS Feed
광고
구글 HackFair
구글 Summer of Code
구글 개발자 사이트 홍보
구글 개발자 아카데미
구글 개발자 온라인 강좌
구글 검색
구글 고급 파워 서치
구글 드라이브 앱
구글 부트캠프
구글 아카데미
구글 코드인
구글 플러스 로그인
구글 핵페어
구글로 로그인하기
네이티브 클라이언트
데이드림
멀티 모바일
멀티 플랫폼
모바일 광고
수익화
스마트 브라우저
안드로이드
안드로이드 4.2
안드로이드 Back 버튼
안드로이드 Up 버튼
안드로이드 개인 정보 보호 정책
안드로이드 네비게이션
안드로이드 데이드림
안드로이드 디자인
안드로이드 방향탐색
안드로이드 보안
안드로이드 사용자 데이터
안드로이드 서버 백엔드
안드로이드 앱 품질
안드로이드 원격 제어
안드로이드 태블릿 디자인
안드로이드 현지화
안드로이드 화면 보호기
애드몹
애플리케이션 SD카드 설치
애플리케이션 개발 주민등록번호 사용 제한
애플리케이션 외부 저장 장치
앱 품질 체크리스트
오픈 소스
오픈소스 프로그램
웹 DMB
유튜브
유튜브 API
유튜브 API 3.0
유튜브 API 업데이트
유튜브 모바일
유튜브 안드로이드 플레이어 API
인앱 결제
인터넷상 주민등록번호 수집 이용 제한
주민등록번호 사용제한
추천이미지
출시
크롬브라우저
태블릿 디자인
태블릿용 앱
파워서치
한국 구글 개발자
한국 구글 개발자 사이트
핵심 앱 품질 가이드라인
핵심 태블릿 앱 품질 체크리스트
핵페어
핵페어 출품작
ブログ アーカイブ
2016
February
January
2015
December
November
October
September
August
July
June
May
April
March
February
January
2014
December
November
October
September
August
안드로이드 웨어 디자인 스프린트 후기
구글 멀티스크린 코드랩 후기
Google Sign-in을 통해 Google ID와 PW만으로 주요 서비스들을 사용해 보세요
구글 멀티스크린 코드랩 참석자 모집~!
2014 구글 I/O 앱의 머티리얼 디자인
두번째 Google Launchpad에 참여할 스타트업을 모집합니다~!
July
June
May
April
March
February
January
2013
December
November
October
September
August
July
June
May
April
March
February
January
2012
December
November
October
September
August
July
June
May
March
February
January
2011
December
November
Feed
No comments :
Post a Comment