[퀘스트] 컴포넌트 만들기(업데이트 중...)

구글 머티리얼 가이드 M3 (2024.10)

 

* Components

유저 인터페이스를 제작하기 위한 상호작용적인 빌딩 블록

목적에 따라 카테고리를 나눌 수 있다.

 

1.Action - 목적 달성을 돕는다.

2.Communication - 도움이 되는 정보를 제공한다.

3.Containment - 버튼,메뉴,칩스와 같은 다른 컴포넌트들을 포함하여 정보와 액션을 담는다.

4.Navigation - 사용자가 UI를 탐색하는 것을 돕는다.

5.Selection - 사람들이 선택 사항을 지정할 수 있다.

6.Text input - 사람들이 텍스트를 입력하고 수정하게 한다.

 

---

1.Action

목적 달성을 돕는다.

 

1)Common Buttons

UI에서 대부분의 액션을 프롬프트

 

선택적으로 앞쪽에 아이콘을 넣을 수 있다.

5가지 유형: Elevated, Filled, Tonal, Outlined, Text

라벨은 간결하게 작성해야하고, 대문자로 시작

컨테이너의 모서리는 완전히 둥글고 라벨 텍스트를 넣을 수 있을 만큼 넓다.

 

2)Extended FAB(Floating action buttons)

주요작업의 수행을 도움

 

화면에서 가장 일반적이거나 중요한 작업에 사용

아이콘,레이블 텍스트 모두 포함

가장 눈에 띄는 버튼 유형

일단 FAB가 명확하지 않을 때 사용

 

3)Floating action buttons

주요작업의 수행을 도움

 

화면에서 가장 일반적이거나 중요한 작업에 사용

아이콘이 명확하고 이해하기 쉬워야한다

콘텐츠가 스크롤 될 때에도 화면에 계속 표시

3가지 사이즈: 소형,일반,대형

 

4)Icon buttons

한 번의 탭으로 간단한 작업을 수행 가능

 

아이콘 버튼은 명확한 의미를 가진 시스템 아이콘을 사용

두가지 유형: 표준 및 컨테인드(원형 내에 아이콘)

마우스를 올리면 버튼의 동작을 설명하는 툴팁이 표시(아이콘 이름이 아님)

선택되지 않은 상태를 나타내려면 아웃라인 스타일의 아이콘을 사용하고 선택된 상태의 경우 채워진 스타일의 아이콘을 사용한다.

 

 

5)Segmented button

옵션을 선택하고,보기를 전환하거나,요소를 정렬

 

세그먼트화된 버튼에는 아이콘,레이블 텍스트 또는 둘 다 포함될 수 있다.

두 가지 유형: 단일 선택 및 다중 선택

2~5개 항목 사이의 간단한 선택에 사용(항목이 더 많거나 복잡한 경우 칩을 사용)

---

2.Communication

도움이 되는 정보를 제공한다.

 

1)Badges

탐색 항목 및 아이콘에 대한 알림,카운트 또는 상태 정보를 표시

 

라벨이나 숫자를 포함할 수 있다

두 가지 유형:소형 및 대형

아이콘이 들어있는 상자 내부의 앵커 배지, 아이콘의 위쪽 뒤쪽(우측) 가장자리

+를 포함하여 컨텐츠를 4자로 제한

기본 색상 매핑 유지

 

2)Progress indicators

프로세스 상태를 실시간으로 보여줌

 

두 가지 구성: 선형 및 원형

프로세스의 모든 인스턴스에 대해 동일한 구성을 사용(로딩과 같이)

장식으로 사용하지 말 것

모션으로 관심 끌기

 

3)Snackbar

화면 하단에 앱 프로세스에 대한 짧은 업데이트를 표시

 

사용자 경험을 방해해서는 안된다

일반적으로 UI 하단에 나타난다

사용자가 조취를 취할 때까지 스스로 사라지거나 화면에 남아있을 수 있다

 

4)Tooltips

간단한 레이블이나 메시지 표시

 

툴팁을 사용하여 버튼이나 기타 UI 요소에 추가 컨텍스트를 추가

두 가지 유형: 플레인, 리치

플레인 툴팁을 사용하여 아이콘 버튼의 요소나 동작을 설명

리치 툴팁을 사용하여 기능의 가치를 설명하는 것처럼 더 자세한 정보를 제공한다

리치 툴팁 설명에는 옵셔널 타이틀,링크,버튼이 포함될 수 있다

 

---

3.Containment

버튼,메뉴,칩스와 같은 다른 컴포넌트들을 포함하여 정보와 액션을 담는다.

 

1)Bottom sheets

화면 하단에 고정된 보조 컨텐츠를 표시

 

소형 및 중간 사이즈의 윈도우에서는 바텀 시트를 사용한다

두 가지 타입: 표준과 모달

컨텐츠는 추가적이거나 보조적이어야 한다.(앱의 주요 컨텐츠가 아님)

바텀 시트는 주요 콘텐츠와 상호작용하기 위해 닫힐 수 있다

 

