모서리
모서리 둥글기는 7단계다. 클수록 부드럽고 장식적이다. 알약(pill)은 버튼, 칩, 탭 같은 짧은 눌림 요소에만 쓴다. 모서리 토큰은 서비스가 바뀌어도 같다.
이 페이지의 목차
모서리 7단계#
sm · 8pxmd · 12pxtile · 14pxlg · 16pxcard · 20pxsheet · 24pxpill · 999 (알약)| 토큰 | 값 | 용도 | 앱에서 쓴 횟수 |
|---|---|---|---|
작게sm--tds-radius-sm | 8px | 작은 태그와 썸네일의 모서리. | 6 |
입력 칸md--tds-radius-md | 12px | Field의 모서리, 시간 선택 띠, 대화상자 버튼(md + 2 = 14). | 55 |
타일tile--tds-radius-tile | 14px | 정의만 있다. 앱 코드는 같은 값 14를 숫자로 직접 쓴다(OptionRow, RowIcon). | 0 |
카드lg--tds-radius-lg | 16px | FeedbackCard, ChoiceCard, 메뉴 목록 같은 안쪽 카드. | 44 |
큰 카드card--tds-radius-card | 20px | Card의 모서리. | 18 |
시트sheet--tds-radius-sheet | 24px | Sheet와 dialog의 모서리. 시트는 위쪽 두 모서리만 둥글다. | 10 |
알약pill--tds-radius-pill | 999px | 버튼, 칩, 탭 같은 알약 모양. 가로가 어떤 길이든 양 끝이 완전히 둥글다. | 33 |
코드가 직접 쓰는 값#
앱 코드는 토큰에 없는 숫자도 직접 쓴다. 숫자별 횟수는 18이 가장 많고, 12, 10, 22, 14가 뒤따른다. 새 컴포넌트를 만들 때는 먼저 토큰을 쓰고, 아래 컴포넌트가 정한 값은 같은 종류의 면에서만 따라 쓴다.
| 값 | 쓰는 곳 | 설명 |
|---|---|---|
| 22 | Panel, SettingsGroup | 리포트와 설정의 흰 패널 |
| 18 | WellRow, 토스트, SwipeRow 뒷면 | 앱에서 가장 많이 쓰는 직접 값 |
| 14 | OptionRow, RowIcon | `radius.tile`과 같은 값 |
| 10 | SmallButton | 작은 사각형 버튼 |
| 높이의 절반 | PillTabs(26, 21), SubjectIcon(크기 × 0.28) | 크기에 비례하는 모서리 |
고르는 기준#
- 화면 가장자리에서 시작하는 면(시트, 대화상자)은
sheet(24)다. - 내용을 담는 카드는
card(20) 또는lg(16)다. 카드 안에 놓는 카드는 바깥 카드보다 한 단계 작게 한다. - 입력 칸과 작은 면은
md(12)다. - 글자 한두 단어가 들어가는 버튼, 칩, 탭만
pill이다. 큰 면(카드, 패널)을 알약으로 만들지 않는다. - 둥근 면 안에 또 둥근 면을 넣을 때 안쪽 모서리 = 바깥 모서리 − 바깥 여백으로 맞춘다. 예: 바깥 20, 여백 4이면 안쪽은 16.
웹에서 쓰기#
모서리 변수 쓰기
.panel { border-radius: var(--tds-radius-card); }
.chip { border-radius: var(--tds-radius-pill); }앱에서 쓰기
import { radius } from '@/ui/tokens';
<View style={{ borderRadius: radius.card }} />