탭은 다섯까지

KRDS CP-137 — [모바일] 탭 메뉴의 개수를 5개 이내로 사용하고 있다.

0. 들어가며 — 좁은 하단에 너무 많이 넣으면

이번 257편은 탭 메뉴 개수를 5개 이내로 사용하라는 규칙입니다.

모바일 화면 하단의 탭 바는 가로 너비가 한정돼 있습니다. 여기에 탭을 6개, 7개씩 욱여넣으면 — 각 탭이 좁아져 아이콘·레이블이 비좁고, 손가락으로 정확히 누르기 어렵죠. 또 핵심 메뉴를 추리지 못한 산만한 내비게이션이 됩니다. CP-137은 탭을 5개 이내로 제한해 각 탭에 충분한 공간을 주고 핵심에 집중하게 합니다. 브레드크럼·페이지 네이션의 개수 제한과 같은 발상이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 탭 5개 이내

CP-137 (컴포넌트 > 탭 바) [모바일] “탭 메뉴의 개수를 5개 이내로 사용하고 있다.”

탭 바를 구성하는 탭(메뉴) 개수를 최대 5개로 제한해, 각 탭이 충분한 크기를 갖고 핵심 메뉴에 집중되게 하라는 뜻입니다.

정리: 탭 메뉴는 최대 5개. 그 이상으로 늘리지 마라. 이게 CP-137입니다.

2. 왜 5개 이내인가

탭 바의 개수 제한은 물리적 공간과 인지 부담, 정보 설계 세 측면에서 정당화됩니다.

① 물리적 공간 터치 영역. 모바일 화면 가로 너비(360~430px)를 탭들이 균등 분할합니다(CP-134). 탭이 5개면 각 탭이 약 72~86px 너비를 갖죠 아이콘과 레이블을 담고 손가락으로 누르기에 충분합니다. 그런데 6개, 7개로 늘리면 각 탭이 좁아져(약 51~62px 이하) 아이콘·레이블이 비좁게 끼고, 터치 영역이 작아져 옆 탭을 잘못 누르기 쉽습니다(피츠의 법칙, CP-131의 적절한 크기와 충돌). 손가락 터치는 정밀하지 않아, 좁은 탭은 오조작을 부르죠.

② 인지 부담 — 핵심 집중. 탭 바는 사이트/앱의 가장 중요한 주요 화면들로 가는 지름길입니다. 모든 메뉴를 담는 곳이 아니라, ’가장 자주·중요하게 쓰는 핵심 몇 개’만 추리는 곳이죠. 5개 이내로 제한하면, 사용자는 한눈에 주요 메뉴를 파악하고 빠르게 선택합니다. 그런데 탭이 7~8개면 — 선택지가 많아 매번 훑어야 하고, ’뭐가 정말 중요한지’가 흐려집니다. 제한이 오히려 핵심을 또렷하게 하죠. 사람이 한눈에 처리하는 항목 수에도 한계가 있어, 4~5개가 ’한 번에 파악’되는 적정선입니다.

③ 정보 설계 — 우선순위 강제. 5개 제한은 설계자에게 ‘무엇이 정말 핵심인가’를 결정하도록 강제합니다. 모든 걸 탭에 넣을 수 없으니, 가장 중요한 4~5개를 고르고 나머지는 다른 곳(예: ’더보기/전체’ 탭 안의 메뉴, 햄버거 메뉴 등)으로 보내죠. 이 우선순위 결정이 사용자에게 명료한 내비게이션을 줍니다. 실제로 메뉴가 많은 서비스는 탭 바에 핵심 4개 + ‘전체(더보기)’ 탭 1개를 두어, 나머지 메뉴는 ‘전체’ 탭에서 펼치는 패턴을 흔히 씁니다 (CP-140의 ‘전체 버튼’ 맥락).

이 ’5개 이내’는 모바일 탭 바의 업계 표준이기도 합니다 — iOS·안드로이드 디자인 가이드 모두 하단 탭을 보통 5개 이하로 권장하죠. KRDS도 이를 따릅니다. 핵심은 — 탭 바는 ’많이 담는 곳’이 아니라 ’핵심만 추리는 곳’이고, 5개 제한이 그 집중을 보장한다는 것입니다. 브레드크럼 최대 4개(CP-078), 사이드 메뉴 2수준(CP-092)에서 본 ’내비게이션은 적정 규모일 때 가장 잘 작동한다’는 원칙의 탭 바 버전이죠.

정리하면 — 탭은 충분한 터치 영역과 핵심 집중을 위해 5개 이내로 제한하고, 넘치는 메뉴는 ‘전체/더보기’ 등으로 분산합니다.

3. 점검 / 개선

무엇을 점검하나

탭 개수 ≤5 — 탭 메뉴가 5개 이내인가.

터치 영역 — 각 탭이 충분한 너비·터치 영역을 갖는가.

넘치는 메뉴 처리 — 5개를 넘는 메뉴가 ‘전체/더보기’ 등으로 분산됐는가.

개선 방향

핵심 4~5개만 탭으로, 나머지는 ‘전체(더보기)’ 탭이나 다른 내비게이션으로 이전.

탭 개수를 줄여 각 탭의 터치 영역 확보(CP-131·134).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/IA	핵심 메뉴 우선순위 결정(5개 이내)
디자이너/개발	탭 5개 제한·넘침 메뉴 분산 구현

기관 유형	CP-137 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 탭 바 사용 시)

모바일 하단 탭 바를 쓰는 사이트·앱이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭 메뉴가 5개 이내인가요?

□ 각 탭이 충분한 너비·터치 영역을 갖나요?

□ 5개를 넘는 메뉴는 ‘전체/더보기’ 등으로 분산됐나요?

❓ FAQ

Q1. 메뉴가 많은데 5개로 어떻게 줄이나요? 핵심 4개 + ‘전체(더보기)’ 탭 1개로 두고, 나머지는 ‘전체’ 탭에서 펼칩니다. Q2. 6개면 안 되나요? 6개부터 각 탭이 좁아져 오클릭이 늘고 핵심이 흐려집니다. 5개가 상한입니다. Q3. 왜 하필 5개인가요? 터치 영역 확보, 한눈에 파악, iOS·안드로이드 표준이 모두 5개 이하를 가리킵니다.

6. 마무리

CP-137의 메시지:

탭은 다섯까지 — 핵심만 추려 5개 이내로.

좁은 하단에 탭을 많이 넣으면 각 탭이 비좁아 오클릭이 나고 핵심이 흐려집니다. 5개 이내로 제한하면 충분한 터치 영역과 핵심 집중을 얻죠. 넘치는 메뉴는 ’전체/더보기’로 분산합니다. 내비게이션은 적정 규모일 때 가장 잘 작동합니다. 다음 편은 아이콘과 레이블을 함께 쓰는 규칙입니다.

다음 편 예고 ▶ 「258. (CP-138) [모바일] 모든 탭 버튼은 아이콘과 레이블을 함께 사용하고 있다.」

ViewCheck는 탭 바의 탭 개수가 5개 이내인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭 바(Tab bars) 가이드 — https://www.krds.go.kr/html/site/component/component_11.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준