작은 것을 동그랗게 만들지 마라

KRDS DS-050 — 작은 컴포넌트의 경우 래디어스 값을 50%로 적용하지 않고 있다.

0. 들어가며 — 형태 8개 규칙의 마지막

형태(레디어스) 8개 규칙(043~050)의 마지막입니다. 그리고 이 마지막은 구체적인 금지 규칙입니다 — 작은 컴포넌트에 레디어스 50%(완전 원형)를 쓰지 말라.

46편에서 봤듯, 레디어스 50%는 정사각형을 완전한 원으로 만듭니다. 프로필 사진이나 원형 아이콘에는 적합 하지만, 작은 컴포넌트(작은 버튼·태그·배지 등)에 50%를 쓰면 문제가 생깁니다. 이번 편은 작은 요소를 원형화하면 안 되는 이유를 풀어내며, 형태 카테고리를 마무리합니다.

1. 규칙 원문 — 금지 조건

DS-050 (디자인 스타일 > 형태) “작은 컴포넌트의 경우 래디어스 값을 50%로 적용하지 않고 있다.”

작은 컴포넌트에 레디어스 50%(완전 원형/알약 형태) 를 쓰지 말라는 뜻입니다.

정리: 작은 컴포넌트를 50% 레디어스로 원형/알약화하지 마라. 이게 DS-050입니다.

2. 왜 작은 컴포넌트에 50%가 문제인가

작은 요소에 50% 레디어스를 주면 여러 문제가 생깁니다.

형태가 일그러진다

작은 버튼이나 태그에 50%를 주면, 모서리가 과하게 둥글어져 알약(pill)이나 원형이 됩니다. 그러면 원래 의도한 ’사각형 버튼·태그’의 형태가 사라지고, 다른 종류의 요소처럼 보이죠. 작은 요소일수록 50%의 영향이 커서 형태가 크게 변형됩니다.

콘텐츠 공간이 부족해진다

49편에서 봤듯, 둥글기가 크면 콘텐츠 공간이 줄어듭니다. 작은 컴포넌트에 50%를 주면 곡선이 차지하는 비중이 극대화되어, 안쪽에 글자·아이콘을 둘 공간이 거의 없어집니다. 콘텐츠가 곡선에 가리거나 잘리기 쉽죠.

일관성·천장과 충돌한다

50%는 비율 단위라 컴포넌트 크기에 따라 실제 둥글기가 달라집니다. 이는 2~12px의 고정 레디어스 체계 (43~45편)와 충돌합니다. 작은 요소를 50%로 만들면, 다른 요소들의 px 기반 둥글기와 형태 톤이 안 맞아 일관성이 깨집니다. 또 50%는 사실상 12px 천장(DS-045)을 무력화하죠 — 비율이라 천장 개념이 안 통하니까요.

그래서 작은 컴포넌트는 50%가 아니라 px 단위의 적정 레디어스(2~12px) 를 써야 합니다. 원형이 꼭 필요한 경우(프로필 사진 등)는 50%가 맞지만, 그건 ’원형으로 의도한 요소’이지 ’작은 일반 컴포넌트’가 아닙니다.

3. 그럼 원형은 언제 쓰나 — 의도된 원형 vs 일그러진 원형

50%(원형)를 아예 쓰지 말라는 건 아닙니다. ‘원형으로 의도한 요소’ 에는 50%가 맞습니다.

적절한 50% 사용 — 프로필 사진, 원형 아바타, 원형 아이콘 버튼처럼 ’원형이 디자인 의도’인 요소.

부적절한 50% 사용 — 작은 사각형 버튼·태그·배지를 50%로 둥글려 의도치 않게 원형/알약화한 경우.

차이는 ’원형이 의도인가’입니다. 원형 프로필은 처음부터 원형으로 설계된 것이라 50%가 자연스럽습니다. 반면 사각형이어야 할 작은 버튼에 50%를 주면, 의도와 다르게 형태가 변형됩니다. DS-050이 금지하는 것은 후자 — ’작은 일반 컴포넌트를 원형화’하는 것입니다.

실무 판단은 간단합니다. “이 요소가 원형이어야 하는가?”가 ’O’면 50%, ’X’면 px 적정값(2~12px). 작은 버튼·태그· 배지는 대부분 ’X’이므로 px 레디어스를 씁니다. 원형이 명확히 의도된 요소에만 50%를 쓰면 됩니다.

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

흔한 위반 패턴

함정 ① 작은 버튼 50%. 작은 사각 버튼에 50% → 알약화, 형태 변형. → px 적정값. 함정 ② 태그·배지 원형화. 작은 태그를 50%로 → 콘텐츠 공간 부족. → 2~4px 등. 함정 ③ 비율-고정 혼란. 일부는 px, 일부는 50% → 형태 톤 불일치. → 일반 요소는 px 통일.

