둥글기의 천장

KRDS DS-045 — 래디어스 최댓값을 12px로 설정하고 있다.

0. 들어가며 — 상한을 못 박는 이유

지난 44편에서 레디어스 범위를 ’2px~12px’로 봤습니다. 이번 45편은 그중 상한(12px) 을 다시 한 번 명시적 으로 못 박는 규칙입니다.

44편에서 이미 12px이 상한이라 했는데, 왜 별도 규칙으로 또 강조할까요? 30·31편(두께 둘/넷)에서 봤듯, KRDS는 중요한 한계를 명시적 항목으로 분리해 빠짐없이 지켜지게 합니다. ‘범위가 2~12px’(044)이라는 규칙과 ‘최댓값은 12px’(045)이라는 규칙을 함께 두어, 상한이 흐려지지 않게 하는 것이죠. 이번 편은 이 12px 천장이 왜 그렇게 중요한지를 집중해서 풀어냅니다.

1. 규칙 원문 — 분명한 천장

DS-045 (디자인 스타일 > 형태) “래디어스 최댓값을 12px로 설정하고 있다.”

레디어스가 어떤 경우에도 12px을 넘지 말아야 한다는 뜻입니다. 큰 컴포넌트라도, 특수한 경우라도 둥글기의 천장은 12px입니다.

정리: 레디어스는 어떤 경우에도 12px을 넘지 마라. 이게 DS-045입니다.

2. 왜 12px 천장이 필요한가

레디어스에 천장이 없으면 어떤 일이 벌어질까요? 둥글기가 슬금슬금 커집니다.

디자인을 하다 보면 “이 카드를 좀 더 부드럽게”, “이 버튼을 더 둥글게” 같은 요구가 계속 쌓입니다. 천장이 없으면 이 요구가 누적되어 어느새 레디어스가 16px, 20px, 24px로 커집니다. 그러면 화면이 점점 가볍고 캐주얼해지고, 정부 서비스의 신뢰감 있는 인상에서 멀어집니다. 또 큰 둥글기는 작은 컴포넌트의 형태를 일그러뜨리고(알약·원형화, DS-050), 모서리가 콘텐츠를 가리는 문제(DS-049)도 키웁니다.

12px이라는 분명한 천장은 이 ’둥글기 인플레이션’을 막습니다. “더 둥글게 하려면 12px까지만”이라는 한계가 있으면, 둥글기가 무한정 커지지 않습니다. 이는 강조색 5% 상한(DS-012), 디스플레이 과대 금지(DS-038)와 같은 ’과함을 막는 천장’의 원리입니다. 한계가 분명해야 절제가 유지됩니다.

특히 이 천장은 범정부 일관성을 위한 것이기도 합니다. 모든 정부 서비스가 12px을 넘지 않으면, 둥글기의 ’최대 정도’가 통일되어 어느 사이트를 가도 비슷한 형태 톤을 유지합니다. 한 곳만 매우 둥글면 통일성이 깨지지만, 모두가 같은 천장을 지키면 일관됩니다.

3. 큰 컴포넌트에서도 12px — 비례의 함정 피하기

“큰 카드나 모달은 더 둥글어도 되지 않나?”라는 생각이 들 수 있습니다. 큰 요소는 12px이 상대적으로 작아 보이니까요. 하지만 KRDS는 큰 컴포넌트에서도 12px을 넘지 말라고 합니다.

이유는 ’둥글기가 무한정 커지는 것’을 막기 위해서입니다. 큰 요소라고 레디어스를 키우기 시작하면, ’얼마나 커야 적당한가’에 끝이 없습니다. 그래서 절대 상한(12px)을 둬, 컴포넌트가 아무리 커져도 둥글기는 그 안에서 멈추게 합니다. 큰 카드도 12px이면 충분히 부드럽고, 그 이상은 과합니다.

