Radius
Stable모서리 곡률과 형태(Shape)를 정의하여 일관된 톤앤매너와 시각적 위계를 완성합니다.
Overview
Border Radius(모서리 곡률)는 서비스의 첫인상과 컴포넌트 형태(Shape)를 결정합니다. Cabinet은 0px 직각부터 999px 풀 라운드까지 8단계 정밀 스케일을 제공하며, 기본 컴포넌트에는 중립적이고 단단한 6px ~ 10px을 사용합니다.
Balanced Shapes
직각(0px)부터 풀 라운드(999px)까지의 형태 규칙
Default: Button 8px · Card 10px · Badge 6pxPrimitive scale
물리적 픽셀 기준 8단계 곡률 스케일입니다. 모든 컴포넌트는 이 스케일 중 하나를 상속받습니다.
0px
00px2px
22px4px
44px6px
66px8px
88px10px
1010px16px
1616pxFull
full999pxPrimitive 토큰 세부 스펙 보기
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--guide-radius-0 | 0px | … |
--guide-radius-2 | 2px | … |
--guide-radius-4 | 4px | … |
--guide-radius-6 | 6px | … |
--guide-radius-8 | 8px | … |
--guide-radius-10 | 10px | … |
--guide-radius-16 | 16px | … |
--guide-radius-full | 999px | … |
Semantic shapes
역할(Role)에 맞춰 컴포넌트에 연결된 시맨틱 토큰입니다. 테마 변경 시 이 토큰의 매핑만 수정하여 전체 룩앤필을 전환합니다.
| Token | 값 | 역할 | 적용 대상 | 프리뷰 |
|---|---|---|---|---|
--guide-radius-square | 0px | Square Container | 코드 블록 · 데이터 테이블 · 터미널 구획 | code_block |
--guide-radius-badge | 6px | Badge & Tooltip | 상태 뱃지 · 카테고리 태그 · 인라인 라벨 | Badge (6px) |
--guide-radius-button | 8px | Action Controls | Button · 폼 제출 액션 · 아이콘 버튼 | |
--guide-radius-input | 8px | Form Controls | Input · Select · Textarea 필드 | Input Field (8px) |
--guide-radius-card | 10px | Surface & Card | Bento 카드 · 패널 · 팝오버 메뉴 | Card Panel (10px) |
--guide-radius-modal | 16px | Modal & Sheet | 대화상자 · 모달 팝업 · 바텀시트 | Modal (16px) |
--guide-radius-chip | Full | Filter Chip & Pill | 선택형 필터 칩 · 캡슐 뱃지 | Filter Chip |
--guide-radius-avatar | Full | Avatar & Circle | 사용자 프로필 아바타 · 원형 점 | CD |
Nested radius
컨테이너 안에 내부 요소가 패딩을 두고 중첩될 때, 모서리 곡률 중심이 일치해야 매끄러운 동심원 곡선이 완성됩니다.
공식: R(inner) = R(outer) - Padding
Bad: 동일한 Radius 중첩
Outer 16px / Inner 16px (왜곡)
Good: 동심원 공식 적용
Outer 16px / Inner 4px (16 - 12 = 4px)
Token hierarchy
전역 CSS에서 시맨틱 토큰을 오버라이드하여 전체 테마를 전환할 수 있습니다.
TSX / CSS
/* 캐주얼 둥근 테마 (Pill) */
:root {
--guide-radius-button: var(--guide-radius-full);
--guide-radius-input: var(--guide-radius-full);
--guide-radius-card: var(--guide-radius-16);
}
/* 엔터프라이즈 직각 테마 (Sharp) */
:root {
--guide-radius-button: var(--guide-radius-0);
--guide-radius-input: var(--guide-radius-0);
--guide-radius-card: var(--guide-radius-0);
}Guidelines
- 컴포넌트 개발 시 하드코딩된 px 대신 항상
--guide-radius-*시맨틱 토큰을 사용합니다. - 컨테이너 내부 요소는 Nested Radius 공식(
R_inner = R_outer - Padding)을 적용해 모서리 왜곡을 방지합니다. - 체크박스(사각형)와 라디오(원형)는 다중/단일 선택을 구분하는 고유 형태이므로 radius를 임의로 변경하지 않습니다.