Radius
Radius는 컴포넌트의 시각적 일관성을 유지하는 핵심 요소입니다. 각 해상도별로 정의된 Radius 토큰 값을 사용하여 반응형 환경에서도 동일한 디자인 경험을 제공합니다. 시멘틱 Radius 토큰을 도입해 디자이너 간 작업 기준을 통일하고, 시스템 전반의 일관성을 강화했습니다.
Radius
Radius는 컴포넌트의 시각적 일관성을 유지하는 핵심 요소입니다. 각 해상도별로 정의된 Radius 토큰 값을 사용하여 반응형 환경에서도 동일한 디자인 경험을 제공합니다. 시멘틱 Radius 토큰을 도입해 디자이너 간 작업 기준을 통일하고, 시스템 전반의 일관성을 강화했습니다.
Radius
Radius는 컴포넌트의 시각적 일관성을 유지하는 핵심 요소입니다. 각 해상도별로 정의된 Radius 토큰 값을 사용하여 반응형 환경에서도 동일한 디자인 경험을 제공합니다. 시멘틱 Radius 토큰을 도입해 디자이너 간 작업 기준을 통일하고, 시스템 전반의 일관성을 강화했습니다.
Primitive Tokens
Primitive Token은 반응형 대응을 위해 PC·Tablet은 동일 px 값을, Mobile은 자동 대응되는 px 값을 가지도록 설계된 기본 값 토큰입니다.
값 자체에 의미를 부여하지 않고, 오직 크기만 정의합니다.
value는 모서리를 얼마나 둥글게 만들지를 결정하는 수치이며, 값이 클수록 원에 가까워집니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
radius-2 | 2 | 2 | 1 |
radius-4 | 4 | 4 | 2 |
radius-6 | 6 | 6 | 4 |
radius-8 | 8 | 8 | 6 |
radius-10 | 10 | 10 | 8 |
radius-12 | 12 | 12 | 10 |
radius-16 | 16 | 16 | 12 |
radius-20 | 20 | 20 | 16 |
radius-24 | 24 | 24 | 20 |
radius-28 | 28 | 28 | 24 |
radius-32 | 32 | 32 | 28 |
radius-999 | 999 | 999 | 999 |
Primitive Tokens
Primitive Token은 반응형 대응을 위해 PC·Tablet은 동일 px 값을, Mobile은 자동 대응되는 px 값을 가지도록 설계된 기본 값 토큰입니다.
값 자체에 의미를 부여하지 않고, 오직 크기만 정의합니다.
value는 모서리를 얼마나 둥글게 만들지를 결정하는 수치이며, 값이 클수록 원에 가까워집니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
radius-2 | 2 | 2 | 1 |
radius-4 | 4 | 4 | 2 |
radius-6 | 6 | 6 | 4 |
radius-8 | 8 | 8 | 6 |
radius-10 | 10 | 10 | 8 |
radius-12 | 12 | 12 | 10 |
radius-16 | 16 | 16 | 12 |
radius-20 | 20 | 20 | 16 |
radius-24 | 24 | 24 | 20 |
radius-28 | 28 | 28 | 24 |
radius-32 | 32 | 32 | 28 |
radius-999 | 999 | 999 | 999 |
Primitive Tokens
Primitive Token은 반응형 대응을 위해 PC·Tablet은 동일 px 값을, Mobile은 자동 대응되는 px 값을 가지도록 설계된 기본 값 토큰입니다.
값 자체에 의미를 부여하지 않고, 오직 크기만 정의합니다.
value는 모서리를 얼마나 둥글게 만들지를 결정하는 수치이며, 값이 클수록 원에 가까워집니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
radius-2 | 2 | 2 | 1 |
radius-4 | 4 | 4 | 2 |
radius-6 | 6 | 6 | 4 |
radius-8 | 8 | 8 | 6 |
radius-10 | 10 | 10 | 8 |
radius-12 | 12 | 12 | 10 |
radius-16 | 16 | 16 | 12 |
radius-20 | 20 | 20 | 16 |
radius-24 | 24 | 24 | 20 |
radius-28 | 28 | 28 | 24 |
radius-32 | 32 | 32 | 28 |
radius-999 | 999 | 999 | 999 |
Semantic Token
박스가 여러 개 겹치는 레이아웃에서는 안쪽 박스에 바깥 박스보다 한 단계 작은 토큰을 적용합니다.
Primitive Token을 XL~XS 상대 크기 체계로 변환한 토큰입니다.
시각적 중요도·형태 비율·레이아웃 맥락에 맞춰 일관된 Radius를 적용합니다.
XL~XS 단위는 숫자보다 직관적으로 크기를 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive | Guidelines | |
|---|---|---|---|
| radius-28 | 컨테이너의 90% 이상을 차지하는 박스나 대형 배경 요소에 사용 | |
| radius-20 | 400 × 350px 이상이면서 컨테이너의 35% 이상을 차지하는 큰 박스나, 벤또(bento) 형태의 레이아웃에서 여러 박스가 조합될 때 사용 | |
| radius-16 | 가장 자주 사용되는 값으로, width / height가 400px 이하인 비교적 작은 박스에 사용 | |
| radius-12 | banner, info 등 width가 height의 3–4배 이상 긴 형태의 박스에 사용 | |
| radius-8 | 가장 작은 값으로, label, tag, button 등 소형 컴포넌트에 사용 | |
| radius-999 | 원형으로 만들고 싶은 박스의 높이 또는 너비 값의 50%로 사용한다. | |
Semantic Token
박스가 여러 개 겹치는 레이아웃에서는 안쪽 박스에 바깥 박스보다 한 단계 작은 토큰을 적용합니다.
Primitive Token을 XL~XS 상대 크기 체계로 변환한 토큰입니다.
시각적 중요도·형태 비율·레이아웃 맥락에 맞춰 일관된 Radius를 적용합니다.
XL~XS 단위는 숫자보다 직관적으로 크기를 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive | Guidelines | |
|---|---|---|---|
| radius-28 | 컨테이너의 90% 이상을 차지하는 박스나 대형 배경 요소에 사용 | |
| radius-20 | 400 × 350px 이상이면서 컨테이너의 35% 이상을 차지하는 큰 박스나, 벤또(bento) 형태의 레이아웃에서 여러 박스가 조합될 때 사용 | |
| radius-16 | 가장 자주 사용되는 값으로, width / height가 400px 이하인 비교적 작은 박스에 사용 | |
| radius-12 | banner, info 등 width가 height의 3–4배 이상 긴 형태의 박스에 사용 | |
| radius-8 | 가장 작은 값으로, label, tag, button 등 소형 컴포넌트에 사용 | |
| radius-999 | 원형으로 만들고 싶은 박스의 높이 또는 너비 값의 50%로 사용한다. | |
Semantic Token
박스가 여러 개 겹치는 레이아웃에서는 안쪽 박스에 바깥 박스보다 한 단계 작은 토큰을 적용합니다.
Primitive Token을 XL~XS 상대 크기 체계로 변환한 토큰입니다.
시각적 중요도·형태 비율·레이아웃 맥락에 맞춰 일관된 Radius를 적용합니다.
XL~XS 단위는 숫자보다 직관적으로 크기를 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive | Guidelines | |
|---|---|---|---|
| radius-28 | 컨테이너의 90% 이상을 차지하는 박스나 대형 배경 요소에 사용 | |
| radius-20 | 400 × 350px 이상이면서 컨테이너의 35% 이상을 차지하는 큰 박스나, 벤또(bento) 형태의 레이아웃에서 여러 박스가 조합될 때 사용 | |
| radius-16 | 가장 자주 사용되는 값으로, width / height가 400px 이하인 비교적 작은 박스에 사용 | |
| radius-12 | banner, info 등 width가 height의 3–4배 이상 긴 형태의 박스에 사용 | |
| radius-8 | 가장 작은 값으로, label, tag, button 등 소형 컴포넌트에 사용 | |
| radius-999 | 원형으로 만들고 싶은 박스의 높이 또는 너비 값의 50%로 사용한다. | |