둥근 모서리가 글자를 먹지 않게

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

0. 들어가며 — 둥글기의 ‘안쪽’ 문제

지금까지 레디어스의 값·범위·비례를 봤습니다. 이번 49편은 레디어스가 콘텐츠에 미치는 영향을 다룹니다.

모서리를 둥글게 하면, 그 둥근 부분이 컴포넌트 안쪽 공간을 파고듭니다. 만약 둥글기가 과하거나 내부 여백 (패딩)이 부족하면, 모서리의 둥근 곡선이 안쪽 콘텐츠(글자·아이콘)를 가리거나 잘리게 만들 수 있습니다. DS-049는 이를 막는 두 가지를 규정합니다 — 과한 레디어스로 콘텐츠에 영향 주지 말 것, 그리고 둥근 형태에는 충분한 내부 패딩을 줄 것. 이번 편은 둥글기와 콘텐츠가 어떻게 공존해야 하는지를 풀어냅니다.

1. 규칙 원문 — 두 가지 요구

DS-049 (디자인 스타일 > 형태) “① 과한 래디어스 값 적용으로 콘텐츠에 영향을 주지 않고 있으며, ② 둥근 형태를 사용할 땐 내부 패딩값을 충분히 주고 있다.”

① “과한 레디어스로 콘텐츠에 영향 주지 않기”

둥글기가 과해서 안쪽 콘텐츠를 가리거나 잘리게 하지 말라는 뜻입니다.

② “둥근 형태엔 내부 패딩 충분히”

둥근 모서리를 쓸 때는 내부 여백(패딩)을 넉넉히 줘서, 콘텐츠가 모서리 곡선에 닿지 않게 하라는 뜻입니다.

정리: 둥글기가 콘텐츠를 침범하지 않게, 둥근 모서리엔 충분한 내부 패딩을 주라. 이게 DS-049입니다.

2. 왜 문제가 되나 — 모서리가 콘텐츠를 먹는다

둥근 모서리와 콘텐츠가 충돌하는 메커니즘을 봅시다.

모서리를 둥글게 하면, 사각형의 네 귀퉁이가 안쪽으로 깎여 들어갑니다. 그 깎인 곡선 영역에는 콘텐츠를 둘 수 없죠 — 두면 잘리거나 곡선에 걸쳐 어색해집니다. 둥글기가 클수록 이 곡선 영역이 커져, 콘텐츠가 들어갈 공간이 줄어듭니다.

만약 내부 패딩(여백)이 부족하면, 콘텐츠가 컴포넌트 가장자리까지 차서 둥근 곡선 영역과 겹칩니다. 그러면 글자의 끝이 모서리 곡선에 가려지거나, 아이콘이 곡선에 잘려 보이죠. 특히 작은 컴포넌트에 큰 레디어스를 주면 이 문제가 심각합니다 — 곡선이 차지하는 비중이 커서 콘텐츠가 들어갈 자리가 거의 없어집니다.

해결책은 두 가지입니다. 첫째, 레디어스를 과하게 키우지 않기(2~12px, DS-044). 적정 둥글기는 콘텐츠 공간을 크게 침범하지 않습니다. 둘째, 내부 패딩을 충분히 주기. 콘텐츠와 모서리 사이에 여백을 넉넉히 두면, 콘텐츠가 곡선 영역에 닿지 않습니다. 둥글기가 클수록 패딩도 더 넉넉해야 하죠. 이 둘을 함께 지키면 둥근 모서리와 콘텐츠가 충돌 없이 공존합니다.

3. 형태가 가독성을 해치지 않게

DS-049의 본질은 ‘형태가 기능(가독성)을 해치지 않게’ 입니다. 이는 이 시리즈의 일관된 정신과 통합니다.

둥근 모서리는 부드러운 인상을 주는 형태적 장식입니다. 하지만 그 장식이 콘텐츠를 가리면, 미관을 위해 기능을 희생하는 셈이 됩니다. 정부 서비스에서 콘텐츠(정보)는 장식보다 우선입니다. 글자가 모서리에 가려 안 읽히면, 아무리 예쁜 둥글기여도 실패죠. 그래서 둥글기는 콘텐츠를 침범하지 않는 선에서 절제되어야 하고, 충분한 패딩 으로 콘텐츠를 보호해야 합니다.

