같은 상태면 같은 색

KRDS CP-136 — [모바일] 모든 탭 버튼의 레이블 색상과 버튼 색은 일관성 있게 표현하고 있다.

0. 들어가며 — 탭마다 색이 제멋대로면

이번 256편은 모든 탭 버튼의 레이블 색상과 버튼 색을 일관성 있게 표현하라는 규칙입니다.

탭 바의 탭들이 — 어떤 건 파란 글씨, 어떤 건 검은 글씨, 어떤 건 회색 배경처럼 색이 제각각이면, 사용자는 ‘왜 이 탭만 다르지? 무슨 의미가 있나?’ 하고 혼란스럽죠. 색은 강력한 시각 신호라, 같은 상태의 탭은 같은 색이어야 합니다. CP-136은 탭 레이블·버튼 색을 일관되게 통일하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 레이블·버튼 색 일관성

CP-136 (컴포넌트 > 탭 바) [모바일] “모든 탭 버튼의 레이블 색상과 버튼 색은 일관성 있게 표현하고 있다.”

탭 바를 구성하는 모든 탭의 레이블(글자) 색과 버튼(배경/아이콘) 색을, 같은 상태(활성/비활성)끼리는 동일하게 맞춰 일관되게 표현하라는 뜻입니다.

정리: 같은 상태의 탭은 레이블·버튼 색을 동일하게 통일하라. 이게 CP-136입니다.

2. 왜 색이 일관돼야 하나

색은 사용자가 무의식적으로 의미를 부여하는 강력한 시각 신호입니다. UI에서 색이 다르면 사용자는 ’다른 이유가 있다’고 해석하죠 — 활성/비활성, 강조/일반, 경고/정상 등. 그래서 색은 일관된 규칙에 따라 써야 하고, 같은 상태 인데 색이 다르면 사용자를 혼란시킵니다.

탭 바에서 일관성이 깨지는 경우를 보면:

① 같은 상태인데 색이 제각각. 비활성 탭 4개가 있는데, 하나는 검은 글씨, 하나는 회색 글씨, 하나는 파란 글씨면 — 사용자는 ‘왜 이 탭만 파랗지? 선택된 건가? 특별한 메뉴인가?’ 하고 헷갈립니다. 모두 같은 ’비활성 일반 탭’인데 색이 달라 잘못된 의미를 읽죠. 같은 상태의 탭은 레이블 색·아이콘 색·배경 색이 모두 동일해야 합니다.

② 상태별 색 규칙의 일관성. 탭 바에는 보통 두 상태가 있습니다 — 활성(선택됨) 과 비활성. 각 상태에 일정한 색을 정하고(예: 활성은 브랜드 색, 비활성은 회색), 모든 탭이 그 규칙을 따라야 하죠. ‘활성 탭은 항상 이 색, 비활성 탭은 항상 저 색’ 이라는 규칙이 일관되면, 사용자는 색만 보고도 어느 탭이 선택됐는지 압니다 (CP-135의 선택 구분과 연결). 그런데 탭마다 활성 색이 다르거나 비활성 색이 들쭉날쭉하면 이 규칙이 무너져, 색이 더는 신뢰할 신호가 못 되죠.

③ 디자인 토큰·시스템 일관성. 색 일관성은 디자인 시스템 차원의 문제이기도 합니다. 탭 색을 디자인 토큰 (정해진 색 변수)으로 관리하면, 모든 탭이 자동으로 같은 색 규칙을 따르죠. 탭마다 색을 임의로 지정하면 일관성이 깨지기 쉽습니다.

이 일관성은 단지 ’예뻐 보이려고’가 아니라 사용성의 문제입니다 — 색이 일관되면 사용자가 색을 신뢰하고 빠르게 상태를 읽지만, 제각각이면 색이 노이즈가 되어 매번 해석해야 하죠. 탭 바는 자주 쓰는 핵심 내비게이션이라 이 일관성이 특히 중요합니다.

물론 색을 일관되게 쓰되 명도 대비 기준도 지켜야 합니다 — 레이블 색과 배경 색이 텍스트 대비 4.5:1을 충족해(KWCAG) 저시력·밝은 환경에서도 읽혀야 하죠. 그리고 CP-135에서 강조했듯, 선택 상태를 색’만’으로 표시 하지 말고 형태 단서(아이콘 채움·인디케이터)도 함께 써야 색각 이상 사용자를 배려합니다. CP-136(색 일관성)과 CP-135(형태 구분)는 함께 — 일관된 색 + 형태 단서로 탭 상태를 명확히 전합니다.

정리하면 — 같은 상태의 탭은 같은 색으로, 상태별 색 규칙을 일관되게 적용해, 색이 신뢰할 수 있는 신호가 되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

같은 상태 = 같은 색 — 비활성 탭끼리, 활성 탭끼리 레이블·버튼 색이 동일한가.

상태별 규칙 — 활성/비활성 색 규칙이 모든 탭에 일관되게 적용되는가.

대비 충족 — 레이블/배경 색이 명도 대비 기준(4.5:1)을 충족하는가.

개선 방향

탭 색을 디자인 토큰(활성/비활성 색 변수)으로 관리해 자동 일관성.

임의 색 지정 제거. 대비 검증 + 형태 단서 병행(CP-135).

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

역할	책임
디자이너	탭 상태별 색 규칙(토큰) 정의
퍼블리셔/개발	색 토큰 일관 적용·대비 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 비활성 탭끼리, 활성 탭끼리 색이 동일한가요?

□ 활성/비활성 색 규칙이 모든 탭에 일관되게 적용되나요?

□ 레이블/배경 색이 명도 대비 기준(4.5:1)을 충족하나요?

❓ FAQ

Q1. 탭마다 색을 달리하면 개성이 생기지 않나요? 색이 다르면 사용자가 ’다른 의미’로 읽어 혼란스럽습니다. 같은 상태는 같은 색이 사용성에 유리합니다. Q2. 활성 탭만 색을 강조하면 되나요? 활성/비활성 색 규칙을 정해 일관 적용하되, 선택은 색만이 아니라 형태 단서(CP-135)도 함께 씁니다. Q3. 색을 어떻게 일관 관리하나요? 디자인 토큰(색 변수)으로 관리하면 모든 탭이 자동으로 같은 규칙을 따릅 니다.

6. 마무리

CP-136의 메시지:

같은 상태면 같은 색 — 탭 레이블·버튼 색을 일관되게 통일하라.

색은 사용자가 의미를 부여하는 강력한 신호입니다. 같은 상태의 탭이 다른 색이면 잘못된 의미를 읽어 혼란스럽죠. 활성/비활성 색 규칙을 정해 모든 탭에 일관 적용하고, 대비도 충족하며, 형태 단서(CP-135)와 함께 써야 합니다. 다음 편은 탭 개수 제한 — 5개 이내입니다.

다음 편 예고 ▶ 「257. (CP-137) [모바일] 탭 메뉴의 개수를 5개 이내로 사용하고 있다.」

ViewCheck는 탭 바의 레이블·버튼 색이 일관되게 표현되는지를 진단합니다.

📚 참고 출처

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

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

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