아이콘 컨테이너도 크기에 비례한 둥글기

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

0. 들어가며 — 아이콘 컨테이너의 둥글기

아이콘은 종종 배경 컨테이너(둥근 배경 위 아이콘 버튼 등)에 담깁니다. 이번 78편은 그 아이콘 컨테이너의 레디어스를 다룹니다 — 아이콘 크기에 따라 적절히, 컨테이너가 커질수록 레디어스도 커지게.

이는 형태 카테고리(43~50편)에서 본 레디어스 규칙이 아이콘 컨테이너에 적용된 것입니다. 특히 48편(컨테이너 커지면 레디어스 비례)의 원리가 그대로죠. 이번 편은 아이콘 컨테이너 레디어스를 풀어냅니다.

1. 규칙 원문 — 크기 비례 레디어스

DS-078 (디자인 스타일 > 아이콘) “아이콘의 크기에 따라 시각적으로 적절한 래디어스 값을 맞춰 사용하고, 아이콘을 담는 컨테이너가 커질수록 레디어스 값도 커지게 적용하고 있다.”

아이콘 컨테이너의 레디어스를 아이콘/컨테이너 크기에 비례해 적용하라는 뜻입니다.

정리: 아이콘 컨테이너 레디어스를 크기에 비례해(컨테이너 클수록 레디어스 크게) 적용하라. 이게 DS-078입니다.

2. 왜 크기에 비례하나

48편(컨테이너 비율)에서 본 원리와 같습니다 — 레디어스는 크기에 비례해야 시각적으로 균형이 맞습니다.

작은 아이콘 컨테이너에 큰 레디어스를 주면 과하게 둥글어 형태가 일그러지고(50편의 원형화 위험), 큰 컨테이너에 작은 레디어스를 주면 둥글기가 거의 안 보입니다. 그래서 아이콘 컨테이너도 크기에 맞춰 레디어스를 조정하죠 — 작은 아이콘 버튼은 작은 레디어스, 큰 아이콘 컨테이너는 (12px 천장 안에서) 큰 레디어스. 그러면 모든 아이콘 컨테이너가 자기 크기에 어울리는 둥글기를 갖습니다.

이는 형태 규칙(43~50편)이 아이콘 영역에 적용된 것입니다. 레디어스 5단계·2~12px·12px 천장·크기 비례라는 형태 원리가, 아이콘 컨테이너에도 그대로 적용되죠. 디자인 시스템의 규칙이 여러 영역에 일관되게 적용됨을 보여주는 예입니다. 아이콘이라고 별도 레디어스 체계를 쓰는 게 아니라, 같은 형태 원리를 따르는 것입니다.

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

흔한 위반 패턴

함정 ① 일률적 레디어스. 아이콘 컨테이너 크기 무관 같은 레디어스 → 비례 어긋남. → 크기 비례. 함정 ② 작은 컨테이너 과둥글. 작은 아이콘 버튼에 큰 레디어스 → 일그러짐. → 작은 레디어스.

무엇을 점검하나

크기 비례 — 컨테이너 크기에 따라 레디어스가 조정되는가.

형태 규칙 준수 — 2~12px·12px 천장(43~50편)을 지키는가.

Before / After

/* ✅ 아이콘 컨테이너 — 크기 비례 레디어스 */ .icon-btn-sm { width: 32px; border-radius: 4px; } .icon-btn-lg { width: 56px; border-radius: 12px; } /* 천장 */

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

역할	책임
디자이너	아이콘 컨테이너 레디어스 비례 설계
퍼블리셔/개발	크기별 레디어스 구현

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

둥근 아이콘 컨테이너가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 컨테이너 레디어스가 크기에 비례하나요?

□ 큰 컨테이너가 작은 것보다 더 둥근가요?

□ 작은 아이콘 컨테이너가 과하게 둥글지 않나요?

□ 12px 천장(45편)을 지키나요?

❓ FAQ

Q1. 48편(컨테이너 비율)과 같은가요? 원리가 같습니다. 48편은 일반 컨테이너, 78편은 아이콘 컨테이너입니다. 형태 규칙이 아이콘에 적용된 것이죠. Q2. 레디어스 천장도 12px인가요? 네. 아이콘 컨테이너도 형태 규칙(2~12px, 12px 천장)을 따릅니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘 컨테이너는 크기별 레디어스가 적용돼 있습니다. 채택하면 충족됩니다.

6. 마무리

DS-078의 메시지:

아이콘 컨테이너 레디어스도 크기에 비례 — 형태 규칙(43~50편)이 아이콘에 그대로 적용된다.

아이콘 컨테이너의 둥글기도 크기에 비례해야 균형이 맞습니다(작으면 작게, 크면 크게, 12px 천장 내). 형태 규칙이 아이콘 영역에 일관되게 적용되는 것이죠. 디자인 시스템의 규칙은 여러 영역을 관통합니다.

다음 편은 아이콘의 영역 구성을 다룹니다. DS-079 — “아이콘을 Live Area와 Padding으로 구성하고, 키라인 쉐입으로 시각적 균형을 맞춘다.”

다음 편 예고 ▶ 「079. 아이콘을 Live Area와 Padding으로 구성하고, 키라인 쉐입을 기준으로 시각적 균형을 맞추어 적용하고 있다.」

ViewCheck는 아이콘 컨테이너 레디어스가 크기에 비례하는지를 진단합니다.

📚 참고 출처

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

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

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