Google for Developers Korea Blog: 안드로이드 앱을 위한 머티리얼 디자인 체크리스트

안드로이드 앱을 위한 머티리얼 디자인 체크리스트

2014년 10월 30일 목요일

Roman Nurik
머티리얼 디자인이 안드로이드에 찾아옵니다. 안드로이드 롤리팝 플랫폼과 시스템 앱들은 머티리얼 디자인 원칙에 따라 디자인되었습니다. 다음 주 부터 실제 사용자들을 대상으로 롤리팝 이미지가 OTA 형태로 배포될 예정이며, 사용자들은 새롭게 업데이트 되는 구글 플레이 뉴스 스탠드, 구글의 새로운 인박스 앱, 텀블러 와 같은 앱을 통해 머티리얼 디자인을 직접 체험 할 수 있게됩니다. 지금 이 순간, 개발자 분들은 앞 서 공개된 안드로이드 5.0 SDK 와 최신 버전의 AppCompat 호환 라이브러리에 포함된 머티리얼 관련 기능들을 활용할 수 있고, 디자이너 분들을 위해서는 포토샵, 일러스트레이터, 스케치 템플릿이 공개되어 있습니다. 네. 그렇습니다. 마침내 여러분의 안드로이드 앱에 머티리얼 디자인을 적용할 때가 됐습니다!
그럼 지금부터 어떤식으로 머티리얼 디자인을 적용할 수 있는지 알아 보겠습니다.

아래의 정리된 항목들을 살펴 보시면, 어떤 요소들을 적용하여, 머티리얼 디자인 시스템을 구현할 수 있는지 알 수 있습니다. 각 항목은 머티리얼 디자인의 4가지 주요 측면에 따라 4개의 키워드로 나눠져 있습니다. 그 중에서 ‘주요 원칙’ 으로 분류된 것들을 적용하고, 일반적인 안드로이드 디자인 가이드라인을 잘 준수하신다면, 최고로 멋진 머티리얼 디자인 앱을 만드실 수 있습니다.

입체적인 표면

'UI 를 구성하는 표면('디지털 종이')들은 다양한 높낮이를 가질 수 있으며, 각각의 표면 뒤에는 그림자가 생깁니다.'

주요 원칙: 그림자는 어떤 구성 요소가 다른 것 보다 앞에 있는지 나타내기 위해 사용되며, 사용자가 전체 UI의 계층을 쉽게 파악할 수 있도록 돕습니다. UI에서 깊이와 레이어를 만드는 법에 대해서는 여기를 참조하세요.

코드: 안드로이드 5.0에서는 android:elevation 속성과 android:translationZ 속성을 이용해 그림자를 표현할 수 있으며, 이전 버전에서는 PNG 형식의 이미지 리소스를 대신 활용할 수 있습니다.

<표면 과 레이어링>

표면과 그림자의 구조는 일관성있게 유지되어야합니다. 하나의 그림자는 하나의 표면을 나타내며, 표면은 명확한 이유와 목적을 갖고 생성되어야 합니다.
하나의 화면은 10개 미만의 표면으로 구성되는 것이 좋습니다. 화면 구성이 너무 복잡하지 않아야 하며, 너무 많은 중첩은 피하는 것이 좋습니다.

특정 콘텐츠가 화면 끝이나 다른 표면 아래로 스크롤되는 경우, 해당 콘텐츠를 담는 표면 자체가 움직이고 있다고 알 수 있도록, 화면 가장자리나 표면 아래에 그림자를 표시합니다. 다시 말해, 표면 위에 콘텐츠(잉크) 자체가 스크롤 되는 경우는 거의 없으며, 항상 표면 자체가 스크롤 되어야합니다.

코드: ListView 와 ScrollView 의 android:clipToPadding 속성을 false 로 설정 합니다.

단순한 단색으로 칠해진 표면을 사용합니다.

대담하며 인쇄물의 특징을 같는 디자인

"디지털 종이에 그려지는 '디지털 잉크'는 전통적 인쇄물 디자인과 같이, 대담한 색상과 텍스트, 상황에 맞는 이미지, 구조적인 여백과 같은 특징을 갖습니다."

<주요색과 강조색이 지정된 머티리얼 테마>

