아이콘 크기는 5단계, 기준은 24px

KRDS DS-076 — 시스템 아이콘은 24px을 기준 사이즈로 정의하며, 주요 크기로 16px, 20px, 24px, 32px, 40px를 사용하고 있다.

0. 들어가며 — 아이콘 크기의 눈금

지난 75편(SVG 형식)에 이어, 이번 76편은 아이콘의 크기입니다 — 기준 24px, 주요 크기 16/20/24/32/40px.

아이콘도 색·레디어스처럼 크기를 아무 값이나 쓰면 제각각이 됩니다. KRDS는 아이콘 크기를 5단계 (16·20·24·32·40px) 로 표준화하고, 그중 24px을 기준으로 삼습니다. 이번 편은 아이콘 크기 표준의 의미를 풀어냅니다.

1. 규칙 원문 — 5단계 크기

DS-076 (디자인 스타일 > 아이콘) “시스템 아이콘은 24px을 기준 사이즈로 정의하며, 주요 크기로 16px, 20px, 24px, 32px, 40px를 사용 하고 있다.”

크기	용도(예)
16px	작은 텍스트 옆, 조밀한 영역
20px	보조
24px (기준)	표준 아이콘 버튼·메뉴
32px	강조
40px	큰 강조

정리: 아이콘 크기는 16/20/24/32/40px 5단계로, 기준은 24px. 이게 DS-076입니다.

2. 왜 표준 크기를 정하나

아이콘 크기를 5단계로 표준화하는 이유는 색·레디어스·간격을 단계로 관리한 것과 같습니다 — 일관성입니다.

아이콘 크기를 감각으로 정하면 22px, 26px, 30px처럼 제각각이 됩니다. 비슷한 위치의 아이콘인데 크기가 미묘하게 달라 정돈되지 않죠. 5단계(16·20·24·32·40)로 통일하면 모든 아이콘이 이 크기 중 하나가 되어, 화면이 일관됩니다. 그리고 24px을 기준으로 삼아, 대부분의 아이콘은 24px을 쓰고 상황에 따라 다른 단계를 고릅니다. 작은 텍스트 옆은 16px, 큰 강조는 32~40px처럼요.

이 크기들은 8포인트 그리드(62편)와도 정합됩니다 — 16·24·32·40은 8의 배수, 20은 4의 배수죠. 그래서 아이콘 크기가 레이아웃 간격 체계와 자연스럽게 맞아떨어집니다. 또 24px 기준은 터치 환경에서도 적절한 크기입니다. 표준 크기는 일관성·정합성·사용성을 한 번에 확보하는 것이죠.

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

흔한 위반 패턴

함정 ① 임의 크기. 22px·26px 등 → 표준 미준수, 불일치. → 5단계로. 함정 ② 기준 무시. 24px 기준 없이 제각각. → 24px 중심.

무엇을 점검하나

크기 표준 — 아이콘이 16/20/24/32/40px 중 하나인가.

기준 24px — 대부분 아이콘이 24px 중심인가.

Before / After

/* ✅ 아이콘 크기 5단계 토큰 */ .icon-sm { width: 16px; height: 16px; } .icon { width: 24px; height: 24px; } /* 기준 */ .icon-lg { width: 40px; height: 40px; }

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

역할	책임
디자이너	아이콘을 5단계 크기로 설계
퍼블리셔/개발	표준 크기로 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 크기가 16/20/24/32/40px 중 하나인가요?

□ 기준 크기 24px을 중심으로 쓰나요?

□ 22px·26px 등 임의 크기를 쓰지 않나요?

❓ FAQ

Q1. 왜 24px 기준인가요? 24px은 표준 아이콘 버튼·메뉴에 적절한 크기이고, 터치 환경에도 알맞으며, 8포인트 그리드와 정합됩니다. 대부분의 아이콘에 적합한 기준값입니다. Q2. 5단계로 충분한가요? 16~40px 5단계면 작은 텍스트 옆부터 큰 강조까지 대부분 상황을 커버합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 5단계 크기로 제공됩니다. 채택하면 충족됩니다.

6. 마무리

DS-076의 메시지:

아이콘 크기는 16/20/24/32/40px 5단계로, 기준은 24px — 일관성과 정합성을 위해.

크기를 5단계로 표준화하면 아이콘이 일관되고, 8포인트 그리드와 정합되며, 24px 기준으로 대부분을 커버합니다. 색·레디어스·간격처럼 아이콘 크기도 단계로 관리하는 것이죠.

다음 편은 그 크기의 배수 규칙을 다룹니다. DS-077 — “시스템 아이콘 사이즈를 4px 또는 8px 배수로 설정 한다.”

다음 편 예고 ▶ 「077. 시스템 아이콘의 사이즈를 4px 또는 8px 배수로 설정하고 있다.」

ViewCheck는 아이콘 크기가 표준 5단계(16/20/24/32/40px)인지를 진단합니다.

📚 참고 출처

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

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

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