바텀시트에 대한 고찰
오늘도 배워갑니다
오늘은 바텀시트에 대한 정확한 사용 방법 및 환경에 대해 정리하고 앱들의 실제 사례와 비교해보고자 한다.
며칠전, 직장내 타부서 동료분께서 특정 기종에서 바텀시트가 잘려서 보인다는 제보를 받았다며 전달해주셨다.
기본적으로 갤럭시와 아이폰 등 테스터폰을 몇가지 구비해두고 화면을 테스트해본 후 업데이트를 진행하는데, 제보해주신 분의 디바이스는 현재 우리가 갖추고 있지 않은 기종이었다.
문제가 일어난 화면의 버튼이 잘려서 동작을 할 수 없는 상태바텀시트가 잘리면서 발생한 문제
두번째 이미지와 같이 바텀시트 내에 유저가 액션을 꼭 취해야할 버튼이 존재했는데 이 버튼 부분이 아예
나타나지 않으면서 유저가 다음 단계로 넘어가지 못하는 커다란 문제를 발생시켰다.
현재 우리 서비스의 바텀시트 영역은 스크롤 되거나 위로 확장이 가능한 형태가 아니었기 때문에, 유저가 이를 작동시킬 방법은 전혀 없는 상태였다.
문제 원인이 무엇이었나?
문제 원인 파악을 위해 우선 시스템 폰트가 너무 크거나, 유저가 디바이스 자체의 해상도를 조정한 것인지 1차로 확인했고, 해당되지 않음을 확인했다. 결과적으로 개발자님께서 문제의 정확한 원인을 알기 어렵다는 답변을 주셨고, 일단 현재 고정 높이의 바텀시트를 가변 형태로 변경해두는 조치를 취해두었다.
상황을 지켜보고 분석하면서 우리 서비스에서 바텀시트의 예외 상황이나 인터랙션에 대한 정확한 정의가 이뤄지지 않은 것이 문제의 근본 원인이라 판단했고, 바텀시트에 대한 정의를 정확하게 하기로 결정했다.
최종 정의에 앞서, 정확한 사용을 위해 구글 머터리얼 디자인과 실제 앱의 사례들을 보고 비교 분석하는 과정을 진행했다.
1. Google Material Design
(출처 : https://m3.material.io/components/bottom-sheets/overview)
• 사용 목적
메뉴항목으로 쓰이거나, 메인 컨텐츠를 보강하는 용도로 사용한다. 이때, 컨텐츠는 반드시 추가적이고 부차적인 것이어야 한다.
• 종류
크게 스탠다드 바텀시트와 모달 바텀시트로 나뉘며, 형태에서의 차이는 Scrim의 유무이다.
1. 스탠다드 바텀시트 : 자주 스크롤하거나 이동하는 특성을 가진 화면에서 동시에 상호작용하기 위해
사용한다. ex) 음악앱의 오디오 플레이어, 지도 앱의 위치에 대한 정보 제공할 때
2. 모달 바텀시트 : 앱 컨텐츠 위로 나타나며, 바텀시트에서 유저에게 요구하는 행동이 이뤄질때까지
다른 기능이 비활성화 된다. (기본 모달의 효과와 동일)
바텀시트의 실제 사례• 가시성 (Visibility)
1. 기존 화면으로의 접근이 용이하도록, 첫 노출 크기는 화면의 50% 이하로 잡는다.
2. 50%가 넘어간다면 스크롤로 화면을 확장 시킨다.
3. 모달 바텀시트의 경우 아래의 인터랙션이 이루어졌을 때 해제 가능다.
- 유저가 요구하는 Task를 수행
- Scrim 영역을 탭했을 때
- 시트를 아래로 스와이프
- 바텀시트 내 상단 클로즈 버튼을 선택
4. 풀스크린 모달 바텀시트는 반드시 클로즈 버튼을 두어라
5. 드래그 핸들 : 사용자가 시트 높이를 조절할 수 있다는 어포던스이다. 사전 설정된 높이를 빠르게 전환할 수 있는 기능을 제공한다.
드래그 핸들 예시 화면2. 앱에서 실제 사용되는 사례
우리 서비스에서는 주로 모달 바텀시트를 활용하고 있으므로, 모달 바텀시트를 사용하는 여러 앱의 실례를 찾아보았다.
(1) 당근 (커뮤니티)
당근 바텀시트 사례• 성격
당근의 바텀시트 성격은 대체로 시스템 설정이나 필터와 같이, 컨텐츠를 담기보다 기능적인 영역에 가까웠다.
• 1번, 2번 화면 (알림 기능)
- 두 화면의 경우 뷰포트 내에서 전체 내용 표출 가능, 바텀시트를 확장하거나 스크롤이 되는 별도의 인터랙션이 없다.
• 3번 화면 (필터 설정)
- 구글 머터리얼의 정의에서와 달리 화면 대부분을 차지하는 형태로 최초 노출되었다.
(하지만 기존 화면과의 상호작용이 필요하지는 않아서 딱히 불편하지는 않았다)
- 성격이 필터인 만큼 세부 내용들이 많아 스크롤이 가능했다.
- 타이틀과 클로즈 버튼이 포함된 바텀시트 내 탑 앱바 영역과 적용하기 버튼이 위치한 하단 버튼 영역은 고정이 된 채로 내용만 스크롤이 가능했다.
- 작은 영역을 차지하는 다른 바텀시트와 달리, 클로즈 버튼을 배치해 쉽게 벗어날 수 있다는 어포던스를 던진다.
• 시스템 폰트 설정시
디바이스 시스템 폰트를 조정해도 서비스에는 영향을 미치지 않도록 설계하여 텍스트 크기 때문에 화면이 오버플로우 나지 않았다.
(2) 쿠팡 (커머스)
• 성격
- 구매하기를 누른 이후의 바텀시트 플로우이며, 구매와 같은 행동을 유도한 이후 연관 상품을 추천하는 내용으로 구성되어 있다.
- 앱의 기능이 아닌 컨텐츠 성격의 바텀시트이다.
• 드래그 핸들 영역이 눈에 띄었다.
- 1번 화면 : 유저의 행동이 꼭 필요한 바텀시트로 중요도가 높아 행동 유도 버튼 외의 다른 내용은 없다.
이 때의 드래그 핸들이 아래 화살표로 나타나 있다. 실제 작동시 바텀시트를 내리는 인터랙션 외에 다른 인터랙션은 일어나지 않는다.
- 2번 화면 : 장바구니를 담았을 때 나타나는 바텀시트다. 이때는 드래그 핸들이 위로 향하는 화살표로
되어있다. 바텀시트를 위로 스와이프 했을 때, 화면이 3번 이미지와 같이 위로 확장된다.
- 기존 많이 사용하는 드래그 핸들에 비해, 화살표 방향을 통해 유저가 취할 수 있는 행동에 대해 좀 더 구체적으로 제시하고자 노력했음을 알 수 있었다.
• 2, 3번 화면의 인터랙션
- 위로 스와이프하여 바텀시트 영역이 커졌을 때, 드래그 핸들은 삭제하고 클로즈 버튼을 배치했다.
- 클로즈 버튼이 나타나면서 2번 화면의 닫기 버튼은 사라진다.
- 상단 '장바구니에 상품이 담겼습니다.' 영역은 고정 하위 요소 들은 스크롤이 가능했다.
• 시스템 폰트 설정시
당근과 마찬가지로 서비스 자체가 디바이스의 시스템 폰트에 영향받지 않았다.
(3) 토스증권 (금융)
• 성격
내가 갖고 있는 주식의 가격이나 손익 등 세부 내용을 보여주는 컨텐츠 성격이다.
• 인터랙션
- 드래그 핸들이 있지만 바텀시트 영역을 확장시키거나 축소하는 기능은 없다.
- 화면에서 고정 영역을 차지하며, 상단의 타이틀과 하단의 버튼은 고정이고 내용은 스크롤이 가능했다.
• 시스템 폰트 설정시
- 토스는 시스템 폰트에 맞춰 서비스의 텍스트 크기가 바뀐다.
- 위의 영상은 아이폰 기준 시스템 폰트를 최대로 키운 것이고, 보통 사이즈일 경우 스크롤이 발생하지 않는 바텀시트이다.
- 시스템 폰트 크기를 크게 설정했을 때, 바텀시트의 영역은 고정이며 늘어난 크기만큼 스크롤이 발생한다.
이제 우리 서비스에 적용해보자
1. 우리 서비스의 바텀시트 성격
전부 모달 바텀시트의 형태이며, 크게 유저의 액션이 필요한 바텀시트와 툴팁의 정보성 글을 표출하는 바텀시트 두가지로 나뉜다.
이 때, 유저의 액션은 하단에 배치한 버튼에 의해 이루어지기 때문에 절대 바텀시트가 잘려서는 안된다.
2. 바텀시트 활용 정의
우리 서비스는 시스템 폰트에 영향을 받는 서비스이다.
때문에 내용이 많지 않아도 디바이스 및 시스템 폰트에 따라 화면이 넘칠 수 있다.
그러므로 아래의 정의는 컨텐츠 양에 상관 없이 모든 바텀시트에 적용한다.
활용 예시- 드래그 핸들 배치 : 쿠팡에서의 사례가 긍정적으로 느껴졌지만, 기존의 드래그 핸들 디자인으로 충분히
어포던스를 줄 수 있을 것이라 판단하여 일반적 형태의 드래그 핸들을 사용했다.
(*기존 디자인에도 드래그 핸들이 있었으나, 스와이프가 가능하지는 않았다.)
- 스와이프 : 위로 스와이프 시, 바텀시트 영역 확장 (*이때 가장 크게 확장 되었을 때의 위치를 지정)
아래로 스와이프 시, 바텀시트 영역 기존으로 축소 (액션을 요구하는 바텀시트의 경우, 스와이프시 바텀시트가 아예 종료되는 것은 불편함을 초래할 것으로 판단)
- 버튼 고정 : 무조건 노출되어야 하므로 스크롤 시에도 컨텐츠 위로 고정
- 스크롤 사용 : 확장 이후에도 컨텐츠가 넘친다면 스크롤 사용
글을 마치며
해당 내용은 아직 서비스에 적용하지는 않았고 다음 패치에 업데이트할 예정이다.
유저가 액션을 취해야할 버튼이 보이지 않는다는 것은 기능적으로 문제일 뿐만 아니라 유저 경험에 굉장히
부정적인 인상을 남길 것이기에 꼭 개선이 필요한 부분이었다.
시스템 폰트가 서비스에 적용되면서 사실 바텀시트 외에도 다양한 문제점들이 일어나고 있는 상태이다.
일단 심각한 문제가 될만한 것들을 해결해나간 뒤, 우리 서비스의 타겟층을 좀 더 뾰족히 하여 시스템 폰트
적용을 제외하는 것도 고려중이다.
이번 기회를 통해 다양한 바텀시트에 대해 알아보고 또 우리 서비스에 맞는 최선의 결과물을 적용하여 조금 더 사용성을 개선할 수 있었다.
혹시 바텀시트에 대한 구체적 정의와 활용 방법에 대해 헤매고 있는 디자이너가 있다면 이 글이 도움이
되었으면 좋겠다.
