Alert Dialog
Primitive사용자에게 중요한 정보를 전달하고, 필요하면 응답을 요구하는 컴포넌트입니다.
구조도
- Backdrop
- Container
- Text Container
- Title
- Description
- Action Container
- Primary Action
- Primary Action Label
- Secondary Action
- Secondary Action Label
컴포넌트 미리보기
옵션
Title
Title은 Alert Dialog가 어떤 정보를 담고 있는지 요약된 내용으로 제공합니다. 유저에게 경고의 원인 또는 맥락을 명확하게 전달함으로써, Alert Dialog의 목적과 중요성을 전달합니다. 또한 Bold 스타일을 적용하여, Description 보다 주목도를 높여 중요한 정보를 빨리 인지할 수 있도록 합니다. Title을 필수적으로 작성하기를 권장합니다.
Description
Alert Dialog는 Description을 항상 제공해야 합니다. 유저가 Action을 실행하기 위해 알아야 하는 추가 정보나 컨텍스트를 전달합니다. 이러한 컨텍스트를 통하여 유저가 의사결정을 내릴 수 있도록 도와줍니다.
Primary Action
가장 중요한 Action이 한 가지만 존재하는 경우, Primary Action을 사용합니다. 불필요한 선택지를 제외하고 주요 Action만 제공하여, 유저가 쉽게 수행할 수 있도록 합니다.
Alternative
두 개의 Action의 레벨이 유사하거나, 모든 Action이 Dismiss 외 동작을 실행하는 경우 Alternative 옵션을 사용합니다.
Neutral
Primary Action 외 Action이 Dismiss의 성격을 가지는 경우 Neutral 옵션을 사용합니다.
Nonpreferred
Primary Action과 Secondary Action의 중요도 차이가 큰 경우 Nonpreferred 옵션을 사용합니다. 혹은 Action Label이 길어지는 경우 사용합니다.
옵션 테이블
| 속성 | 값 | 기본값 | 설명 |
| title | string | ||
| description | string | ||
| primary action label | string | ||
| secondary action label | string | ||
| secondary action intent | alternative, neutral, nonpreferred | neutral |
상호작용
터치 / 마우스
마우스 클릭 또는 터치로 Alert Dialog와 상호작용할 수 있습니다.
키보드
Focus
Tab키를 통해 Action에 Focus할 수 있습니다.
Focus
Tab키를 통해 Action간 Focus 이동이 가능합니다
Action
Action에 Focus된 상태에서 Enter키를 통해 Action을 실행 시킬 수 있습니다.
가이드라인
Max Width
Alert Dialog의 Max Width는 272입니다.
간결한 문구
Alert Dialog는 유저에게 중요한 알림, 확인, 경고 등의 메시지를 전달합니다. 유저의 여정을 방해하는 속성을 지니므로 내용을 간결하게 작성하고, 신중하게 사용합니다.
경고 또는 데이터 손실 알림
Alert Dialog는 유저에게 경고나 주의 사항을 강조하는 역할을 합니다. 돌이킬 수 없는 데이터 유실이 발생하는 경우, 유저에게 경고의 메시지를 전달합니다.
Do / Don't
Do
Title은 명확한 정보 전달을 위한 중요한 요소입니다. 어떤 유형의 메시지, 알림인지 신속하게 파악할 수 있도록 합니다. 또한 스크린 리더와 같은 접근성 보조 기술에서도 Title은 중요한 역할을 합니다.
Don't
Title 요소 없이 Description으로만 내용을 서술하지 않습니다. Title을 통해 Description이 어떤 정보를 전달하는지 미리 파악할 수 있도록 합니다.
Do
Description은 명확하고 간결하게 작성하여 유저가 쉽게 인지할 수 있도록 합니다.
Don't
Description은 3줄 이내로 작성할 것을 권장합니다.
Do
Alert Dialog의 버튼 Label은 간결한 단어로 제공합니다. 짧은 레이블은 유저가 원하는 작업을 빠르게 결정하고 선택할 수 있도록 도와줍니다.
Don't
서술형 Label은 유저가 읽고 이해해야 하므로 결정 행동을 지연시킬 수 있습니다. 버튼 레이블을 간결하게 전달함으로써 유저가 빠른 결정을 내릴 수 있도록 도와줍니다.
Don't
취소, 닫기 등 변경사항 없이 단순 Dismiss 역할을 하는 Action에는 Secondary 버튼을 사용합니다.
Don't
위와 같이 가벼운 피드백은 Alert Dialog로 제공하기에 적절하지 않습니다. Snackbar 사용을 권장합니다.