아이콘 선은 1.5~2px

KRDS DS-080 — 24px 아이콘을 기준으로 두께를 1.5px~2px로 설정하고 있다.

0. 들어가며 — 아이콘 선의 굵기

이번 80편은 아이콘 선(획)의 두께입니다 — 24px 아이콘 기준 1.5~2px.

라인(line) 아이콘은 선으로 그려집니다. 그 선이 너무 가늘면 안 보이고, 너무 굵으면 투박합니다. KRDS는 24px 아이콘 기준으로 선 두께를 1.5~2px로 정합니다. 이번 편은 아이콘 선 두께 표준을 풀어냅니다.

1. 규칙 원문 — 1.5~2px

DS-080 (디자인 스타일 > 아이콘) “24px 아이콘을 기준으로 두께를 1.5px~2px로 설정하고 있다.”

24px 크기 아이콘의 선 두께를 1.5px에서 2px 사이로 하라는 뜻입니다.

정리: 24px 아이콘 선 두께는 1.5~2px. 이게 DS-080입니다.

2. 왜 1.5~2px인가

24px 아이콘에서 1.5~2px은 적정한 선 두께입니다.

너무 가는 선(1px 미만)은 작은 아이콘에서 흐릿하게 보이고, 특히 저시력 사용자나 저해상도 화면에서 사라지기 쉽습니다(가독성 문제). 반대로 너무 굵은 선(3px+)은 24px 아이콘에서 투박하고 답답해 보이며, 디테일이 뭉개집니다. 1.5~2px은 선이 또렷하게 보이면서도 깔끔한 균형점이죠.

이 두께는 아이콘 크기에 비례합니다. 24px이 기준이고, 크기가 커지면(40px) 두께도 비례해 굵어지고, 작아 지면(16px) 가늘어집니다. 그래야 모든 크기의 아이콘이 같은 시각적 무게감을 갖죠. ’24px 기준’이라는 표현은 이 비례의 기준점을 정한 것입니다. 적정 두께는 아이콘의 가독성과 미감을 동시에 확보합니다.

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

흔한 위반 패턴

함정 ① 너무 가는 선. 1px 미만 → 흐릿, 저시력·저해상도에서 사라짐. → 1.5px 이상. 함정 ② 너무 굵은 선. 3px+ → 투박, 디테일 뭉개짐. → 2px 이하.

무엇을 점검하나

선 두께 — 24px 아이콘 선이 1.5~2px인가.

크기 비례 — 다른 크기 아이콘도 비례한 두께인가.

Before / After

✅ 24px 아이콘 선 두께 1.5~2px (stroke-width) 16px 아이콘 → 약 1~1.5px (비례) 40px 아이콘 → 약 2.5~3px (비례)

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

역할	책임
디자이너	아이콘 선 두께를 1.5~2px(24px 기준)로 제작

기관 유형	DS-080 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라인 아이콘 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 24px 아이콘 선 두께가 1.5~2px인가요?

□ 선이 너무 가늘어 흐릿하지 않나요?

□ 선이 너무 굵어 투박하지 않나요?

❓ FAQ

Q1. 다른 크기 아이콘은요? 24px 기준 1.5~2px이고, 크기에 비례해 조정됩니다(16px은 더 가늘게, 40px은 더 굵게). 시각적 무게감을 일정하게 유지하기 위해서입니다. Q2. 너무 가는 선이 세련돼 보이는데요? 가는 선은 저시력·저해상도에서 사라집니다. 가독성을 위해 1.5px 이상을 지켜야 합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 적정 선 두께로 제작돼 있습니다.

6. 마무리

DS-080의 메시지:

24px 아이콘 선은 1.5~2px — 또렷하면서도 깔끔한 균형.

너무 가는 선은 흐릿하고 너무 굵은 선은 투박합니다. 1.5~2px은 선이 또렷이 보이면서도 깔끔한 적정 두께이고, 크기에 비례해 조정됩니다.

다음 편은 두께의 절제를 다룹니다. DS-081 — “아이콘 두께를 너무 굵거나 가는 선으로 적용하지 않는다.”

다음 편 예고 ▶ 「081. 아이콘의 두께를 너무 굵거나 가는 선으로 적용하지 않고 있다.」

ViewCheck는 아이콘 선 두께가 1.5~2px(24px 기준)인지를 진단합니다.

📚 참고 출처

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

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

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