지금 어느 탭인지 보여라

KRDS CP-135 — [모바일] 아이콘의 형태나 별도 인디케이터를 사용하여 선택된 메뉴의 상태를 명확하게 구분하고 있다.

0. 들어가며 — 똑같은 탭들 속 ‘지금 여기’

이번 255편은 아이콘 형태나 별도 인디케이터로 선택된 탭의 상태를 명확히 구분하라는 규칙입니다.

탭 바의 탭들이 모두 똑같이 보이면, 사용자는 ‘지금 내가 어느 탭(화면)에 있는지’ 알 수 없죠. ‘홈’ 탭을 보고 있는데 4개 탭이 다 같으면, 현재 위치가 어디인지 헷갈립니다. CP-135는 선택된(활성) 탭을 아이콘 변화나 인디 케이터로 구별해 현재 위치를 보여주라고 규정합니다. 사이드 메뉴 CP-091, 페이지네이션 CP-116과 같은 ‘현재 강조’ 원리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 선택 상태 명확 구분

CP-135 (컴포넌트 > 탭 바) [모바일] “아이콘의 형태나 별도 인디케이터를 사용하여 선택된 메뉴의 상태를 명확하게 구분하고 있다.”

탭 바에서 현재 선택된(활성) 탭을, 아이콘의 형태 변화(채움/윤곽 등)나 별도 인디케이터(밑줄·점·배경 등)로 다른 탭과 또렷이 구별되게 표현하라는 뜻입니다.

정리: 선택된 탭을 아이콘 변화·인디케이터로 명확히 구분하라. 이게 CP-135입니다.

2. 왜 선택 상태를 구분하나

탭 바는 사이트/앱의 주요 화면들로 가는 내비게이션이자, ‘지금 어느 화면에 있는지’를 표시하는 위치 지표입니다. 사용자가 ’홈’ 탭을 눌러 홈 화면에 있다면, 탭 바의 ‘홈’ 탭이 강조돼 ’아, 지금 홈에 있구나’를 알려줘야 하죠. 이 선택 상태 구분이 없으면, 탭 바는 ’갈 곳 목록’일 뿐 ’내 위치’는 안 알려줍니다(사이드 메뉴 CP-091, 페이지 네이션 CP-116에서 본 동일 논리).

선택 상태를 구분하는 방식은 두 갈래입니다:

① 아이콘의 형태 변화. 탭 바는 아이콘+레이블로 구성됩니다(CP-138). 선택된 탭의 아이콘 형태를 바꿔 구별하죠 — 가장 흔한 방식이 채움(filled) vs 윤곽(outline) 입니다. 비활성 탭은 윤곽선 아이콘(속이 빈 모양), 활성 탭은 채워진 아이콘(속이 찬 모양)으로요. 예를 들어 비활성 홈은 집 윤곽선, 활성 홈은 채워진 집 아이콘이죠. 형태 자체가 달라 색에 의존하지 않고도 구별됩니다.

② 별도 인디케이터. 아이콘 형태 외에, 선택된 탭에 추가 표시를 붙이는 방식입니다 — 탭 위/아래의 짧은 밑줄(또는 막대), 작은 점(dot), 배경 하이라이트(pill 모양), 색상 강조 등이죠. 이 인디케이터가 ’여기가 선택됨’을 시각적으로 짚어줍니다.

보통 이 둘을 함께 씁니다 — 활성 탭은 아이콘이 채워지고 + 색이 진해지고 + 레이블이 강조되는 식으로 여러 단서를 겹쳐, 명확하게 구별되게 하죠. 핵심은 색에만 의존하지 말 것입니다(KWCAG ‘색 무관 인식’). 선택을 색만으로 표시하면(활성 탭만 파란색) 색각 이상 사용자가 구별 못 하므로 — 아이콘 형태 변화(채움/윤곽)나 인디케이터(밑줄·점) 같은 형태 단서를 함께 써야 누구에게나 보입니다. 규칙이 ’아이콘의 형태나 별도 인디 케이터’를 명시한 것이 바로 이 비색 단서를 강조하는 것이죠.

또 이 시각적 구분은 스크린 리더에도 전달돼야 합니다 — 색·아이콘 변화는 비시각 사용자에게 안 보이니, 활성 탭에 aria-current 등으로 ‘현재 선택’을 알려야 하죠. 이는 탭 바 그룹 뒤쪽 CP-143(활성 메뉴 정보 스크린 리더 전달)에서 다룹니다. CP-135가 ’시각적 선택 구분’, CP-143이 ’보조기술 전달’로 짝을 이룹니다.

정리하면 — 탭 바는 현재 화면을 알리는 위치 지표이므로, 선택된 탭을 아이콘 형태·인디케이터로(색만이 아니라 형태로) 명확히 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

선택 구분 — 선택된 탭이 다른 탭과 또렷이 구별되는가.

비색 단서 — 아이콘 형태 변화(채움/윤곽)나 인디케이터(밑줄·점) 등 형태로 구분되는가(색만 아님).

명확성 — 한눈에 현재 탭을 알 수 있을 만큼 분명한가.

보조기술 전달 — 활성 탭이 스크린 리더에도 전달되는가(CP-143).

개선 방향

활성 탭: 채움 아이콘 + 인디케이터(밑줄/점/배경) + 색 강조를 겹쳐 적용.

색만 의존 금지. aria-current(CP-143)로 보조기술 전달.

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

역할	책임
디자이너	선택 상태 아이콘·인디케이터 스타일 정의
퍼블리셔/개발	활성 탭 형태 변화·인디케이터·aria-current 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택된 탭이 다른 탭과 또렷이 구별되나요?

□ 아이콘 형태(채움/윤곽)나 인디케이터(밑줄·점) 등 형태로 구분되나요(색만 아님)?

□ 한눈에 현재 탭을 알 수 있나요?

□ 활성 탭이 스크린 리더에도 전달되나요(CP-143)?

❓ FAQ

Q1. 활성 탭만 색을 바꾸면 안 되나요? 색만으론 색각 이상 사용자가 구별 못 합니다. 아이콘 형태·인디케이터를 함께 씁니다. Q2. 채움/윤곽이 흔한 방식인가요? 네. 활성은 채운 아이콘, 비활성은 윤곽 아이콘이 모바일에서 널리 쓰이는 직관적 방식입니다. Q3. 스크린 리더에도 알려야 하나요? 시각 구분만으론 부족합니다. aria-current(CP-143)로 활성 상태를 전달합니다.

6. 마무리

CP-135의 메시지:

지금 어느 탭인지 보여라 — 아이콘 형태·인디케이터로 선택 상태를 명확히 구분.

탭 바는 현재 화면을 알리는 위치 지표입니다. 선택된 탭을 아이콘 채움/윤곽이나 밑줄·점 인디케이터로 구별하면 사용자가 위치를 알죠. 색만이 아니라 형태 단서를 쓰고, aria-current로 보조기술에도 전달해야 합니다. 다음 편은 탭 색상의 일관성입니다.

다음 편 예고 ▶ 「256. (CP-136) [모바일] 모든 탭 버튼의 레이블 색상과 버튼 색은 일관성 있게 표현하고 있다.」

ViewCheck는 탭 바의 선택 상태가 아이콘·인디케이터로 명확히 구분되는지를 진단합니다.

📚 참고 출처

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

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

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