이는 색에서 ‘예쁨보다 가독성’(명도 대비), 글꼴에서 ‘멋보다 읽힘’(고딕)을 우선한 것과 같은 원리입니다. 형태(둥글기)도 미관을 추구하되 기능(콘텐츠 전달)을 해치지 않아야 한다 — 공공서비스의 일관된 우선순위가 형태에도 적용됩니다. 충분한 패딩은 단순한 여백이 아니라, 콘텐츠를 보호하는 안전 공간입니다.

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

흔한 위반 패턴

함정 ① 콘텐츠 잘림. 과한 둥글기 + 부족한 패딩 → 글자·아이콘이 모서리에 가림. → 둥글기 절제 + 패딩. 함정 ② 패딩 부족. 둥근 박스에 콘텐츠가 가장자리까지 → 곡선과 충돌. → 충분한 패딩. 함정 ③ 작은 요소 과둥글. 작은 박스에 큰 레디어스 → 콘텐츠 공간 없음. → 작은 단계(48편).

무엇을 점검하나

콘텐츠 영향 — 둥근 모서리가 콘텐츠를 가리거나 자르지 않는가.

내부 패딩 — 둥근 형태에 충분한 패딩이 있는가.

둥글기-패딩 균형 — 둥글기가 클수록 패딩도 넉넉한가.

Before / After

/* ❌ Before: 과한 둥글기 + 부족한 패딩 → 콘텐츠 가림 */ .box { border-radius: 16px; padding: 2px; } /* ✅ After: 적정 둥글기 + 충분한 패딩 */ .box { border-radius: 12px; padding: 16px; /* 콘텐츠가 곡선에 닿지 않게 */ }

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

역할	책임
디자이너	둥글기와 패딩의 균형 설계
퍼블리셔/개발	충분한 내부 패딩 구현

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

둥근 컴포넌트에 콘텐츠가 담기는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 둥근 모서리가 글자·아이콘을 가리지 않나요?

□ 둥근 박스에 충분한 내부 패딩이 있나요?

□ 콘텐츠가 모서리 곡선에 닿지 않나요?

□ 작은 박스에 과한 둥글기를 주지 않았나요?

❓ FAQ

Q1. 패딩을 얼마나 줘야 하나요? 콘텐츠가 모서리 곡선에 닿지 않을 만큼입니다. 둥글기가 클수록 더 넉넉히 주세요. 보통 레디어스보다 큰 패딩 이면 안전합니다.

Q2. 둥글기 때문에 콘텐츠가 잘리는지 어떻게 아나요? 컴포넌트 모서리 근처의 글자·아이콘이 곡선에 걸치거나 가려지는지 확인하세요. 특히 작은 박스, 큰 레디어스 조합에서 자주 발생합니다.

Q3. 둥글기를 줄이면 해결되나요? 둥글기를 적정값(2~12px)으로 줄이고 패딩을 충분히 주면 대부분 해결됩니다. 둘을 함께 조정하세요.

Q4. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 레디어스와 패딩이 균형 있게 설계돼 있습니다. 채택하면 DS-049가 대체로 충족됩니다.

7. 마무리 — 형태와 콘텐츠의 공존

DS-049의 메시지는 형태의 절제를 다시 확인시킵니다.

둥근 모서리는 콘텐츠를 침범하지 않아야 한다 — 형태는 기능(가독성)을 해치지 않는 선에서.

둥글기는 부드러운 인상을 주지만, 과하거나 패딩이 부족하면 콘텐츠를 가립니다. 미관을 위해 콘텐츠를 희생하면 안 되죠. 적정 둥글기(2~12px)와 충분한 패딩으로 콘텐츠를 보호하면, 형태와 콘텐츠가 충돌 없이 공존합니다. 이는 색·글꼴에서 본 ’미관보다 기능 우선’이 형태에 적용된 모습입니다.

다음 편은 형태의 마지막, 작은 컴포넌트의 원형화를 다룹니다. DS-050 — “작은 컴포넌트의 경우 래디어스 값을 50%로 적용하지 않는다.” 작은 요소를 원형으로 만들면 안 되는 이유를 살펴봅니다.

다음 편 예고 ▶ 「050. 작은 컴포넌트의 경우 래디어스 값을 50%로 적용하지 않고 있다.」

우리 사이트의 둥글기가 콘텐츠를 해치지 않는지 확인하려면? ViewCheck는 과한 레디어스가 콘텐츠를 가리지 않는지, 둥근 형태에 충분한 패딩이 있는지를 진단합니다.

📚 참고 출처

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

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

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