컴퍼넌트UI - 바텀시트 (Bottom Sheet)

---

모바일 앱이나 웹 화면기획설계를 하다보면, 

아무래도 PC에 비해 활용가능한 면적이 적다보니 모든 정보나 메뉴, 사용자 기능들을 하나의 화면에서

표현하기 힘든 경우들이 많습니다. 

그렇다보니 사용자의 이목을 끌고 행동이 필요한 경우 또 그 행동의 중요성을 고려해서 모달을 적용하는 경우들이 많습니다. 

모달을 구현하는 방법은 팝업(Popup), 바텀시트(Bottom sheet), 스낵바(Snackbar)등이 있는데, 

이번 포스팅에서는 그 중 Bottom sheet에 대해서 정리를 해놨습니다.

---

바텀시트는 문자 그대로 사용자의 액션을 위해 화면의 하단에서 출력되는 모달 UI입니다.

메인화면에서의 연관된 컨텐츠를 제공하거나, 기존의 컨텍스트에서 벗어나지 않고 연관된 작업을 할 수 있어서 

빠르게 프로세스가 진행되는 느낌을 전달할 수 있으며, 화면의 이동이 발생하지 않는 상태에서 선택할 수 있는

메뉴를 제공할 수 있어서 사용자가 간편하게 이용할 수 있다는 느낌을 전달할 수 있습니다.

 

 

바텀시트는 크게 Scrim, Handlebar, Header, Conentes, Button 영역으로 구성할 수 있습니다. 

---

 

Scrim의 존재 여부에 따라 Modal 유형과 Non-Modal 유형으로 구분됩니다.

위 예시 이미지에서 보여지는 것처럼 Modal 유형의 경우 바텀시트 영역을 제외한 화면영역에서는 사용자가 할 수 있는 

행동이 없는 반면, Non-Modal 유형의 경우 바텀시트의 영역을 벗어난 화면 영역에서 사용자의 액션을 통해 상호작용이 가능합니다

---

 

두번째는 Handlebar입니다. 

바텀시트에 핸들바가 존재할 경우 사용자의 액션으로 시트의 영역을 상하로 확장하거나 축소하는 형태의 상호작용이 가능합니다.

반대로 핸들바를 생각해서 사용자가 바텀시트내의 컨텐츠 확인을 위한 스크롤 액션만 가능하게 할수도 있습니다.

---

바텀시트를 잘 활용한다면, 화면 크기의 제약으로 사용자에게 정보전달이 어려울 경우 

상황에 따라 메뉴, 컨텐츠, 검색 등의 다양한 액션 이벤트를 제공하여 사용자의 이용 편의를 증가시킬 수 있습니다.

다만, 간혹 일부 서비스들에서 바텀시트가 중복되어 표시되는 경우들이 있는데, 

이린 경우에 대한 대비책이나 설계 시 주의를 기울일 필요성도 높습니다.