표준 바텀 시트는 화면의 기본 UI 영역과 공존하며 두 영역을 동시에 보고 상호작용할 수 있다.

모달 바텀 시트는 앱 콘텐츠 앞에 나타나며 해당 기능이 나타나면 다른 모든 앱 기능이 비활성화되고 확인,해제 또는 필요한 작업이 수행될 때까지 화면에 남아있는다.

 

좌측 모달, 우측 표준

 

2)Cards

단일 주제에 대한 컨텐츠와 작업을 표시

 

카드를 사용하여 관련 요소를 포함

3가지 유형: Elevated,Filled,Outlined

콘텐츠에는 이미지부터 헤드라인, 보충 텍스트,버튼, 목록까지 무엇이든 포함될 수 있다.

다른 컴포넌트도 포함될 수 있다.

카드는 내용에 따라 유연한 레이아웃과 크기를 갖는다.

 

3)Carousel

화면에 스크롤하여 표시할 수 있는 항목 모음을 보여줌

 

이미지,비디오 같은 시각적 항목과 선택적으로 레이블 텍스트를 포함한다.

4가지 레이아웃: 멀티 브라우즈,비포함,히어로,전체 화면

레이아웃은 시작(좌측) 정렬 또는 중앙 정렬 가능

스크롤할 때 항목 비주얼에 시차효과가 나타난다

항목은 회전식 셀을 통과하면서 크기가 변경된다.

순서대로 멀티브라우즈, 비포함, 히어로

좌측 이미지는 전체화면, 우측은 피그마로 제작해본 것

4)Dialogs

사용자의 플로우에서 중요한 프롬프트 제공

 

다이얼로그를 사용하여 사용자가 정보에 따라 행동하는지 확인

기본형과 전체화면형 2가지 유형

단일 작업 완료에 전념해야합니다(?)

작업과 관련된 정보를 표시할 수 있다

진행 상황 삭제와 같은 고위험 작업을 확인하는데 일반적으로 사용된다.

 

5)Divider

목록이나 다른 컨테이너에 있는 컨텐츠를 그룹화하는 얇은 선

 

디바이더는 굵게 표시하지 않습니다

항목을 빈 공간에 그룹화할 수 없는 경우에만 디바이더를 사용한다

디바이더를 사용하여 개별항목을 구분하지말고 항목을 그룹화한다

 

6)Lists

리스트는 텍스트와 이미지의 연속적이고 수직적인 인덱스

 

리스트를 사용하면 사용자가 특정 항목을 찾고 해당 항목에 대한 작업을 수행할 수 있다

논리적인 방식(알파벳순 또는 숫자순)으로 목록 정렬

3가지 사이즈: 1줄,2줄,3줄

항목을 짧고 쉽게 스캔할 수 있도록 구성

일관된 형식으로 아이콘,텍스트 및 작업 표시

 

 

7)Side sheets

화면 측면에 고정된 보조 컨텐츠를 표시

 

주요 컨텐츠를 방해하지 않고 추가적인 컨텐츠와 작업을 제공

두 가지 유형: 표준 및 모달

사용자는 시트 내의 다른 영역으로 이동할 수 있다.

사이드 시트에는 탐색을 위한 뒤로가기 아이콘이 포함될 수 있다.

사이드 시트: 표준형과 모달형

 

---

4.Navigation

사용자가 UI를 탐색하는 것을 돕는다.

 

1)Bottom app bar

모바일 및 태블릿 화면 하단에 탐색 및 주요 작업을 표시한다.

 

중요한 작업에 주의를 끌기 위해 하단 앱 바 사용

최대 4개의 아이콘 버튼과 FAB를 포함할 수 있다

하단 앱 바 레이아웃과 컨텐츠는 앱의 다른 화면에서 변경될 수 있음'

모바일 기기에서 쉽게 접근 가능

 

2)Navigation bar

사용자가 작은 기기에서 UI 보기를 전환할 수 있다.

 

컴팩트한 창 크기에서 네비게이션 바 사용

동등한 중요성을 지닌 3~5개의 목적지를 포함할 수 있다

목적지는 변경되지 않음 앱 화면 전체에서 일관성이 있어야한다

 

 

3)Navigation drawer

사용자가 더 큰 기기에서 UI 보기를 전환할 수 있다.

 

두 가지 유형: 표준 및 모달

확장,대형 및 초대형 창 크기에서 표준 네비게이션 서랍을 사용한다

소형,및 중간 크기의 창에서는 모달 탐색 서랍을 사용한다

기본적으로 열거나 닫을 수 있음

가장 자주 방문하는 목적지를 맨 위에 놓고 관련 목적지를 그룹화한다

네비게이션 서랍 표준형과 모달형 / 피그마로 제작한 것

 

 

4)Navigation rail

중간크기의 기기에서 UI 보기를 전환할 수 있다.

 

중간,확장,대형 또는 초대형 창 크기에서 네비게이션 레일을 사용한다

3-7개의 목적지와 선택적인 FAB를 포함할 수 있다

