📄 바텀시트 Swipe-to-Dismiss 스펙
1. 개요
- 목적: 모든 바텀시트 팝업에 위→아래 드래그(드로어 제스처) 로 닫을 수 있는 기능 추가
- 효과: 모바일 사용성 향상, 네이티브 패턴과 일관성 제공
- 적용 범위: 기본적으로 모든 바텀시트에 적용, 단 예외 케이스에서 비활성화 가능
2. 기본 동작
-
제스처 시작 조건
- 바텀시트 내부 스크롤뷰의 scrollTop = 0 일 때만 제스처 활성화
- 수평 스와이프 요소(캐러셀, 지도)와 제스처 충돌 방지
-
제스처 진행
- 드래그 진행률에 따라
- 시트 높이 감소
- 드래그 진행률에 따라
-
닫힘 조건
- 시트 높이의 30% 이상 드래그
- 시트 높이의 30% 이상 드래그
-
닫기 후
- 이전 화면 또는 호출 시점 상태로 복귀
- 이전 화면 또는 호출 시점 상태로 복귀
3. UI 요소
-
핸들(Grabber)
- 시트 상단 중앙에 24~36px 길이의 얕은 바(터치영역 확보)
- 혹은 팝업 외부 상단 chevron icon
-
닫기 버튼(X)
- 우측 상단 고정 노출
- 우측 상단 고정 노출
-
백드롭 클릭 닫기
- 일반 시트에서는 허용, 치명적 플로우에서는 비활성화 가능하도록 설계 필요
- 일반 시트에서는 허용, 치명적 플로우에서는 비활성화 가능하도록 설계 필요
4. 예외 케이스 (스와이프 닫기 비활성화)
- 결제 진행 화면
- 법적 동의 필수 화면
- 데이터 손실 가능성이 있는 입력/업로드 화면
스크롤 다운 제스처는 바로 적용이 가능합니다!