Google Material Components

컴포넌트(Components)

컴포넌트는 사용자 인터페이스를 구성하는 인터랙티브한 기본 요소이다. 목적에 따라 액션, 컨테인먼트, 커뮤니케이션, 내비게이션, 선택, 텍스트 입력과 같은 카테고리로 분류할 수 있다.

 

 

 

• Button groups → 버튼 그룹: 버튼 그룹은 여러 버튼을 정리하고 버튼 간 상호작용을 추가한다
• Buttons → 버튼: 버튼은 UI에서 대부분의 액션을 유도한다
• Extended FABs → 확장형 FAB: 확장형 플로팅 액션 버튼(Extended FAB)은 주요 액션 수행을 돕는다
• FAB menu → FAB 메뉴: 플로팅 액션 버튼(FAB) 메뉴는 FAB에서 확장되어 관련된 여러 액션을 표시한다
• Floating action buttons (FABs) → 플로팅 액션 버튼(FAB): 플로팅 액션 버튼은 주요 액션 수행을 돕는다
• Icon buttons → 아이콘 버튼: 아이콘 버튼은 한 번의 탭으로 액션을 수행할 수 있게 한다
• Segmented buttons → 세그먼트 버튼: 세그먼트 버튼은 옵션 선택, 뷰 전환, 요소 정렬에 사용된다
• Split buttons → 스플릿 버튼: 스플릿 버튼은 메뉴를 열어 특정 액션과 관련된 추가 옵션을 제공한다

 

 

 

• Date pickers → 날짜 선택기: 날짜 선택기는 사용자가 날짜 또는 날짜 범위를 선택할 수 있게 한다
• Time pickers → 시간 선택기: 시간 선택기는 사용자가 특정 시간을 선택하고 설정할 수 있게 한다

 

 

• Loading indicator → 로딩 인디케이터: 로딩 인디케이터는 짧은 대기 시간 동안 진행 중인 작업의 진행 상황을 보여준다
• Progress indicators → 프로그레스 인디케이터: 프로그레스 인디케이터는 작업의 상태를 실시간으로 보여준다

 

 

 

 

• Navigation bar → 내비게이션 바: 내비게이션 바는 작은 디바이스에서 UI 화면 간 전환을 가능하게 한다
• Navigation drawer → 내비게이션 드로어: 내비게이션 드로어는 큰 디바이스에서 UI 화면 간 전환을 가능하게 한다
• Navigation rail → 내비게이션 레일: 내비게이션 레일은 중간 크기 디바이스에서 UI 화면 간 전환을 가능하게 한다
• Bottom sheets → 바텀 시트: 바텀 시트는 화면 하단에 고정되어 보조 콘텐츠를 표시한다
• Side sheets → 사이드 시트: 사이드 시트는 화면 측면에 고정되어 보조 콘텐츠를 표시한다

 

 

 

• App bars → 앱 바: 앱 바는 화면 상단에 배치되어 사용자가 제품 내에서 탐색할 수 있도록 돕는다
• Badges → 배지: 배지는 내비게이션 항목이나 아이콘에 알림, 개수, 상태 정보를 표시한다
• Cards → 카드: 카드는 하나의 주제에 대한 콘텐츠와 액션을 표시한다
• Carousel → 캐러셀: 캐러셀은 화면에서 스크롤로 탐색할 수 있는 항목들의 컬렉션을 보여준다
• Checkbox → 체크박스: 체크박스는 리스트에서 하나 이상의 항목을 선택하거나 항목의 상태를 켜고 끌 수 있게 한다
• Chips → 칩: 칩은 정보 입력, 선택, 콘텐츠 필터링, 또는 액션 실행을 돕는다
• Dialogs → 다이얼로그: 다이얼로그는 사용자 흐름에서 중요한 안내나 선택을 제공한다
• Divider → 디바이더: 디바이더는 리스트나 컨테이너에서 콘텐츠를 구분하는 얇은 선이다
• Lists → 리스트: 리스트는 텍스트와 이미지로 구성된 연속적인 세로 형태의 항목 집합이다

 

• Menus → 메뉴: 메뉴는 임시 표면에 선택 가능한 항목 목록을 표시한다
• Radio button → 라디오 버튼: 라디오 버튼은 여러 옵션 중 하나를 선택할 수 있게 한다
• Search → 검색: 검색은 키워드나 문구를 입력해 관련 정보를 찾을 수 있게 한다

• Sliders → 슬라이더: 슬라이더는 값의 범위 내에서 선택할 수 있게 한다
• Snackbar → 스낵바: 스낵바는 화면 하단에서 앱 상태에 대한 짧은 업데이트를 표시한다
• Switch → 스위치: 스위치는 항목의 상태를 켜고 끄는 데 사용된다
• Tabs → 탭: 탭은 서로 다른 화면이나 뷰 간의 콘텐츠를 구성한다
• Text fields → 텍스트 필드: 텍스트 필드는 사용자가 UI에 텍스트를 입력할 수 있게 한다
• Toolbars → 툴바: 툴바는 현재 화면과 관련된 자주 사용하는 액션을 표시한다
• Tooltips → 툴팁: 툴팁은 간단한 라벨이나 메시지를 표시한다

 

출처: 구글 Material Desgin