아이콘 크기를 글자 크기에 맞춰라

KRDS DS-096 — 아이콘을 텍스트와 함께 사용할 경우 매칭된 사이즈로 적용하고 있다.

0. 들어가며 — 아이콘 22개 규칙의 마지막

아이콘 22개 규칙(075~096)의 마지막입니다. 그리고 이 마지막은 아이콘과 텍스트의 크기 매칭입니다.

아이콘이 함께 쓰이는 글자 크기에 비해 너무 크거나 작으면 어색합니다. 작은 글자 옆에 큰 아이콘, 큰 제목 옆에 작은 아이콘이면 균형이 안 맞죠. DS-096은 아이콘 크기를 함께 쓰는 텍스트 크기에 매칭하라고 규정 합니다. 이번 편으로 아이콘 카테고리를 마무리합니다.

1. 규칙 원문 — 매칭 사이즈

DS-096 (디자인 스타일 > 아이콘) “아이콘을 텍스트와 함께 사용할 경우 매칭된 사이즈로 적용하고 있다.”

아이콘 크기를 함께 쓰는 텍스트 크기에 맞춰 적용하라는 뜻입니다.

정리: 아이콘 크기를 함께 쓰는 텍스트 크기에 매칭하라. 이게 DS-096입니다.

2. 왜 크기를 매칭하나

아이콘과 텍스트가 한 짝일 때, 둘의 크기가 안 맞으면 시각적 불균형이 생깁니다.

작은 본문 글자(16px) 옆에 큰 아이콘(40px)이면 아이콘이 글자를 압도해 어색하고, 큰 제목(32px) 옆에 작은 아이콘(16px)이면 아이콘이 초라해 보이죠. 아이콘 크기를 글자 크기에 맞추면 — 본문 옆은 본문에 맞는 아이콘, 제목 옆은 제목에 맞는 아이콘 — 둘이 균형 잡혀 한 단위로 자연스럽게 보입니다.

이는 76편(아이콘 5단계 크기)과 37편(타이포 계층)의 결합입니다. 아이콘 크기 단계(16·20·24·32·40)를 글자 크기 계층(body·heading)에 맞춰 고르는 것이죠. 본문(16~17px)에는 16~20px 아이콘, 제목(24~32px)에는 24~32px 아이콘처럼요. 95편(중앙 정렬)이 ’세로 위치’를 맞췄다면, 96편은 ’크기’를 맞춥니다. 정렬과 크기가 모두 맞아야 아이콘-텍스트 짝이 완전히 가지런해지죠.

이런 세심한 매칭이 화면의 완성도를 만듭니다. 아이콘과 글자가 크기·정렬 모두 조화로우면, 화면이 정돈되고 전문적으로 보입니다. 작은 디테일들이 모여 전체 품질을 좌우하는 것이죠.

3. 점검 / 개선

무엇을 점검하나

크기 매칭 — 아이콘 크기가 함께 쓰는 텍스트 크기에 맞는가.

균형 — 아이콘이 글자를 압도하거나 초라하지 않은가.

Before / After

/* ✅ 텍스트 크기에 맞춘 아이콘 */ .body-with-icon .icon { width: 20px; } /* 본문 16~17px 옆 */ .heading-with-icon .icon { width: 32px; } /* 제목 32px 옆 */

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

역할	책임
디자이너	아이콘 크기를 텍스트에 매칭 설계
퍼블리셔/개발	매칭 크기 구현

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

아이콘+텍스트를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 크기가 함께 쓰는 텍스트 크기에 맞나요?

□ 작은 글자 옆에 너무 큰 아이콘이 없나요?

□ 큰 제목 옆에 너무 작은 아이콘이 없나요?

❓ FAQ

Q1. 정확히 같은 크기여야 하나요? 정확히 같을 필요는 없고 ’균형 있게 매칭’하면 됩니다. 본문 옆은 16~20px, 제목 옆은 24~32px처럼 텍스트 크기에 어울리는 아이콘 크기를 고릅니다. Q2. 95편(정렬)과 다른가요? 95편은 세로 위치(중앙 정렬), 96편은 크기 매칭입니다. 둘 다 맞아야 아이콘-텍스트 짝이 가지런합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 아이콘-텍스트 크기가 매칭돼 있습니다.

6. 마무리 — 아이콘 22개 규칙을 마치며

DS-096의 메시지로 아이콘 카테고리를 닫습니다.

아이콘 크기를 텍스트에 매칭 — 정렬(95편)과 크기(96편)가 맞아야 한 단위로 가지런하다.

아이콘과 글자의 크기를 맞추면 둘이 균형 잡혀 한 단위로 보입니다. 정렬과 크기가 모두 조화로워야 짝이 완전히 가지런해지죠. 작은 디테일들이 모여 화면의 완성도를 만듭니다.

여기까지 아이콘 22개 규칙(075~096) 을 모두 마쳤습니다. SVG 형식·크기·두께·모서리·꺼짐·스택·대비·색 역할·시점·타입·정렬·매칭까지, 아이콘을 체계로 만들고 쓰는 법을 정리했습니다. 색상(26)·타이포(16)·형태(8)· 레이아웃(24)·아이콘(22) 까지, 디자인 스타일 96개가 완성됐습니다.

다음 편부터는 디자인 스타일의 여섯 번째 분류, 엘리베이션(10개 규칙) 으로 넘어갑니다. DS-097 — “긴급 공지의 계층을 최상단에 배치한다.” 화면 요소의 층위(z-축 우선순위)를 다룹니다.

다음 편 예고 ▶ 「097. 긴급 공지의 계층을 최상단에 배치하고 있다.」

ViewCheck는 아이콘 크기가 함께 쓰는 텍스트 크기에 매칭됐는지를 진단합니다.

📚 참고 출처

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

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

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