Alert Dialog
사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트입니다.
Anatomy
Alert Dialog는 Backdrop(Overlay)와 Dialog Content가 결합된 형태로 하나의 컴포넌트로 제공됩니다.
Properties
Layout Property
Action Button 가로 배열을 기본으로 제공합니다. Action Button Label 길이가 긴 경우 세로 배열을 사용할 수 있습니다.
Show Title
상황에 따라서 제목을 표시하지 않을 수 있습니다.
Guidelines
알림 또는 확인이 필요한 상황에서 사용
Alert Dialog는 사용자가 반드시 알아야할 정보나 옵션 선택이 필요한 경우 사용할 수 있습니다. 기본적으로 Neutral 사용을 권장하지만, 제품의 핵심 가치와 맞닿아 있는 정보를 안내하는 경우 Brand를 사용할 수 있습니다.
경고가 필요한 상황에서 사용
데이터 삭제, 사용자가 작성한 내용이 지워질 수 있는 경우, 설정 초기화 등 사용자가 행동한 무언가가 유실될 수 있는 상황에서는 Critical로 표현하세요. 경고가 필요한 액션을 의미하는 버튼이 Critical로 표시되어야 합니다.
긴 버튼 Label을 사용하는 경우
긴 Action Button Label이 필요하거나 번역했을 때 의도하지 않게 길어지는 경우 Action Button 레이아웃이 Overflow될 수 있습니다.
Alert Dialog는 Responsive-wrapping 컨테이너를 제공하기 때문에 설정된 로직에 따라서 자동으로 레이아웃을 전환됩니다.
Nonpreferred 레이아웃 사용하기 (사용 시 주의)
Primary Action Button과 Secondary Action Button 사이에 중요도 차이가 큰 경우 해당 레이아웃 옵션을 사용할 수 있습니다.
중요도는 현재 맥락에서 강조가 필요한 정도를 기준으로 판단되어야 합니다. 다만 개별 도메인마다 맥락이 다르기 때문에 자체적으로 판단이 필요합니다. 무분별하게 사용하기보다는 경고보다 약한 강조의 의미로 사용하세요.
임의로 다양한 콘텐츠를 조합하는 경우
Alert Dialog는 경고, 알림을 목적으로 표시되는 컴포넌트라서 사용처에서 임의로 수정하거나 변형시켜서 활용하는 것을 금지합니다. 사용처는 Alert Dialog를 사용할 때 주어진 Prop을 그대로 사용해야 합니다.
Alert Dialog UX Writing
적절한 Alert Dialog 안내 문구 작성 방법은 별도 Notion 문서에서 설명합니다.
Alert Dialog vs. Menu Sheet
Alert Dialog, Menu Sheet 비교
Alert Dialog와 Menu Sheet는 유사한 UI이지만, 사용 목적과 제공하는 기능에 차이가 있습니다.
Menu Sheet는 Alert Dialog와 달리 바깥을 탭하면 닫을 수 있습니다.
| 구분 | Alert Dialog | Menu Sheet |
|---|---|---|
| 목적 | 반드시 선택이 필요, 되돌릴 수 없는 액션에 대한 안내 | 사용할 수 있는 여러개의 메뉴와 액션을 제공 |
| 제공 액션 개수 | 2개 이하 (닫기 포함) | 2개 이상 (닫기 포함) |
| 액션 구성 | 양자택일 (삭제 여부 / 이탈 여부 등) | 여러개로 구성 |
| 내용 표시 여부 | 액션에 대한 부연설명이 반드시 필요 | 설명이 필요 없을 수 있음 |
| 표시 위치 | 화면 정중앙 | 화면 하단 |
| 닫기 액션 | 명시적인 닫기, 취소 등 버튼을 탭해야 닫힘 | 닫기 등의 버튼이나 바깥 영역을 탭해도 닫힘 |
Specification
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | backdrop | color | |
| enterDuration | |||
| enterTimingFunction | |||
| enterOpacity | 0 | ||
| exitDuration | |||
| exitTimingFunction | |||
| exitOpacity | 0 | ||
| content | color | ||
| cornerRadius | |||
| marginX | |||
| marginY | |||
| maxWidth | 272px | ||
| enterDuration | |||
| enterTimingFunction | |||
| enterOpacity | 0 | ||
| enterScale | 1.3 | ||
| exitDuration | |||
| exitTimingFunction | |||
| exitOpacity | 0 | ||
| header | gap | ||
| paddingX | |||
| paddingTop | |||
| footer | gap | ||
| paddingX | |||
| paddingTop | |||
| paddingBottom | |||
| title | color | ||
| fontSize | |||
| lineHeight | |||
| fontWeight | |||
| description | color | ||
| fontSize | |||
| lineHeight | |||
| fontWeight |
Last updated on