우리의 사월

예제 실습

클론디자인 카피

컴포넌트 이해해보기

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=558-4&p=f&t=jP5ExzBUjQALu61r-0

https://m3.material.io/components

✅ 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