Border Radius
모서리 둥글기는 UI의 인상을 결정하는 중요한 요소입니다. 컴포넌트는 6px(rounded-md)를 기준으로 설계되어 있습니다.
Radius Scale
샤프한 각에서 완전한 둥글기까지, 모든 radius 토큰
0px
rounded-none날카로운 각
2px
rounded-sm약간의 둥글기
4px
rounded-base기본 둥글기
= rounded (DEFAULT)
6px
rounded-md인풋, 버튼
8px
rounded-lg드롭다운, 컨테이너
12px
rounded-xl카드, 모달
16px
rounded-2xl피처 섹션
24px
rounded-3xl히어로 요소
9999px
rounded-full원형, 필
| Token | Value | Preview | 사용 사례 |
|---|---|---|---|
rounded-none | 0px | 날카로운 각 | |
rounded-sm | 2px | 약간의 둥글기 | |
rounded-base= rounded (DEFAULT) | 4px | 기본 둥글기 | |
rounded-md | 6px | 인풋, 버튼 | |
rounded-lg | 8px | 드롭다운, 컨테이너 | |
rounded-xl | 12px | 카드, 모달 | |
rounded-2xl | 16px | 피처 섹션 | |
rounded-3xl | 24px | 히어로 요소 | |
rounded-full | 9999px | 원형, 필 |
Visual Comparison
none
sm
base
md
lg
xl
2xl
Component Radius
요소의 역할에 따른 radius 선택 기준
4px
작은 요소
텍스트와 어우러지는 은은한 둥글기
Tag
roundedCode
rounded6px
인터랙티브 요소 기준
안정감과 클릭 가능한 인상을 동시에
Button
rounded-mdInput
rounded-mdToggle
rounded-mdSelect
rounded-mdSegmented
rounded-mdDropdown
rounded-md8px
컨테이너 요소
내부 요소와의 계층감 표현
Tooltip
rounded-lgAlert
rounded-lg12px
큰 요소
부드럽고 친근한 인상
Card
rounded-xlModal
rounded-xlPopover
rounded-xlfull
원형 및 필 요소
아이콘 역할을 하는 요소
Avatar
rounded-fullBadge
rounded-fullIndicator
rounded-fullNested Radius
둥근 요소를 중첩할 때는 시각적 일관성을 위해 내부 radius를 외부 radius에서 패딩을 뺀 값으로 설정해야 합니다.
inner=outer−padding잘못된 예
Content
outer: 24pxpadding: 12pxinner: 24px ✗
inner = outer 를 사용하면
곡선이 평행하지 않아 어색함
올바른 예
Content
outer: 24pxpadding: 12pxinner: 12px ✓
inner = outer − padding
24px − 12px = 12px로 자연스러운 곡선
자주 쓰는 패턴
outer: 12px
padding: 8px
inner: 4px
outer: 16px
padding: 12px
inner: 4px
outer: 24px
padding: 16px
inner: 8px