한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
아름다운 디자인의 안드로이드 앱들을 소개합니다
2015년 6월 29일 월요일
작성자: 장태익, 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을 이용해 히어로 전환을 구현 하는 방법을 설명하고 있습니다.
안드로이드 디자인 서포트 라이브러리 코드랩 자료
(영문) : 각종 머티리얼 디자인 패턴을 구현 할 수 있는 안드로이드 디자인 서포트 라이브러리 사용법을 단계적으로 설명한 개발 자료 입니다.
머티리얼 디자인이란?
(한글) : 머티리얼 디자인의 개요를 소개한 글입니다.
안드로이드 앱을 위한 머티리얼 디자인 체크 리스트
(한글) : 머티리얼 디자인 앱을 개발 할 때 확인해야 할 사항들을 모아 정리 했습니다.
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed