Bottom Sheet / Loading

Written By Heesun .

GUIDE

Bottom sheet는 화면 하단에서 올라오며 유저에게 추가적인 정보를 보여주는 레이어입니다.

Non-modal standard bottom sheet로서 화면 하단에 머무르며 주 컨텐츠를 보조하는 역할을 합니다.

사용자는 bottom sheet와 화면의 나머지 부분을 보고 상호 작용할 수 있어 멀티태스킹에 유용합니다.

 

ANATOMY

  • 메인 컨텐츠를 다루는 기본 레이어입니다. 일반적인 페이지와 동일하게 동작하고, 스크롤이 가능합니다.

  • base layer와 독립적인 레이어로, 화면 하단에 상주하는 바텀시트입니다.

  • 진행 상황을 알려줄 수 있는 컨텐츠 요소들을 넣는 공간입니다.

  • cancel button을 누르면 실행이 취소되거나 리스트가 사라집니다.

  • bottom sheet가 기능하는 상황에 대한 안내를 보여줍니다.
리스트의 개수가 2개 이상일 경우 (완료된 개수/전체 개수) 진행 상황에 대한 수량이 함께 안내됩니다.

  • 작업에 실패한 경우 오류 상황에 대처할 수 있는 정보들이 노출될 수 있습니다.

  • 다음 행동 유도가 필요없는 상황(완료/실패 등)에서 노출되며, 클릭 시 바로 창이 닫힙니다.

SIZE

Bottom sheet의 길이는 다음과 같습니다.

default width : 328px

max width 400px

  • tablet, pc : 화면 맥락에 따라 *최소 사이즈까지 조절 가능하지만, 최대 400px을 초과하지 않습니다.

  • mobile : 마진 16px filled로 채웁니다.

  • 타이틀이 max width를 초과하는 경우 [...]로 끝처리 합니다.

INTERACTION

Loading Bottom sheet의 상태별 정의는 다음과 같습니다.

PLACEMENT

  • mobile : 마진 16px filled로 채웁니다.

  • desktop1280 : 우측 마진( 그리드 끝에서) 24px, 하단 16px마진

  • 1920 : 우측 마진( 그리드 끝에서) 48px, 하단 32px마진

Heesun .
Previous

Bottom Sheet / Survey
Next

Tooltip