패널의 내용을 기술하세요.
주요 콘텐츠를 볼 때 서랍을 선택하면 여전히 작업에 도움이 됩니다.
서랍 디자인 시스템
메인 화면 컨텍스트를 유지하면서 보조 콘텐츠를 엽니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
03
경험을 완성하세요
디자인을 활용하면서 놓치기 쉬운 디테일을 확인해보세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
패널의 내용을 기술하세요.
오른쪽에 "주문 세부정보" 패널이 열리고 주문 목록은 뒤쪽에 남아 있습니다.
변형 및 사용 사례
패널 개방 방향
콘텐츠와 관련하여 시작 가장자리를 선택하고 화면 간에 대상을 일관되게 유지하세요.
데스크톱과 모바일에서 패널을 사용해 보세요. 이름과 닫기 버튼은 계속 표시됩니다.
예시 오른쪽에 기록 세부정보가 열립니다. 모바일 필터는 아래에서 열립니다.
배경 레이어 및 포커스
서랍이 뒤에 있는 콘텐츠를 차단하는지 여부를 결정합니다. 모달 서랍은 내부에 초점을 유지합니다.
Tab, Esc 및 배경화면을 사용하세요. 닫히면 포커스가 올바른 열기 버튼으로 돌아갑니다.
예시 Escape를 사용하여 메시지 창을 닫은 다음 메시지 버튼에 집중하세요.
패널 레이아웃
긴 패널을 계속 조작할 수 있도록 시작, 스크롤 콘텐츠, 종료 동작을 분리하세요.
긴 콘텐츠와 모바일 키보드를 사용해 보세요. 확인 버튼이 보이지 않게 밀려나지 않습니다.
예시 필터 제목은 상단에 유지되고, 별도의 스크롤 목록이 표시되며, 적용 버튼은 하단에 있습니다.