웹 디자이너를 위한 UI 디자인 스타일 가이드 래디어스

디자이너를 위한 공공 UI 디자인 가이드

모서리 둥글기의 원칙과 적용 방법

공공 웹사이트나 모바일 서비스를 디자인할 때, 디자이너가 가장 신경 써야 할 요소 중 하나는 형태(shape)입니다.

특히 버튼, 입력창, 카드와 같은 UI 컴포넌트의 모서리 둥글기(radius)는 단순히 시각적 미감을 넘어서 브랜드의 성격, 정보의 전달력, 사용자의 정서적 반응에까지 영향을 미치는 중요한 디자인 요소입니다.

많은 디자이너들이 컬러와 타이포그래피에는 민감하지만, 모서리 둥글기에 대한 일관된 기준을 세우는 데는 소홀한 경우가 많습니다.

하지만 모서리 둥글기는 작은 UI 요소 하나에도 서비스의 태도와 분위기를 담아낼 수 있는 수단입니다.

예를 들어, 각진 사각형은 신뢰감, 전문성, 안정성을, 둥근 형태는 친근함, 부드러움, 개방감을 줍니다.

이는 민간 서비스뿐 아니라 행정, 교육, 복지 등 다양한 공공 서비스에서도 사용자의 기대감을 충족시키는 데 중요한 역할을 합니다.

디자인 시스템에서 제안하는 둥글기 기준

공공 UI 디자인 가이드에서는 요소의 크기에 따라 총 5단계의 radius 값을 정의하고 있습니다.

이는 디자이너가 크기에 따라 합리적으로 둥글기를 적용할 수 있도록 돕는 체계입니다.

* Xsmall (2px)**: 인디케이터, 배지 등 소형 요소

* Small (4px)**: 체크박스, 토글, 칩 등 중소형 인터페이스

* Medium (6px)**: 버튼, 텍스트 입력창 등 일반적인 UI 요소

* Large (10px)**: 카드, 다이얼로그 등 콘텐츠 컨테이너

* Xlarge (12px)**: 배너, 바텀 시트 등 대형 컴포넌트

이러한 기준은 단순히 보기 좋은 디자인을 넘어서, 정보 위계와 사용자 경험의 흐름을 시각적으로 정돈해주는 역할을 합니다.

디자이너를 위한 둥글기 계산 공식

디자이너가 둥글기 적용 시 참고할 수 있는 실용적인 계산법도 제안됩니다.

요소 높이 × 0.125 (1/8 비율)로 radius를 산정하며, 결과값이 소수나 홀수일 경우 가장 가까운 짝수(px)로 반올림합니다.

예를 들어, 버튼의 세로 높이가 48px이라면, 48 × 0.125 = 6 → radius는 6px을 적용하는 것이 적절합니다.

단, 최대값은 12px을 넘기지 않도록 제한하는 것이 공공 디자인의 기준입니다.

px 단위와 % 단위, 언제 사용할까?

디자이너는 radius를 설정할 때 px 단위와 % 단위 중 어떤 것을 사용할지 결정해야 합니다.

* px 단위는 일반적인 버튼, 입력 필드, 카드와 같은 UI 구성요소에 안정적으로 적용됩니다.

* % 단위는 원형 프로필 이미지처럼 정사각형 구조를 기반으로 한 요소에서 주로 사용되지만, 작은 컴포넌트에 사용하면 과도한 둥글기가 발생해 일관성을 해칠 수 있습니다.

공공 디자인에서는 대부분의 경우 px 단위를 사용하는 것이 권장되며, 요소 크기 변화에도 일관된 둥글기 유지가 가능합니다.

실무에서 주의해야 할 적용 팁

디자이너가 실무에서 radius를 적용할 때 유의해야 할 점은 다음과 같습니다.

1. 비슷한 크기의 UI 요소에는 동일한 radius 값을 적용해 시각적 일관성을 확보합니다.

2. 컨테이너 크기가 클수록 radius 값도 비례적으로 증가시키되, 주변 요소와의 균형도 고려해야 합니다.

3. radius가 과도하게 크면 텍스트나 아이콘 등이 모서리 부분과 겹치거나 눌리는 경우가 생기므로 충분한 내부 여백(padding) 확보가 필요합니다.

4. 디자이너가 여러 서비스 간 UI를 통합 설계할 경우, radius 단계별 기준을 기반으로 공통 스타일 가이드를 정리해 두면 재사용성과 유지보수 효율이 높아집니다.

결론

모서리 둥글기는 작은 디테일처럼 보이지만, 디자이너가 전달하고자 하는 브랜드 메시지와 사용자 경험의 감도에 깊이 관여하는 요소입니다.

공공 서비스 디자인에서도 단순한 규칙을 넘어서 디자인의 명확성, 포용성, 접근성을 높이는 핵심 도구로 작용합니다.

디자이너라면 형태에 대한 기준을 전략적으로 활용해 더 설득력 있는 인터페이스를 설계할 수 있어야 합니다.