Border Radius
KRDS 기반 모서리 둥글기 시스템입니다. 표준형 스타일과 확장형 스타일을 제공하여 일관된 디자인을 만들 수 있습니다.
핵심: KRDS 표준형 스타일은 2px~12px의 6단계 스케일을 제공합니다. Tailwind의 rounded-* 클래스로 쉽게 적용할 수 있습니다.
Border Radius는 Tailwind 기본 설정을 사용하며, 별도의 CSS 변수 정의 없이 Tailwind 클래스로 바로 사용할 수 있습니다.
무엇인가요?
Border Radius는 UI 요소에 적용되는 모서리 둥글기로 브랜드의 시각적 아이덴티티를 표현합니다.
- 표준형 스타일: 2px~12px의 체계적인 5단계 스케일을 제공합니다.
- 확장형 스타일: 기관의 아이덴티티에 맞게 커스터마이즈할 수 있습니다.
- 계산 공식: 컨테이너 높이 × 1/8 비율로 일관성을 유지합니다.
- Tailwind 통합: KRDS 표준을 Tailwind 클래스로 쉽게 사용할 수 있습니다.
표준형 스타일
Xsmall-Small-Medium-Large-Xlarge-Max 6단계로 구성된 표준 스케일입니다.
표준형 스타일은 2px~12px의 radius 값을 사용하며, 정부가 주는 신뢰감과 안정감, 친근함을 표현하기 위한 값입니다. 과하게 둥근 형태로 변형되는 것을 방지하기 위해 최댓값을 12px로 설정합니다.
표준 스케일 표
| Level | Radius | Container Size | 적용 컴포넌트 |
|---|---|---|---|
| Xsmall | 2px | 8×8, 12×12, 16×16 | Element (인디케이터, 배지, 프로그레스 바) |
| Small | 4px | 20×20, 24×24, 32×32 | Chips, Checkbox, Radio, Switch, Tag |
| Medium | 6px | 40×40, 48×48 | Button, Input, Select, Textarea |
| Large | 8px | 56×56, 64×64 | Card, Container, Image |
| Xlarge | 10px | 72×72, 80×80 | Large Card, Panel |
| Max | 12px | 96×96, 120×120 | Banner, Dialog, Bottom sheet |
시각적 예시
각 radius 레벨의 시각적 차이를 확인할 수 있습니다
rounded-[2px]Xsmall - 2px
rounded-smSmall - 4px
rounded-mdMedium - 6px
rounded-lgLarge - 8px
rounded-xlXlarge - 10px
rounded-2xlMax - 12px
표준형 스타일 radius 계산법
표준형 스타일의 radius는 컨테이너 높이에 비율을 적용하여 계산합니다.
계산 공식
컨테이너 높이 × 비율 1/8 (0.125) = radiusradius 결과값 반올림계산 시 주의 사항
- 계산한 radius 값을 반올림했을 때 홀수인 경우, 숫자가 더 높은 짝수로 변경합니다.
- 높이(12) × 비율(0.125) = 1.5일 때 radius는 2로 적용합니다.
- 높이(20) × 비율(0.125) = 2.5일 때 radius는 4로 적용합니다.
- 높이(120) × 비율(0.125) = 15일 때 radius는 max 값인 12로 적용합니다.
계산 예시
| 컨테이너 높이 | 계산식 | 결과 | 적용 radius |
|---|---|---|---|
| 8px | 8 × 0.125 | 1.0 | 2px (짝수로 조정) |
| 20px | 20 × 0.125 | 2.5 | 4px (짝수로 조정) |
| 40px | 40 × 0.125 | 5.0 | 6px (짝수로 조정) |
| 64px | 64 × 0.125 | 8.0 | 8px |
| 80px | 80 × 0.125 | 10.0 | 10px |
| 120px | 120 × 0.125 | 15.0 | 12px (max 값) |
확장형 스타일
각 기관의 아이덴티티에 맞게 커스터마이즈된 radius 값을 설정할 수 있습니다.
1px 이상의 radius 값을 사용할 때는 표준형 스타일의 계층 구조를 참고하여 일관성을 유지합니다.
radius 비율 적용 방법
컨테이너 높이 × 비율 = radius 값
- 기준이 되는 컴포넌트를 기관에 맞는 radius 값을 테스트하여 비율 값을 찾습니다.
- 그 비율로 사용되는 컴포넌트 높이 값 기준으로 radius 값을 적용합니다.
주의 사항
- 디자인 시스템에서 radius 값은 짝수로 사용하는 것을 권장합니다.
- 컨테이너와 비율을 계산 후 나온 수치가 홀수이거나 소수점으로 나올 시 함께 사용될 컴포넌트를 고려하여 근사치에 맞게 올림 하여 짝수의 값을 사용합니다.
표현 방법
radius 값은 px와 % 단위로 설정할 수 있습니다.
px 값 사용
버튼이나 입력 필드 같은 요소는 크기에 맞는 일관된 둥글기 설정이 중요하므로 px 단위로 설정합니다.
% 값 사용
프로필 사진처럼 완전한 원형이 필요한 경우 % 값을 사용하여 더 직관적으로 설정할 수 있습니다.
% 설정 시 주의 사항
- 비율 변동: 컴포넌트마다 크기 비율이 달라지므로 radius 값 조정이 어려울 수 있습니다.
- 일관성 부족: % 단위로 설정하면 UI 요소마다 radius 값이 일정하지 않아 디자인의 일관성을 유지하기 어렵습니다.
- 작은 컴포넌트: 작은 컴포넌트에 50%를 적용하면 지나치게 둥글어져 의도와 다른 디자인 결과가 나올 수 있습니다.
사용 방법
Border Radius를 효과적으로 사용하는 방법입니다.
기본 사용
HANUI는 KRDS 표준형 스타일을 Tailwind 클래스로 제공합니다
비율에 맞게 적용
컨테이너 사이즈가 커지면 radius 값도 비율에 맞게 적용합니다
동일한 radius 적용
비슷한 크기의 구성 요소는 동일한 radius를 적용하면 디자인의 통일성과 조화로움을 높일 수 있습니다
Best Practices
- 일관성 유지: 비슷한 크기의 컴포넌트는 동일한 radius를 사용하세요.
- 비율 준수: 컨테이너 크기에 따라 적절한 radius를 적용하세요.
- 최댓값 제한: 표준형 스타일에서는 12px를 초과하지 않도록 하세요.
- 짝수 값 사용: 디자인 시스템에서는 짝수 radius 값을 권장합니다.
- 용도에 맞는 단위: 일반 요소는 px, 원형 요소는 %를 사용하세요.
참고 자료
KRDS Border Radius 관련 문서입니다.