모서리의 둥글기에도 체계가 있다

KRDS DS-043 — 레디어스를 컴포넌트의 사이즈 기준 5단계로 구성하고 있다.

0. 들어가며 — 디자인 스타일의 세 번째 축, ‘형태’

색상(26편)과 타이포그래피(16편)를 마치고, 이번엔 디자인 스타일의 세 번째 분류 — 형태(Shape) 입니다. 그 첫 주제는 레디어스(radius), 즉 모서리의 둥글기입니다.

버튼, 카드, 입력칸… 화면의 거의 모든 요소에는 모서리가 있고, 그 모서리는 각지거나 둥글게 처리됩니다. 이 둥글기를 레디어스(border-radius) 라 부르죠. 사소해 보이지만, 레디어스는 화면의 인상을 크게 좌우 합니다. 각진 모서리는 단단하고 격식 있는 느낌을, 둥근 모서리는 부드럽고 친근한 느낌을 줍니다.

DS-043은 이 레디어스를 컴포넌트 크기 기준 5단계로 구성하라고 규정합니다. 색을 팔레트 단계로(4편), 투명도를 5단계로(10편) 관리했듯, 둥글기도 단계로 체계화하라는 것이죠. 이번 편은 레디어스를 왜 단계로 관리해야 하는지, 그 체계가 어떻게 일관된 화면을 만드는지를 풀어냅니다.

1. 규칙 원문 — 5단계 체계

DS-043 (디자인 스타일 > 형태) “레디어스를 컴포넌트의 사이즈 기준 5단계로 구성하고 있다.”

“레디어스”

모서리의 둥글기입니다. CSS의 border-radius에 해당하죠. 값이 클수록 더 둥글어집니다.

“컴포넌트의 사이즈 기준 5단계”

레디어스를 컴포넌트 크기에 따라 5단계로 정의한다는 뜻입니다. 작은 컴포넌트는 작은 레디어스, 큰 컴포넌트는 큰 레디어스처럼, 크기에 맞는 둥글기를 5개 단계로 체계화하는 것이죠.

정리: 모서리 둥글기(레디어스)를 컴포넌트 크기 기준 5단계로 체계화하라. 이게 DS-043입니다.

2. 왜 레디어스를 단계로 관리하나

레디어스를 그때그때 감각으로 정하면 어떻게 될까요? 색·투명도에서 본 것과 같은 문제가 생깁니다.

요소마다 둥글기가 제각각이면(이 버튼은 4px, 저 버튼은 6px, 이 카드는 10px, 저 카드는 8px) 화면이 미묘하게 산만해집니다. 사람 눈은 이런 미세한 불일치를 무의식적으로 감지하죠. 같은 종류의 요소인데 둥글기가 다르면 ‘정돈되지 않은’ 인상을 줍니다. 반대로 레디어스가 단계로 정리되면, 같은 종류 요소는 같은 둥글기를 갖고, 화면 전체가 일관된 형태감을 갖습니다.

또한 단계로 관리하면 유지보수가 쉽습니다. “버튼을 좀 더 둥글게”라는 결정도, 단계 정의를 바꾸면 모든 버튼에 일관되게 적용되죠. 레디어스 값이 화면 곳곳에 흩어져 있으면 이런 일괄 조정이 불가능합니다. 이는 색을 팔레트로(DS-001), 투명도를 5단계로(DS-010) 관리하는 것과 정확히 같은 ’체계화’의 이점입니다.

KRDS가 디자인의 거의 모든 속성(색·명도·투명도·크기·둥글기)을 ’단계로 관리’하는 데는 일관된 철학이 있습니다 — 감각으로 무한한 값을 쓰지 말고, 정해진 유한한 단계에서 골라 쓰라. 그래야 일관되고, 예측 가능하고, 관리할 수 있습니다. 레디어스 5단계도 이 철학의 한 적용입니다.

3. ’컴포넌트 크기 기준’이라는 핵심

