Radius
컴포넌트와 콘텐츠 모서리의 둥글기
모서리는 요소의 인상을 정한다. 같은 모서리 값을 쓰면 화면마다 인상이 흔들리지 않는다. groo 는 당근 SEED 의 radius 스케일(2px ~ 24px 10단계와 full)을 쓴다.
r0_52pxr14pxr1_56pxr28pxr2_510pxr312pxr3_514pxr416pxr520pxr624pxfull9999px토큰
| 토큰 | 값 | 옛 이름(별칭) |
|---|---|---|
radius-r0_5 | 2px | radius-xs |
radius-r1 | 4px | radius-sm |
radius-r1_5 | 6px | — |
radius-r2 | 8px | radius-md |
radius-r2_5 | 10px | — |
radius-r3 | 12px | radius-lg |
radius-r3_5 | 14px | — |
radius-r4 | 16px | radius-xl |
radius-r5 | 20px | radius-2xl |
radius-r6 | 24px | — |
radius-full | 9999px | — |
옛 이름(radius-xs … radius-2xl)은 같은 값의 별칭이다.
컴포넌트가 쓰는 모서리
지금 컴포넌트는 토스 톤을 쓴다 — 대부분 4px, 콘텐츠 컨테이너 8px, 작은 박스 2px, 알약 · 원형은 full. 컴포넌트마다 SEED 와 나란히 놓고 다시 정하는 중이다.
| 컴포넌트 | radius | 값 | 비고 |
|---|---|---|---|
| Form / Action | |||
button | r2 · r3 · full | 8px · 12px · 9999px | small · medium 8, large 12, xsmall 알약 — 2026-09-30 SEED Action Button 구조(v112, specs/components/button.yaml) |
floating-action-button | full | 9999px | 원 56 — 2026-10-04 SEED Floating Action Button(floating-action-button.yaml) |
input / textarea | r3 · r2 | 12px · 8px | large · medium — 2026-10-01 SEED Text Input · Textarea(specs/components/input.yaml · textarea.yaml) |
select 트리거 · Input Button | r3 · r2 | 12px · 8px | Input 과 같다 — 2026-10-01 SEED Select · Input Button(select.yaml · input-button.yaml) |
select 목록 | r5 | 20px | 칸 아래 뜨는 목록 |
select-box | r3 | 12px | 2026-09-30 SEED Select Box(select-box.yaml) |
slider (트랙 · 손잡이 · 말풍선) | full · r1_5 | 9999px · 6px | 트랙 · 손잡이는 원, 끄는 동안 뜨는 말풍선은 6 — 2026-10-09 SEED Slider(slider.yaml) |
toggle (아이콘 단추) | r2 | 8px | 누름 · 호버 바탕에만 보인다 — 2026-10-09(toggle.yaml). Toggle Group 은 걷었다 |
| 인증 코드 칸(Input OTP) | r3 · r2 | 12px · 8px | Input 한 칸 — large · medium, Input 과 같다. 2026-10-09(input-otp.yaml) |
color-swatch (색 칸 · 고른 고리) | full | 9999px | 원 40 — 2026-10-09(color-swatch.yaml) |
icon-picker (칸) | r3 | 12px | 칸 48 — 2026-10-09(icon-picker.yaml). 트리거는 Input Button |
quantity-picker (상자 · 버튼) | r2 · r3 | 8px · 12px | small · medium 8, large 12 — 버튼의 누름 바탕도 같은 모서리. 2026-10-15 SEED Quantity Picker(quantity-picker.yaml) |
attachment-input (타일 · 항목 · 드롭존 · ×) | r3 · r2 · full | 12px · 8px · 9999px | 첨부 타일 · 사진 · 파일 카드 · 드롭존 12, 파일 카드의 썸네일 칸 8, × 는 원 — 2026-10-15 SEED Attachment Input(attachment-input.yaml) |
chip | full | 9999px | 알약 — 2026-10-02 SEED Chip(specs/components/chip.yaml) |
checkbox (칸) | r1 | 4px | SEED Checkmark(2026-09-30, specs/components/checkbox.yaml). 이 표는 2px 이었지만 스펙 · 코드는 4px 이었다 |
radio-group (동그라미 · 점) | full | 9999px | 원형 — SEED Radiomark(2026-09-30, specs/components/radio-group.yaml) |
switch (track + thumb) | full | 9999px | 알약 |
list 줄 바탕 · 타일 | r2_5 · r3 | 10px · 12px | 누르면 들어오는 바탕 · 앞 타일 — 카드 안 바탕은 동심 모서리(itemRadius). 2026-09-30 SEED List(list.yaml) |
| Display | |||
badge | r1 · r1_5 | 4px · 6px | medium · large — 둥근 사각(알약은 누르는 Chip). 2026-10-03 SEED Badge(badge.yaml) |
notification-badge | full | 9999px | 점 · 숫자 알약 — 2026-10-03 SEED Notification Badge(notification-badge.yaml) |
avatar | full | 9999px | 원 하나(사각 변형을 걷었다) — 2026-10-03 SEED Avatar(avatar.yaml) |
card | r4 | 16px | 바닥 위 흰 면 + 1px 테두리 · 그림자 없음 — 카드 안 목록의 누름 바탕은 동심 10. 순자산 카드도 같다 — 2026-10-08 SEED 면(card.yaml) |
callout | r2_5 | 10px | 본문 안 안내 상자 — 2026-10-02 SEED Callout(callout.yaml) |
page-banner | — | 0 | 화면 폭 띠, 모서리 없음 — 2026-10-02 SEED Page Banner(page-banner.yaml) |
progress (트랙 · 채움) | full | 9999px | 막대 8 — 2026-10-03(progress.yaml) |
progress-circle | — | — | 원(SVG) · 끝이 둥근 호 — 2026-10-03 SEED Progress Circle(progress-circle.yaml) |
skeleton | r1 · r1_5 · r2 · r3 · r4 · full · — | 4px · 6px · 8px · 12px · 16px · 9999px · 0 | 글 8(기본) · 그림 자리는 Image Frame 대로 4 · 6 · 8 · 타일 12 · 카드 면 16 · 아바타 full · 화면 폭 사진 0 — 2026-10-03 SEED Skeleton · 그림 자리 2026-10-04(skeleton.yaml) |
content-placeholder | — | 0 | 제 모서리 없음 — 담는 틀이 자른다. 2026-10-03 SEED Content Placeholder(content-placeholder.yaml) |
image-frame | r1 · r1_5 · r2 · — | 4px · 6px · 8px · 0 | 폭으로 — 24 이하 · 48 이하 · 그 위 · 화면 폭. 스켈레톤 · 대체 그림 · 카드 면도 같다 — 2026-10-04 SEED Image Frame(image-frame.yaml · card-art.yaml) |
logo-tile | r2_5 · r3 · r3_5 | 10px · 12px · 14px | 32 · 40 · 48 — 크기 × 0.3(List 타일과 같다) — 2026-10-04(logo-tile.yaml) |
aspect-ratio | — | 0 | 비율 상자만 — 둥근 그림 틀은 Image Frame. 2026-10-04 SEED Aspect Ratio(aspect-ratio.yaml). Carousel 은 걷었다 |
divider(옛 separator) | — | — | 1px 선, 모서리 무관 — 2026-10-03 SEED Divider(divider.yaml) |
scroll-area (스크롤바 막대) | full | 9999px | 6px 알약 — 2026-10-10(scroll-area.yaml) |
resizable (손잡이 표시 · 위젯 자리표시) | r0_5 · r4 | 2px · 16px | 손잡이 표시 4 × 24 · 자리표시는 위젯(Card 면)과 같다 — 2026-10-10(resizable.yaml) |
scroll-fog | — | — | 마스크(모양 없음) — 2026-10-03 SEED Scroll Fog(scroll-fog.yaml) |
typography | — | — | 텍스트, radius 무관 |
| Overlay | |||
dialog / alert-dialog | r5 | 20px | 2026-10-02 SEED Dialog · Alert Dialog(dialog.yaml · alert-dialog.yaml) |
bottom-sheet (위 모서리) | r6 | 24px | 위 두 모서리만 — 2026-10-02 SEED Bottom Sheet(bottom-sheet.yaml) |
menu-sheet (위 모서리 · 묶음) | r5 · r4 | 20px · 16px | 2026-10-02 SEED Menu Sheet(menu-sheet.yaml) |
side-panel | — | 0 | 평평 — 높이 전체 · 모서리 없음. 2026-10-04 SEED Side Panel(side-panel.yaml), 옛 sheet 를 대신 |
popover · menu | r5 | 20px | 떠 있는 표면 — 2026-10-02 SEED Popover · Menu(popover.yaml · menu.yaml). 메뉴 줄의 알약은 r3 12px |
help-bubble · tooltip | r3 | 12px | 말풍선 — 2026-10-02 SEED Help Bubble(help-bubble.yaml) |
snackbar | r2 | 8px | 2026-10-02 SEED Snackbar(snackbar.yaml) |
| Navigation | |||
tabs (Line) | — | 0 | 각진 막대 — 2026-10-02 SEED Tabs(tabs.yaml). Chip Tabs 는 chip |
segmented-control (트랙 · 알약) | full | 9999px | 2026-10-02 SEED Segmented Control(segmented-control.yaml) |
menu 줄 바탕(알약) | r3 | 12px | 좌우 8 들인 알약 — 표면은 위 Overlay 의 menu |
pagination 칸 · table-pagination 화살표 | r2 | 8px | 칸 40 — 지금 쪽 채움 · 누를 때 바탕. 2026-10-04 SEED Pagination(pagination.yaml · table-pagination.yaml) |
top-navigation 아이콘 · 글 버튼 | r2 | 8px | 누를 때만 보이는 바탕 — 바 자체는 모서리 없음. 2026-10-04 SEED Top Navigation(top-navigation.yaml) |
bottom-navigation 바 · 가운데 + | full | 9999px | 떠 있는 알약 · 원 44 — 2026-10-04(bottom-navigation.yaml) |
side-navigation 항목 · 펼침 메뉴 | r2_5 · r5 | 10px · 20px | 항목 바탕 10 · 펼침 메뉴는 Menu 와 같은 20(줄 알약 12) — 2026-10-04 SEED Side Navigation(side-navigation.yaml). breadcrumb · navigation-menu 는 걷었다 |
| Disclosure | |||
accordion · collapsible (separated 면 · 누름 바탕) | r4 · r2_5 | 16px · 10px | separated · 카드 면은 Card 16, 트리거의 누름 바탕은 10(동심) · 모두 펼치기 8 — 2026-10-10 SEED Accordion(accordion.yaml · collapsible.yaml) |
tree-view 줄 · List 하위 줄 꺾쇠 단추 | r2_5 | 10px | 줄 바탕 · 포커스 링 · 꺾쇠 단추 — Side Navigation 항목과 같다. 2026-10-10(tree-view.yaml · list.yaml) |
| Data | |||
date-picker 날짜 원 · 기간 띠 | full · — | 9999px · 0 | 원 42 · 띠는 줄 끝에서 각지게 끊는다 — 2026-10-03 SEED Date Picker(date-picker.yaml) |
wheel-picker 선택 띠 | r2 | 8px | 2026-10-03 SEED Wheel Picker(wheel-picker.yaml) — Time Picker · 연 · 월 휠 |
table | — · r3 | 0 · 12px | 표는 모서리 없이 카드 안에 붙는다 · 일괄 작업 바 12 — 2026-10-08(table.yaml) |
chart | r3 · r1 | 12px · 4px | 툴팁 · 지표 타일 12 · 막대 위 · 열지도 칸 4 — 2026-10-08(chart.yaml) |
searchable-list | — | — | 줄은 List · 검색칸은 Input 그대로 — 2026-10-08(searchable-list.yaml) |
swipe-actions 배지 | full | 9999px | 원형 배지 36 — 2026-10-08(swipe-actions.yaml) |
footer 링크 포커스 링 | r1 | 4px | 바닥 자체는 모서리 없음 — 2026-10-15 SEED Footer(footer.yaml) |
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.