https://m3.material.io/components
Components – Material Design 3
Discover over 30 Material Design UI components and their functions. Understand how to use them to design intuitive and visually appealing user experiences.
m3.material.io
✅ 1. Action (동작)
Button
- 정의: 텍스트 또는 아이콘이 들어가 사용자 액션을 유도하는 가장 기본적인 컴포넌트
- 예시: "확인", "취소", "다음" 등의 버튼
- 시각 예시 및 링크: https://m3.material.io/components/buttons/overview
Floating Action Button (FAB)
- 정의: 주로 화면 하단에 위치하는 원형 버튼으로, 하나의 주요 액션을 강조함
- 예시: 연필 아이콘을 눌러 글쓰기 시작
- 시각 예시 및 링크: https://m3.material.io/components/floating-action-button/overview
Icon Button
- 정의: 텍스트 없이 아이콘만으로 기능을 표현하는 버튼
- 예시: 공유, 북마크, 설정 등
- 시각 예시 및 링크: https://m3.material.io/components/icon-buttons/overview
Segmented Button
- 정의: 여러 선택지를 나열해 하나를 선택하게 하는 버튼 그룹
- 예시: "리스트 보기" / "카드 보기" 전환 버튼
- 시각 예시 및 링크: https://m3.material.io/components/segmented-buttons/overview
✅ 2. Communication (소통)
Dialog
- 정의: 중요한 메시지를 사용자에게 알리거나, 결정 또는 입력을 요구하는 팝업
- 예시: "이 글을 삭제하시겠습니까?"
- 시각 예시 및 링크: https://m3.material.io/components/dialogs/overview
Snackbar
- 정의: 사용자 액션에 대한 짧은 피드백을 화면 하단에 띄워주는 메시지
- 예시: "저장되었습니다", "삭제 취소"
- 시각 예시 및 링크: https://m3.material.io/components/snackbars/overview
Banner
- 정의: 앱의 주요 컨텐츠 위 상단에 고정되어 나타나는 지속적인 알림
- 예시: "인터넷 연결이 불안정합니다"
- 시각 예시 및 링크: https://m3.material.io/components/banners/overview
✅ 3. Containment (포함)
Card
- 정의: 이미지, 텍스트, 액션 등을 묶어서 보여주는 시각적 상자
- 예시: 뉴스 카드, 상품 카드 등
- 시각 예시 및 링크: https://m3.material.io/components/cards/overview
Bottom Sheet
- 정의: 하단에서 위로 슬라이드되어 표시되는 패널
- 예시: 앱 리스트, 장바구니 상세
- 시각 예시 및 링크: https://m3.material.io/components/bottom-sheets/overview
Navigation Drawer
- 정의: 왼쪽 또는 오른쪽에서 슬라이드되는 앱 전체 메뉴 영역
- 예시: 햄버거 메뉴 클릭 시 나오는 메뉴 리스트
- 시각 예시 및 링크: https://m3.material.io/components/navigation-drawer/overview
✅ 4. Navigation (내비게이션)
Top App Bar
- 정의: 앱 화면 상단에 위치하는 툴바, 제목 및 아이콘 포함
- 예시: 상단 타이틀 바 + 뒤로가기/설정 아이콘
- 시각 예시 및 링크: https://m3.material.io/components/top-app-bar/overview
Bottom App Bar
- 정의: 하단에 위치하며 FAB 또는 주요 내비게이션 포함
- 예시: 하단 내비게이션 버튼과 함께 FAB 추가 배치
- 시각 예시 및 링크: https://m3.material.io/components/bottom-app-bar/overview
Navigation Bar
- 정의: 앱 하단의 주요 경로(탭)를 나타내는 고정형 메뉴
- 예시: 홈, 검색, 마이페이지 등
- 시각 예시 및 링크: https://m3.material.io/components/navigation-bar/overview
Navigation Rail
- 정의: 태블릿 또는 데스크탑 환경에서 사용하는 세로 방향 내비게이션 바
- 예시: 좌측 사이드바 형태의 내비게이션
- 시각 예시 및 링크: https://m3.material.io/components/navigation-rail/overview
Tabs
- 정의: 동일 계층의 콘텐츠를 구분하는 수평 탭
- 예시: 전체 / 인기 / 최신 탭
- 시각 예시 및 링크: https://m3.material.io/components/tabs/overview
✅ 5. Selection (선택)
Checkbox
- 정의: 여러 항목 중 복수 선택이 가능한 체크 박스
- 예시: 전체 동의, 옵션 선택
- 시각 예시 및 링크: https://m3.material.io/components/checkboxes/overview
Radio Button
- 정의: 여러 항목 중 하나만 선택할 수 있는 옵션 버튼
- 예시: 카드 / 쿠페이 선택
- 시각 예시 및 링크: https://m3.material.io/components/radio-buttons/overview
Switch
- 정의: ON/OFF 상태를 전환하는 토글 스위치
- 예시: 알림 설정
- 시각 예시 및 링크: https://m3.material.io/components/switches/overview
Chips
- 정의: 짧은 텍스트나 아이콘으로 상태, 태그, 입력 등을 표현하는 컴포넌트
- 예시: #디자인, 필터 태그 등
- 시각 예시 및 링크: https://m3.material.io/components/chips/overview
✅ 6. Text Inputs (입력)
Text Field / Text Area
- 정의: 사용자로부터 텍스트를 입력받는 필드. Text Field는 한 줄, Text Area는 여러 줄 입력 가능
- 예시: 이름, 이메일, 문의내용 등
- 시각 예시 및 링크: https://m3.material.io/components/text-fields/overview
✅ 7. Layouts (레이아웃)
Divider
- 정의: 콘텐츠를 구분짓는 선. 수평 또는 수직 방향 모두 포함됨
- 예시: 리스트 항목 사이를 나눌 때 사용
- 시각 예시 및 링크: https://m3.material.io/components/dividers/overview
List
- 정의: 동일한 구조의 항목을 수직으로 나열한 요소
- 예시: 설정 화면 옵션 리스트
- 시각 예시 및 링크: https://m3.material.io/components/lists/overview