둥글기에도 적정 범위가 있다

KRDS DS-044 — 2px~12px의 래디어스 값을 사용하고 있다.

0. 들어가며 — 단계에 ’실제 값’을 부여하다

지난 43편에서 레디어스를 ’5단계로 구성’하라는 원칙을 봤습니다. 이번 44편은 그 단계의 실제 값 범위를 못 박습니다 — 2px에서 12px 사이.

레디어스 5단계가 ’구조’라면, 2~12px은 그 구조의 ’눈금’입니다. 둥글기를 0px(완전 각짐)부터 무한히 둥글게 할 수 있지만, KRDS는 그 범위를 2~12px로 한정합니다. 너무 각지지도(2px 미만), 너무 둥글지도(12px 초과) 않은 적정 범위죠. 이번 편은 왜 이 범위인지, 둥글기의 적정선이 어디인지를 풀어냅니다.

1. 규칙 원문 — 값의 범위

DS-044 (디자인 스타일 > 형태) “2px~12px의 래디어스 값을 사용하고 있다.”

레디어스 값을 최소 2px, 최대 12px 범위 안에서 쓰라는 뜻입니다. 5단계(43편)가 이 범위 안에 분포하는 것이죠.

정리: 레디어스 값은 2px~12px 범위 안에서 쓰라. 이게 DS-044입니다.

2. 왜 2px이 최소인가 — 둥글기가 보이려면

하한이 2px인 이유부터 봅시다. 1px이나 0.5px처럼 너무 작은 레디어스는 둥글기가 거의 안 보입니다. 화면에서 사실상 각진 모서리와 구분이 안 되죠. 둥글기를 줄 거라면, 그 둥글기가 인지될 만큼은 되어야 의미가 있습니다. 2px은 ‘둥글기가 최소한 보이는’ 하한선입니다.

물론 의도적으로 각진(레디어스 0) 스타일을 선택할 수도 있습니다. 하지만 ‘살짝 둥글게’ 하려다 1px 같은 어중간한 값을 쓰면, 둥근 것도 각진 것도 아닌 모호한 형태가 됩니다. 그래서 둥글게 할 거면 최소 2px 이상으로 확실히, 각지게 할 거면 0으로 — 어중간한 둥글기를 피하는 것이 깔끔합니다. 2px 하한은 이 ’모호한 둥글기’를 막습니다.

3. 왜 12px이 최대인가 — 적정 인상의 상한

상한이 12px인 이유는 더 중요합니다. 너무 둥글면 인상이 달라지고 형태가 일그러지기 때문입니다.

레디어스가 과하게 크면(예: 20px, 30px), 모서리가 지나치게 둥글어져 화면이 너무 캐주얼하거나 가벼워 보입니다. 정부 서비스의 신뢰감 있는 인상과 안 맞죠. 또 큰 레디어스는 작은 컴포넌트에서 형태를 일그러뜨립니다 — 작은 버튼에 큰 레디어스를 주면 거의 알약(pill)이나 원형이 되어버립니다(이건 DS-050에서 다룸). 그리고 모서리가 너무 둥글면 내부 콘텐츠가 모서리에 가려지는 문제도 생깁니다(DS-049).

12px은 ‘충분히 둥글되, 과하지 않은’ 상한입니다. 이 범위 안에서는 부드럽고 친근하면서도 신뢰감 있는 인상이 유지되고, 형태도 안정적입니다. 정부 서비스에 어울리는 ’절제된 둥글기’의 천장인 것이죠. 이는 디스플레이 크기의 상한(DS-038), 강조색의 상한(DS-012)과 같은 ’과함을 막는 천장’의 원리입니다.

4. 2~12px 범위가 주는 일관성

이 범위는 단순히 ’예쁜 둥글기’를 넘어, 범정부 서비스의 형태 일관성을 위한 것이기도 합니다.

모든 정부 서비스가 2~12px 범위의 레디어스를 쓰면, 어느 정부 사이트를 가도 비슷한 ’형태 톤’을 갖습니다. 한 곳은 각지고 한 곳은 매우 둥글면 통일성이 깨지지만, 모두가 같은 범위 안에 있으면 일관된 인상을 줍니다. 색을 같은 팔레트로 통일한 것(DS-001)처럼, 둥글기도 같은 범위로 통일하는 것이죠.

이 범위 안에서 5단계(43편)가 분포합니다 — 예를 들어 2px, 4px, 8px, 12px 같은 식으로요(정확한 값은 KRDS 토큰 기준). 작은 요소는 2~4px, 중간은 8px, 큰 요소는 12px처럼 크기에 맞춰 단계를 골라 쓰면, 범위 안에서 체계적인 둥글기가 적용됩니다. 범위(2~12px)와 단계(5단계)가 함께 작동해 일관되고 적정한 형태를 만드는 것입니다.

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

