목록으로
KRDS 체크리스트 분석

극단을 피하라

지난 80편에서 ’24px 아이콘 선 두께 1.5~2px’라는 구체적 값을 봤습니다. 이번 81편은 그 배경 원칙 — 너무 굵거나 가는 선을 피하라 입니다.

VViewCheck Insight
·2026.07.22 3분 41
극단을 피하라
KRDS DS-081 — 아이콘의 두께를 너무 굵거나 가는 선으로 적용하지 않고 있다.

0. 들어가며 — 두께의 일반 원칙

지난 80편에서 ’24px 아이콘 선 두께 1.5~2px’라는 구체적 값을 봤습니다. 이번 81편은 그 배경 원칙 — 너무 굵거나 가는 선을 피하라 입니다.

80편이 ’구체적 값(1.5~2px)’이라면, 81편은 ’일반 원칙(극단 회피)’입니다. 80편이 구체값, 81편이 그 원칙을 명시하는 한 쌍이죠(레디어스 44편/45편처럼). 이번 편은 두께 절제의 원칙을 간단히 정리합니다.

1. 규칙 원문 — 극단 회피

DS-081 (디자인 스타일 > 아이콘) “아이콘의 두께를 너무 굵거나 가는 선으로 적용하지 않고 있다.”

아이콘 선 두께가 극단(너무 굵음/너무 가늠)으로 치우치지 않게 하라는 뜻입니다.

정리: 아이콘 선은 너무 굵지도 가늘지도 않게 — 극단을 피하라. 이게 DS-081입니다.

2. 왜 극단을 피하나

두께의 양 극단은 각각 문제를 일으킵니다.

너무 가는 선 — 흐릿하고, 저시력·저해상도에서 사라집니다(가독성 저하). 세련돼 보이려는 욕심으로 선을 지나치게 가늘게 하는 경우가 흔하죠.

너무 굵은 선 — 투박하고 답답하며, 작은 아이콘에서 디테일이 뭉개집니다. 강조하려고 선을 지나치게 굵게 하면 형태가 무거워집니다.

적정 두께(80편의 1.5~2px)는 이 두 극단 사이의 균형입니다. 81편은 그 균형을 ‘극단 회피’라는 원칙으로 명시하죠. 이는 색·크기·간격에서 본 ’적정 범위, 극단 회피’(과한 강조 금지, 과대 디스플레이 금지 등)의 일관된 원리가 아이콘 두께에 적용된 것입니다. 가독성과 미감은 극단이 아니라 적정선에서 만납니다.

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

흔한 위반 패턴

함정 ① 극단적으로 가는 선. 세련됨을 좇아 너무 가늘게 → 흐릿. → 적정 두께. 함정 ② 극단적으로 굵은 선. 강조를 좇아 너무 굵게 → 투박. → 적정 두께.

무엇을 점검하나

두께 적정 — 선이 극단으로 치우치지 않았는가.

가독성 — 가는 선이 흐릿하지 않은가.

미감 — 굵은 선이 투박하지 않은가.

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

역할책임
디자이너아이콘 두께를 적정선으로 제작
기관 유형DS-081 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체✅ 필수 (라인 아이콘 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 선이 너무 가늘지 않나요(흐릿)?

□ 아이콘 선이 너무 굵지 않나요(투박)?

□ 80편의 적정 두께(1.5~2px)를 따르나요?

❓ FAQ

Q1. 80편과 다른가요? 80편은 구체값(1.5~2px), 81편은 원칙(극단 회피)입니다. 함께 작동합니다 — 적정값을 지키면 극단도 피해집니다. Q2. 가는 선이 트렌디한데요? 가는 선은 저시력·저해상도에서 사라집니다. 공공서비스는 가독성이 우선이라 적정 두께를 지킵니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 적정 두께로 제작돼 있습니다.

6. 마무리

DS-081의 메시지:

아이콘 선은 극단을 피하라 — 너무 가늘면 흐릿하고, 너무 굵으면 투박하다.

가독성과 미감은 두께의 양 극단이 아니라 적정선(1.5~2px)에서 만납니다. ’적정 범위, 극단 회피’라는 디자인 시스템의 일관된 원리가 아이콘 두께에도 적용되는 것이죠.

다음 편은 두께의 일관성을 다룹니다. DS-082 — “같은 크기의 아이콘은 한 가지 두께만 사용한다.”

다음 편 예고 ▶ 「082. 같은 크기의 아이콘을 표현할 때 한 가지의 두께만 사용하고 있다.」

ViewCheck는 아이콘 두께가 극단으로 치우치지 않았는지를 진단합니다.

📚 참고 출처

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

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

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

#KRDS#공공웹#디자인시스템#아이콘#선두께#획두께#절제#극단회피

관련 글