무엇을 점검하나

작은 요소 50% 여부 — 작은 일반 컴포넌트에 50%가 쓰이지 않았는가.

원형 의도성 — 50%가 ‘원형 의도’ 요소(프로필 등)에만 쓰였는가.

px 통일 — 일반 컴포넌트가 px 레디어스로 통일됐는가.

Before / After

/* ❌ Before: 작은 버튼·태그를 50%로 원형화 */ .btn-small { border-radius: 50%; } /* 알약·원형화 */ .tag { border-radius: 50%; } /* ✅ After: 일반 요소는 px, 원형 의도만 50% */ .btn-small { border-radius: 8px; } /* 사각 버튼 */ .tag { border-radius: 2px; } /* 작은 태그 */ .avatar { border-radius: 50%; } /* 원형 의도 — OK */

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

역할	책임
디자이너	작은 요소는 px 적정값, 원형 의도만 50% 설계
퍼블리셔/개발	일반 컴포넌트에 px 레디어스 적용

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

작은 컴포넌트가 있는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 작은 버튼·태그를 50%로 원형화하지 않았나요?

□ 50%(원형)는 프로필 등 원형 의도 요소에만 쓰나요?

□ 작은 일반 컴포넌트는 px 레디어스(2~12px)인가요?

□ 의도치 않게 알약·원형이 된 요소가 없나요?

❓ FAQ

Q1. 원형 버튼(아이콘 버튼)은 50% 안 되나요? ’원형이 의도’인 아이콘 버튼은 50%가 맞을 수 있습니다. DS-050이 금지하는 건 ’사각형이어야 할 작은 일반 컴포넌트’를 원형화하는 것입니다. 원형 의도면 괜찮습니다.

Q2. 알약(pill) 모양 버튼은요? 의도된 알약 형태라면 디자인 선택일 수 있으나, KRDS의 일관된 px 레디어스 체계와는 다릅니다. 작은 컴포넌트는 px 적정값을 권장합니다. 알약을 쓰려면 일관되게, 그리고 콘텐츠 공간을 확보해야 합니다.

Q3. 프로필 사진은 50%가 맞죠? 네. 원형 프로필·아바타는 ‘원형 의도’ 요소라 50%가 적합합니다. DS-050과 충돌하지 않습니다.

Q4. 왜 작은 것만 문제인가요? 작은 요소일수록 50%의 영향이 커서 형태가 크게 변형되고 콘텐츠 공간이 부족해집니다. 큰 요소는 50%여도 영향이 덜하지만, 일반 컴포넌트는 px 체계를 따르는 것이 일관적입니다.

7. 마무리 — 형태 8개 규칙을 마치며

DS-050의 메시지로 형태 카테고리를 닫습니다.

작은 것을 원형으로 만들지 마라 — 형태는 의도대로, 일관된 체계 안에서.

작은 컴포넌트에 50%를 주면 형태가 일그러지고, 콘텐츠 공간이 부족해지며, px 기반 체계와 충돌합니다. 원형은 ‘원형 의도’ 요소(프로필 등)에만 쓰고, 작은 일반 컴포넌트는 px 적정값(2~12px)을 씁니다. 형태를 의도대로, 일관된 체계 안에서 다루는 것 — 이것이 형태 8개 규칙의 핵심이었습니다.

여기까지 형태 8개 규칙(043~050) 을 모두 마쳤습니다. 레디어스 5단계에서 시작해 범위·천장·단위·일관성·비례· 콘텐츠 보호·원형 금지까지, 모서리 둥글기를 체계로 다루는 법을 정리했습니다. 색상(26)·타이포그래피(16)·형태(8) 까지, 디자인 스타일의 절반(50개)이 완성됐습니다.

다음 편부터는 디자인 스타일의 가장 큰 분류, 레이아웃(24개 규칙) 으로 넘어갑니다. DS-051 — “브레이크 포인트별 최소 스크린 마진을 준수하여, 화면 크기에 맞는 적절한 마진을 유지한다.” 화면의 여백과 반응형 구조를 다룹니다.

다음 편 예고 ▶ 「051. 브레이크포인트별 최소 스크린 마진을 준수하여, 화면 크기에 맞는 적절한 마진을 유지하고 있다.」

우리 사이트의 작은 컴포넌트 형태가 올바른지 확인하려면? ViewCheck는 작은 컴포넌트에 50% 레디어스가 오용되지 않았는지, 원형이 의도된 요소에만 쓰였는지를 진단합니다.

📚 참고 출처

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

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

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