아이콘은 SVG로

KRDS DS-075 — 시스템 아이콘은 SVG 파일 형식을 사용하고 있다.

0. 들어가며 — 디자인 스타일의 다섯 번째 분류, ‘아이콘’

색상(26)·타이포(16)·형태(8)·레이아웃(24)을 마치고, 이번엔 다섯 번째 분류 — 아이콘(22개 규칙) 입니다. 화면 곳곳의 작은 그림 기호인 아이콘을 어떻게 만들고 쓰는지를 다룹니다.

그 첫 주제는 아이콘의 파일 형식 — SVG입니다. 아이콘을 PNG·JPG 같은 이미지로 만들 수도 있지만, KRDS는 SVG(벡터) 형식을 쓰라고 규정합니다. 왜 SVG일까요? 핵심은 선명함과 유연함입니다. 이번 편은 SVG 형식의 이점을 풀어냅니다.

1. 규칙 원문 — SVG 형식

DS-075 (디자인 스타일 > 아이콘) “시스템 아이콘은 SVG 파일 형식을 사용하고 있다.”

“시스템 아이콘”

화면의 기능·상태를 나타내는 표준 아이콘(메뉴·검색·닫기·상태 등)입니다.

“SVG 파일 형식”

벡터(vector) 기반 이미지 형식입니다. 픽셀이 아니라 ’수학적 도형’으로 그림을 그리죠.

정리: 시스템 아이콘은 SVG(벡터) 형식으로 사용하라. 이게 DS-075입니다.

2. 왜 SVG인가 — 벡터의 이점

SVG가 아이콘에 적합한 이유는 벡터 형식의 특성 때문입니다.

어떤 크기에서도 선명하다

PNG·JPG 같은 비트맵(픽셀) 이미지는 정해진 해상도가 있어, 키우면 픽셀이 깨져 흐릿해집니다. 반면 SVG는 도형을 수학적으로 그리므로, 아무리 키워도 선명합니다. 16px 아이콘을 40px로 키워도 깨지지 않죠. 다양한 크기로 쓰이는 아이콘(DS-076의 16~40px)에 벡터가 필수인 이유입니다. 또 고해상도 화면(레티나 등)에서도 또렷하게 표시됩니다.

색·크기를 코드로 바꿀 수 있다

SVG는 코드(CSS)로 색과 크기를 자유롭게 바꿀 수 있습니다. 같은 아이콘을 상황에 따라 다른 색(상태 색 등) 으로, 다른 크기로 쓸 수 있죠. PNG는 색을 바꾸려면 새 이미지 파일이 필요하지만, SVG는 코드 한 줄로 바뀝 니다. 이는 아이콘 색 대비(DS-089·090), 크기(DS-076) 규칙을 유연하게 지킬 수 있게 합니다.

용량이 작고 접근성에 유리하다

단순한 아이콘은 SVG가 PNG보다 파일이 작아 성능에 유리합니다. 또 SVG는 텍스트 기반이라 대체 텍스트(접근성) 를 넣기도 좋습니다. 선명함·유연함·성능·접근성을 모두 갖춘 형식이 SVG인 것이죠. 그래서 현대 웹의 아이콘 표준이 됐습니다.

3. 흔한 위반 / 점검 / 개선

흔한 위반 패턴

함정 ① PNG/JPG 아이콘. 비트맵 아이콘 → 키우면 흐릿, 고해상도에서 깨짐. → SVG로. 함정 ② 아이콘 폰트 남용. 아이콘 폰트는 접근성·유연성에 제약. → SVG 권장. 함정 ③ 색 변경 불가. PNG라 상태별 색 변경 어려움. → SVG로 코드 제어.

무엇을 점검하나

SVG 사용 — 시스템 아이콘이 SVG 형식인가.

선명도 — 다양한 크기·고해상도에서 또렷한가.

유연성 — 색·크기를 코드로 제어할 수 있는가.

Before / After

<!-- ❌ Before: PNG 아이콘 (키우면 흐릿) --> <img src="search.png" width="24"> <!-- ✅ After: SVG (선명·색 제어 가능) --> <svg width="24" height="24" aria-hidden="true"><!-- 벡터 경로 --></svg>

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

역할	책임
디자이너	아이콘을 SVG로 제작
퍼블리셔/개발	SVG 아이콘 적용, 색·크기 코드 제어

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 시스템 아이콘이 SVG 형식인가요?

□ 아이콘을 키워도 선명한가요?

□ 고해상도 화면에서 또렷한가요?

□ 아이콘 색을 코드로 바꿀 수 있나요?

❓ FAQ

Q1. PNG 아이콘은 왜 안 되나요? PNG는 픽셀 이미지라 키우면 깨지고, 고해상도에서 흐릿하며, 색 변경이 어렵습니다. SVG는 벡터라 어떤 크기·해상도에서도 선명하고 색을 코드로 제어합니다. Q2. 아이콘 폰트는요? 아이콘 폰트도 벡터지만 접근성·유연성에 제약이 있습니다. SVG가 더 권장됩니다. Q3. 사진 같은 복잡한 이미지도 SVG인가요? 아닙니다. 단순한 시스템 아이콘은 SVG, 사진은 비트맵(JPG 등) 입니다. DS-075는 시스템 아이콘에 적용됩니다. Q4. KRDS를 채택하면 자동인가요? KRDS 아이콘은 SVG로 제공됩니다. 채택하면 DS-075가 충족됩니다.

6. 마무리

DS-075의 메시지:

아이콘은 SVG로 — 어떤 크기·해상도에서도 선명하고, 색·크기를 코드로 유연하게.

벡터 형식인 SVG는 키워도 깨지지 않고, 고해상도에서 또렷하며, 색·크기를 코드로 제어하고, 용량도 작고 접근성에도 유리합니다. 다양한 크기·색으로 쓰이는 아이콘에 최적인 형식이죠.

다음 편은 아이콘의 크기를 다룹니다. DS-076 — “시스템 아이콘은 24px을 기준으로, 16/20/24/32/40px를 사용한다.”

다음 편 예고 ▶ 「076. 시스템 아이콘은 24px을 기준 사이즈로 정의하며, 주요 크기로 16px, 20px, 24px, 32px, 40px를 사용하고 있다.」

ViewCheck는 시스템 아이콘이 SVG 형식인지, 다양한 크기에서 선명한지를 진단합니다.

📚 참고 출처

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

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

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