Radius
Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 표현해요.
Radius는 UI 구성 요소의 모서리를 둥글게 처리해서 부드럽고 현대적인 느낌을 줘요. 일관된 Radius 값은 브랜드 아이덴티티를 강화하고, 사용자 경험을 높이며, 다양한 화면과 맥락에서 시각적 일관성을 유지하는 데 중요한 역할을 해요.
Radius Tokens
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
9999px
<div className="rounded-r3 bg-bg-layer-default p-x4">카드</div>
<span className="rounded-full bg-bg-neutral-weak px-x3 py-x1">칩</span>사용 가이드라인
- 요소의 크기가 클수록 큰 Radius를 사용해요. 버튼은 크기에 따라
r2–r3, 카드와 시트는r3–r6을 주로 사용해요. - 알약 형태(Pill)가 필요한 칩·작은 버튼·배지에는
rounded-full을 사용해요. - 안쪽 요소의 Radius는 바깥 요소의 Radius에서 둘 사이의 여백을 뺀 값에 가깝게 맞추면 모서리가 자연스럽게 이어져요.
Do· 중첩 모서리 맞추기
바깥 r5(20px) 안에 여백 x2(8px)를 두고 안쪽은 r3(12px)을 써요.
Don't· 같은 Radius 중첩
안팎이 같은 Radius면 모서리 사이 간격이 고르지 않아 보여요.