큰 그릇엔 큰 둥글기를

KRDS DS-048 — 컨테이너 사이즈가 커지면 래디어스 값도 비율에 맞게 적용하고 있다.

0. 들어가며 — 크기에 어울리는 둥글기

레디어스의 여러 면(단계·범위·천장·단위·일관성)을 봤습니다. 이번 48편은 컨테이너 크기와 레디어스의 비례 입니다.

같은 레디어스 값이라도 작은 요소와 큰 요소에서 다르게 느껴집니다. 작은 버튼의 8px은 꽤 둥글게 보이지만, 큰 카드의 8px은 거의 각져 보이죠. 그래서 컴포넌트가 커지면 레디어스도 (천장 12px 안에서) 그에 맞게 키워야 자연스럽습니다. DS-048은 이 ’크기에 비례하는 레디어스’를 규정합니다. 이번 편은 왜 둥글기가 크기에 비례 해야 하는지를 풀어냅니다.

1. 규칙 원문 — 비율 적용

DS-048 (디자인 스타일 > 형태) “컨테이너 사이즈가 커지면 래디어스 값도 비율에 맞게 적용하고 있다.”

컴포넌트(컨테이너)가 커질수록 레디어스도 비례해서 키우라는 뜻입니다(단, 천장 12px 이내, DS-045).

정리: 큰 컴포넌트에는 (12px 이내에서) 그에 비례하는 큰 레디어스를 적용하라. 이게 DS-048입니다.

2. 왜 비례해야 하나 — 시각적 균형

레디어스가 크기에 비례하지 않으면 시각적 균형이 깨집니다.

작은 태그에 12px 레디어스를 주면 너무 둥글어 알약처럼 일그러지고(DS-050), 큰 카드에 2px을 주면 둥글기가 거의 안 보여 각진 느낌이 됩니다. 즉 한 레디어스 값을 모든 크기에 똑같이 쓰면, 작은 것엔 과하고 큰 것엔 부족해집니다. 그래서 크기에 맞춰 레디어스를 조정해야 모든 컴포넌트가 ‘적당히 둥근’ 균형을 갖습니다.

이는 43편(컴포넌트 크기 기준 5단계)의 연장입니다. 5단계가 크기별 레디어스를 정의했다면, DS-048은 그 적용 원리 — ’크면 큰 단계, 작으면 작은 단계’를 명시합니다. 작은 요소는 작은 레디어스(2~4px), 중간은 중간(8px), 큰 요소는 큰 레디어스(12px)처럼, 크기에 비례하는 둥글기를 쓰는 것이죠. 그래야 화면의 모든 요소가 자기 크기에 어울리는 둥글기로 조화롭습니다.

핵심은 ’비례하되 천장(12px)은 지킨다’는 것입니다. 컨테이너가 아무리 커져도 레디어스는 12px에서 멈춥니다 (DS-045). 즉 작은 것부터 큰 것까지 크기에 비례해 레디어스가 커지되, 12px이 그 비례의 끝입니다. 비례와 천장이 함께 작동합니다.

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

흔한 위반 패턴

함정 ① 일률적 레디어스. 모든 크기에 같은 값 → 작은 건 과하고 큰 건 부족. → 크기 비례. 함정 ② 큰 요소 각짐. 큰 카드에 작은 레디어스 → 둥글기 안 보임. → 큰 단계. 함정 ③ 작은 요소 과둥글. 작은 태그에 큰 레디어스 → 일그러짐(DS-050). → 작은 단계. 함정 ④ 천장 무시. 비례하다 12px 초과 → 상한 위반. → 12px에서 멈춤.

무엇을 점검하나

크기 비례 — 컴포넌트 크기에 비례해 레디어스가 적용됐는가.

균형 — 작은 요소·큰 요소 모두 적당히 둥근가.

천장 준수 — 비례하되 12px을 넘지 않는가.

Before / After

/* ❌ Before: 모든 크기에 같은 레디어스 */ .tag, .btn, .card { border-radius: 8px; } /* 태그엔 과하고 카드엔 부족 */ /* ✅ After: 크기에 비례(12px 이내) */ .tag { border-radius: 2px; } /* 작은 요소 */ .btn { border-radius: 8px; } /* 중간 */ .card { border-radius: 12px; } /* 큰 요소(천장) */

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

역할	책임
디자이너	컴포넌트 크기별 레디어스 비례 설계
퍼블리셔/개발	크기별 레디어스 토큰 적용

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

다양한 크기의 둥근 컴포넌트가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 큰 컴포넌트가 작은 것보다 더 둥근가요(비례)?

□ 작은 요소가 과하게 둥글지 않나요?

□ 큰 요소가 각져 보이지 않나요?

□ 비례하되 12px을 넘지 않나요?

❓ FAQ

Q1. 큰 카드는 12px보다 더 둥글어도 되지 않나요? 아닙니다. 천장은 12px입니다(DS-045). 큰 요소도 12px이면 충분히 둥글고, 그 이상은 과합니다. 비례는 12px 이내에서 합니다.

Q2. 비례를 어떻게 계산하나요? 정밀한 공식보다 ’크기 그룹별 단계’로 접근합니다 — 작은 요소는 작은 단계, 큰 요소는 큰 단계(43편). KRDS 토큰의 크기별 매핑을 쓰면 자동입니다.

Q3. 반응형에서 요소가 커지면 레디어스도 키우나요? 화면 크기에 따라 컴포넌트가 크게 달라지면 레디어스를 조정할 수 있지만, 보통은 컴포넌트 종류별 고정 단계로 충분합니다. 핵심은 ’크기 그룹에 맞는 둥글기’입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 컴포넌트 크기별로 적정 레디어스를 매핑해 둡니다. 채택하면 DS-048이 충족됩니다.

6. 마무리 — 크기에 어울리는 둥글기

DS-048의 메시지는 비례의 조화를 담습니다.

둥글기는 크기에 비례해야 한다 — 큰 그릇엔 큰 둥글기를, 단 천장(12px)은 지키며.

같은 레디어스라도 크기에 따라 다르게 느껴지므로, 컴포넌트가 커지면 둥글기도 비례해 키워야 균형이 맞습니다. 작은 것엔 작은 둥글기, 큰 것엔 큰 둥글기 — 단 12px 천장 안에서요. 비례와 천장이 함께 작동해, 모든 요소가 자기 크기에 어울리는 조화로운 둥글기를 갖습니다.

다음 편은 과한 레디어스의 부작용을 다룹니다. DS-049 — “과한 래디어스 값 적용으로 콘텐츠에 영향을 주지 않으며, 둥근 형태를 사용할 땐 내부 패딩값을 충분히 준다.” 둥글기가 콘텐츠를 침범하지 않게 하는 법을 살펴봅니다.

다음 편 예고 ▶ 「049. 과한 래디어스 값 적용으로 콘텐츠에 영향을 주지 않고 있으며, 둥근 형태를 사용할 땐 내부 패딩값을 충분히 주고 있다.」

우리 사이트의 레디어스가 크기에 비례하는지 확인하려면? ViewCheck는 컴포넌트 크기에 비례해 레디어스가 적용됐는지, 천장을 지키는지를 진단합니다.

📚 참고 출처

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

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

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