머티리얼 디자인으로 앱에 활기 불어넣기
머티리얼 디자인의 원칙에 따라 사용자에게 즐거움과 지식을 동시에 선사하는 앱을 만들어 보세요.
효과가 있는 이유
머티리얼 디자인은 디자인 권장사항, 일반 규칙, 시각적 요소가 포함되어 있어 어느 기기에서나 친근한 분위기를 조성할 수 있는 생생한 앱을 구축할 수 있습니다. 사용자가 이 같은 시각적 언어에 익숙해지면 이러한 디자인을 기대하게 됩니다. 이 디자인을 따르면 곧바로 사용자의 눈을 사로잡는 앱을 만드는 동시에 사용성을 향상하고 사용자 참여도와 유지율을 개선할 수 있습니다.
디자인 원칙
- 표면 및 그림자는 은유적으로 사용됩니다. UI 요소는 개별적으로 계층화된 표면으로서 서로 수직 또는 수평으로 쌓여 있어야 합니다. 그림자는 어떤 표면이 다른 표면보다 앞쪽에 위치하는지 알려주는 데 사용되며, 이를 통해 사용자의 주의를 집중하며 계층구조를 구축할 수 있습니다.
- 이미지는 풀 블리드여야 합니다. 사진 사이의 간격은 물론 사진 사이 및 화면 가장자리의 여백을 최소화하여 콘텐츠가 풍부한 몰입형 UI를 만들어야 합니다.
- 색상은 브랜드와 중요 UI 요소를 강조할 수 있도록 과감하게 사용해야 합니다. 앱 전체에서 일관된 환경을 제공하는 기본 색상과 강조 색상을 선택합니다. Palette API를 사용하여 콘텐츠에서 직접 색상을 가져와 더욱 몰입하기 쉬운 환경을 만들어 보세요.
- 측정항목과 키라인은 가독성과 시각적 일관성을 확보하기 위해 8dp 기준 그리드에 따라 콘텐츠를 정렬하고 크기를 조정하는 데 사용해야 합니다. 더 정확한 텍스트 포지셔닝의 경우 4dp 그리드를 사용할 수 있습니다. 필요한 경우 본문 텍스트, 썸네일, 앱 바 제목과 같은 요소는 표준 키라인에 정렬됩니다.
- 애니메이션 및 전환을 포함한 의미 있는 모션은 사용자를 안내하고 집중시키면서 한 화면과 다음 화면을 연결하는 데 사용해야 합니다. 시각적 스토리텔링에서 의미 있는 모션은 즐거운 사용자 환경을 제공하고 시각적 연속성을 지원합니다.
-
반응형 상호작용(예: 기본 터치 피드백)은 표면 물결의 형식을 취해야 합니다. 5.0 이전 기기에서 물결 효과는 예상되는 기능이 아니므로 기본
android:selectableItemBackground동작을 따릅니다. 표면 물결 효과 외에도 상호작용형 표면은 또한 입력 시 사용자가 손가락으로 터치하면 상승해야 하며 변경사항은 터치 지점에서 퍼져야 합니다.
시스템 사용자 인터페이스 요소
- 시스템 상태 표시줄(Android 5.0 이상)은 앱의 기본 색상이나 현재 화면의 콘텐츠를 보완할 수 있는 색상으로 지정되어야 합니다. 풀 블리드 이미지의 경우 상태 표시줄이 투명할 수 있습니다. API 수준 23 이상의 경우 시스템 상태 표시줄을 밝은 상태 표시줄로 설정할 수 있습니다(아이콘이 어두워짐).
- 앱 바 및 툴바는 런처 아이콘이 아닌 색상, 서체, 제품 로고로 브랜드를 알리고 표현하는 데 사용되어야 합니다. 이미지가 풍부하게 포함된 화면에서는 앱 바를 투명하게 설정하여 더 몰입감 있는 UI 환경을 제공할 수도 있습니다. 이미지가 전면 이미지이며 앱 바나 상태 표시줄 뒤에 표시될 수도 있기 때문입니다. 투명한 앱 바에서는 스크림을 사용하여 아이콘에 텍스트 보호를 제공합니다. 또한 사용자에게 한층 더 풍부한 시각적 환경을 제공하는 스크롤 기술을 사용해 보세요.
- 탭은 머티리얼 디자인 상호작용 및 스타일에 부합해야 합니다. 탭 사이에 세로 구분자 없이 가로로 스와이프할 수 있어야 합니다. 선택된 탭은 포그라운드 색상 변경 및 강조 색상으로 지정된 탭 텍스트(또는 아이콘) 아래의 작은 스트립 중 하나 또는 둘 다로 표시합니다. 탭과 앱 바는 계층구조에 명확한 묘사가 없는 한 동일한 고도에 있습니다.
- 탐색 창은 기본적인 탐색 요소만 포함해야 하며 새로운 시각적 가이드라인을 따라야 합니다. 탐색 창은 앱 바와 화면 콘텐츠 앞에 표시되어야 하며 시스템 상태 표시줄 아래에 있어야 합니다. 사용자가 쉽게 발견할 수 있도록 처음 앱을 실행할 때 창이 열리게 하는 것이 좋습니다.
- 하단 탐색 메뉴 사용을 고려해 보세요. 앱에 직접 액세스가 필요한 3~5개의 최상위 수준 대상이 있는 경우 유용합니다. 이동 하단 탐색 패턴은 더 큰 시각적 효과를 제공하고 라벨에 더 긴 텍스트 문자열을 사용할 수 있으므로 이를 사용하는 것이 좋습니다. 하단 탐색 메뉴는 대부분의 화면에서 액세스할 수 있어야 하지만, 세부적인 수준의 화면은 제외하고 사용자가 스크롤할 때 숨길 수 있도록 합니다.
사용자 인터페이스 요소 및 패턴
- 테마는 최신 머티리얼 테마로 업데이트하여 앱이 오래된 것처럼 보이지 않아야 합니다. 시스템 테마 업데이트는 시각적인 멋을 제공할 수 있는 가장 빠른 방법입니다. Gingerbread 및 홀로그램 테마에서 업데이트하여 일관성 있는 시각적 디자인과 사용자 환경을 제공하세요. 선택기, 선택도구, 대화상자, 메뉴, 텍스트 입력란 등의 UI 요소 테마는 머티리얼 디자인 표준으로 업데이트합니다.
- 버튼은 앱에서 가장 많이 사용되는 상호작용 요소이므로 최신 시각적 디자인 패턴으로 업데이트하면 가장 효과적인 변화를 줄 수 있습니다. 맞춤 버튼을 사용할 때 지나치게 둥근 모서리, 과도한 그라디언트, 유광 표면을 사용하면 앱이 오래된 느낌을 줄 수 있습니다. 시각적 강조가 필요한 중요한 동작이거나 텍스트가 많아 평면 버튼을 찾기 힘든 레이아웃의 경우 돌출된 버튼을 사용하세요. 강조할 필요 없는 단순 동작의 경우는 평면 버튼이 가장 자주 사용됩니다. 주어진 화면에서 가장 중요한 동작에는 플로팅 작업 버튼(FAB)을 사용하세요. 이 버튼은 다른 모든 UI 요소 위에 떠 있어서 시각적으로 구별됩니다.
- 타일 및 목록은 사용자가 각 항목을 직접 비교할 때 사용해야 합니다. 목록 보기는 빠르게 훑어볼 수 있는 텍스트가 많은 콘텐츠에 사용합니다. 타일은 시각적 콘텐츠가 주로 있을 때 사용합니다. 좀 더 강력한 레이아웃 옵션을 위해 목록 및 타일을 만들 때는 RecyclerView 위젯을 사용하세요.
- 카드는 여러 유형의 콘텐츠가 섞여 있고 사용자가 콘텐츠를 찾아보지만 직접적으로 이미지나 텍스트 문자열을 비교해 보는 것은 아닐 때 사용해야 합니다. 한 표면에 여러 동작이 있는 경우에도 사용하세요. 카드를 사용하면 항목이 나타나면서 시각적으로 집중하게 되지만 과도하게 사용하면 불필요한 시각적 혼란 요소가 발생할 수 있습니다. 카드 콘텐츠를 만들 때는 CardView 위젯을 사용하세요.
- 인앱 검색은 앱 바의 인라인 검색을 통해 구현해야 합니다. 콘텐츠 검색이 앱의 주요 기능이라면 영구 검색 위젯 앱 바 사용을 고려합니다.
- 구분선은 콘텐츠의 주요 섹션을 나누거나 텍스트 영역 사이에 중요한 구분을 해야 할 때만 사용해야 합니다. 단순한 목록 뷰에서 모든 항목에 구분선을 사용하면 가독성은 거의 향상되지 않으면서 과도한 시각적 혼란 요소가 발생하게 됩니다. 공백과 서체를 사용하여 콘텐츠를 묘사하는 것을 권장합니다.
- 공백 상태를 디자인할 때는 사용자에게 공백이 표시된 이유를 설명하고, 이 상태를 해결할 수 있는 클릭 유도문안을 포함하세요.
Android 7.0 새 소식
- 알림이 수정되어 새 콘텐츠 영역, 상호작용, 사용자 컨트롤, 짧은 텍스트 입력이 추가되었습니다.