얼럿창은 중요한 정보를 알리며 페이지와 사용자간 상호작용을 차단하고 작업 수행을 완료한 후에만 닫히는 페이지 오버레이(overlay) 형태의 구성요소 입니다.
시각적으로 모달(Modal)과 비슷하지만, 얼럿창은 사용자가 반드시 대화상자의 내용을 확인해야만 하는 경우에 사용한다는 차이가 있습니다.
Usage
다음의 경우에 사용할 수 있습니다.
•
사용자의 작업에 영향을 미치는 중요한 정보를 전달하는 경우
•
되돌릴 수 없는 파괴적인 결과를 가져오는 경우 (예 : 삭제)
•
사용자가 특정 작업을 수행할 때 까지 작업 진행을 중단시켜야 하는 경우
Anatomy
1.
Background
backdrop 속성 : static, opaciti=0.9
배경을 어둡게 처리하고 배경을 클릭해도 창을 유지합니다.
2.
Body
헤더, 내용, 컨트롤 버튼을 포함합니다. 정의된 padding을 적용합니다.
3.
Heading
얼럿창 타이틀을 표시합니다.
4.
Text
전달하는 내용을 명확하게 표시합니다.
5.
Button group
사용자에게 권하는 액션을 주 버튼 스타일로 표현합니다.
오클릭이 발생하지 않도록 최소한의 크기와 간격을 확보하여 사용합니다.
Variants
사용자 액션 요청과 중요 정보 제공 등 상황에 따라 다양한 형태로 사용 가능합니다.
필요에 따라 구성요소를 더하거나 빼고 사용할 수도 있지만, 가급적 다음의 형태로 사용하기를 권합니다.
정보 제공
•
간단한 정보 제공이나 안내 용도로 사용할 때는 따로 타이틀을 표시하지 않고 사용할 수 있습니다.
•
제공하는 정보의 분량이 많은 경우에는 모달, 팝오버, 드로어 등 다른 구성요소의 사용을 권장합니다.
사용자 액션 요청
•
사용자의 액션이 반드시 필요할 때 사용합니다.
•
타이틀 표시를 원칙으로 합니다.
•
3개 이상의 컨트롤을 필요로 할 때는 모달, 팝오버 등 다른 구성요소의 사용을 권장합니다.
Guidelines
얼럿창의 잦은 사용은 사용자 경험에 막대한 해를 끼치므로, 반드시 필요한 경우에만 사용하는 것을 원칙으로 하고 이하 다음의 지침을 준수하여 사용합니다.
•
사용자가 액션을 수행하기 전까지 창을 닫을 수 없습니다.
•
얼럿창이 열릴 때는 사용자에게 권하는 액션 버튼에 포커스를 합니다.
•
포커스는 얼럿창 안에서만 움직여야 합니다.
•
얼럿창을 닫기 전까지 포커스가 기본 페이지로 돌아갈 수 없습니다.
•
얼럿창이 열릴 때의 배경은 불투명도를 높게 설정하여 기본 화면의 내용을 볼 수 없도록 합니다. 다만 화면 오버레이의 시각적 경험을 위해 기본 화면의 존재는 인식할 수 있는 정도로 설정합니다.
•
사용자 액션 버튼은 결과를 명확하게 알 수 있도록 레이블링 합니다. ‘확인’ 같은 모호한 단어 사용을 지양하고 ‘닫기’, ‘저장’ 같은 의미를 명확하게 전달 할 수 있는 단어를 사용합니다.
•
가급적 2문장 이내로 알리고자 하는 내용을 분명히 인지할 수 있도록 간결하게 작성합니다.
•
줄임 패턴을 사용할 수 없습니다.
Accessibility
•
얼럿창이 열린 후에는 닫기 전까지 얼럿창 내에서만 포커스가 되어 기본 페이지와 상호작용을 할 수 없습니다.
•
AlertDialog로 얼럿창 요소를 제공하고 heading을 통해 얼럿창 레이블을 표시합니다.
