고정 둥글기는 px, 원형은 %

KRDS DS-046 — 래디어스 값을 px 또는 % 단위로 설정하고 있다.

0. 들어가며 — 둥글기를 표현하는 두 단위

레디어스의 단계(43편)·범위(44편)·천장(45편)을 봤습니다. 이번엔 그 값을 어떤 단위로 표현할지입니다.

레디어스를 표현하는 단위는 주로 두 가지 — px(픽셀) 와 %(백분율) 입니다. DS-046은 이 둘을 쓰라고 규정합니다. 흥미로운 건, 글자 크기에서는 px 대신 rem을 권했는데(35편), 레디어스에서는 px를 허용한다는 것입니다. 왜 다를까요? 그리고 px와 %는 각각 언제 쓸까요? 이번 편은 레디어스 단위의 선택 기준을 풀어냅니다.

1. 규칙 원문 — 두 단위

DS-046 (디자인 스타일 > 형태) “래디어스 값을 px 또는 % 단위로 설정하고 있다.”

레디어스를 px(고정 픽셀) 또는 %(백분율) 단위로 쓰라는 뜻입니다.

정리: 레디어스는 px 또는 % 단위로 설정하라. 이게 DS-046입니다.

2. px와 %의 차이 — 고정 둥글기 vs 원형

두 단위는 다른 종류의 둥글기를 만듭니다.

px — 고정된 둥글기

border-radius: 8px은 ‘모서리를 반지름 8픽셀로 둥글게’입니다. 컴포넌트 크기와 무관하게 둥글기가 8px로 고정되죠. 버튼·카드·입력칸처럼 ’모서리만 살짝 둥근’ 일반 요소에 씁니다. 레디어스 5단계(43편)와 2~12px 범위(44편)가 바로 이 px 값입니다.

% — 비율 기반 둥글기 (원형)

border-radius: 50%은 ’모서리를 요소 크기의 50%로 둥글게’입니다. 정사각형에 50%를 주면 완전한 원이 됩니다. 그래서 %는 주로 원형 요소(프로필 사진, 원형 아이콘 버튼 등)에 씁니다. 요소 크기에 비례해 둥글기가 정해지므로, 크기가 바뀌어도 원형이 유지됩니다.

즉 px는 ‘모서리 둥글기’, %는 ‘원형 만들기’ 에 주로 쓰입니다. 살짝 둥근 모서리는 px로, 완전한 원은 %로요. 둘 다 정당한 단위이고, 만들려는 형태에 따라 선택합니다.

3. 왜 글자는 rem인데 레디어스는 px인가

35편에서 글자 크기는 px 대신 rem을 쓰라고 했는데, 레디어스는 px를 허용합니다. 이 차이가 헷갈릴 수 있어 짚어둡니다.

글자 크기에 rem을 쓰는 이유는 사용자가 글자를 키울 때 함께 커지게 하기 위해서였습니다(접근성). 글자는 ’읽는 것’이라 사용자 확대 대응이 중요하죠.

반면 레디어스는 ’읽는 것’이 아니라 ’형태’입니다. 모서리 둥글기가 사용자 설정에 따라 커질 필요는 없습니다. 오히려 둥글기는 컴포넌트와 일관되게 고정되는 것이 자연스럽죠. 그래서 레디어스는 px로 고정해도 접근성 문제가 없습니다. 단위 선택은 ’그 속성이 사용자 확대에 반응해야 하는가’에 따라 갈립니다 — 글자(읽기)는 반응해야 하니 rem, 둥글기(형태)는 고정이 자연스러우니 px. 각 속성의 성격에 맞는 단위를 쓰는 것입니다.

다만 원형처럼 ’요소 크기에 비례’해야 하는 경우엔 %를 씁니다. 즉 px(고정)와 %(비례)를 형태의 필요에 따라 선택하는 것이죠.

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

흔한 위반 패턴

함정 ① 부적절한 단위. 일반 모서리에 % 사용 → 크기 따라 둥글기 변동, 예측 불가. → 고정 둥글기는 px. 함정 ② 작은 요소 50%. 작은 버튼에 50% → 원형화·일그러짐(DS-050). → px 단위 적정값. 함정 ③ 단위 혼란. px/% 외 모호한 단위 → px 또는 %로 통일.

무엇을 점검하나

단위 — 레디어스가 px 또는 % 단위인가.

용도 적합성 — 고정 둥글기는 px, 원형은 %로 적절히 쓰였는가.

작은 요소 — 작은 컴포넌트에 50%가 오용되지 않았는가(DS-050).

Before / After

/* ✅ 고정 둥근 모서리는 px */ .btn { border-radius: 8px; } .card { border-radius: 12px; } /* ✅ 완전 원형은 % */ .avatar { border-radius: 50%; } /* 프로필 원형 */

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

역할	책임
퍼블리셔/개발	레디어스를 px(고정)·%(원형) 단위로 적절히 구현
디자이너	형태(모서리 vs 원형)에 맞는 단위 지정

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

둥근 요소가 있는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레디어스를 px 또는 % 단위로 쓰나요?

□ 고정 둥근 모서리에 px를 쓰나요?

□ 완전 원형에만 %(50%) 를 쓰나요?

□ 작은 요소에 50%를 오용하지 않나요(DS-050)?

❓ FAQ

Q1. 왜 글자는 rem인데 레디어스는 px인가요? 글자는 ’읽는 것’이라 사용자 확대에 반응해야 해서 rem을 씁니다(35편). 레디어스는 ’형태’라 사용자 확대에 반응할 필요가 없어 px로 고정해도 됩니다. 속성의 성격에 맞는 단위를 쓰는 것입니다.

Q2. % 단위는 언제 쓰나요? 주로 완전 원형(프로필 사진, 원형 아이콘 등)에 50%로 씁니다. 요소 크기에 비례해 둥글기가 정해져, 크기가 바뀌어도 원형이 유지됩니다.

Q3. 일반 버튼에 50%를 주면 안 되나요? 작은 컴포넌트에 50%는 권장하지 않습니다(DS-050). 알약이나 원형으로 일그러질 수 있습니다. 일반 모서리는 px 단위의 적정값(2~12px)을 쓰세요.

Q4. rem으로 레디어스를 줘도 되나요? DS-046은 px·%를 명시합니다. 레디어스는 형태라 px 고정이 자연스럽습니다. 굳이 rem을 쓸 필요는 없습니다.

7. 마무리 — 단위는 형태의 필요에 따라

DS-046의 메시지는 단위 선택의 원리를 담습니다.

고정된 둥근 모서리는 px, 비율 기반 원형은 % — 만들려는 형태에 맞는 단위를 쓴다.

px는 컴포넌트 크기와 무관한 고정 둥글기를, %는 크기에 비례하는 원형을 만듭니다. 글자(읽기)는 사용자 확대에 반응해야 해서 rem을 썼지만, 레디어스(형태)는 고정이 자연스러워 px를 씁니다. 각 속성의 성격에 맞는 단위를 쓰는 것 — 이것이 단위 선택의 원리입니다.

다음 편은 레디어스의 ’일관성’을 다룹니다. DS-047 — “함께 사용되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용한다.” 비슷한 요소끼리 둥글기를 맞춰야 하는 이유를 살펴봅니다.

다음 편 예고 ▶ 「047. 함께 사용이 되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용하고 있다.」

우리 사이트의 레디어스 단위가 적절한지 확인하려면? ViewCheck는 레디어스가 px·% 단위로 쓰였는지, 고정 둥글기와 원형이 적절히 구분됐는지를 진단합니다.

📚 참고 출처

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

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

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