DS-043의 묘미는 단계를 ‘컴포넌트 크기 기준’ 으로 나눈다는 데 있습니다. 왜 크기를 기준으로 할까요?

레디어스는 컴포넌트 크기에 비례해야 자연스럽기 때문입니다. 작은 버튼에 큰 레디어스를 주면 모서리가 과하게 둥글어 형태가 일그러지고, 큰 카드에 작은 레디어스를 주면 둥글기가 거의 안 보여 효과가 없습니다. 즉 같은 레디어스 값이라도 컴포넌트 크기에 따라 다르게 느껴집니다.

그래서 KRDS는 레디어스를 컴포넌트 크기에 맞춰 5단계로 정의합니다 — 작은 요소(태그·배지 등)는 작은 단계, 중간 요소(버튼·입력칸)는 중간 단계, 큰 요소(카드·모달)는 큰 단계. 이렇게 하면 모든 컴포넌트가 자기 크기에 어울리는 둥글기를 갖고, 화면 전체의 둥글기 비례가 조화로워집니다. 큰 것은 적당히 더 둥글고, 작은 것은 적당히 덜 둥글게요.

이는 18편(고도)에서 본 ’요소에 맞는 단계 선택’과 통합니다. 단계는 그냥 다섯 개가 아니라, ’어느 크기의 컴포넌트에 어느 단계’라는 매핑까지 포함합니다. 그래야 단계가 실무에서 ’골라 쓰는 도구’로 작동하죠.

4. 레디어스가 만드는 인상 — 형태의 언어

레디어스는 단순한 장식이 아니라 화면의 인상과 성격을 만듭니다.

각진 모서리(레디어스 0)는 단단하고, 격식 있고, 전통적인 느낌을 줍니다. 반면 둥근 모서리는 부드럽고, 친근하고, 현대적인 느낌을 주죠. 둥글기의 정도에 따라 화면의 성격이 달라집니다. 살짝 둥근 모서리는 정돈된 안정감을, 많이 둥근 모서리는 캐주얼하고 친근한 느낌을 줍니다.

정부 서비스는 신뢰감과 친근함의 균형이 필요합니다. 너무 각지면 딱딱하고 권위적으로, 너무 둥글면 가볍게 보일 수 있죠. 그래서 적정한 레디어스(다음 편들에서 2~12px 범위로 다룸)로 ‘신뢰감 있되 친근한’ 인상을 만드는 것이 중요합니다. 그리고 그 둥글기가 5단계로 일관되게 적용되어야, 화면 전체가 통일된 성격을 갖습니다. 레디어스의 일관성은 곧 ’형태의 목소리’를 하나로 만드는 일입니다.

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

흔한 위반 패턴

함정 ① 제각각 레디어스. 요소마다 둥글기가 다름 → 산만, 부조화. → 5단계로 체계화. 함정 ② 크기 무시. 작은 버튼에 큰 레디어스, 큰 카드에 작은 레디어스 → 비례 부자연. → 크기 기준 단계. 함정 ③ 단계 미정의. 레디어스를 감각으로 → 일관성 붕괴. → 토큰으로 5단계 정의. 함정 ④ 혼재. 같은 종류 요소가 다른 둥글기 → 정돈 안 됨. → 동일 종류 동일 단계(DS-047).

무엇을 점검하나

단계 구성 — 레디어스가 5단계로 정의됐는가.

크기 매핑 — 컴포넌트 크기에 맞는 단계가 적용됐는가.

일관성 — 같은 종류 요소가 같은 레디어스인가.

토큰화 — 레디어스가 토큰으로 관리되는가.

Before / After