다만 컨테이너 크기에 따라 레디어스를 ‘비율에 맞게’ 조정하는 별도 규칙(DS-048)이 있습니다. 이는 작은 요소는 더 작은 레디어스를, 큰 요소는 (12px 이내에서) 더 큰 레디어스를 쓰라는 것이지, 12px을 넘으라는 뜻이 아닙니다. 천장(12px)은 유지하되, 그 안에서 크기에 비례하는 것이죠. 천장과 비례가 함께 작동합니다.

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

흔한 위반 패턴

함정 ① 천장 초과. 16px·20px 등 12px 초과 → 과한 둥글기. → 12px 이하로. 함정 ② 큰 요소 과둥글. 큰 카드에 큰 레디어스 → 천장 초과. → 큰 요소도 12px 이내. 함정 ③ 둥글기 누적. “더 둥글게” 요구 누적으로 천장 넘음. → 12px에서 멈춤.

무엇을 점검하나

최댓값 — 모든 레디어스가 12px 이하인가.

큰 컴포넌트 — 큰 요소도 천장(12px)을 지키는가.

일관성 — 둥글기의 최대 정도가 통일됐는가.

Before / After

/* ❌ Before: 천장 초과 */ .modal { border-radius: 20px; } /* 12px 초과 */ /* ✅ After: 12px 천장 준수 */ .modal { border-radius: 12px; } /* 큰 요소도 상한 유지 */

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

역할	책임
디자이너	레디어스 최댓값을 12px로 설계
퍼블리셔/개발	레디어스 토큰 상한을 12px로 강제

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

둥근 모서리 컴포넌트가 있는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 레디어스가 12px 이하인가요?

□ 큰 카드·모달도 12px을 넘지 않나요?

□ “더 둥글게” 요구로 천장을 넘기지 않았나요?

❓ FAQ

Q1. 44편(2~12px)과 45편(최댓값 12px), 뭐가 다른가요? 44편은 ‘범위(2~12px)’ 전체를, 45편은 그중 ’상한(12px)’을 명시적으로 강조합니다. 상한이 흐려지지 않도록 별도 항목으로 못 박은 것입니다(두께 둘/넷처럼 권장과 한계를 함께 두는 방식).

Q2. 큰 요소는 12px이 작아 보이는데요? 큰 요소도 12px이면 충분히 부드럽습니다. 둥글기를 키우기 시작하면 끝이 없으므로, 절대 상한을 둬 절제합니다. 크기 비례는 12px 이내에서 조정합니다(DS-048).

Q3. 원형(50%)은 천장과 별개인가요? 원형 처리는 별도 사항입니다. 작은 컴포넌트의 50% 원형화는 권장하지 않습니다(DS-050). 12px 천장은 일반 모서리 둥글기에 적용됩니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 레디어스 토큰의 최댓값이 12px로 정의돼 있습니다. 채택하면 DS-045가 충족됩니다.

7. 마무리 — 천장이 절제를 지킨다

DS-045의 메시지는 한계의 가치를 담습니다.

둥글기에 분명한 천장(12px)이 있어야, 둥글기 인플레이션을 막고 일관성을 지킨다.

천장이 없으면 둥글기는 슬금슬금 커져 화면이 가벼워지고 형태가 일그러집니다. 12px이라는 분명한 상한은 이 인플레이션을 막고, 모든 정부 서비스의 둥글기를 통일합니다. 큰 요소라도 천장을 지켜야 절제가 유지되죠. 이는 강조색·디스플레이 크기의 상한과 같은, ’과함을 막는 천장’의 일관된 원리입니다.

다음 편은 레디어스의 ’단위’를 다룹니다. DS-046 — “래디어스 값을 px 또는 % 단위로 설정한다.” 둥글기를 어떤 단위로 표현해야 하는지를 살펴봅니다.

다음 편 예고 ▶ 「046. 래디어스 값을 px 또는 % 단위로 설정하고 있다.」

우리 사이트의 레디어스가 천장을 지키는지 확인하려면? ViewCheck는 모든 레디어스 값이 12px 이하인지, 큰 컴포넌트도 상한을 지키는지를 진단합니다.

📚 참고 출처

KRDS 형태(Shape)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

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

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