팝오버는 클릭 등의 사용자 요청으로 열리는 오버레이 구성요소입니다.
Usage
추가적인 정보나 작업을 제공할 때 사용합니다.
모달창과는 다르게 현재 페이지와 직접적인 연관이 없는 정보나 작업을 제공할 때도 사용할 수 있으며, 배경을 어둡게 만들지 않고 그대로 사용합니다.
•
반드시 사용자가 클릭하여 팝오버를 호출할 수 있는 트리거 역할의 버튼을 제공해야 합니다.
•
내용이 많거나 여러 범주를 포함하는 도움말을 제공할 때 사용합니다.
•
목록의 필터나 알림 설정 등의 작업을 제공할 때 사용합니다.
•
배경을 클릭하면 팝오버를 닫습니다. 작업을 진행하는 경우에는 얼럿창을 표시합니다.
Anatomy
1.
사용 목적에 따라 타이틀은 사용하지 않을 수도 있습니다.
2.
닫기 버튼은 반드시 제공해야 합니다.
3.
내용이 많을 경우 팝오버 내에서 스크롤을 적용하여 사용합니다.
4.
사용 목적에 따라 버튼 그룹을 사용할 수 있습니다.
Variants
정보 제공 형태
타이틀 영역에 닫기 버튼을 반드시 배치합니다.
배경(기본 화면)을 클릭하면 팝오버가 닫힙니다.
컨트롤 제공 형태
목록 필터 등 전체 화면에 관련된 컨트롤을 제공할 때 사용합니다.
배경(기본 화면)을 클릭하면 팝오버가 닫힙니다. 닫히기 전에 선택한 상태는 유지합니다.
Guidelines
•
항상 트리거하는 요소 아래로 배치하여 사용합니다.
•
트리거 버튼은 명확한 레이블로 표시하고 아이콘만 단독으로 사용하는 것을 지양합니다.
•
사용자가 호출해야만 노출하는 속성 상, 상대적으로 덜 중요한 작업이나 정보를 제공할 때 사용합니다.
•
현재 진행 중인 작업과 연관된 중요한 작업인 경우에는 모달창을 사용합니다.
