중요한 아이콘은 강조색, 일반은 중립색

KRDS DS-091 — 아이콘의 색상으로 아이콘 동작의 중요성을 반영하고 있다.

0. 들어가며 — 아이콘 색에도 역할이 있다

이번 91편은 아이콘의 색이 동작의 중요성을 반영하는 규칙입니다.

41편(본문 그레이+동작색)에서 글자 색에 역할을 부여했듯, 아이콘 색에도 역할이 있습니다 — 중요한 동작 아이콘은 강조색(Primary 등), 일반 아이콘은 중립색(Gray). 아이콘 색이 그 아이콘이 얼마나 중요한지를 말하는 것이죠. 이번 편은 아이콘 색의 역할을 풀어냅니다.

1. 규칙 원문 — 색으로 중요성 반영

DS-091 (디자인 스타일 > 아이콘) “아이콘의 색상으로 아이콘 동작의 중요성을 반영하고 있다.”

아이콘의 색으로 그 아이콘이 나타내는 동작의 중요도를 표현하라는 뜻입니다 — 중요할수록 강조색.

정리: 아이콘 색으로 동작의 중요성을 반영하라(중요=강조색, 일반=중립색). 이게 DS-091입니다.

2. 왜 색으로 중요성을 반영하나

화면에는 다양한 아이콘이 있습니다 — 핵심 행동 아이콘(제출·다운로드), 보조 아이콘(설정·정보), 일반 아이콘 (목록·구분). 이들이 모두 같은 색이면, 사용자는 어느 아이콘이 중요한지 알 수 없죠.

아이콘 색에 역할을 부여하면 — 중요한 동작은 강조색(Primary), 보조·일반은 중립색(Gray) — 사용자가 색만 보고도 ’이 아이콘이 핵심 행동’임을 직관적으로 압니다. 이는 색의 역할 구분(7편), 강조 절제(8편), 글자 색 역할(41편)이 아이콘에 적용된 것입니다. 차분한 중립 아이콘 사이에서 강조색 아이콘이 도드라져 핵심 행동을 안내하죠.

물론 강조도 절제해야 합니다(8편·12편). 모든 아이콘을 강조색으로 하면 강조의 의미가 사라지죠. 정말 중요한 동작 아이콘에만 강조색을 쓰고, 나머지는 중립색으로 두는 것이 핵심입니다. 그리고 색만으로 중요성을 표현하면 색약자가 놓칠 수 있으니, 중요한 아이콘은 크기·위치·텍스트도 함께 활용합니다(6편).

3. 점검 / 개선

무엇을 점검하나

색 역할 — 중요한 아이콘에 강조색, 일반에 중립색이 쓰였는가.

절제 — 강조색 아이콘이 남발되지 않았는가.

다중 단서 — 색 외에 크기·위치도 중요성을 보강하는가.

Before / After

/* ✅ 아이콘 색으로 중요성 */ .icon-primary-action { color: var(--primary-50); } /* 핵심 동작 */ .icon-default { color: var(--gray-60); } /* 일반 */

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

역할	책임
디자이너	아이콘 색으로 중요성 반영
기획/UX	어느 아이콘이 핵심 동작인지 정의

기관 유형	DS-091 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

아이콘이 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 중요한 동작 아이콘에 강조색이 쓰였나요?

□ 일반 아이콘은 중립색(Gray) 인가요?

□ 강조색 아이콘이 남발되지 않았나요?

❓ FAQ

Q1. 41편(글자 색)과 같은가요? 원리가 같습니다(색에 역할). 41편은 글자, 91편은 아이콘입니다. 중요=강조색, 일반=중립색. Q2. 모든 아이콘에 색을 쓰나요? 아닙니다. 일반 아이콘은 중립색, 중요한 동작 아이콘에만 강조색을 절제해 씁니다(8편). Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 동작 중요도에 따른 색 역할이 정의돼 있습니다.

6. 마무리

DS-091의 메시지:

아이콘 색에도 역할이 있다 — 중요한 동작은 강조색, 일반은 중립색.

아이콘 색으로 중요성을 표현하면 사용자가 색만 보고 핵심 동작을 압니다. 색의 역할 구분·강조 절제 원리가 아이콘에 적용된 것이죠. 단 색만 의존하지 말고 크기·위치도 함께 활용합니다.

다음 편은 아이콘과 레이블의 대비를 다룹니다. DS-092 — “아이콘과 연결된 레이블 텍스트를 동일한 색상 대비율로 적용한다.”

다음 편 예고 ▶ 「092. 아이콘과 연결된 레이블의 텍스트를 동일한 색상 대비율로 적용하고 있다.」

ViewCheck는 아이콘 색이 동작 중요성을 반영하는지, 강조가 절제됐는지를 진단합니다.

📚 참고 출처

KRDS 아이콘(Icon) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_05.html

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

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