탭바 (Tab Bar)

디자인학
한 줄 정의: 화면 상단이나 하단에 고정되어 주요 섹션 간 빠른 전환을 제공하는 내비게이션 UI 요소이다.

쉽게 풀면

화면 아래나 위에 늘 떠 있어서 주요 메뉴들 사이를 바로바로 이동할 수 있게 해주는 바이다.

왜 중요한가

탭바는 모바일 앱 화면 하단이나 상단에 주요 메뉴를 아이콘과 라벨로 배치해 사용자가 한 번의 탭으로 주요 섹션 간 이동을 할 수 있게 하는 내비게이션 패턴으로, 엄지손가락으로 조작하기 쉬운 화면 하단 배치가 iOS와 안드로이드 앱 설계의 표준 관행으로 자리잡았다. 앱의 정보 구조에서 가장 상위 수준의 3~5개 메뉴를 노출하는 데 주로 쓰인다. 가운데 탭을 다른 탭보다 크게 만들어 핵심 행동(글쓰기, 촬영)을 강조하는 구성도 흔히 쓰이며, 이는 전체 균형보다 특정 행동의 발견성을 우선한 예외적 설계다. 아이폰과 안드로이드는 각각 하단 탭바에 대한 고유한 디자인 가이드라인을 제공해, 두 플랫폼 모두에 서비스하는 앱은 세부 스타일을 플랫폼별로 다르게 구현하는 경우가 많다. 탭 항목의 순서를 사용 빈도에 따라 임의로 바꾸면 사용자가 매번 위치를 다시 찾아야 해, 항목 순서는 고정하는 것이 일반적 원칙이다.

논문에서는 이렇게 쓰입니다

이 연구는 하단 탭바 항목 수 증가가 사용자의 항목 선택 정확도에 미치는 영향을 분석하였다.

탭 항목 수와 배치가 실제 선택 정확도에 미친 영향을 실험한 연구이다.

"사용성 평가에서 탭바 항목 수를 달리한 조건들의 탐색 오류율을 비교하였다."

탭바 항목 수와 탐색 효율성 사이의 관계를 실험적으로 검증한 사례를 보여준다.

조금 더 깊게 보면

탭 항목이 지나치게 많아지면 각 아이콘의 크기가 줄어 터치타깃크기 기준을 충족하지 못하거나 라벨을 생략해야 하는 문제가 생겨, 일반적으로 5개 이하로 제한하는 것이 실무 관행이다. 사이드바 내비게이션이 확장 가능한 다수의 메뉴 항목을 다루는 데 적합하다면 탭바는 소수의 핵심 메뉴를 상시 노출하는 데 특화되어 있다. 탭바 항목에는 배지(알림 숫자)를 붙이는 경우가 많은데, 배지가 늘어나는 항목에 사용자가 습관적으로 반응하게 되면 실제로 중요하지 않은 알림에도 불필요하게 탭을 누르게 되는 부작용이 지적된다.

주의할 점

탭바에 너무 많은 항목을 배치하면 터치 영역이 좁아져 오조작 가능성이 높아질 수 있다.

탭바의 각 항목은 눌렀을 때 해당 섹션의 첫 화면으로 완전히 초기화되는 것이 표준 동작이며, 하위 화면으로 이동한 상태에서 같은 탭을 다시 누르면 최상위로 되돌아가는 관행도 널리 쓰인다.

개념 계통

분야 전체 개념 지도 보기 →

관련 용어