칸은 똑같이 나눠라

KRDS CP-134 — [모바일] 탭 바 내의 모든 메뉴는 동일한 너비와 높이로 표현하고 있다.

0. 들어가며 — 탭 바 그룹의 첫 규칙

이번 254편부터 탭 바(Tab bars) 그룹(CP-134~143, 10개)으로 들어갑니다. 첫 규칙은 탭 바 내의 모든 메뉴를 동일한 너비와 높이로 표현하라는 내용이죠.

먼저 ‘탭 바’를 짚겠습니다. 탭 바는 모바일 화면 하단에 고정된 주요 내비게이션입니다 — 흔히 보는 ’홈 / 검색 / 알림 / 마이페이지’ 같은 아이콘+레이블 메뉴 줄이죠. 모바일 앱·웹의 핵심 탐색 수단입니다. 이 탭 바의 각 메뉴 칸이 제각각 크기면 어수선하고 누르기 불편하죠. CP-134는 모든 탭을 같은 너비·높이로 균등하게 나누라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 동일 너비·높이

CP-134 (컴포넌트 > 탭 바) [모바일] “탭 바 내의 모든 메뉴는 동일한 너비와 높이로 표현하고 있다.”

탭 바를 구성하는 각 탭(메뉴)을 같은 너비와 같은 높이로 균등하게 배치해, 시각적으로 정돈되고 터치하기 편하게 하라는 뜻입니다.

정리: 탭 바의 모든 탭은 동일한 너비·높이로 균등하게. 이게 CP-134입니다.

2. 왜 동일 너비·높이여야 하나

탭 바는 모바일 화면 하단을 가로로 채우는 균등 분할 내비게이션입니다. 이 ’균등함’이 깨지면 여러 문제가 생기죠.

① 시각적 정돈. 탭 바는 보통 4~5개 탭이 화면 너비를 똑같이 나눠 갖습니다. 각 탭이 같은 너비·높이면, 줄이 가지런히 정렬돼 깔끔하고 안정적으로 보이죠. 그런데 어떤 탭은 넓고 어떤 탭은 좁으면 — 칸이 들쭉날쭉해 어수선 하고, 사용자는 ‘왜 이 탭만 크지? 더 중요한 건가?’ 하는 불필요한 해석을 하게 됩니다. 균등 분할은 ’이 탭들은 동등한 주요 메뉴’라는 시각적 메시지도 전하죠.

② 터치 편의성·예측성. 탭이 같은 크기면, 각 탭의 터치 영역이 균일하고 충분합니다. 사용자는 화면 하단을 대략 5등분한 위치를 누르면 원하는 탭이 잡힌다는 걸 학습하죠 — 손가락이 가는 위치가 예측 가능합니다. 그런데 크기가 제각각이면, 좁은 탭은 터치 영역이 작아 잘못 누르기 쉽고(피츠의 법칙), 어느 위치가 어느 탭인지 매번 확인해야 합니다.

③ 레이블 길이와의 분리. 탭마다 레이블 글자 수가 다릅니다(“홈”은 1글자, “마이페이지”는 5글자). 만약 탭 너비를 레이블 길이에 맞춰 가변으로 두면 — 긴 레이블 탭이 넓어지고 짧은 탭이 좁아져 들쭉날쭉하죠. 그래서 탭 너비는 레이블 길이와 무관하게 균등 분할합니다. 글자가 짧든 길든 칸은 같고, 레이블은 그 칸 안에서 짧고 간결하게(CP-139, 잘리지 않게) 표현되죠.

높이도 동일. 너비뿐 아니라 높이도 같아야 합니다 — 모든 탭이 같은 높이로 한 줄에 가지런히 맞춰지죠. 아이콘 +레이블(CP-138)이 각 탭에 들어가므로, 그 구성을 담는 높이가 일정해야 탭 바가 한 덩어리로 정돈됩니다.

이 균등 배치는 탭 바의 기본 골격입니다. 그 위에 다른 규칙들이 쌓이죠 — 선택 상태 구분(CP-135), 색 일관성 (CP-136), 개수 제한(CP-137, 5개 이내), 아이콘+레이블(CP-138) 등. 모든 탭이 균등해야 이 요소들이 일관되게 적용되고, 탭 바가 ’동등한 주요 메뉴들의 정돈된 줄’로 작동합니다. 구현은 보통 CSS flexbox(flex: 1로 균등 분할)나 grid(grid-template-columns: repeat(N, 1fr))로 간단히 처리하죠.

3. 점검 / 개선

무엇을 점검하나

동일 너비 — 모든 탭이 같은 너비로 균등 분할됐는가.

동일 높이 — 모든 탭이 같은 높이로 정렬됐는가.

레이블 비의존 — 레이블 길이가 달라도 탭 너비가 일정한가.

개선 방향

flexbox flex: 1 또는 grid 1fr 균등 분할로 탭 너비 통일.

탭 높이를 고정해 한 줄 정렬. 레이블은 칸 안에서 짧게(CP-139).

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

역할	책임
디자이너	탭 바 균등 분할 레이아웃 정의
퍼블리셔/개발	flex/grid 균등 너비·고정 높이 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 탭이 같은 너비로 균등 분할됐나요?

□ 모든 탭이 같은 높이로 정렬됐나요?

□ 레이블 길이가 달라도 탭 너비가 일정한가요?

❓ FAQ

Q1. 탭 바가 정확히 뭔가요? 모바일 화면 하단에 고정된 주요 내비게이션 줄입니다(홈/검색/알림/마이페이지 등). 상단 콘텐츠 탭과는 다릅니다. Q2. 레이블이 긴 탭은 넓게 하면 안 되나요? 그러면 들쭉날쭉해집니다. 칸은 균등하게 두고 레이블을 짧게 (CP-139) 합니다. Q3. 왜 균등이 중요한가요? 정돈된 시각, 균일한 터치 영역, 예측 가능한 위치를 줍니다. 동등한 주요 메뉴 라는 메시지도 전하죠.

6. 마무리

CP-134의 메시지:

칸은 똑같이 나눠라 — 탭 바의 모든 탭을 동일한 너비·높이로.

탭 바는 화면 하단을 균등 분할하는 내비게이션입니다. 모든 탭이 같은 크기여야 정돈되고, 터치 영역이 균일하며, 위치가 예측 가능하죠. 레이블 길이와 무관하게 칸을 균등하게 두는 것이 핵심입니다. 다음 편은 선택된 탭의 상태 구분입니다.

다음 편 예고 ▶ 「255. (CP-135) [모바일] 아이콘의 형태나 별도 인디케이터를 사용하여 선택된 메뉴의 상태를 명확하게 구분하고 있다.」

ViewCheck는 탭 바의 모든 탭이 동일한 너비·높이로 표현되는지를 진단합니다.

📚 참고 출처

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

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

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