나란히 있는 것들은 둥글기를 맞춰라

KRDS DS-047 — 함께 사용이 되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용하고 있다.

0. 들어가며 — 함께 있는 것들의 조화

레디어스의 단계·범위·천장·단위를 봤습니다. 이번 47편은 레디어스의 일관성 — 특히 ’함께 있는 비슷한 요소끼리 둥글기를 맞추라’는 규칙입니다.

화면에는 비슷한 요소들이 나란히 놓이는 경우가 많습니다. 버튼 여러 개가 한 줄에, 카드 여러 개가 그리드에, 입력칸 여러 개가 폼에. 그런데 이 나란한 요소들의 둥글기가 제각각이면 — 한 버튼은 4px, 옆 버튼은 8px이면 — 미묘하게 어긋나 보입니다. DS-047은 이런 경우 둥글기를 동일하게 맞추라고 규정합니다. 이번 편은 왜 함께 있는 요소들의 둥글기를 맞춰야 하는지를 풀어냅니다.

1. 규칙 원문 — 동일 적용

DS-047 (디자인 스타일 > 형태) “함께 사용이 되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용하고 있다.”

“함께 사용되는 비슷한 크기의 구성 요소”

한 화면·영역에 나란히 놓이는, 크기가 비슷한 요소들입니다. 한 줄의 버튼들, 그리드의 카드들 등이죠.

“래디어스 값을 동일하게”

그 요소들의 둥글기를 같게 맞추라는 뜻입니다.

정리: 나란히 있는 비슷한 크기 요소들은 둥글기를 동일하게 맞춰라. 이게 DS-047입니다.

2. 왜 동일하게 — 미세한 불일치가 주는 불편

함께 있는 요소의 둥글기가 다르면 왜 문제일까요? 사람 눈은 나란히 놓인 것들의 미세한 차이를 민감하게 감지하기 때문입니다.

버튼 두 개가 나란히 있는데 하나는 모서리가 더 둥글고 하나는 덜 둥글면, 명확히 ’뭔가 안 맞는다’는 느낌이 듭니다. 무엇이 다른지 정확히 짚지 못해도, 정돈되지 않은 인상을 받죠. 이는 줄을 맞춰 선 사람들 중 한 명만 삐딱하게 서 있으면 즉시 눈에 띄는 것과 같습니다. 비교 대상이 바로 옆에 있으면 작은 차이도 크게 보입니다.

반대로 나란한 요소들의 둥글기가 같으면, 그들이 ’한 세트’로 보이고 정돈된 느낌을 줍니다. 같은 종류의 요소라는 시각적 신호이기도 하죠. 둥글기의 일관성은 요소들을 ’하나의 그룹’으로 묶어, 화면에 질서를 부여 합니다. 이는 43편(5단계 체계화)의 구체적 적용입니다 — 단계가 정의돼 있어도, 같은 종류 요소에 같은 단계를 일관되게 써야 비로소 일관성이 완성됩니다.

3. ’비슷한 크기’라는 조건의 의미

DS-047은 ’비슷한 크기’의 요소끼리 맞추라고 합니다. 이 조건이 중요합니다.

크기가 비슷한 요소(같은 줄의 버튼들)는 같은 둥글기여야 합니다. 하지만 크기가 크게 다른 요소(작은 태그 vs 큰 카드)는 둥글기가 달라도 됩니다 — 오히려 크기에 맞는 다른 단계를 써야 자연스럽죠(43편). 즉 ’무조건 다 같게’가 아니라, ‘비슷한 크기끼리 같게’ 입니다.

이는 43편에서 본 ’컴포넌트 크기 기준 단계’와 일관됩니다. 작은 요소는 작은 단계, 큰 요소는 큰 단계를 쓰되, 같은 크기 그룹 안에서는 동일 단계로 통일하는 것이죠. 작은 버튼들끼리는 같은 둥글기, 큰 카드들끼리는 같은 둥글기. 크기 그룹별로 일관성을 유지하는 것입니다. 그래서 DS-047은 ’크기를 무시하고 다 같게’가 아니라 ’크기 그룹 안에서 일관되게’라는 정교한 규칙입니다.

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