주요 원칙: 앱의 브랜딩을 위해 색상 팔레트가 주의깊게 선정되어야 하며, 표면의 배경과 텍스트 뷰, 체크박스와 같은 주요 UI 위젯에는 기본 색 (primaryColor) 과 강조 색 (accentColor)이 일관되게 사용되어야 합니다. 두 색은 대비를 이루어야 하며, 예를 들어 기본 색이 짙은 파랑일 경우 강조 색은 네온 핑크색이 사용될 수 있습니다. 특히, 동그란 액션 버튼 (FAB), 선택된 탭, 폼 필드 등 주요 UI 요소들이 눈길을 끌 수 있도록 대비도가 높은 색상을 사용하는 것이 좋습니다.

코드: 테마에 새로운 colorPrimary 와 colorAccent 속성이 추가되었습니다. AppCompat 라이브러리를 사용하는 경우 더 이상 android 네임스페이스를 사용하지 않아도 되며, 롤리팝 이전 기기에서 자동으로 텍스트 필드, 체크박스 및 기타 다른 요소들의 색이 지정됩니다.

주요 원칙: 안드로이드 5.0에서 상태 바는 앱의 기본 색상 혹은 현재 스크린에 표시되는 콘텐츠의 색상에 맞추어 변경되어야 합니다. 화면을 꽉 채우는 이미지가 사용되는 경우, 반투명 상태바를 활용할 수 있습니다.

코드: 테마 요소에서 colorPrimaryDark 혹은 statusBarColor 속성을 설정합니다. Window.setStatusBarColor 메서드를 활용할 수도 있습니다.

주요 원칙: 앱 내의 아이콘은 시스템 아이콘 가이드라인을 따라야 하며, 머티리얼 디자인 아이콘 세트를 활용할 수 있습니다.

아이콘, 사진, 텍스트 및 기타 표면 위에 위치되는 요소들은 '잉크' 요소입니다. 잉크 요소는 그림자를 갖지 않으며, 그라디언트 칼라를 사용하지 않습니다.

이미지에서 추출된 색상을 인접한 UI 요소 혹은 표면의 배경색으로 사용할 수 있습니다.

코드 : Palette 라이브러리를 사용해 손쉽게 이미지에서 유용한 칼라 셋을 추출할 수 있습니다.

사진의 경우 시스템 상태바를 포함, 화면을 꽉 채우는 형식으로 표시합니다. 예를 들어 세부 사항을 나타내는 화면의 경우, 이미지 주변에 테두리를 그리지 않고 화면을 전부 활용해이미지를 표시합니다. 가능한 경우 앱 바와 상태 바 뒤 공간도 활용합니다.

코드: 새로운 Toolbar 위젯 (AppCompat 라이브러리에 포함) 을 투명하게 설정하고, 레이아웃에 직접 배치할 수 있습니다. 상태 바를 설정하는 방법은 Stack Overflow 의 포스트를 확인해 보세요.

<세 종류의 키라인>

주요 원칙: 가능한 경우, 본문 텍스트, 썸네일, 앱 바 제목 등의 요소들은 세 종류의 키라인에 맞추어 정렬되어야 합니다. 스마트폰에서는 왼쪽 부터 16dp 와 72dp, 그리고 오른쪽 부터 16dp가 기준입니다. 태블릿의 경우에는 24dp 와 80dp 키라인이 사용됩니다.
모든 UI 요소들은 8dp 단위의 베이스라인 그리드를 기준으로 정렬 됩니다. 예를 들어 앱 바의 높이는 스마트폰의 경우 56dp 이며 태블릿에서는 64dp 입니다. 패딩과 여백은 8dp, 16dp, 24dp 등의 값을 가질 수 있습니다. 텍스트의 경우는 조금 더 세밀한 4dp 그리드가 사용됩니다.

의미있는 모션

"주의 깊게 사용된 모션은 사용자에게 앱의 상태에 관한 시각적 연속성을 제공하며, 사용자가 UI에서 일어나고 있는 일을 쉽게 알아 챌 수 있도록 돕습니다. 또한, 작지만 세밀하게 표현된 전환 효과들은 즐거움을 줄 수도 있습니다."

<Hero 전환 애니매이션>

일반적으로 UI 와 콘텐츠 요소는 갑자기 나타나거나 사라지지 않으며, 자신의 위치로 자연스럽게 이동해야 합니다. 각 요소가 함께 움직일 수도 혹은 각각의 요소가 따로 따로 움직일 수 있습니다.

주요 원칙: 어떤 아이템을 클릭하여 상세 화면으로 전환되는 경우, 옆의 그림과 같이 선택 된 아이템이 목록 화면에서 상세 화면으로 자연스럽게 전환되는 'Hero 전환' 을 적용합니다.

