다 강조하면 아무것도 안 보인다

KRDS BP-039 — 강조를 위한 아이콘, 배지, 태그 등의 컴포넌트를 과도하게 사용하고 있지 않다.

0. 들어가며 — 목록이 아이콘·배지로 가득하면

이번 605편은 강조를 위한 아이콘, 배지, 태그 등의 컴포넌트를 과도하게 사용하지 않게 하라는 규칙입니다.

목록 항목마다 — ‘NEW’ 배지, 분류 태그, 각종 아이콘을 잔뜩 붙이면, 정작 봐야 할 내용이 묻히고 산만하죠. BP-039는 강조 컴포넌트의 절제를 규정합니다. 태그·배지 개수 절제(CP-306)의 목록 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 강조 컴포넌트 과도 사용 금지

BP-039 (기본 패턴 > 목록 탐색) “강조를 위한 아이콘, 배지, 태그 등의 컴포넌트를 과도하게 사용하고 있지 않다.”

목록에서 강조용 아이콘·배지·태그를 과도하게 쓰지 말라는 뜻입니다.

정리: 목록에 아이콘·배지·태그를 과도하게 쓰지 마라. 이게 BP-039입니다.

2. 왜 강조 컴포넌트 절제인가

목록 항목에는 — 강조·분류를 위한 작은 컴포넌트를 붙이곤 합니다: ‘NEW’·‘중요’ 배지, 분류 태그, 첨부·잠금 아이콘 등. 이들은 — 적절히 쓰면 정보 전달에 도움이 되지만, 과도하게 쓰면 오히려 해롭죠. BP-039는 절제를 요구합니다.

강조 컴포넌트를 과도하게 쓸 때의 문제:

강조 효과 소멸 목록 항목마다 배지·태그·아이콘을 잔뜩 붙이면, 어느 것도 눈에 안 들어옵니다. ‘모두 강조 하면 아무것도 강조되지 않는다’는 원리죠(태그 개수 절제 CP-306, 배지 절제 CP-186 정신). 정말 중요한 ’NEW’·‘마감’ 배지가 다른 장식들에 묻혀 안 보입니다.

내용 가림 강조 컴포넌트가 많으면 정작 봐야 할 항목 내용(제목·요약)이 아이콘·배지에 밀리거나 가려집니다. 보조 정보(배지)가 주 정보(내용)를 압도하는 주객전도죠.

시각적 혼잡 — 목록이 — 알록달록한 배지·태그·아이콘으로 가득하면, 산만하고 복잡해 스캔이 어렵습니다.

인지 부하 — 강조가 많으면 — 사용자가 어느 게 중요한지 판단하느라 인지 부담이 커지죠.

그래서 BP-039는 — 강조 컴포넌트를 절제하라고 합니다:

핵심만 강조 — 정말 중요한·필요한 강조(예: ‘NEW’, ‘마감 임박’, 핵심 분류 1개)만 씁니다. 모든 부가 정보를 — 배지·태그·아이콘으로 만들지 않죠. 우선순위를 정해 핵심만요.

항목당 절제 — 한 항목에 — 배지·태그·아이콘을 1~2개 정도로 절제합니다(태그 개수 절제 CP-306). 너무 많으면 덜 중요한 건 텍스트로 표현하거나 생략하죠.

색상 절제 — 강조 컴포넌트의 색도 — 절제합니다(태그 색상 절제 CP-308). 알록달록하면 더 혼잡하죠.

왜 절제가 중요한가. 강조의 목적은 정말 중요한 것을 돋보이게 하는 것입니다. 과하면 그 목적이 깨지죠. 적은 강조가 오히려 더 효과적입니다(less is more). 목록은 내용을 빠르게 스캔하는 곳이라, 강조가 절제돼야 내용이 살죠.

개수·색상 절제 규칙의 종합. 태그 개수·배치 절제(CP-306), 태그 색상 절제(CP-308), 배지 절제(CP-186) — 이 컴포넌트별 절제 규칙들을, 목록이라는 맥락에서 종합한 게 BP-039입니다. 목록에서 — 강조 컴포넌트 전반을 절제하라는 거죠.

이 규칙은 목록 탐색의 ’강조 절제’를 담당합니다 — 강조 컴포넌트를 과도하게 안 써(039), 정말 중요한 강조가 돋보이고 내용이 묻히지 않게 하죠. 깔끔하고 스캔 가능한 목록을 만듭니다.

정리하면 — 목록에 아이콘·배지·태그를 과도하게 쓰면 강조 효과가 사라지고 내용이 묻히며 산만해지므로, 핵심 강조만 절제해서 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

개수 절제 — 항목당 강조 컴포넌트(배지·태그·아이콘)가 과도하지 않은가(1~2개).

핵심만 — 정말 중요한 강조만 쓰는가(모든 부가 정보 강조 아님).

내용 우선 — 강조가 항목 내용(제목·요약)을 가리거나 압도하지 않는가.

개선 방향

항목당 강조 컴포넌트 1~2개로 절제. 핵심(‘NEW’·‘마감’·주 분류)만.

덜 중요한 건 텍스트·생략. 색상도 절제(CP-308). 내용 우선.

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

역할	책임
기획/UX	강조 우선순위·절제 정책
디자이너	강조 컴포넌트 절제 디자인

기관 유형	BP-039 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (목록 사용 시)

목록을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 항목당 강조 컴포넌트(배지·태그·아이콘)가 과도하지 않나요(1~2개)?

□ 정말 중요한 강조만 쓰나요(모든 부가 정보 강조 아님)?

□ 강조가 항목 내용(제목·요약)을 가리거나 압도하지 않나요?

❓ FAQ

Q1. 배지·태그가 많으면 정보가 풍부하지 않나요? 너무 많으면 다 묻혀 안 보입니다. ’모두 강조하면 아무것도 강조 안 된다’죠. 핵심만 절제해야 돋보입니다. Q2. 몇 개까지 쓰나요? 항목당 1~2개로 절제합니다. 덜 중요한 건 텍스트로 표현하거나 생략하죠. Q3. 태그·배지 규칙(CP-306 등)과 같나요? 컴포넌트별 절제 규칙을 목록 맥락에서 종합한 게 BP-039입니다. 목록의 강조 전반을 절제하죠.

6. 마무리

BP-039의 메시지:

다 강조하면 아무것도 안 보인다 — 강조용 아이콘·배지·태그를 과도하게 쓰지 마라.

강조 컴포넌트가 과하면 강조 효과가 사라지고 내용이 묻힙니다. 핵심 강조만 절제해서 써 정말 중요한 게 돋보이고 내용이 살게 하는 게 핵심이죠. 다음 편은 긴 목록 분할입니다.

다음 편 예고 ▶ 「606. (BP-040) 긴 목록은 적절하게 단위를 나누어 구분하고, 한 번에 지나치게 많은 정보를 제공 하고 있지 않다.」

ViewCheck는 강조 컴포넌트가 과도하게 사용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 목록 탐색 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_04.html

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

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