탭 바

Tab Bar

개념

모바일 화면 아래쪽에 제품의 주요 갈래를 서너 칸으로 늘어놓아 어디서든 바로 옮겨 갈 수 있게 만든 메뉴입니다.

등장 배경

좁은 화면에서 메뉴를 접어 두면 접힌 항목이 쓰이지 않습니다. 줄 세 개 아이콘 뒤에 전부 넣는 햄버거 메뉴로 옮긴 기능은 사용량이 절반 아래로 떨어지는 일이 흔합니다. 보이지 않는 것을 찾으려면 그 기능이 있다는 사실을 먼저 알아야 하고, 처음 쓰는 사람은 그것을 모릅니다.

손이 닿는 자리도 문제였습니다. 휴대폰을 한 손으로 잡으면 엄지가 닿는 범위는 화면 아래쪽 절반입니다. 메뉴를 위쪽 구석에 두면 이동할 때마다 손을 바꿔 잡아야 합니다.

그래서 아래쪽에 늘 보이는 칸을 몇 개 두는 형태가 자리를 잡았습니다. 자리가 늘 보이니 비싸고, 그래서 이 형태에서는 무엇을 넣을지보다 무엇을 빼서 접힌 메뉴로 보낼지가 어려운 결정이 됩니다.

작동 방식

칸은 셋에서 다섯입니다. 여섯이 되면 글자가 뭉개져 읽히지 않고, 칸 폭이 좁아져 잘못 누르는 일이 늘어납니다.

  1. 한 칸에 아이콘과 글자를 함께 둡니다. 아이콘만 두면 뜻이 사람마다 갈립니다. 별 모양이 즐겨찾기인지 중요 표시인지는 글자가 없으면 정해지지 않습니다.
  2. 지금 어느 갈래에 있는지를 한 칸만 진하게 표시합니다. 색과 아이콘 채움을 함께 바꿔 두면 색을 구분하기 어려운 사람에게도 전해집니다.
  3. 칸에는 제품의 갈래를 넣고 동작은 넣지 않습니다. 문서와 팀과 알림은 갈래이고, 새 문서 만들기는 동작입니다. 동작을 가운데 칸에 넣는 방식이 널리 쓰이지만, 그 칸을 눌렀을 때 화면이 바뀌지 않아서 다른 칸과 성격이 어긋납니다.
  4. 이미 선택된 칸을 다시 누르면 그 갈래의 맨 위로 올립니다. 목록을 한참 내려간 사람이 위로 돌아가는 가장 빠른 길이 이것입니다.
  5. 갈래를 옮겼다 돌아왔을 때 아까 보던 자리를 지킵니다. 문서를 반쯤 읽다 알림을 확인하고 돌아왔을 때 목록 맨 위로 튕기면 읽던 자리를 다시 찾아야 합니다.

화면이 넓어지면 같은 항목이 사이드바로 옮겨 그려집니다. 항목을 빼는 것이 아니라 같은 갈래를 다른 모양으로 놓는 것입니다.

실무 용례

"칸이 여섯이면 글자가 잘립니다. 하나는 접힌 메뉴로 보내죠."

칸 수 상한을 근거로 범위를 줄이자는 제안입니다.

"가운데 칸은 갈래가 아니라 동작이라 여기 두면 어긋납니다."

이 형태에 무엇을 넣을지 판정하는 말입니다.

"알림 탭 갔다 돌아오면 목록 맨 위로 튕깁니다."

상태 보존이 빠졌다는 보고입니다.

페이지덱 모바일 앱에서 이 결정을 한 번 바꿨습니다. 처음에는 문서, 팀, 템플릿, 알림, 설정 다섯 칸이었는데, 민서가 사용 기록을 보니 설정은 한 달에 한 번꼴로 열렸습니다. 설정을 오른쪽 위 계정 사진 뒤로 옮기고 네 칸으로 줄였습니다. 남은 네 칸의 글자가 잘리지 않게 되면서 템플릿 탭 사용이 조금 늘었습니다.

자주 헷갈리는 용어

용어무엇을 바꾸는가탭 바와의 차이
탭한 화면 안에서 보여 주는 내용화면을 옮기지 않고 같은 자리의 내용만 갈아 끼웁니다. 탭 바는 제품의 갈래 사이를 옮기고 어느 화면에서나 같은 자리에 남습니다

같이 보면 좋은 페이지

  • 내비게이션

    형태 다섯 가지와 어느 상황에 무엇을 고르는지 봅니다

  • 빵부스러기

    깊은 구조에서 위치를 알리는 형태를 봅니다

마지막 업데이트 2026-09-16