코드: 안드로이드 5.0 SDK에서는 이를 지원하기 위한 shared element transitions API 가 포함되어 있습니다. 서포트 라이브러리의 FragmentTransaction 에도 이를 위한 몇 가지 기능이 포함되어 있습니다.

주요 원칙: 잔물결 효과 는 터치가 일어난 자리에서 시작되며 아이템에 터치가 되었다는 피드백을 주기 위해 사용됩니다.

코드: 플랫폼에서 기본으로 제공 하는 android:selectableItemBackground 와 andandroid:selectableItemBackgroundBorderless 리소스에는 잔물결 효과가 포함되어 있습니다. 혹은 5.0 에서 새롭게 추가된 RippleDrawable을 사용해 개발자 여러분이 직접 해당 기능을 구현할 수 있습니다. 아쉽지만, 안드로이드 5.0 이전 버전에서는 잔물결 효과가 지원되지 않습니다.

주요 원칙: UI 요소는 원형의 '나타나기(reveal)' 애니메이션을 사용해 나타납니다.

코드: 이 문서를 참고하거나 ViewAnimationUtils 클래스를 확인해 보세요.

주요 원칙: 애니메이션은 아이콘 상태 전환 혹은 텍스트 전환 등 좀 더 섬세하고 재밌는 방법으로 사용될 수 있습니다. 예를 들어 + 형태의 아이콘을 x 형태로 변신시키거나, 외곽선만 있는 하트 모양 아이콘에 칠하기 효과를 이용해 색을 채울 수도 있습니다.

코드: 아이콘 전환은 새로운 AnimatedStateListDrawable과 이에 상응하는 XML 요소를 통해 구현될 수 있습니다. Google I/O 앱의 소스를 살펴보시면 내용을 확인하실 수 있습니다. 또한, 새롭게 벡터 아이콘 애니메이션 도 지원됩니다.

일반적으로 애니메이션 과 전환효과는 300ms 이하의 빠른 속도로 이루어져야 합니다.

하위 아이템을 탐색할 때는 세로 방향의 슬라이드를 앱 내비게이션을 위해서는 가로 방향의 슬라이드 전환 효과를 사용할 수 있습니다. 슬라이드 전환 시에는 단순한 선형의 모션을 활용하고, 빠른 가속 효과와 부드러운 감속 효과를 추가할 수 있습니다. 머티리얼 디자인의 모션 스펙은 여기에서 확인하실 수 있습니다.

적응형 디자인과 UI 패턴

"입체적 표면, 대담한 그래픽 디자인, 의미있는 모션은 핸드폰, 태블릿, 랩탑, 데스크탑, TV, 웨어, 자동차까지, 어떤 스크린에서든 통일성 있는 사용자 경험을 제공하기 위해 어우러져야 합니다. 또한 아래에 있는 주요 UI 패턴들은 앱이 디바이스를 넘나들며 일관되게 유지되어야 합니다."

<FAB - Floating Action Button>

반응형 디자인이 적용된 가장 좋은 사례는 화면의 크기와 회전 여부에 따라 앱의 UI 가 알맞게 변경되는 것 입니다. 태블릿 최적화에 관한 보다 자세한 내용은 태블릿 앱 체크리스트를 확인해 보세요. 또한, 이 블로그 포스트에서는 태블릿 최적화에 관한 추가적인 팁을 얻으실 수 있습니다.

상세 화면은 'Hero 전환' 효과와 함께 팝업 형태가 사용됩니다.
여러개의 창으로 구성된 경우, 하나 이상의 앱 툴바를 활용해, 연관된 콘텐츠 가까이에 적절한 액션을 배치할 수 있습니다.

주요 원칙: 가능한 경우, 앱은 동그란 형태의 플로팅 액션 버튼을 사용해 주요 액션을 나타낼 수 있습니다. 플로팅 액션 버튼은 그림자를 갖는 별 개의 표면이며, 배경색으로는 밝은 계통의 강조 색을 사용하는것이 일반적 입니다. (위 내용 참조). 보내기, 작성하기, 추가하기, 검색하기 등의 기본 액션을 표시하며 다른 표면들보다 보통 8dp 상승되어 있습니다. 주로 스크린 오른쪽이나 두 표면이 만나는 가장자리 가운데에 위치시키는 것이 일반적입니다.

앱 바 (액션 바)

주요 원칙: 일반적인 표준 안드로이드 앱 바 (액션바)를 사용하시면 됩니다. 앱 바는 앱 아이콘 대신 색상과 타이포그라피를 통해 앱의 브랜드를 나타낼 수 있습니다. 앱 바는 그림자를 갖고 있으며, 보통 4dp 상승되어 있습니다.

