알록달록하면 안 보인다

KRDS CP-308 — 태그의 표현에 지나치게 많은 색상을 사용하지 않고 있다.

0. 들어가며 — 무지개 태그의 함정

이번 428편은 태그 표현에 지나치게 많은 색상을 사용하지 않게 하라는 규칙입니다.

태그마다 다른 색을 입히면 — 화려해 보이지만, 색이 너무 많으면 화면이 알록달록 혼잡해지고 색의 의미가 흐려지죠. 또 색이 많으면 — 색상 대비·색맹 접근성도 챙기기 어렵습니다. CP-308은 태그 색상을 절제하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 태그 색상 과다 금지

CP-308 (컴포넌트 > 태그) “태그의 표현에 지나치게 많은 색상을 사용하지 않고 있다.”

태그에 너무 많은 색상을 사용하지 말고, 절제된 색상 체계로 표현하라는 뜻입니다.

정리: 태그에 지나치게 많은 색상을 쓰지 마라. 이게 CP-308입니다.

2. 왜 색상을 절제하나

태그는 — 색상으로 분류·상태를 구별하기도 합니다(’공지’는 빨강, ’신규’는 파랑 등). 색은 빠른 구별에 도움이 되지만 — 너무 많으면 오히려 해롭죠. CP-308은 색상 과다를 경계합니다.

색상이 너무 많을 때의 문제:

시각적 혼잡 — 태그마다 다른 색을 입히면 — 화면이 무지개처럼 알록달록해집니다. 정작 봐야 할 콘텐츠(제목· 본문)가 화려한 태그들에 묻히죠. 태그는 보조 정보인데, 색이 과하면 주객이 전도됩니다.

의미 희석 색이 너무 많으면 각 색의 ’의미’가 흐려집니다. 색이 2~3종이면 ’빨강=중요, 회색=일반’처럼 의미가 분명하지만, 색이 10종이면 어느 색이 무슨 뜻인지 기억·구별이 안 되죠. 색의 변별력이 사라집니다.

브랜드·디자인 일관성 훼손 공공 사이트는 절제된 디자인 시스템(KRDS 색상 토큰)을 따릅니다. 태그마다 제멋대로 색을 쓰면 전체 디자인 일관성이 깨지고 산만해지죠.

접근성 부담 — 색이 많으면 — 각 색이 배경과 명도 대비 3:1 이상(CP-311)인지, 색맹에게 구별되는지 챙길 게 많아집니다. 절제된 색은 접근성 관리도 쉽죠.

그래서 CP-308은 — 태그 색상을 절제하라고 합니다:

소수의 의미 있는 색 — 태그 색을 — 꼭 필요한 소수(예: 기본 회색 + 강조 1~2색)로 제한합니다. 정말 구별이 필요한 분류·상태에만 색을 쓰고, 나머지는 중립색(회색)으로요.

의미와 색 연결 — 색을 쓸 땐 — 일관된 의미로(빨강=긴급, 초록=완료 등). 같은 의미엔 같은 색, 다른 의미만 다른 색. 장식적 다채로움이 아니라 의미적 구별로요.

디자인 토큰 준수 — KRDS 색상 토큰 내에서 태그 색을 정해 — 전체 디자인과 조화롭게 합니다.

색만으로 의미 전달 안 됨(CP-311 연계). 색을 절제하더라도 — 색만으로 의미를 전달하면 안 됩니다(CP-311). 색맹 사용자를 위해 — 태그는 텍스트 레이블(304·305)로 의미를 전하고, 색은 보조여야 하죠. 즉 색 절제(308) + 색 무관 의미 전달(311)이 함께 갑니다.

이 규칙은 태그의 ’시각적 절제’를 담당합니다 — 개수 절제(306)에 더해 색상도 절제해(308), 태그가 화면을 어지럽히지 않고 의미가 또렷하게 하죠. 디자인 시스템의 색상 절제 정신(DS 색상 규칙)을 태그에 적용한 것입니다.

정리하면 — 태그 색이 너무 많으면 화면이 혼잡해지고 색의 의미가 희석되며 접근성 부담이 커지므로, 소수의 의미 있는 색으로 절제하고 나머지는 중립색을 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

색상 수 절제 — 태그에 쓰인 색이 소수(의미 있는 몇 종)로 제한됐는가.

의미 연결 — 색이 일관된 의미를 갖는가(같은 의미=같은 색).

토큰 준수 — KRDS 색상 토큰 내에서 절제된 색을 쓰는가.

개선 방향

태그 색을 기본 중립색 + 강조 1~2색으로 제한. 장식적 다채로움 배제.

색은 의미 구별에만, 같은 의미엔 같은 색. 색 외 텍스트로 의미 전달(CP-311).

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

역할	책임
디자이너	태그 색상 체계·토큰 정의
퍼블리셔/개발	절제된 색상 적용

기관 유형	CP-308 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (태그 사용 시)

태그를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 태그에 쓰인 색이 소수(의미 있는 몇 종)로 제한됐나요?

□ 색이 일관된 의미를 갖나요(같은 의미=같은 색)?

□ KRDS 색상 토큰 내에서 절제된 색을 쓰나요?

❓ FAQ

Q1. 태그를 화려하게 하면 눈에 띄지 않나요? 색이 너무 많으면 오히려 다 묻혀 안 보입니다. 소수 색으로 의미를 구별해야 또렷하죠. Q2. 색을 몇 종까지 쓰나요? 절대 숫자보다 ’의미 있는 소수’가 원칙입니다. 기본 중립색 + 강조 1~2색 정도로 절제하죠. Q3. 색으로 분류를 구별하면 안 되나요? 색 구별은 보조로 좋지만, 색만으로 의미를 전하면 색맹 사용자가 못 구별합니다. 텍스트로 의미를 전하고 색은 보조죠(CP-311).

6. 마무리

CP-308의 메시지:

알록달록하면 안 보인다 — 태그 색상을 소수의 의미 있는 색으로 절제하라.

색이 너무 많으면 화면이 혼잡해지고 색의 의미가 희석됩니다. 기본 중립색 + 강조 1~2색으로 절제하고, 색은 일관된 의미 구별에만 쓰죠. 다음 편은 대화형 태그의 초점 윤곽선입니다.

다음 편 예고 ▶ 「429. (CP-309) 대화형 태그가 초점을 가진 상태일 때, 인접 배경과 3:1 이상의 명도 대비를 갖는 윤곽선을 명확하게 표시하고 있다.」

ViewCheck는 태그 색상이 절제되어 사용되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

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

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