Dimension (Radius/ Spacing)
치수(Dimension)는 UI의 형태와 공간을 결정하는 구조적 뼈대입니다. 모서리의 곡률(Radius)과 요소 간의 여백(Spacing)을 체계적으로 통제하여 시각적인 안정감과 명확한 정보 위계를 제공합니다. 또한, 정의된 규칙을 통해 디자이너와 프론트엔드 개발자 간의 오차 없는 화면 구현과 효율적인 유지보수를 지원합니다.
Radius (곡률)
Radius 토큰은 컴포넌트 모서리의 둥근 정도를 제어하여 UI의 성격과 형태적 일관성을 정의합니다.
버튼이나 텍스트 입력창과 같은 작은 상호작용 요소부터 카드, 모달 등 넓은 컨테이너 요소까지, 각 컴포넌트의 크기와 위계에 맞는 논리적인 곡률을 부여하여 전반적인 시각적 완성도를 높입니다.
Token
Rem
Size(px)
Example
Radius 0
0rem
0
Radius 2
0.0625rem
2
Radius 4
0.125rem
4
Radius 6
0.25rem
Radius 8
0.375rem
8
Radius 10
0.5rem
10
Radius 12
0.625rem
12
Radius 14
0.75rem
14
Radius 16
0.875rem
16
Radius max 100
1rem
100
Spacing (간격/ 여백)
Spacing 토큰은 UI 요소 사이의 여백을 제어하여 화면의 정보 위계와 가독성을 결정합니다.
체계적인 시스템을 통해 간격을 규칙화하며, 정보의 연관성에 따라 여백의 크기를 차등 적용하여 콘텐츠를 직관적으로 그룹화하고 사용자의 인지 부하를 최소화합니다.
Token
Rem
Size(px)
Example
Spacing 0
0rem
0px
Spacing 1
0.0625rem
1px
Spacing 2
0.125rem
2px
Spacing 4
0.25rem
4px
Spacing 6
0.375rem
6px
Spacing 8
0.5rem
8px
Spacing 10
0.625rem
10px
Spacing 12
0.75rem
12px
Spacing 14
0.875rem
14px
Spacing 16
1rem
16px
Spacing 20
1.25rem
20px
Spacing 24
1.5rem
24px
Spacing 32
2rem
32px
Spacing 36
2.25rem
36px
Spacing 40
2.5rem
40px
Spacing 64
4rem
64px