모달의 종류
Scrim
레이어 하단에 깔리는 배경으로 주로 어둡게 하거나 투명도를 조절해야 한다.
비슷한 용어로 딤드(Dimmed)라고 표현한다.
모달
다이얼로그(Dialog)
모달
우선순위 : 높은 우선순위
사용법 : 필수사항:사용자가 직접 작업을 수행하거나 Dialog를 종료할 때까지 유지
.
.
Type, 종류
1. Alert Dialog
모달
목적 : 중요한 정보를 전달하거나, 사용자의 의사결정이 필요한 경우 사용한다.
내용 : 경고 대화 상자는 긴급 정보, 세부 정보를 표시한다.
의사결정하기 전까지 다른 테스크를 수행할 수 없도록 콘텐츠 영역은 scrim처리를 하여 막아둔다.
.
2.풀스크린(Full-Screen) : 전체 화면 대화 상자
모달
.
3.심플(Simple) : 간단한 대화 상자
모달
단순 대화 상자에는 선택 시 즉시 적용되는 항목 목록을 표시한다.
.
4.컨포메이션(Confirmation) : 확인 대화 상자
모달
모달&논모달
내비게이션(Navigation)
모달, 논모달 혼용가능
1. Side Navigation
탐색 창은 대상 및 계정 전환과 같은 앱 기능에 대한 액세스를 제공한다. 화면에 영구적으로 표시되거나 탐색 메뉴 아이콘으로 제어할 수 있다.
.
2. Bottom Navigation
하단 앱 바의 메뉴 아이콘에서 접근성을 높이기 위해 측면이 아닌 화면 하단에서 열린다.
하단 햄버거메뉴라고도 불린다
시트(Sheet)
모달, 논모달 혼용가능
1. Side sheet
- 표준 사이드 시트(왼쪽) : 주로 태블릿, 데스크톱에서만 사용하며 화면의 주요 콘텐츠 보완, 상호작용이 가능하다.
- 모달 사이드 시트(오른쪽) : 모바일에서는 제한된 화면 공간으로 인해 표준 사이드 시트 대신 모달 사이드 시트를 사용한다.
.
2. Bottom Sheet
- 표준 하단 시트(왼쪽) : 화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시한다
- 모달 하단 시트(오른쪽) : 하단 모달은 기존 화면과 관련된 추가 항목을 제공하거나 다양한 메뉴를 제공하는 경우 사용한다. 기본 콘텐츠는 모달 창을 닫은 후 이동한다.
- 확장 하단 시트 : 사용자가 주요 기능이나 작업에 액세스하기 위해 확장할 수 있는 축소된 작은 표면을 제공한다.
논모달
스낵바(Snack bar)
논모달
스낵바는 앱이 수행했거나 수행할 프로세스를 사용자에게 알려주고 일시적으로 화면 하단에 나타난다.
우선순위:낮은 우선순위
사용법 : 선택사항:사용자의 액션 없이도 일정 시간이 지나면 자동으로 사라짐
메뉴(Menu)
논모달
메뉴는 사용자가 버튼, 작업 또는 기타 컨트롤과 상호 작용할 때 나타난다.
다양한 요소, 가장 일반적으로 아이콘 버튼, 버튼 및 텍스트 필드에서 열 수 있다.
배너(Banner)
논모달
배너는 중요하고 간결한 메세지를 표시하고 사용자가 처리(또는 배너 해제)할 작업을 제공한다. 해제하려면 사용자 작업이 필요하다.
우선순위 : 중간 우선순위
사용법 : 선택사항:사용자가 닫거나 배너를 생성한 원인이 해결될 때까지 유지
Tooltip
논모달
사용자가 요소 위에 마우스를 올리거나, 초점을 맞추거나, 탭할 때 정보 텍스트를 표시한다.
