아이콘 크기도 4·8의 배수로

KRDS DS-077 — 시스템 아이콘의 사이즈를 4px 또는 8px 배수로 설정하고 있다.

0. 들어가며 — 아이콘 크기의 배수 규칙

지난 76편(아이콘 5단계 크기)에 이어, 이번 77편은 그 크기를 4px 또는 8px의 배수로 설정하라는 규칙입니다.

76편의 크기들(16·20·24·32·40)을 보면 모두 4 또는 8의 배수입니다 — 16·24·32·40은 8의 배수, 20은 4의 배수죠. DS-077은 이 배수 규칙을 명시합니다. 8포인트 그리드(62편)와 같은 원리로, 아이콘 크기도 4·8의 배수로 맞춰 레이아웃 체계와 정합시키는 것입니다. 이번 편은 그 의미를 풀어냅니다.

1. 규칙 원문 — 4/8 배수

DS-077 (디자인 스타일 > 아이콘) “시스템 아이콘의 사이즈를 4px 또는 8px 배수로 설정하고 있다.”

아이콘 크기를 4의 배수(4·8·12·16·20·24…) 또는 8의 배수(8·16·24·32·40) 로 맞추라는 뜻입니다.

정리: 아이콘 크기를 4px 또는 8px의 배수로 설정하라. 이게 DS-077입니다.

2. 왜 4/8 배수인가 — 8포인트 그리드 정합

이는 62편(8포인트 그리드)의 원리를 아이콘 크기에 적용한 것입니다.

레이아웃의 모든 간격을 8의 배수로 맞췄듯, 아이콘 크기도 4·8의 배수로 맞추면 레이아웃 체계와 정합됩니다. 아이콘 크기(24px)와 주변 간격(24px), 패딩(16px)이 같은 배수 체계 위에 있으면, 아이콘과 다른 요소들이 자연스럽게 정렬되고 균형을 이루죠. 만약 아이콘이 22px·26px 같은 어중간한 크기면, 8의 배수인 간격·패딩과 어긋나 미묘하게 안 맞습니다.

또 4·8 배수는 픽셀에 또렷하게 렌더링됩니다. 8은 2·4로 나누어떨어지고 대부분 해상도가 8로 나누어져, 8의 배수 크기 아이콘이 흐릿하지 않게 표시되죠(62편에서 본 원리). 4px은 8의 절반으로 더 세밀한 단위(20px 등)를 제공합니다. 그래서 아이콘 크기를 4·8 배수로 하면 그리드 정합·선명한 렌더링을 함께 얻습니다.

핵심은 76편(5단계)과 77편(4·8 배수)이 한 쌍이라는 것입니다. 5단계 크기가 모두 4·8 배수이므로, 5단계를 쓰면 자연히 배수 규칙도 지켜집니다. 77편은 그 배수 원리를 명시해, 5단계 외의 크기가 필요할 때도 4·8 배수를 지키게 하는 것이죠.

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

흔한 위반 패턴

함정 ① 어중간한 크기. 22px·26px 등 4·8 배수 아닌 값 → 그리드 어긋남. → 4·8 배수로. 함정 ② 홀수 크기. 17px·23px 등 → 렌더링·정합 문제. → 짝수 배수.

무엇을 점검하나

배수 — 아이콘 크기가 4 또는 8의 배수인가.

그리드 정합 — 아이콘이 간격·패딩 체계와 맞는가.

Before / After

/* ❌ Before: 어중간한 크기 */ .icon { width: 22px; } /* 4·8 배수 아님 */ /* ✅ After: 4/8 배수 */ .icon { width: 24px; } /* 8×3 */ .icon-sm { width: 20px; } /* 4×5 */

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

역할	책임
디자이너	아이콘 크기를 4·8 배수로 설계
퍼블리셔/개발	배수 크기로 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 크기가 4 또는 8의 배수인가요?

□ 22px·26px 같은 어중간한 크기가 없나요?

□ 아이콘이 간격·패딩 체계와 맞나요?

❓ FAQ

Q1. 76편(5단계)과 다른가요? 76편은 ‘주요 크기 5단계’, 77편은 ’4·8 배수 원리’입니다. 5단계가 모두 4·8 배수라 함께 작동합니다. 77편은 배수 원리를 명시해 5단계 외 크기에도 적용합니다. Q2. 왜 8포인트 그리드와 맞춰야 하나요? 아이콘 크기가 간격·패딩과 같은 배수 체계면 정렬·균형이 자연스럽고, 픽셀 렌더링도 또렷합니다(62편). Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘 크기가 4·8 배수로 정의돼 있습니다. 채택하면 충족됩니다.

6. 마무리

DS-077의 메시지:

아이콘 크기도 4·8의 배수로 — 레이아웃 그리드와 정합되고 선명하게 렌더링된다.

8포인트 그리드 원리를 아이콘 크기에 적용해, 아이콘이 간격·패딩 체계와 정합되고 픽셀에 또렷하게 표시됩니다. 76편의 5단계 크기가 모두 4·8 배수라, 두 규칙이 함께 작동하죠.

다음 편은 아이콘 컨테이너의 레디어스를 다룹니다. DS-078 — “아이콘 크기에 따라 적절한 레디어스를 맞추고, 컨테이너가 커질수록 레디어스도 커지게 한다.”

다음 편 예고 ▶ 「078. 아이콘의 크기에 따라 시각적으로 적절한 래디어스 값을 맞춰 사용하고, 아이콘을 담는 컨테이너가 커질수록 레디어스 값도 커지게 적용하고 있다.」

ViewCheck는 아이콘 크기가 4·8의 배수로 설정됐는지를 진단합니다.

📚 참고 출처

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

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

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