모달창은 사용자에게 필요한 정보나 컨트롤을 오버레이 형태로 제공하는 요소입니다.
시각적으로 얼럿창(Alert dialog)과 유사하지만, 모달창은 현재 페이지의 맥락적 흐름을 잃지 않고 추가적인 정보나 연관된 작업을 할 수 있도록 제공할 때 사용합니다.
Usage
모달창은 현재 페이지를 벗어나지 않고 추가 정보를 제공하거나 사용자의 입력을 요청할 때 사용합니다.
•
현재 페지이와 연관된 추가 정보를 제공할 때 사용합니다.
•
현재 페이지에서 진행하는 작업을 완료하기 위해 추가적인 하위 작업을 요청할 때 사용합니다.
•
사용자가 꼭 하지 않아도 되는 작업이거나 간단한 작업을 요청할 때 사용합니다.
•
현재 페이지에서 진행하는 작업을 완료하기 위해 현재 작업을 중단하고 사용자의 확인을 받아야 하는 경우에는 얼럿창을 사용합니다.
•
사용자에게 요청하는 작업이 복잡하거나 많은 경우에는 팝오버나 드로어 등 다른 요소의 사용을 고려합니다.
Anatomy
1.
Background
backdrop 속성 : static, opacity=0.9
배경을 어둡게 처리하고 컨트롤 요소가 있는 경우에는 배경을 클릭해도 창을 유지합니다.
2.
Header
타이틀, 닫기 버튼 등을 표시하고 필요한 경우 셀렉트, 검색 입력 폼 등의 요소를 사용할 수 있습니다.
3.
Body
콘텐츠를 표시하거나 필요에 따라 다양한 입력 요소를 배치하여 사용할 수 있습니다.
4.
Button group
입력 요소를 사용하는 경우, 작업 완료를 위한 버튼 그룹을 사용할 수 있습니다.
오클릭이 발생하지 않도록 최소한의 크기와 간격을 확보하여 사용합니다.
Guidelines
•
간단한 정보를 제공하거나 입력을 요청할 때 사용합니다.
•
기본 화면의 오버레이를 클릭하면 모달창이 닫히는 것을 기본으로 하고 키보드 Esc 입력을 통해서도 모달창 닫힘을 지원합니다.
•
입력 요청을 하는 경우 등 상황에 따라서는 배경 클릭을 통한 모달창 닫힘을 지원하지 않을 수 있습니다. 이럴 경우에는 헤더 영역에 반드시 닫기 버튼을 제공해야 합니다.
•
창 내부에서 스크롤이 생기지 않는 정도의 분량으로 사용합니다.
•
사용자의 작업을 저장하거나 제출하는 용도로 사용하는 경우, 닫기(X) 버튼은 취소(cancel) 버튼과 동일한 역할을 합니다. 내용을 입력한 상태에서 닫기를 클릭할 경우 반드시 사용자에게 안내해야 합니다.
