Bottom sheet

콘텐츠 영역의 높이만큼 Bottom sheet의 컨테이너 높이가 조정되는 타입으로 별도 여백의 활용 없이 콘텐츠만 명확하게 사용자에게 전달할 때 사용합니다.

최대 높이의 50%만 올라오며 스크롤을 하거나 혹은 핸들을 잡고 끌어올리면 최대 높이까지 늘어나는 타입입니다. 리스트를 탐색할 때 사용하면 사용자에게 더 나은 편의성을 제공할 수 있습니다.

콘텐츠의 높이 여부와 관계 없이 항상 화면을 모두 채우는 형태의 타입입니다. 상세 정책과 같이 줄 글이 많거나 매우 긴 콘텐츠를 제공할 때 사용을 권장합니다.

최대 높이 이전까지 사용자가 자유롭게 8배수 단위로 높이를 지정하여 사용합니다. Bottom sheet에서 탭과 같은 요소로 화면을 분할하는 UX를 디자인할 시 높이를 고정해야할 때 사용할 수 있습니다.

콘텐츠의 편집 영역이 광범위하거나 화면 내에서 Depth가 생길 시 Full modal을 활용하여 확장성있게 대응할 수 있도록 설계하는 것을 권장합니다.

모바일에서 Date, Time picker를 바텀시트로 호출하여 사용합니다.

모바일에서 Menu 호출 시 Bottom sheet를 활용합니다.

App은 각 플랫폼에서 제공하는 Action sheet를 사용하며 Web은 Bottom sheet를 활용하여 Action sheet를 구성합니다.