간격

간격은 9단계 숫자 중에서만 고른다. 가까운 것은 좁게, 다른 묶음은 넓게 띄워서 화면의 덩어리를 눈으로 구분한다. 간격 토큰은 서비스가 바뀌어도 같다.

이 페이지의 목차

간격 9단계#

값의 단위는 px이다. 막대의 길이가 실제 값이다. “앱에서 쓴 횟수”는 Mordy 앱 코드에서 이 토큰을 읽은 횟수다.

간격 토큰
토큰	값	용도	앱에서 쓴 횟수
아주 좁게`xxs--tds-space-xxs`	2px	정의만 있고 앱 코드에서는 아직 쓰지 않는다.	0
붙여서`xs--tds-space-xs`	4px	서로 붙어 있어야 하는 요소 사이. 예: 개념 본문에서 핵심 포인트 목록 위쪽.	9
가깝게`sm--tds-space-sm`	8px	관련된 작은 요소 사이. 버튼 두 개 사이, 칩 사이, 대화상자 버튼 사이.	62
보통`md--tds-space-md`	12px	카드 안의 요소 사이. `Gap`의 기본값, 시트 안 항목 사이, 섹션 제목 아래.	125
넉넉하게`lg--tds-space-lg`	16px	카드 안쪽 여백(`Card`), 시트와 하단 고정 영역의 아래 여백.	143
화면 좌우`gutter--tds-space-gutter`	20px	화면 가장자리와 내용 사이. `Screen`이 좌우에 20을 둔다.	119
구역 사이`xl--tds-space-xl`	24px	섹션과 섹션 사이. `SectionTitle`이 위에 24를 둔다.	83
큰 구역 사이`xxl--tds-space-xxl`	32px	화면 맨 아래 여백(`Screen` 스크롤 영역), 비어 있는 화면의 위아래 여백.	20
가장 크게`xxxl--tds-space-xxxl`	40px	앱에서 한 곳(검색 화면)에서만 쓴다.	1

서로 관련된 요소 사이는 sm(8)이나 md(12), 다른 묶음 사이는 xl(24)이나 xxl(32)를 쓴다. 한 화면에서 두 값을 섞어 쓰지 않는다. 예를 들어 섹션 사이를 24로 정했으면 모든 섹션 사이가 24다.
표에 없는 숫자(예: 10, 14, 18)를 간격으로 쓰지 않는다. 컴포넌트 안쪽 여백은 아래 “컴포넌트 치수”의 값이 정한다.

화면 배치 기준
항목	값	설명
화면 좌우 여백	`gutter`	20. `Screen`의 `padded`가 켜져 있으면 자동으로 들어간다.
화면 맨 아래 여백	`xxl`	32. 스크롤이 끝났을 때 내용이 화면 끝에 붙지 않게 한다.
하단 고정 영역	위 12, 아래 16, 좌우 20	`Screen`의 `footer`. 배경은 화면 배경색이다.
섹션 사이	`xl`	`SectionTitle`이 위에 24, 아래에 12(`md`)를 둔다.
카드 안쪽 여백	`lg`	`Card`는 16. `Panel`은 18을 직접 쓴다.
좁은 화면 기준	글자 배율을 반영한 폭이 370 미만	`useNarrow()`가 `true`를 돌려준다. 패널의 "전체보기" 링크가 헤더에서 패널 아래로 옮겨 간다.

컴포넌트의 높이와 안쪽 여백이다. 이 값은 간격 토큰이 아니라 컴포넌트 코드에 정해져 있다. 각 컴포넌트 페이지의 “치수와 토큰”에서도 볼 수 있다.

손가락이 닿는 영역은 눈에 보이는 크기보다 넓게 잡는다. 앱은 hitSlop(hit)으로 사방 10씩 넓힌다. 이웃한 눌림 요소 사이는 8 이상 띄워서 영역이 겹치지 않게 한다.

풀기

SmallButton: 보이는 크기 48 × 32, 누르는 영역 68 × 52 (점선)

간격 변수 쓰기

.section + .section { margin-top: var(--tds-space-xl); }
.card { padding: var(--tds-space-lg); }
.page { padding-inline: var(--tds-space-gutter); }

앱에서 쓰기

import { space } from '@/ui/tokens';

<View style={{ paddingHorizontal: space.gutter, gap: space.md }} />