왜 아래에서 올라올까
후버(2013)의 관찰에서 사람들은 휴대폰을 한 손으로 쥐고 엄지로 조작하는 경우가 가장 많았어요. 베르그스트롬-레흐토비르타와 울라스비르타(2014)는 엄지가 편하게 닿는 영역이 화면 아래쪽에 몰려 있음을 모델로 보여줬어요. 바텀 시트는 바로 이 엄지 영역에 선택지를 띄우는 패턴이에요. 피츠(1954)의 법칙처럼 가깝고 큰 타깃은 더 빨리 누를 수 있어서, 화면 위의 드롭다운보다 시트가 모바일에 잘 맞아요.
표준 시트와 모달 시트
머티리얼 디자인(Google, n.d.)은 뒤 화면과 함께 쓸 수 있는 표준 시트와, 뒤를 어둡게 덮고 먼저 처리하게 하는 모달 시트를 구분해요. 지도 앱의 장소 정보처럼 탐색하면서 보는 내용은 표준 시트, 공유하기나 옵션 선택처럼 짧게 결정할 일은 모달 시트가 맞아요. 애플(n.d.)은 시트의 높이를 중간·전체 같은 단계(detent)로 나누고 손잡이를 드래그해 조절하게 해요. 쿠퍼와 동료들(2014)이 말하듯 흐름을 막는 정도는 작업의 중요도에 맞춰야 하고, 길고 중요한 결정은 모달 대화상자나 별도 화면이 더 적절해요.
드래그 닫기와 접근성
시트는 아래로 끌어내리거나 바깥 영역을 탭해서 닫을 수 있어야 해요. 하지만 제스처 내비게이션과 충돌하지 않게, 시트 안 콘텐츠의 스크롤과 시트 자체의 드래그를 명확히 구분해야 해요. 스크린리더 사용자를 위해 닫기 버튼을 따로 제공하고, 시트가 열리면 초점을 시트 안으로 옮기세요. 시트 안 버튼은 파리와 동료들(2006)이 제시한 엄지용 크기 이상으로 만드는 것이 좋아요.
자주 묻는 질문
- 바텀 시트와 모달 대화상자는 어떻게 다른가요?
- 바텀 시트는 화면 아래에서 올라와 맥락을 유지하며 엄지로 조작하기 쉽고, 모달 대화상자는 화면 가운데에서 즉시 결정을 요구하는 경우에 써요.
- 바텀 시트에 넣으면 안 되는 내용은?
- 긴 입력 폼이나 여러 단계를 거치는 작업은 시트가 아니라 별도 화면에서 처리하는 것이 좋아요.
출처 검토일: 2026-10-27
참고문헌
- Google. (n.d.). Bottom sheets. Material Design 3. 표준·모달 바텀 시트의 구분과 동작 규칙을 정리한 공식 가이드라, 구현 기준을 정할 때 참고하면 도움이 돼요.
- Apple. (n.d.). Sheets. Human Interface Guidelines. iOS 시트의 높이 단계(detent)와 닫기 방식을 설명해, 아이폰 앱에 적용할 때 참고하면 도움이 돼요.
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 엄지가 실제로 닿는 영역을 모델링한 연구라, 시트를 화면 아래에 두는 근거로 참고하면 도움이 돼요.
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 1,300여 명의 휴대폰 쥐는 법을 관찰한 글이라, 한 손 조작 비율을 설명할 때 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 한 손 엄지 조작에 맞는 타깃 크기를 측정해, 시트 안 버튼 크기를 정할 때 참고하면 도움이 돼요.
- Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: The essentials of interaction design (4th ed.). Wiley. 모달과 비모달 상호작용의 원칙을 다뤄, 시트가 흐름을 막아야 하는지 판단할 때 참고하면 도움이 돼요.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 이동 거리와 타깃 크기의 관계를 밝힌 고전이라, 가까운 시트가 왜 빠른지 설명할 때 참고하면 도움이 돼요.