Jetpack Compose는 디지털 인터페이스를 만들기 위한 포괄적인 디자인 시스템인 Material Design 구현을 제공합니다. 구성 가능한 함수를 사용하여 Material 구성요소를 구현할 수 있습니다.

작업

버튼은 UI에서 대부분의 작업을 프롬프트합니다.
자세히 알아보기
플로팅 작업 버튼 (FAB)은 사용자가 기본 작업을 실행하는 데 도움이 됩니다.
자세히 알아보기
아이콘 버튼을 사용하면 사용자가 탭 한 번으로 간단한 작업을 실행할 수 있습니다.
자세히 알아보기
분할 버튼을 사용하면 사용자가 옵션을 선택하거나, 뷰를 전환하거나, 요소를 정렬할 수 있습니다.
자세히 알아보기

커뮤니케이션

배지는 탐색 항목과 아이콘에 알림, 개수 또는 상태 정보를 표시합니다.
자세히 알아보기
진행률 표시기는 지정되지 않은 대기 시간을 나타내거나 프로세스의 기간을 표시합니다.
자세히 알아보기
스낵바는 화면 하단에 앱 프로세스에 관한 짧은 업데이트를 표시합니다.
자세히 알아보기
도움말에는 간단한 라벨이나 메시지가 표시됩니다.
자세히 알아보기

격리

바텀 시트는 화면 하단에 고정된 보조 콘텐츠를 표시합니다.
자세히 알아보기
카드는 단일 주제에 관한 콘텐츠와 작업을 표시합니다.
자세히 알아보기
캐러셀은 화면에서 스크롤할 수 있는 항목 모음을 표시합니다.
자세히 알아보기
대화상자는 사용자 흐름에서 중요한 프롬프트를 제공합니다.
자세히 알아보기
구분선은 목록이나 기타 컨테이너에서 콘텐츠를 그룹으로 묶는 얇은 선입니다.
자세히 알아보기
목록은 텍스트와 이미지의 연속적인 세로 색인입니다.
자세히 알아보기
스캐폴드는 복잡한 사용자 인터페이스에서 UI의 여러 부분을 함께 유지합니다.
자세히 알아보기

탐색

앱 바는 사용자가 탐색할 수 있도록 화면 상단에 배치됩니다.
자세히 알아보기
탐색 메뉴를 사용하면 소형 기기에서 UI 뷰 간에 전환할 수 있습니다.
자세히 알아보기
탐색 메뉴를 사용하면 큰 기기에서 UI 뷰 간에 전환할 수 있습니다.
자세히 알아보기
탐색 레일을 사용하면 사용자가 중간 크기 기기에서 UI 뷰 간에 전환할 수 있습니다.
자세히 알아보기
탭을 사용하면 다양한 화면과 뷰에서 콘텐츠를 정리할 수 있습니다.
자세히 알아보기

선택항목

체크박스를 사용하면 사용자가 목록에서 하나 이상의 항목을 선택하거나 항목을 사용 설정 또는 사용 중지할 수 있습니다.
자세히 알아보기
칩은 사용자가 정보를 입력하거나, 선택하거나, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다.
자세히 알아보기
날짜 선택기를 사용하면 날짜 또는 기간을 선택할 수 있습니다.
자세히 알아보기
메뉴에는 일시적으로 나타나는 창에 선택 항목이 목록 형식으로 표시됩니다.
자세히 알아보기
라디오 버튼을 사용하면 여러 옵션 중에서 하나를 선택할 수 있습니다.
자세히 알아보기
슬라이더를 사용하면 사용자가 값 범위에서 선택할 수 있습니다.
자세히 알아보기
스위치는 항목의 선택을 사용 또는 사용 중지로 전환합니다.
자세히 알아보기
시간 선택 도구를 사용하면 사용자가 특정 시간을 선택하고 설정할 수 있습니다.
자세히 알아보기

텍스트 입력

검색을 사용하면 사용자가 키워드나 구문을 입력하여 관련 정보를 얻을 수 있습니다.
자세히 알아보기
사용자는 입력란을 통해 UI에 텍스트를 입력할 수 있습니다.
자세히 알아보기
Compose에서 기본 레이아웃을 사용하는 방법을 알아보세요.
자세히 알아보기
문자열 및 이미지와 같은 리소스를 관리하는 방법을 알아봅니다.
자세히 알아보기