Google for Developers Korea Blog: 아름다운 디자인의 안드로이드 앱들을 소개합니다

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

아름다운 디자인의 안드로이드 앱들을 소개합니다

2015년 6월 29일 월요일

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

Archive

2024
- 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

Google
Privacy
Terms