Spacing

간격(spacing)은 요소 사이의 여백을 정의하는 토큰입니다. padding·margin·gap 값을 하나의 스케일에서 선택하면 화면 전체가 일관된 간격 체계를 따릅니다.

개요

밀당 디자인시스템의 간격은 Tier 1 토큰¹ 스케일 하나로 통일되어 있습니다. 2px부터 80px까지 정의된 값만 사용하며, 그 사이의 임의 값은 사용하지 않습니다. 이 스케일은 Figma의 spacing 변수를 기준으로 정의되어 있습니다.

• 용도: padding·margin·gap 등 요소 사이의 여백
• 단위: 픽셀(px). 토큰 이름이 곧 px 값입니다(8 = 8px)
• 음수: 양수 토큰을 그대로 음수로 사용할 수 있으며(-8 등), 의도적으로 겹칠 때만 사용합니다

스케일

양수 토큰

padding·margin·gap 등 일반적인 여백에 사용하는 기본 스케일입니다.

음수 토큰

음수 토큰은 요소를 의도적으로 겹칠 때(overlap, 포커스 영역 확장 등)에만 사용하고, 일반적인 여백에는 사용하지 않습니다.

사용법

DS 컴포넌트를 사용하면 컴포넌트 내부 간격은 스케일에 맞춰 자동으로 적용됩니다. 대부분의 경우 간격을 직접 지정할 필요가 없습니다.

레이아웃 여백처럼 앱에서 직접 간격을 지정할 때는 spacing 토큰을 CSS 변수로 참조합니다. styles.css를 불러오면 전 스케일이 --ids-spacing-* 변수로 노출됩니다.

.toolbar {
  display: flex;
  gap: var(--ids-spacing-8);
  padding: var(--ids-spacing-16);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우(Panda 실행 환경)에는 shorthand padding="16", componentToken 참조 '{spacing.16}', arbitrary 값² [7px]도 사용할 수 있습니다. 발행 패키지를 설치해 사용하는 환경에서는 위 CSS 변수 방식을 사용합니다.

권장 사항

/* 지양: 음수 margin 으로 상쇄하면 실제 여백(12px)이 값에 드러나지 않는다 */
padding-inline: var(--ids-spacing-16);
margin-inline: -4px;

/* 권장: 최종 여백을 스케일 값으로 직접 지정하면 값이 그대로 결과가 된다 */
padding-inline: var(--ids-spacing-12);