앱의 bottom sheet
앱에서의 선택 옵션 bottom sheet 만 써야 하나요?
앱에서
선택 기능을 위해 반드시
bottom sheet가 사용 되어져야만 하는가?
bottom sheet - select modalbottom sheet 이미지
bottom sheet 에 대한 설명
https://uxplanet.org/how-to-design-better-bottom-sheets-fa688de6a798
흔히 웹에서는 모달 이라고 하면 네모 박스로 사용 되기 때문에
어디서든 클릭하면 화면 중앙에 배치 되거나 클릭한 위치에서 생성 된다.
그러나 앱의 bottom sheet 는 앱의 어느 위치에서든 클릭 후 아래 쪽에서 올라 온다.
스마트 폰의 사용 시 손가락으로 쉽게 조작이 가능한 공간이 bottom sheet 쪽이기 때문에
만들어진 component style 이다.
(흠.. 한 손 엄지 손가락으로..? 난 두손으로 스마트폰 쓰는데예...)
앱에서는 이미지를 업로드 하거나, 공유를 하거나, 정보를 입력해야 하는 동작 등
웹의 dialog와 같은 기능을 앱에서는 bottom sheet로 처리한다.
처음 이 컴포넌트가 사용되는 경우 중 내가 가장 어색하다고 느꼈던 부분은
앱의 상단 헤더 부분에서 동작을 했는데
아래쪽에 낮게 뜨는 형태였다.
다들 늘 써왔기 때문에 익숙하다고들 하는데
과연 이게 사용자에게 편할까??? 라는 의문이 들었다.
가끔은 bottom sheet라는 컴포넌트가 적합하지 않다고 느껴질때가 있다고!
그러던 어느날
레퍼런스를 조사하던 중 엄청 직관적인 드랍다운 모달을 사용하는 앱을 발견했다.
동작을 위해 클릭한 그 자리에 생성되어 내가 원하는 것을 바로 할 수 있도록 해주는 클리어한 드랍다운 셀렉트 모달!
거의 많은 앱에서 bottom sheet를 사용하고 있어서
드롭 다운의 "선택" 모달은 앱에서 쓰지 않는 것이라는 UX 적인 견해가 많아
그렇게 단정 지을 뻔할 때!
당근 마켓 앱에서 내가 찾던 형태의 select 모달을 발견했다.
개발적으로 어떤 점이 차이가 있는지는 모르겠다.
(우리 회사 개발자가 베트남 분이라 영어로 여쭤봤는데 그냥 앱은 바텀 시트를 쓴다고 그게 앱 스타일이라고 하심.)
비슷한 역할을 하는 지역 설정이 필요한 요기요 앱을 찾아 보았다.
헤더에 위치한 드랍다운 형태의 버튼 (아래 화살표로 보여지는 버튼)은 동일하지만 버튼을 눌렀을 때
동작은 bottom sheet 로 보여졌다.
아마도 집, 회사 외에도 장소가 바뀔때마다 주소지를 계속 추가 해야 하기 때문에 당근 마켓에 비해서 상당한 지역 컨텐츠의 데이터가 필요해 보인다.
주소를 여러개 입력하는 등의 간단하지 않은 기능이 연결 되어져야 할때는 bottom sheet 가 적절한 컴포넌트인 것 같긴 하다.
아이폰의 기본 앱들을 보면 bottom sheet를 잘 활용 하는 법을 확인할 수 있다.
bottom sheet 보다 모달을 선호하는 입장에서 (웹 디자인에서 너무 익숙해져서..)
이번 레퍼런스 조사로 생각의 전환을 가질 수 있었던 것은
bottom sheet가 아닌 웹에서 사용하는 drop down 스타일도 필요에 따라 사용할 수 있다는 것.
보다 직관적이고 빠른 동작에는 더 적합할수 있다는 것.
bottom sheet 형태만 고집 할 필요가 없다는 것!
언제든지 사용자들에게 보다 더 편리한 UI component를 선택해서 사용해도 괜찮지 않을까?
APP select modal