같은 크기는 같은 두께로

KRDS DS-082 — 같은 크기의 아이콘을 표현할 때 한 가지의 두께만 사용하고 있다.

0. 들어가며 — 두께의 통일

지난 편들(80·81)에서 아이콘 두께의 값·원칙을 봤습니다. 이번 82편은 두께의 일관성 — 같은 크기 아이콘은 한 가지 두께만 입니다.

한 화면에 같은 크기(24px)의 아이콘이 여럿 있는데, 어떤 건 1.5px, 어떤 건 2px 선이면 — 미묘하게 안 맞아 보입니다. DS-082는 같은 크기 아이콘은 두께를 하나로 통일하라고 규정합니다. 이번 편은 아이콘 두께 통일의 의미를 풀어냅니다.

1. 규칙 원문 — 한 가지 두께

DS-082 (디자인 스타일 > 아이콘) “같은 크기의 아이콘을 표현할 때 한 가지의 두께만 사용하고 있다.”

같은 크기 아이콘들의 선 두께를 하나로 통일하라는 뜻입니다.

정리: 같은 크기 아이콘은 한 가지 두께로 통일하라. 이게 DS-082입니다.

2. 왜 통일하나 — 세트의 일관성

같은 크기 아이콘의 두께가 제각각이면 아이콘 세트의 통일성이 깨집니다.

아이콘들은 보통 세트로 함께 쓰입니다 — 메뉴 바의 아이콘들, 툴바의 아이콘들처럼요. 이 아이콘들이 같은 크기인데 두께가 다르면, 어떤 아이콘은 가늘고 어떤 건 굵어 보여 ‘서로 다른 세트에서 온’ 느낌을 줍니다. 사람 눈은 나란히 있는 것들의 미세한 차이를 감지하므로(47편 레디어스, 54편 그리드), 두께 불일치는 어긋난 인상을 주죠.

같은 크기 아이콘을 한 두께로 통일하면, 아이콘들이 ‘한 세트’로 보이고 화면이 정돈됩니다. 이는 글자 굵기를 둘로 제한한 것(30편), 레디어스를 일관되게 한 것(47편)과 같은 ’일관성’ 원리가 아이콘 두께에 적용된 것이죠. 물론 크기가 다르면 두께도 비례해 다릅니다(80편) — 24px은 2px, 40px은 더 굵게. 단 ’같은 크기’끼리는 같은 두께여야 한다는 것입니다. 크기 그룹 안에서 두께를 통일하는, 정교한 일관성 규칙입니다.

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

흔한 위반 패턴

함정 ① 같은 크기 다른 두께. 24px 아이콘들이 1.5px·2px 혼재 → 불일치. → 한 두께 통일. 함정 ② 출처 다른 아이콘 혼용. 다른 세트 아이콘을 섞어 두께 제각각. → 통일된 세트.

무엇을 점검하나

두께 통일 — 같은 크기 아이콘이 같은 두께인가.

세트 일관성 — 함께 쓰이는 아이콘들이 통일됐는가.

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

역할	책임
디자이너	같은 크기 아이콘 두께 통일
퍼블리셔/개발	일관된 아이콘 세트 사용

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 같은 크기 아이콘이 같은 두께인가요?

□ 함께 쓰이는 아이콘들이 통일됐나요?

□ 다른 세트 아이콘을 섞어 두께가 제각각이지 않나요?

❓ FAQ

Q1. 크기가 다르면 두께가 달라도 되나요? 네. 크기에 비례해 두께가 다릅니다(80편). 단 ‘같은 크기’끼리는 같은 두께여야 합니다. Q2. 왜 통일이 중요한가요? 아이콘은 세트로 쓰여, 같은 크기인데 두께가 다르면 ’다른 세트에서 온’ 느낌을 줘 통일성이 깨집니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘 세트는 크기별로 두께가 통일돼 있습니다.

6. 마무리

DS-082의 메시지:

같은 크기 아이콘은 한 가지 두께로 — 아이콘 세트가 ’한 세트’로 보이게.

같은 크기 아이콘의 두께를 통일하면 아이콘들이 한 세트로 정돈됩니다. 크기가 다르면 두께도 비례하되, 같은 크기끼리는 통일하는 것이죠. 일관성 원리가 아이콘 두께에 적용된 모습입니다.

다음 편은 아이콘 선 모서리를 다룹니다. DS-083 — “라인 모서리 모양을 아이콘 형태에 따라 통일하여 사용한다.”

다음 편 예고 ▶ 「083. 라인 모서리의 모양을 아이콘 형태에 따라 통일하여 사용하고 있다.」

ViewCheck는 같은 크기 아이콘이 한 가지 두께로 통일됐는지를 진단합니다.

📚 참고 출처

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

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

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