앱의 다른 화면에서도 항상 같은 위치에 레일 배치

 

 

5)Search

키워드나 구문을 입력하여 관련 정보를 얻을 수 있다.

 

검색 쿼리를 통해 제품을 탐색하려면 검색 바와 뷰를 사용

검색 바에는 사용자가 입력하는 동안 제안된 키워드나 구문이 표시될 수 있다

항상 검색 뷰에 결과를 표시한다

검색 창에는 선행 아이콘과 선택적 후행 아이콘이 포함될 수 있다

 

좌측: 검색바 / 우측: 뷰

 

6)Tabs

다양한 화면과 뷰에서 컨텐츠를 구성한다

 

탭을 사용하여 콘텐츠를 유용한 범주로 그룹화한다

2가지 유형:1차 및 2차

탭은 수평으로 스크롤할 수 있으므로 UI에는 필요한 만큼 많은 탭이 있을 수 있다

탭을 서로 옆에 배치하여 동료(?)로 만듭니다

 

7)Top app bar

화면 상단에 탐색,작업 및 텍스트를 표시한다

 

현재 화면과 관련된 제목 및 작업을 포함

4가지 유형: 가운데 정렬, 소형,중형,대형

스크롤시 앱 바와 본문 내용을 분리하기 위해 컨테이너 채우기 색상을 적용

상단 앱 바는 디바이스 창과 동일한 너비를 갖는다

 

---

5.Selection

사람들이 선택 사항을 지정할 수 있다.

 

1)Checkbox

사용자가 목록에서 하나 이상의 항목을 선택하거나 항목을 켜거나 끌 수 있다.

 

목록에서 여러 옵션을 선택할 수 있는 경우 스위치나 라디오버튼 대신 체크박스를 사용

라벨은 스캔 가능해야한다

선택된 항목ㅇ은 선택되지 않은 항목보다 더 눈에 띄게

 

2)Chips

사람들이 정보를 입력하고,선택하고,컨텐츠를 필터링하거나 작업을 트리거하는 데 도움이 된다.

 

칩을 사용하여 특정 컨텍스트에 대한 옵션을 표시

4가지 유형 : assist , filter, input , suggestion

칩 높이는 기본적으로 0으로 설정되어 있지만 시각적 분리가 필요한 경우 더 높일 수 있다

 

 

3)Date pickers

날짜 또는 날짜 범위를 선택할 수 있다.

 

과거,현재 또는 미래 날짜를 표시할 수 있다

3가지 유형: 도킹,모달,모달 입력

현재 날짜 및 선택한 날짜와 같은 중요한 날짜를 명확하게 표시한다

달력 보기와 같은 일반적인 패턴을 따른다

 

4)Menus

임시 표면에 선택사항 목록을 표시

 

메뉴를 사용하여 항목을 스캔 가능한 방식으로 표시합니다

메뉴를 쉽게 열고,닫고,선택할 수 있도록 만드세요

메뉴는 아이콘 버튼과 텍스트 필드를 포함한 다양한 구성요소에서 열릴 수 있습니다

 

 

5)Radio button

옵션 세트에서 하나의 옵션을 선택할 수 있다.

 

목록에서 하나의 항목만 선택할 수 있는 경우,라디오 버튼을 사용하세요

라벨은 스캔 가능해야합니다

선택된 항목은 선택되지 않은 항목보다 더 눈에 띄게 나타납니다

 

6)Sliders

다양한 값 중 선택

 

4가지 구성: 연속,불연속,중앙,범위 선택

슬라이더는 사용가능한 선택사항의 전체 범위를 표시해야합니다

슬라이더 값은 즉시 적용되어야합니다

 

7)Switch

항목 선택을 켜거나 끈다

 

목록의 항목을 독립적으로 제어할 수 있는 경우, 스위치를 사용하세요

스위치는 사용자가 설정을 조정할 수 있는 가장 좋은 방법입니다

스위치의 선택(켜짐 또는 꺼짐)이 한눈에 보이는지 확인하세요

 

8)Time pickers

사용자가 특정 시간을 선택하고 설정하는 데 도움이 된다.

 

타임피커는 모달이며 주요 콘텐츠를 다룹니다

다이얼과 입력의 두 가지 유형

사용자는 시간,분 또는 기간을 선택할 수 있습니다

모바일 기기에서 시간을 손으로 쉽게 선택할 수 있는지 확인하세요

 

---

6.Text inputs

사람들이 텍스트를 입력하고 수정하게 한다.

 

1)Text fields

사용자가 UI 에 텍스트를 입력할 수 있다.

 

텍스트 필드가 대화형으로 보이는지 확인하세요

두 가지 유형: 채워진 유형과 윤곽이 있는 유형

텍스트 필드의 상태(공백,입력 있음,오류 등)는 한눈에 볼 수 있어야 합니다.

라벨과 오류 메시지를 간단하고 조치하기 쉽게 유지하세요

텍스트 필드는 일반적으로 양식과 대화상자에 나타납니다.