아이콘에도 안전 영역과 균형 기준이 있다

KRDS DS-079 — 아이콘을 Live Area(실제 아이콘이 그려지는 영역)와 Padding(주변 여백)으로 구성하고, 키라인 쉐입을 기준으로 시각적 균형을 맞추어 적용하고 있다.

0. 들어가며 — 아이콘 ’안쪽’의 구조

지금까지 아이콘의 형식(75)·크기(76·77)·컨테이너(78)를 봤습니다. 이번 79편은 아이콘 내부의 구조 — Live Area(라이브 에어리어)와 Padding, 그리고 키라인 쉐입(keyline shape) 입니다.

24px 아이콘이라고 해서 그 24px을 그림이 꽉 채우는 게 아닙니다. 실제 그림이 그려지는 영역(Live Area)과 그 주변 여백(Padding)으로 나뉘죠. 그리고 다양한 형태의 아이콘(동그란 것, 네모난 것)이 시각적으로 같은 크기로 느껴지게 맞추는 기준선이 키라인 쉐입입니다. 이번 편은 아이콘 내부 구조의 원리를 풀어냅니다.

1. 규칙 원문 — 영역 구성과 균형

DS-079 (디자인 스타일 > 아이콘) “아이콘을 Live Area(실제 아이콘이 그려지는 영역)와 Padding(주변 여백)으로 구성하고, 키라인 쉐입을 기준으로 시각적 균형을 맞추어 적용하고 있다.”

Live Area + Padding

아이콘 영역을 실제 그림 영역(Live Area)과 주변 여백(Padding)으로 구성합니다.

키라인 쉐입(keyline shape)

다양한 형태의 아이콘이 시각적으로 같은 크기로 느껴지게 맞추는 기준 도형(원·사각형·세로/가로 직사각형 등) 입니다.

정리: 아이콘을 Live Area+Padding으로 구성하고, 키라인 쉐입으로 시각적 균형을 맞춰라. 이게 DS-079 입니다.

2. 왜 Live Area와 Padding으로 나누나

아이콘에 여백(Padding)을 두는 이유는 정렬과 균형 때문입니다.

아이콘이 영역을 꽉 채우면, 여러 아이콘을 나란히 둘 때 서로 다른 형태가 가장자리에 바짝 붙어 균형이 안 맞습니다. Live Area(그림)와 Padding(여백)으로 나누면, 모든 아이콘이 같은 여백을 가져 정렬이 깔끔해지죠. 또 아이콘이 컨테이너나 다른 요소와 결합될 때, 이 여백이 적절한 간격을 만듭니다. 글자의 행간(32편), 컨테이너 패딩(73편)처럼, 아이콘에도 ’숨 쉴 여백’이 필요한 것입니다.

3. 키라인 쉐입 — 시각적 균형의 비밀

키라인 쉐입은 아이콘 디자인의 흥미로운 원리입니다. 같은 크기 숫자라도 형태에 따라 다르게 느껴지는 문제를 해결합니다.

예를 들어 같은 24px 영역 안에 그린 ’원’과 ’정사각형’을 나란히 두면, 정사각형이 더 커 보입니다. 원은 모서리가 없어 시각적으로 작아 보이죠. 그래서 모든 아이콘을 똑같이 24px로 그리면, 동그란 아이콘이 네모난 아이콘보다 작아 보이는 불균형이 생깁니다.

키라인 쉐입은 이를 보정합니다. 원형 아이콘은 약간 더 크게, 사각형 아이콘은 약간 작게 그려서, 시각적으로 같은 크기로 느껴지게 맞추는 기준선이죠. 형태별 키라인(원·사각·세로/가로 직사각형)에 맞춰 그리면, 다양한 형태의 아이콘이 나란히 있어도 균형 잡혀 보입니다. 이는 ’수치적 같음’이 아니라 ’시각적 같음’을 추구하는 것으로, 아이콘 세트의 일관성을 위한 정교한 기준입니다.

이 원리는 명도 대비에서 ’눈이 느끼는 밝기’를 고려한 것(2편의 인지 명도), 글자 크기에서 ’시각적 위계’를 본 것과 통합니다 — 기계적 수치가 아니라 사람 눈이 실제로 느끼는 것을 기준으로 삼는 것이죠.

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

흔한 위반 패턴

함정 ① 여백 없음. 아이콘이 영역을 꽉 채움 → 정렬·균형 어긋남. → Live Area+Padding. 함정 ② 형태별 불균형. 모든 아이콘 동일 수치 → 원이 작아 보임. → 키라인 쉐입 보정.

무엇을 점검하나

영역 구성 — 아이콘이 Live Area+Padding으로 구성됐는가.

시각 균형 — 형태가 달라도 시각적으로 같은 크기로 보이는가(키라인).

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

역할	책임
디자이너	Live Area+Padding, 키라인 쉐입으로 아이콘 제작

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

아이콘을 직접 제작하는 경우 핵심. KRDS 아이콘을 그대로 쓰면 이미 적용돼 있습니다.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘에 여백(Padding) 이 있나요?

□ 동그란 아이콘과 네모난 아이콘이 시각적으로 같은 크기로 보이나요?

□ 여러 아이콘이 나란히 있을 때 균형 잡혀 보이나요?

❓ FAQ

Q1. 키라인 쉐입이 뭔가요? 형태가 달라도 시각적으로 같은 크기로 느껴지게 맞추는 기준 도형입니다. 원은 약간 크게, 사각형은 약간 작게 그려 균형을 맞춥니다. Q2. 직접 그리지 않으면 신경 안 써도 되나요? KRDS 아이콘을 그대로 쓰면 키라인이 이미 적용돼 있습니다. 직접 제작할 때 중요합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 Live Area+Padding과 키라인 쉐입으로 제작돼 있습니다.

7. 마무리

DS-079의 메시지:

아이콘도 안전 영역(Live Area+Padding)과 시각 균형 기준(키라인)을 갖춰야 일관된다.

아이콘에 여백을 두면 정렬·균형이 맞고, 키라인 쉐입으로 형태별 크기 차이를 보정하면 다양한 아이콘이 시각적 으로 같은 크기로 느껴집니다. 기계적 수치가 아니라 사람 눈이 느끼는 균형을 추구하는 정교한 원리죠.

다음 편은 아이콘 선의 두께를 다룹니다. DS-080 — “24px 아이콘 기준 두께를 1.5~2px로 설정한다.”

다음 편 예고 ▶ 「080. 24px 아이콘을 기준으로 두께를 1.5px~2px로 설정하고 있다.」

ViewCheck는 아이콘이 적절한 여백과 시각적 균형을 갖췄는지를 진단합니다.

📚 참고 출처

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

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

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