드로어 · 시트Drawer · Sheet

서랍(drawer)처럼 당겨서 열고 밀어서 닫는다고 붙은 이름입니다. 모바일 화면은 좁아서 메뉴를 항상 펼쳐 둘 수 없으니, 필요할 때만 가장자리에서 꺼내는 방식이 표준이 됐습니다. 이 사이트의 모바일 메뉴도 드로어입니다.

언제 쓰나요

내용을 떠나지 않고 잠깐 옆길로 빠질 때 씁니다. 내비게이션 메뉴, 필터 패널, 목록에서 고른 항목의 상세, 장바구니. 뒤 화면이 살짝 보여서 "돌아갈 곳이 있다"는 감각이 유지되는 것이 모달과의 차이입니다.

방향에는 관습이 있습니다. 왼쪽은 내비게이션, 오른쪽은 상세·설정·장바구니, 아래(바텀 시트)는 모바일에서 손이 닿는 곳에 두는 선택지·액션입니다. 바텀 시트는 손잡이(핸들)를 두고 끌어서 닫게 하면 자연스럽습니다.

AI에게 시키기

모바일에서 햄버거 버튼을 누르면 왼쪽에서 열리는 내비게이션 드로어를 만들어줘.
- 뒤 화면은 어두운 스크림, 스크림 클릭·ESC·닫기 버튼으로 닫힘
- 폭은 화면의 80%, 최대 320px. 열릴 때 슬라이드 트랜지션
- 열려 있는 동안 뒤 화면 스크롤 잠금, 포커스는 드로어 안으로
- 데스크톱(1024px 이상)에서는 드로어 대신 항상 보이는 사이드바로

"메뉴 만들어줘"라고 하면 상단에 링크를 나열합니다. 드로어라는 이름과 함께 방향·스크림·닫는 방법·데스크톱 처리를 적어야 모바일에서 쓸 만한 것이 나옵니다.

혼동 주의

• 모달: 가운데 떠서 응답을 요구합니다. 드로어는 가장자리에 붙어 흐름을 덜 끊습니다. 다만 드로어도 스크림을 깔면 뒤를 막는 모달의 일종이 됩니다.
• 사이드바(Sidebar): 항상 보이는 고정 영역입니다. 드로어는 평소엔 숨어 있다가 꺼내는 것입니다. 같은 메뉴가 데스크톱에서는 사이드바, 모바일에서는 드로어로 나타나는 경우가 많습니다.
• 팝오버(Popover): 버튼 옆에 작게 떠서 붙는 것입니다. 드로어는 화면 가장자리 전체를 차지합니다.
• 드롭다운 메뉴: 버튼 아래 짧은 목록입니다. 항목이 많거나 폼이 들어가면 드로어가 맞습니다.