Spacing

PAI Design spacing은 요소 사이 거리와 컴포넌트 안쪽 여백을 일정하게 맞추는 기준이에요. gap, padding, margin에 같은 scale을 쓰면 화면 전체의 간격 기준이 더 일정해져요. size.interactive.*나 size.surface.*처럼 실제 크기를 정하는 token과 달리, spacing은 요소 사이 간격을 정할 때 사용해요.

Overview

현재 PAI Design spacing은 shared scale 하나로 운영해요. 작은 컴포넌트 안쪽 여백부터 큰 section 간격까지 같은 scale로 다뤄요.

색상처럼 role과 palette를 나누지는 않지만, raw px 값을 흩뿌리기보다 같은 spacing scale을 반복해서 쓰는 것이 더 중요해요.

기본 사용법

간격이 필요할 때는 숫자를 직접 쓰기보다 tokenVars에서 spacing token을 가져와 사용해요.

import { tokenVars } from "@pai-design/tokens";

const fieldGap = tokenVars["space.4"];
const dialogPadding = tokenVars["space.5"];
const sectionGap = tokenVars["space.6"];

기본 gap이 고민될 때는 space.4부터 시작해보세요. 떠 있는 표면이나 더 큰 묶음에는 space.5나 space.6을, layout 단위 분리에는 space.10 이상을 자주 사용해요.

Spacing Scale

PAI Design spacing은 4px 기준으로 자주 쓰는 단계만 남긴 scale이에요. component 내부 여백뿐 아니라 section 간격과 layout 여백까지 같은 기준으로 사용할 수 있도록 64px까지 제공해요.

사용하는 기준

• space.1과 space.2: 아이콘과 텍스트처럼 아주 가까운 요소 사이 간격에 사용해요.
• space.3과 space.4: 작은 컴포넌트 안쪽 여백이나 기본 gap에 가장 자주 사용해요.
• space.5와 space.6: Dialog, HelpBubble처럼 표면 안쪽 여백이나 section 간격에 사용해요.
• space.8과 space.10: 한 단계 더 분리해야 하는 큰 묶음이나 화면 안쪽 안전 여백에 사용해요.
• space.12부터 space.16까지: 랜딩 section, 페이지 블록, 큰 layout 전환처럼 더 넓은 간격이 필요한 구간에 사용해요.

모든 컴포넌트에 같은 숫자를 고정하기보다, 비슷한 간격에는 같은 token을 반복해서 쓰는 쪽이 더 중요해요.