흔한 위반 패턴

함정 ① 나란한 요소 불일치. 한 줄 버튼들의 둥글기가 다름 → 어긋나 보임. → 동일 적용. 함정 ② 같은 카드 다른 둥글기. 그리드 카드들이 제각각 → 부조화. → 통일. 함정 ③ 단계 오적용. 같은 크기인데 다른 단계 → 일관성 붕괴. → 같은 단계.

무엇을 점검하나

나란한 요소 — 함께 놓인 비슷한 요소가 같은 둥글기인가.

그룹 일관성 — 같은 종류·크기 그룹이 통일됐는가.

크기별 구분 — 크기가 다른 그룹은 적절히 다른 단계인가.

Before / After

/* ❌ Before: 나란한 버튼들의 둥글기 불일치 */ .btn-submit { border-radius: 8px; } .btn-cancel { border-radius: 4px; } /* 옆 버튼인데 다름 */ /* ✅ After: 동일 적용 */ .btn { border-radius: var(--radius-3); } /* 모든 버튼 동일 */ .card { border-radius: var(--radius-4); } /* 모든 카드 동일(버튼과는 다른 단계) */

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

역할	책임
디자이너	같은 종류·크기 요소에 동일 레디어스 설계
퍼블리셔/개발	요소 종류별 레디어스 토큰 일관 적용

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

비슷한 요소가 나란히 놓이는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 나란한 버튼들의 둥글기가 같은가요?

□ 그리드의 카드들이 같은 둥글기인가요?

□ 같은 종류 요소에 같은 레디어스 단계를 쓰나요?

□ 크기가 다른 그룹은 적절히 다른 단계인가요?

❓ FAQ

Q1. 모든 요소의 둥글기를 다 같게 하라는 건가요? 아닙니다. ’비슷한 크기’끼리 같게 하라는 것입니다. 작은 태그와 큰 카드는 크기가 다르니 다른 단계를 써도 됩니다(43편). 같은 크기 그룹 안에서 통일하는 것이 핵심입니다.

Q2. 강조 버튼과 일반 버튼의 둥글기도 같아야 하나요? 크기가 비슷하면 같은 둥글기가 좋습니다. 강조는 색·두께로 하고, 형태(둥글기)는 통일하는 것이 정돈된 인상을 줍니다.

Q3. 토큰을 쓰면 자동으로 되나요? 요소 종류별로 레디어스 토큰을 정해 쓰면(.btn=radius-3 등) 자동으로 일관됩니다. 화면마다 값을 하드코딩하면 불일치가 생깁니다. 토큰 사용이 일관성의 핵심입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 종류별로 일관된 레디어스가 적용돼 있습니다. 채택하면 DS-047이 충족됩니다.

7. 마무리 — 나란한 것들의 조화

DS-047의 메시지는 일관성의 가치를 담습니다.

함께 있는 비슷한 요소들은 둥글기를 맞춰야 한다 — 나란히 놓인 것들의 미세한 불일치가 정돈을 깬다.

사람 눈은 나란히 놓인 것들의 작은 차이를 민감하게 감지합니다. 함께 있는 비슷한 요소의 둥글기가 다르면 어긋나 보이고, 같으면 ’한 세트’로 정돈되어 보입니다. 이는 43편의 5단계 체계가 실제 화면에서 일관성으로 완성되는 지점이죠. 크기 그룹 안에서 둥글기를 통일하는 것 — 그 작은 일관성이 정돈된 화면을 만듭니다.

다음 편은 컨테이너 크기와 레디어스의 관계를 다룹니다. DS-048 — “컨테이너 사이즈가 커지면 래디어스 값도 비율에 맞게 적용한다.” 요소가 커질 때 둥글기를 어떻게 조정하는지를 살펴봅니다.

다음 편 예고 ▶ 「048. 컨테이너 사이즈가 커지면 래디어스 값도 비율에 맞게 적용하고 있다.」

우리 사이트의 레디어스가 일관된지 확인하려면? ViewCheck는 함께 놓인 비슷한 요소들이 동일한 레디어스를 갖는지, 같은 종류 요소가 일관되게 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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