Korea Blog
아름다운 디자인의 안드로이드 앱들을 소개합니다
Sunday, June 28, 2015
작성자: 장태익, Developer Advocate, tichang@google.com
2014년 6월에 있었던 Google I/O 2014에서 처음으로 소개한 머티리얼 디자인은 다양한 폼팩터의 디바이스에서 일관적이고 아름다우며 직관적인 사용자 경험을 제공하는 가이드라인으로서 안드로이드 앱들을 개선하는데 크게 기여해왔습니다. 머티리얼 디자인에 포함된 머티리얼 테마, 위젯, 다양한 디자인 패턴 들은 앱의 여러 부분에서 이용되어 사용자 경험을 도와줄 수 있는데 구글 플레이에서는 머티리얼 디자인을 잘 활용한 앱들을 모아 “
아름답게 디자인된 앱 모음
" 을 선보였습니다. 여기에서는 이 모음에 포함된 앱들에서 잘 표현된 몇 가지 핵심적인 디자인 요소들을 설명드리려고 합니다.
머티리얼 테마와 카드 위젯
머티리얼 테마는 앱과 시스템 위젯들에 컬러팔레트, 터치 피드백 애니메이션, 화면 전환을 위한 새로운 스타일을 제공합니다.
모임 장소를 예약하는 앱인
핀스팟
과 화장품/메이크업 정보를 교환하는 앱인
언니의 파우치
는 특히 머티리얼 테마와 카드 형태의 사용자 인터페이스를 잘 표현한 앱입니다. 많은 양의 이미지와 텍스트 정보를 쉽게 살펴 볼 수 있도록 구성 되어 있습니다.
앱 바와 네비게이션 드로어
앱 바는 앱내의 화면 이동과 현재 상태를 직관적으로 파악할 수 있게 도와주며 앱의 아이덴터티를 표현할 수 있는 공간도 제공합니다. 네비게이션 드로어는 메인 화면에 넣기 어려운 주요 정보나 개인 설정등을 넣기 좋은 곳으로 왼쪽 상단의 메뉴 아이콘을 이용해서 빠르게 접근가능한 UI 입니다.
겟잇스타
는 스타들의 팬클럽을 위한 공간을 제공하는 앱으로 앱 바와 네비게이션 드로어를 활용하고 있습니다. 프로필 사진 알림, 개인 페이지, 설정 등 개인화된 컨텐츠를 위치시키는 공간으로 네비게이션 드로어를 이용하고 있는 점이 눈에 띄입니다.
모바일 호텔 예약 서비스인
핫텔
또한 앱 바와 네비게이션 드로어를 적극적으로 잘 활용하고 있는 예입니다.
플로팅 액션 버튼
플로팅 액션 버튼은 앱 내에서 가장 강조 하고 싶은 주요 기능을 시각적으로 아름답게 노출하는 좋은 방법입니다. 보통 앱 사용자들에게 가장 가까운 위치와 모양으로 표현되며 그림자와 애니메이션을 이용하여 시선을 유도합니다.
폴라리스 오피스
는 다양한 문서를 만들고 수정하는 도구를 제공하는데 앱내에서 가장 중요한 기능인 새문서 만들기 기능에 플로팅 액션 버튼을 할당하여 사용자들이 편리하게 이용할 수 있게 하였습니다. 명함을 쉽게 정리 할 수 있게 도와주는 앱인
리멤버
도 가장 중요하고 많이 쓰이는 명함 사진을 찍는 기능을 플로팅 액션 버튼으로 제공하였습니다.
대담한 애니메이션과 히어로 전환
머티리얼 디자인은 “의미있는 모션” 이라는 개념을 강조 하고 있습니다. 주의깊게 사용된 모션을 통해 앱의 상태에 대한 시각적인 연속성을 제공하고 사용자가 UI에서 일어나고 있는 일을 쉽게 알아채게 합니다. 작지만 세밀하게 표현된 전환 효과들은 시각적인 즐거움도 더불어 제공합니다. 앱 내의 컨텐츠를 스크롤 할 때 앱 바에서 표현 되는 패럴렉스 효과가 그 예 중의 하나입니다. 또 많이 이용되는 모션 요소로 히어로 전환이 있습니다. 히어로 전환은 앱내에서 화면 전환이 일어날 때 이전 화면의 요소가 다음 화면의 요소로 연결되는 애니메이션을 보여주어 기능과 즐거움을 동시에 제공하는 디자인 패턴입니다.
이밥차
는 다양한 요리 레시피를 제공하는 앱으로 머티리얼 디자인의 애니메이션 효과를 적극적으로 활용하고 있습니다. 컨텐츠를 스크롤 하면 보다 많은 영역을 컨텐츠에 할당하기 위해서 앱 바 부분이 패럴렉스 효과와 함께 위쪽으로 움직입니다. 또 레시피를 클릭하면 카드의 사진이 다음 화면으로 연결되는 히어로 전환을 보여줍니다.
다양한 주제의 내용을 커뮤니티와 함께 제공하는
빙글
의 경우도 각 컨텐츠를 클릭하면 히어로 전환이 일어나 즐거움을 줍니다.
머티리얼 디자인 개발 자료들
위에서 소개된 머티리얼 디자인 요소를 이용하여 앱을 개발하기 위해서는 다음과 같은 자료들을 참조하시는 것이 도움이 될 것입니다.
Using the Material Theme
(영문) : 머티리얼 테마를 적용하는 소개하는 자료입니다.
Creating Lists and Cards
(영문) : 리스트와 카드 위젯을 이용해서 화면 구성을 하는 방법을 설명하였습니다.
Android Design Support Library
(영문) : 네비게이션 드로어, 플로팅 액션 버튼, 탭과 앱 바의 각종 기능들을 구현하는 도구인 Android Design Support Library를 설명하고 있습니다.
Defining Custom Animations
(영문) : Shared element transition을 이용해 히어로 전환을 구현 하는 방법을 설명하고 있습니다.
안드로이드 디자인 서포트 라이브러리 코드랩 자료
(영문) : 각종 머티리얼 디자인 패턴을 구현 할 수 있는 안드로이드 디자인 서포트 라이브러리 사용법을 단계적으로 설명한 개발 자료 입니다.
머티리얼 디자인이란?
(한글) : 머티리얼 디자인의 개요를 소개한 글입니다.
안드로이드 앱을 위한 머티리얼 디자인 체크 리스트
(한글) : 머티리얼 디자인 앱을 개발 할 때 확인해야 할 사항들을 모아 정리 했습니다.
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
구글에서 보내는 App Invites로 앱 설치 수를 늘리세요
안드로이드 디자인 서포트 라이브러리
아름다운 디자인의 안드로이드 앱들을 소개합니다
I/O Extended 서울에 참여하세요!
goo.gl을 이용한 앱 딥 링크
구글 검색에 iOS 앱 콘텐츠 표시하기
가족 모두가 함께 즐기는 구글 플레이
안드로이드 M 개발자 프리뷰 및 도구
폴리머(Polymer) 1.0 출시!
May
April
March
February
January
2014
December
November
October
September
August
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