드로어는 화면의 가장자리에서 슬라이드 방식으로 열리는 콘텐츠 패널입니다.
Usage
드로어는 측면에서 나타나며 페이지 위에 오버레이 되는 패널 요소입니다.
사용자는 현재 페이지를 떠나지 않고 드로어와 상호작용을 하여 동일 맥락 내에서 효율적으로 작업을 수행할 수 있습니다.
•
연관된 상세 데이터를 제공할 때 사용할 수 있습니다.
•
연계된 하위 작업의 처리양이 많을 경우에 사용합니다.
•
여러 페이지에서 동일한 폼을 제공할 때 사용할 수 있습니다.
Anatomy
드로어는 버튼 클릭 등 트리거 발동을 통해서만 열립니다.
1.
Panel
트리거 버튼을 클릭하면 화면 우측에서 slide left 방식으로 열립니다.
드로어가 열리면 기본 화면은 어둡게 처리됩니다. 기본 화면을 클릭하면 드로어가 닫힙니다.
2.
Header
타이틀, 닫기 버튼 등의 기본 요소가 위치합니다.
필요에 따라 탭 패널, 드롭다운 메뉴 등의 요소를 배치하여 사용할 수 있습니다.
3.
Body
콘텐츠나 데이터 또는 입력 양식이 위치합니다.
필요에 따라 영역별로 수정 기능을 제공하는 등 다양하게 사용할 수 있습니다.
내용이 많은 경우 영역 내에서 스크롤을 표시합니다.
4.
Button
양식의 저장, 수정, 취소 등의 사용자 컨트롤 버튼을 표시합니다.
필요에 따라 버튼 그룹을 배치하여 사용할 수 있습니다.
Variants
Full screen drawer
신규 양식의 입력 및 제출을 하는 경우에는 전체 화면을 덮는 드로어를 사용합니다.
•
화면 하단에서 slide up 방식으로 열리며 화면 전체를 덮습니다.
•
드로어 내 스크롤을 사용할 수 없습니다.
•
드로어 내 아코디언을 사용하여 동일 드로어 내에서 단계별 작업 수행을 제공합니다.
Navigation Drawer
네비게이션을 제공하는 드로어입니다.
•
햄버거 버튼 등 네비게이션 요소와 연관되어 사용합니다.
•
중단점 1,024px 이하부터 메가 메뉴를 대체하여 사용합니다. 이 때는 Slide Up 방식으로 열리며 전체 화면을 덮습니다.
Guidelines
•
유사한 구성의 드로어를 여러 메뉴에서 사용할 경우, 드로어의 시각적 일관성을 유지해야 합니다.
•
한 화면에서 동시에 여러 드로어를 열 수 없습니다.
•
드로어 내에 드로어를 사용할 수 없습니다.
•
드로어 내에서는 모달, 팝오버 등 오버레이 요소의 사용을 가급적 지양합니다.
•
드로어 크기는 화면 해상도 1,024px 이상을 기준으로 화면 너비 50%, 90% 크기의 두 종류만 사용합니다.
•
화면 크기에 반응하여 위치 이동이 이루어지도록 정보 그룹에 대해 tabindex를 설정합니다.
Accessibility
•
드로어가 열리면 드로어 안에서만 포커스가 되어야 합니다.
•
드로어가 열린 후, 첫번째 포커스 요소에 포커스 합니다.
•
드로어가 닫히면 드로어를 트리거한 요소를 포커스 합니다.