/* ❌ Before: 제각각 레디어스 */ .btn-a { border-radius: 4px; } .btn-b { border-radius: 6px; } /* 같은 버튼인데 다름 */ .card { border-radius: 10px; } /* ✅ After: 크기 기준 5단계 토큰 */ :root { --radius-1: 2px; /* 아주 작은 요소 */ --radius-2: 4px; /* 작은 요소(태그 등) */ --radius-3: 8px; /* 중간(버튼·입력칸) */ --radius-4: 12px; /* 큰 요소(카드) */ --radius-5: 16px; /* 가장 큰 요소 (값은 KRDS 토큰 기준) */ } .btn { border-radius: var(--radius-3); } .card { border-radius: var(--radius-4); }

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

역할	책임
디자인 시스템 담당 / 디자이너	레디어스 5단계와 크기별 매핑 설계
퍼블리셔/개발	레디어스를 토큰으로 구현

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

모서리가 있는 컴포넌트(버튼·카드·입력칸 등)가 있는 모든 사이트 = 해당. KRDS 토큰을 채택하면 레디어스 단계가 이미 정의돼 있습니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레디어스가 5단계로 정의돼 있나요?

□ 컴포넌트 크기에 맞는 둥글기가 적용됐나요?

□ 같은 종류 요소가 같은 레디어스인가요?

□ 레디어스가 토큰으로 관리되나요?

□ 요소마다 둥글기가 제각각이지 않나요?

❓ FAQ

Q1. 왜 5단계인가요? 컴포넌트 크기 범위(아주 작은 것~큰 것)를 적절히 커버하는 단계 수입니다. 너무 적으면 크기별 대응이 부족하고, 너무 많으면 관리가 복잡합니다. 5단계가 실용적 균형점입니다(투명도 5단계와 유사한 발상).

Q2. 정확한 단계 값은 어디서 받나요? KRDS 디자인 토큰에 레디어스 단계 값이 정의돼 있습니다. 다음 편들에서 그 범위(2~12px)와 규칙을 다룹니다.

Q3. 모서리를 다 각지게(레디어스 0) 하면 안 되나요? 완전히 각지면 딱딱한 인상을 줍니다. KRDS는 적정 레디어스로 친근함과 신뢰감의 균형을 권합니다. 다만 일부러 각진 스타일을 의도한다면 일관되게 적용해야 합니다.

Q4. 컴포넌트마다 다른 단계를 써도 되나요? 크기가 다르면 다른 단계가 맞습니다. 단, 같은 종류·비슷한 크기 요소는 같은 단계여야 합니다(DS-047). ’크기에 맞는 단계’가 핵심입니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 레디어스 5단계를 토큰으로 정의하고 컴포넌트별로 적용해 둡니다. 채택하면 DS-043이 충족됩니다.

8. 마무리 — 둥글기에도 질서를

DS-043의 메시지는 체계화의 원리를 형태에 적용합니다.

모서리의 둥글기도 감각이 아니라 체계다 — 컴포넌트 크기에 맞는 5단계로 일관되게.

레디어스를 단계로 관리하면, 같은 종류 요소가 같은 둥글기를 갖고, 컴포넌트 크기에 어울리는 둥글기가 적용되어 화면 전체가 일관된 형태감을 갖습니다. 이는 색·명도·투명도를 단계로 관리한 것과 같은, ’감각을 체계로 대체 한다’는 디자인 시스템의 일관된 철학입니다. 사소해 보이는 둥글기에도 질서를 부여하는 것 — 그 질서가 정돈된 화면의 인상을 만듭니다.

다음 편은 이 레디어스의 구체적 값 범위를 다룹니다. DS-044 — “2px~12px의 래디어스 값을 사용한다.” 둥글기의 적정 범위와, 왜 그 범위인지를 살펴봅니다.

다음 편 예고 ▶ 「044. 2px~12px의 래디어스 값을 사용하고 있다.」

우리 사이트의 레디어스가 체계적인지 확인하려면? ViewCheck는 레디어스가 5단계로 정의됐는지, 컴포넌트 크기에 맞게 적용됐는지, 같은 종류 요소가 일관된 둥글기인지를 진단합니다.

📚 참고 출처

KRDS 형태(Shape)·스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

KRDS 디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

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

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