흔한 위반 패턴

함정 ① 과한 둥글기. 20px 이상 레디어스 → 가벼운 인상, 형태 일그러짐. → 12px 이하로. 함정 ② 어중간한 둥글기. 1px 등 거의 안 보이는 레디어스 → 모호. → 2px 이상 또는 0. 함정 ③ 범위 밖 혼재. 일부는 2~12px, 일부는 범위 밖 → 부조화. → 범위 통일. 함정 ④ 단계 무시. 범위 안이지만 제각각 값 → 일관성 부족. → 5단계로(43편).

무엇을 점검하나

값 범위 — 레디어스가 2~12px 범위 안인가.

하한 — 둥글기가 너무 작아(1px 등) 모호하지 않은가.

상한 — 둥글기가 12px을 넘어 과하지 않은가.

단계 분포 — 범위 안에서 5단계로 체계화됐는가.

Before / After

/* ❌ Before: 범위 밖 + 어중간 */ .card { border-radius: 24px; } /* 과함 */ .tag { border-radius: 1px; } /* 거의 안 보임 */ /* ✅ After: 2~12px 범위 */ .tag { border-radius: 2px; } /* 작은 요소 */ .btn { border-radius: 8px; } /* 중간 */ .card { border-radius: 12px; } /* 큰 요소(상한) */

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

역할	책임
디자이너	레디어스를 2~12px 범위로 설계
퍼블리셔/개발	레디어스 토큰을 범위 안에서 적용

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

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

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레디어스가 2~12px 범위 안인가요?

□ 너무 둥근(12px 초과) 모서리가 없나요?

□ 1px 등 거의 안 보이는 어중간한 둥글기가 없나요?

□ 범위 안에서 크기별로 단계가 적용됐나요?

❓ FAQ

Q1. 왜 12px이 상한인가요? 12px을 넘으면 너무 둥글어 가벼운 인상을 주고, 작은 컴포넌트에서 형태가 일그러지며, 콘텐츠가 모서리에 가려질 수 있습니다. 12px은 ‘충분히 둥글되 과하지 않은’ 적정 상한입니다(DS-045에서 더 다룸).

Q2. 각진 모서리(0px)는 안 되나요? 의도적으로 각진 스타일을 일관되게 쓸 수는 있습니다. 다만 ‘살짝 둥글게’ 하려면 2px 이상으로 확실히 하세요. 1px 같은 어중간한 값이 가장 모호합니다.

Q3. 원형 버튼(50%)은요? 원형은 별도 고려 사항입니다. 작은 컴포넌트에 50% 레디어스(완전 원형)는 권장하지 않습니다(DS-050). 2~12px은 일반 모서리 둥글기의 범위입니다.

Q4. 큰 카드도 12px이 최대인가요? 네, 컨테이너가 커져도 레디어스는 12px이 상한입니다. 다만 비율 고려는 있습니다(DS-048). 무작정 키우지 않고 범위 안에서 조정합니다.

Q5. KRDS를 채택하면 자동인가요? KRDS 레디어스 토큰은 2~12px 범위로 정의돼 있습니다. 채택하면 DS-044가 충족됩니다.

8. 마무리 — 적정 범위의 미학

DS-044의 메시지는 절제된 범위의 가치를 담습니다.

둥글기에도 적정 범위가 있다 — 너무 각지지도, 너무 둥글지도 않은 2px~12px.

2px 하한은 둥글기가 보이게 하고, 12px 상한은 둥글기가 과하지 않게 합니다. 이 범위 안에서 둥근 모서리는 부드럽고 친근하면서도 신뢰감 있는 인상을 만들죠. 그리고 모든 정부 서비스가 이 범위를 공유하면 형태의 통일성이 생깁니다. 적정 범위로 절제하는 것 — 색·크기·강조에서 본 원리가 둥글기에도 그대로 적용됩니다.

다음 편은 이 범위의 상한을 다시 짚습니다. DS-045 — “래디어스 최댓값을 12px로 설정한다.” 12px이라는 천장의 의미를 더 깊이 살펴봅니다.

다음 편 예고 ▶ 「045. 래디어스 최댓값을 12px로 설정하고 있다.」

우리 사이트의 레디어스 값이 적정 범위인지 확인하려면? ViewCheck는 사이트의 레디어스 값이 2~12px 범위 안인지, 과하거나 어중간한 둥글기가 없는지를 진단합니다.

📚 참고 출처

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

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

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