선 아이콘과 면 아이콘을 섞지 마라

KRDS DS-094 — 아이콘의 타입(Line type, Fill type)을 혼용하지 않고 구분하여 사용하고 있다.

0. 들어가며 — 아이콘의 두 타입

아이콘에는 크게 두 타입이 있습니다 — Line type(선으로 그린 아이콘) 과 Fill type(면으로 채운 아이콘). 이번 94편은 이 두 타입을 혼용하지 말고 구분해 쓰라는 규칙입니다.

같은 화면에서 선 아이콘과 면 아이콘이 뒤섞이면 통일성이 깨집니다. DS-094는 한 맥락에서는 하나의 타입으로 통일하거나, 타입을 의미 있게 구분해(예: 비활성=선, 활성=면) 쓰라고 규정하죠. 이번 편은 아이콘 타입 구분을 풀어냅니다.

1. 규칙 원문 — 혼용 금지·구분

DS-094 (디자인 스타일 > 아이콘) “아이콘의 타입(Line type, Fill type)을 혼용하지 않고 구분하여 사용하고 있다.”

선(Line)·면(Fill) 타입을 무분별하게 섞지 말고, 일관되게 또는 의미 있게 구분해 쓰라는 뜻입니다.

정리: 선 아이콘과 면 아이콘을 혼용하지 말고 구분해 쓰라. 이게 DS-094입니다.

2. 왜 혼용하면 안 되나

선 아이콘(Line)과 면 아이콘(Fill)은 시각적 무게감이 다릅니다. 선 아이콘은 가볍고 섬세하며, 면 아이콘은 묵직하고 또렷하죠. 이 둘을 한 화면에서 무분별하게 섞으면, 아이콘들이 서로 다른 스타일로 보여 통일성이 깨집니다. 한 메뉴 바에서 어떤 아이콘은 선, 어떤 건 면이면 어긋나 보이죠.

해법은 두 가지입니다. 첫째, 하나의 타입으로 통일 — 한 맥락(메뉴 바 등)에서는 모두 선이나 모두 면으로. 둘째, 의미 있게 구분 — 타입 차이로 상태나 의미를 표현. 대표적으로 비활성/기본 상태는 선(Line), 활성/선택 상태는 면(Fill) 으로 구분하는 패턴이 있습니다. 예를 들어 탭바에서 선택 안 된 탭은 선 아이콘, 선택된 탭은 면 아이콘으로요. 이러면 타입 차이가 ’상태’라는 의미를 전달합니다(26편 상태 표현과 연결).

핵심은 ‘무분별한 혼용’을 피하는 것입니다. 타입을 섞더라도 그것이 일관된 규칙(상태 표현 등)에 따라야지, 아무 의미 없이 제각각이면 안 됩니다. 이는 밑줄을 링크 전용으로(42편), 색을 의미에 통일한 것(13편)과 같은 ’시각 신호의 일관성’ 원리입니다.

3. 점검 / 개선

무엇을 점검하나

혼용 여부 — 선·면 아이콘이 무분별하게 섞이지 않았는가.

구분 일관성 — 타입 차이가 의미(상태 등)를 일관되게 표현하는가.

예시

✅ 통일: 메뉴 바 전체 = Line type ✅ 의미 구분: 탭 비선택=Line, 선택=Fill (상태 표현) ❌ 혼용: 한 맥락에서 선·면이 무의미하게 섞임

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

역할	책임
디자이너	아이콘 타입을 통일 또는 의미 구분

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

아이콘을 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 맥락에서 선·면 아이콘이 무분별하게 섞이지 않나요?

□ 타입을 섞는다면 의미(상태 등)에 따라 구분하나요?

□ 아이콘 타입이 일관된가요?

❓ FAQ

Q1. 선·면을 절대 섞으면 안 되나요? 무분별한 혼용이 안 됩니다. 의미 있게 구분(비활성=선, 활성=면)하면 괜찮습니다. 규칙 없는 혼용을 피하라는 것입니다. Q2. 비활성=선, 활성=면이 표준인가요? 흔한 패턴입니다. 타입 차이로 상태를 표현하는 것이죠. 통일하거나 이렇게 의미 있게 구분합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 타입이 의미 있게 구분돼 있습니다.

6. 마무리

DS-094의 메시지:

선 아이콘과 면 아이콘을 무분별하게 섞지 마라 — 통일하거나 의미 있게 구분하라.

선·면 타입은 무게감이 달라 무분별하게 섞으면 통일성이 깨집니다. 하나로 통일하거나, 상태 표현처럼 의미 있게 구분해야 하죠. 시각 신호의 일관성 원리입니다.

다음 편은 아이콘과 텍스트 정렬을 다룹니다. DS-095 — “아이콘을 텍스트와 함께 사용할 경우 텍스트와 중앙 정렬한다.”

다음 편 예고 ▶ 「095. 아이콘을 텍스트와 함께 사용할 경우 텍스트와 중앙 정렬되게 적용하고 있다.」

ViewCheck는 선·면 아이콘 타입이 무분별하게 혼용되지 않았는지를 진단합니다.

📚 참고 출처

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

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

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