코드: 안드로이드 5.0의 새로운 Toolbar 위젯을 사용합니다. 최신 버전의 AppCompat 라이브에는 모든 플랫폼 버전을 지원하는 android.support.v7.widget.Toolbar 가 제공되고 있습니다.

앱 바는 표준 앱바의 세로 길이 보다 2배 혹은 3배 길게 디자인 될 수 있습니다. 화면이 스크롤 됨에 따라 앱바의 크기가 자연스럽게 표준 크기로 줄어 들도록 구현 할 수 있습니다.

앱 바는 경우에 따라 완전히 투명하게 디자인 될 수도 있으며 텍스트와 액션을 갖고 이미지 위에 위치할 수 있습니다. 구글 플레이 뉴스스탠드 앱이 이러한 방식으로 구현되었습니다.

앱 바에 표시되는 제목은 두 번째 키라인에 맞춰 정렬되어야 합니다. (키라인에 대한 내용은 위의 내용 참조)

코드: Toolbar 위젯의 android:contentInsetStart 속성을 사용할 수 있습니다.

필요한 경우, 콘텐츠를 위한 공간을 더 확보할 수 있도록 스크롤을 올릴 때 앱 바가 사라지고, 다시 아래로 스크롤하면 앱 바가 나타나도록 구현할 수 있습니다.

탭

<머티리얼 디자인 탭>

주요 원칙: 탭은 머티리얼 디자인의 새로운 상호작용과 스타일 가이드를 준수해야 합니다. 탭 사이에는 구분선이 없으며 최상위 탭은 시각적으로 앱 바의 일부처럼 보이게 디자인 되어야 합니다.

코드 : SlidingTabsBasic SDK의 샘플 코드를 확인하거나 Google I/O 앱 소스를 참조 할 수 있습니다. ("My Schedule" 섹션을 확인해 보세요)

사용자가 스와이프를 통해 탭을 전환 할 수 있어야 합니다.

코드: 서포트 라이브러리에 포함된 ViewPager 위젯을 사용할 수 있습니다.

선택된 탭은 전경색의 변화와 탭의 텍스트 혹은 아이콘 밑의 강조 색상(colorAccent)의 구분선으로 구분됩니다.

네비게이션 드로어

<머티리얼 디자인이 적용된
네비게이션 드로어>

주요 원칙: 네비게이션 드로어를 사용하는 경우, 옆의 그림과 같은 새로운 머티리일 디자인 가이드라인을 준수해야 합니다. 드로어는 앱바 위 그리고 반투명한 스테이터스 바 아래에 위치해야 합니다

주요 원칙: 안드로이드 5.0 에서 앱 바에서 가장 왼쪽에 있는 아이콘은 네비게이션 드로어 표시 이며, 앱 아이콘은 사용되지 않습니다. 개발자 여러분이 원하는 경우, 이전 버전의 플랫폼에서는 기존 안드로이드 4.0 에서처럼 앱 아이콘과 더 좁은 형태의 드로어 아이콘을 사용할 수 있습니다.

코드 : 서포트 라이브러리의 DrawerLayout 위젯을 사용해 새로운 툴바 위젯과 함께 드로어를 구현하세요. 다음 Stack Overflow 포스트에서 더 자세한 정보를 보실 수 있습니다.

드로어의 표준 너비는 스마트폰에서는 320dp를 넘기지 않으며 태블릿에서는 400dp를 넘기지 않습니다. 최소 너비는 스크린 너비에서 표준 툴바의 높이를 뺀 값보다 더 적지 않은 것이 좋습니다. (넥서스5에서 360dp - 56dp = 304dp)

드로어에 있는 아이템의 높이는 기본 그리드 라인을 따릅니다. 각 열은 48dp 높이를 갖으며, 리스트 섹션 위는 8dp 의 여백을, 각 열을 구분하는 구분선 위 아래에도 8dp 여백을 남겨둡니다.

텍스트와 아이콘은 위에 설명된 키라인을 따라 배치됩니다.

구글에서 제공하는 앱을 포함하여 점점 더 많은 앱들이 머티리얼 디자인으로 업데이트 될 예정입니다. 2014년 겨울은 안드로이드 디자인에 있어서 큰 지표가 될 것 입니다. 디자이너 분들을 위한 머티리얼 디자인에 대한 더 다양한 내용을 DesignBytes 시리즈에서 확인하실 수 있습니다. 개발자 분들은 머티리얼 디자인으로 앱 만들기 문서를 참조하실 수 있습니다.