항상 손이 닿는 곳에
후버(2013)의 관찰처럼 사람들은 대부분 한 손으로 휴대폰을 쥐고 엄지로 조작해요. 베르그스트롬-레흐토비르타와 울라스비르타(2014)는 엄지가 편하게 닿는 영역이 화면 아래쪽에 있다는 걸 보였어요. 그래서 긴 상품 상세 페이지에서 구매 버튼이 맨 아래에만 있으면 사용자는 끝까지 스크롤해야 해요. 고정 하단 버튼은 핵심 행동을 엄지 영역에 계속 붙잡아 두는 방법이에요. 포그(2009)의 행동 모델로 보면 동기가 생긴 순간 바로 누를 수 있는 '계기'를 항상 제공하는 셈이에요.
크기, 너비, 안전 영역
파리와 동료들(2006)은 한 손 엄지 조작에 충분한 타깃 크기를 제시했어요. 피츠(1954)의 법칙처럼 넓은 타깃일수록 빠르게 누를 수 있으니, 버튼은 좌우 여백을 둔 전체 너비에 높이 48dp 이상이 흔한 기준이에요. 아이폰의 홈 인디케이터 영역을 피하려면 안전 영역(safe area) 여백을 더해야 해요. 입력 화면에서는 키보드가 올라올 때 버튼이 키보드 바로 위로 따라 올라가게 하거나, 모바일 폼 사용성 원칙에 맞게 키보드의 완료 키와 연결하세요.
가림 문제와 실험
고정 버튼은 화면 아래 공간을 계속 차지해요. 마지막 콘텐츠가 버튼 뒤에 숨지 않도록 버튼 높이만큼 아래 여백을 주세요. WCAG 2.2(W3C, 2023)의 2.4.11 기준은 키보드 초점을 받은 요소가 고정 요소에 완전히 가려지면 안 된다고 해요. 하단 내비게이션과 함께 쓰면 화면 아래가 너무 두꺼워지니 결제 단계처럼 집중이 필요한 화면에서는 내비게이션을 숨기는 것도 방법이에요. 효과는 화면마다 다르니 코하비와 동료들(2009)의 방식대로 실험하고, 전환율 최적화 지표와 함께 반품·이탈 같은 가드레일도 보세요.
자주 묻는 질문
- 모든 화면에 고정 하단 버튼을 둬야 하나요?
- 아니에요. 화면에 분명한 핵심 행동이 하나 있을 때만 효과적이고, 탐색 위주의 화면에서는 공간만 차지할 수 있어요.
- 고정 버튼과 플로팅 버튼은 어떻게 다른가요?
- 고정 하단 버튼은 보통 전체 너비로 화면 아래에 붙고, 플로팅 버튼은 콘텐츠 위에 떠 있는 작은 원형 버튼이에요.
출처 검토일: 2026-10-27
참고문헌
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 한 손 엄지 조작이 가장 흔하다는 관찰이라, 주요 버튼을 아래에 고정하는 근거로 참고하면 도움이 돼요.
- 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. 엄지 기능 영역 모델이라, 고정 버튼 높이와 위치를 정할 때 참고하면 도움이 돼요.
- 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. 엄지용 최소 타깃 크기를 제시해, 버튼 높이를 정할 때 참고하면 도움이 돼요.
- 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. 넓고 가까운 타깃이 빠르다는 법칙이라, 전체 너비 버튼의 장점을 설명할 때 참고하면 도움이 돼요.
- Fogg, B. J. (2009). A behavior model for persuasive design. In Proceedings of the 4th International Conference on Persuasive Technology (Article 40, pp. 1–7). ACM. 행동은 동기·능력·계기가 만날 때 일어난다는 모델이라, 고정 버튼을 '계기'로 이해할 때 참고하면 도움이 돼요.
- Kohavi, R., Longbotham, R., Sommerfield, D., & Henne, R. M. (2009). Controlled experiments on the web: Survey and practical guide. Data Mining and Knowledge Discovery, 18(1), 140–181. 온라인 실험 설계 가이드라, 고정 버튼 효과를 검증할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 초점이 고정 요소에 가려지지 않아야 한다는 2.4.11 기준이 있어, 고정 버튼의 접근성을 점검할 때 참고하면 도움이 돼요.