언제 쓰나
바텀 시트, 전체 화면 사진, 공유 시트처럼 위에 겹쳐 뜬 화면은 아래로 내려 닫는 것이 자연스러워요. 워브록과 동료들(2009)의 연구처럼 사람들은 '치우기'를 밀어내는 동작으로 떠올려요. 위쪽 회색 손잡이 막대는 노먼(1999)이 말한 단서가 돼요(Material Design, n.d.). 사진은 끄는 만큼 작아지고 배경이 투명해져 원래 목록으로 돌아가는 느낌을 줘요.
임계값과 충돌
조금 끌다 놓으면 제자리로 돌아오고, 일정 거리(예: 화면 높이의 25~30%)를 넘거나 빠르게 튕기면 닫혀요. 브래그던과 동료들(2011)처럼 걸으며 쓰면 제스처가 부정확해지니 임계값을 너무 낮추지 않아요. 시트 안 목록은 맨 위까지 스크롤된 뒤에만 끌어 닫기가 시작돼야 해요. 안드로이드의 예측형 뒤로 제스처(Android Developers, n.d.)와 제스처 내비게이션과도 겹치지 않게 해요.
실수 방지와 대안
글을 쓰던 시트가 끌려 닫히면 내용을 잃어요. iOS(Apple, n.d.)처럼 저장 안 된 내용이 있으면 닫기를 막고 확인 대화상자를 띄워요. 경로 제스처만으로 닫히면 안 되니 WCAG 2.2(W3C, 2023)의 2.5.1·2.5.7에 맞춰 눈에 보이는 닫기 버튼도 둬요. 화면 읽기 프로그램 사용자는 '닫기' 버튼이나 뒤로 가기로 닫아요.
자주 묻는 질문
- 얼마나 끌어야 닫히게 하나요?
- 보통 화면 높이의 4분의 1 정도나 빠른 튕김으로 닫고, 그 전엔 제자리로 돌아오게 해요.
- 닫기 버튼도 필요한가요?
- 네. 제스처를 못 쓰거나 모르는 사용자를 위해 보이는 닫기 버튼을 함께 둬요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Sheets. Human Interface Guidelines. 시트를 아래로 끌어 닫는 동작과 저장 안 된 내용 확인을 다뤄, iOS 닫기 제스처를 설계할 때 참고하면 도움이 돼요.
- Material Design. (n.d.). Bottom sheets. 끌기 손잡이와 바텀 시트 닫기 규칙이라, 안드로이드 시트를 만들 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Add support for the predictive back gesture. 뒤로 제스처 중 미리보기를 보여주는 방법이라, 끌어 닫기와 시스템 뒤로가 겹칠 때 참고하면 도움이 돼요.
- Wobbrock, J. O., Morris, M. R., & Wilson, A. D. (2009). User-defined gestures for surface computing. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1083–1092). ACM. 사람들이 자연스럽게 떠올리는 제스처 연구라, 아래로 밀어 닫기가 직관적인 이유로 참고하면 도움이 돼요.
- Bragdon, A., Nelson, E., Li, Y., & Hinckley, K. (2011). Experimental analysis of touch-screen gesture designs in mobile environments. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 403–412). ACM. 이동 중 제스처 정확도 실험이라, 닫힘 거리·속도 임계값을 정할 때 참고하면 도움이 돼요.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 보이는 단서 논의라, 손잡이 막대로 끌 수 있음을 알릴 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 2.5.1 경로 기반 제스처와 2.5.7 끌기 대안 기준이 있어, 닫기 버튼을 함께 둘 근거로 참고하면 도움이 돼요.