머티리얼 디자인은 플랫폼 및 기기 전반의 시각적 요소, 모션 및 상호작용 디자인을 위한 포괄적인 가이드입니다. Android 앱에서 머티리얼 디자인을 사용하려면 머티리얼 디자인 사양에 정의된 가이드라인을 따르고 머티리얼 디자인 지원 라이브러리에 제공된 새로운 구성요소 및 스타일을 사용하시기 바랍니다. 이 페이지에서는 사용해야 하는 패턴 및 API를 간략하게 설명합니다.
Android는 머티리얼 디자인 앱을 빌드하는 데 도움이 되는 다음과 같은 기능을 제공합니다.
- 모든 UI 위젯 스타일을 지정하는 머티리얼 디자인 앱 테마
- 목록 및 카드와 같은 복잡한 뷰를 위한 위젯
- 맞춤 그림자 및 애니메이션을 위한 새로운 API
머티리얼 테마 및 위젯
표준 UI 위젯 스타일 지정과 같은 머티리얼 기능을 활용하고 앱의 스타일 정의를 간소화하려면 앱에 머티리얼 기반 테마를 적용하세요.
어두운 머티리얼 테마
밝은 머티리얼 테마
자세한 내용은 머티리얼 테마 적용 방법을 참고하세요.
사용자에게 친숙한 환경을 제공하려면 다음과 같이 머티리얼의 가장 일반적인 UX 패턴을 사용하세요.
- 플로팅 작업 버튼(FAB)으로 UI의 기본 동작을 촉진합니다.
- 앱 바로 브랜드, 탐색, 검색 및 기타 작업을 표시합니다.
- 탐색 창을 사용하여 앱 탐색을 표시하고 숨깁니다.
- 앱 레이아웃 및 탐색에 접기 방식 툴바, 탭, 하단 탐색 메뉴 등의 기타 여러 머티리얼 구성요소 중 하나를 사용합니다. 구성요소를 모두 보려면 Android용 머티리얼 구성요소 카탈로그를 확인하세요.
그리고 가능할 때마다 사전 정의된 머티리얼 아이콘을 사용하세요. 예를 들어 탐색 창의 탐색 '메뉴' 버튼에는 표준 '햄버거' 아이콘을 사용해야 합니다. 사용 가능한 아이콘 목록은 머티리얼 디자인 아이콘을 참고하세요. 또한 Android 스튜디오의 Vector Asset Studio를 사용하여 머티리얼 아이콘 라이브러리에서 SVG 아이콘을 가져올 수도 있습니다.
엘리베이션 그림자 및 카드
Android의 뷰에는 X 및 Y 속성 외에도 Z 속성이 있습니다. 이 새로운 속성은 뷰의 엘리베이션을 나타내며 다음을 결정합니다.
- 그림자의 크기: Z 값이 더 높은 뷰는 더 큰 그림자를 투영합니다.
- 그리기 순서: Z 값이 더 높은 뷰가 다른 뷰 위에 표시됩니다.
엘리베이션은 흔히 레이아웃에 카드 기반 레이아웃이 포함되어 있을 때 적용되며 머티리얼 스타일의 카드 안에 중요한 정보를 표시하는 데 도움이 됩니다.
CardView 위젯을 사용하여 기본 엘리베이션으로 카드를 생성할 수 있습니다. 자세한 내용은 카드 기반 레이아웃 만들기를 참고하세요.
다른 뷰에 엘리베이션을 추가하는 방법에 관한 자세한 내용은 그림자 및 클립 뷰 만들기를 참고하세요.
애니메이션
새로운 애니메이션 API를 사용하면 UI 컨트롤의 터치 피드백, 뷰 상태 변경 및 활동 전환을 위한 맞춤 애니메이션을 만들 수 있습니다.
이러한 API를 통해 다음을 할 수 있습니다.
- 터치 피드백 애니메이션으로 뷰의 터치 이벤트에 응답할 수 있습니다.
- 회전 표시 애니메이션으로 뷰를 숨기고 표시할 수 있습니다.
- 맞춤 활동 전환 애니메이션으로 활동 간에 전환할 수 있습니다.
- 곡선 모션으로 더 자연스러운 애니메이션을 만들 수 있습니다.
- 뷰 상태 변경 애니메이션으로 하나 이상의 뷰 속성 변경사항을 애니메이션 처리할 수 있습니다.
- 뷰 상태 변경 사이의 상태 목록 드로어블에 애니메이션을 표시할 수 있습니다.
터치 피드백 애니메이션은 버튼과 같은 여러 표준 뷰에 빌드됩니다. 새 API를 사용하면 이러한 애니메이션을 맞춤설정하고 맞춤 뷰에 추가할 수 있습니다.
자세한 내용은 애니메이션 개요를 참고하세요.
드로어블
다음과 같은 드로어블의 새로운 기능은 Material Design 앱을 구현하는 데 도움이 됩니다.
- 벡터 드로어블은 선명도의 손실 없이 확장 가능하며 단일 색상 인앱 아이콘에 적합합니다. 벡터 드로어블에 관해 자세히 알아보세요.
- 드로어블 색조 조정을 사용하면 비트맵을 알파 마스크로 정의하고 런타임 시 색상으로 비트맵에 색조를 지정할 수 있습니다. 드로어블에 색조 추가 방법을 참고하세요.
- 색상 추출을 사용하면 비트맵 이미지에서 주요 색상을 자동으로 추출할 수 있습니다. Palette API로 색상 선택 방법을 참고하세요.