Popover, Drawer, Bottom sheet, 떠오르는 UI 패밀리

한 줄로

각자 다른 방향에서 떠오르는 보조 UI들입니다. 어디서 등장하느냐로 종류와 의미가 갈립니다.

Popover

특정 요소 위에 떠오르는 작은 박스입니다. 화살표로 출처를 명확히 가리킵니다. iOS iPad에서 2010년 도입됐고, 보통 추가 정보나 간단한 옵션 표시에 사용됩니다.

Drawer / Off-canvas

화면 옆(주로 왼쪽)에서 슬라이드 인됩니다. 햄버거 메뉴의 표시 형태입니다. 큰 메뉴 트리나 사이드바 내비게이션에 쓰이며, 사용자가 명시적으로 열어야 합니다.

Bottom sheet

화면 아래에서 위로 올라오는 패널입니다. iOS와 Android 모바일의 표준입니다. 사용자가 드래그로 높이를 조절할 수 있고, 액션 시트, 디테일 뷰, 모달 폼에 사용됩니다.

비교

Popover: 특정 요소 옆, 작음, 간단한 정보.
Drawer: 화면 옆, 중간에서 큼, 메뉴 트리.
Bottom sheet: 화면 아래, 중간에서 큼, 모바일 모달.

바이브 메이커가 챙길 한 가지

모바일에서 모달이 필요하면 가운데 modal보다 bottom sheet가 더 자연스럽습니다. 한 손 엄지가 닿는 영역에서 시작하기 때문입니다.

관련

Modal · Tooltip · Action sheet