왜 아래쪽인가
후버(2013)가 거리와 공공장소에서 1,333명을 관찰한 결과, 약 절반이 한 손으로 휴대폰을 쥐고 엄지로 조작했어요. 베리스트룀-레흐토비르타와 울라스비르타(2014)는 엄지가 편하게 닿는 기능 영역이 화면 아래쪽과 가운데에 몰려 있음을 모델로 보여줬어요. 그래서 자주 쓰는 목적지를 화면 상단 구석이 아니라 아래쪽에 두면 손을 고쳐 쥐지 않아도 돼요. 이는 엄지 영역과 피츠의 법칙이 함께 가리키는 결론이에요.
좋은 탭 바의 조건
구글 머티리얼 디자인과 애플 휴먼 인터페이스 가이드라인은 모두 하단 바에 3~5개의 최상위 목적지만 두라고 권해요. 아이콘만 두기보다 짧은 텍스트 라벨을 함께 붙이면 처음 쓰는 사람도 의미를 바로 알아요. 현재 위치는 색과 굵기로 분명히 표시하고, 각 탭은 터치 타깃 크기 기준을 넘겨야 해요. 채와 김(2004)은 작은 화면에서 메뉴 계층이 깊어질수록 길을 잃기 쉽다는 것을 보였는데, 하단 바는 핵심 목적지를 한 단계로 평평하게 펼쳐 이 문제를 줄여요. 파크와 한(2010)의 실험처럼 화면 가장자리의 키는 정확도가 떨어지므로 좌우 끝 탭은 여백을 넉넉히 주는 게 좋아요.
흔한 실수와 대안
하단 바에 '설정'이나 '로그아웃'처럼 가끔 쓰는 기능을 넣거나, 탭을 눌렀을 때 다른 화면 위로 모달을 띄우는 것은 흔한 실수예요. 탭은 목적지여야 하고 동작 버튼이 아니에요. 페르니스와 부디우(2016)의 테스트에서도 눈에 보이는 내비게이션이 숨겨진 햄버거 메뉴보다 더 자주, 더 빨리 쓰였어요. 다만 목적지가 다섯 개를 넘는 복잡한 서비스라면 하단 바에 핵심만 두고 나머지는 '더보기' 탭에 모으는 혼합 방식이 현실적이에요.
자주 묻는 질문
- 하단 탭은 몇 개가 적당한가요?
- 주요 가이드라인은 3~5개를 권해요. 다섯 개를 넘으면 터치 영역이 좁아지고 라벨이 잘려요.
- 웹사이트에도 하단 내비게이션을 써도 되나요?
- 모바일 웹에서도 자주 쓰는 목적지가 몇 개로 뚜렷하다면 효과적이에요. 다만 브라우저 하단 도구 막대와 겹치지 않게 여백을 두어야 해요.
출처 검토일: 2026-10-27
참고문헌
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 1,333명의 휴대폰 쥐는 방식을 관찰한 현장 연구라, 하단 배치의 근거를 찾을 때 참고하면 도움이 돼요.
- 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. 엄지가 실제로 닿는 영역을 모델링해, 탭 위치를 정할 때 참고하면 도움이 돼요.
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. 키 크기와 위치가 한 손 조작 성능에 주는 영향을 실험해, 탭 간격을 정할 때 참고하면 도움이 돼요.
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. 작은 화면에서 깊은 메뉴 구조가 탐색을 어렵게 한다는 실증이라, 1단계 탭 구조를 설계할 때 참고하면 도움이 돼요.
- Google. (n.d.). Navigation bar. Material Design 3. 안드로이드 하단 내비게이션 바의 공식 가이드로 3~5개 목적지 규칙이 있어, 구현 기준을 볼 때 참고하면 도움이 돼요.
- Apple. (n.d.). Tab bars. Human Interface Guidelines. iOS 탭 바의 역할과 금지 사항을 설명해, 아이폰 앱을 설계할 때 참고하면 도움이 돼요.
- Pernice, K., & Budiu, R. (2016, July 24). Beyond the hamburger: What makes navigation discoverable on mobile. Nielsen Norman Group. 숨긴 메뉴보다 보이는 탭이 발견성이 높다는 테스트 결과라, 햄버거 메뉴와 비교할 때 참고하면 도움이 돼요.