간격 스케일 생성기 — 일관된 스페이싱 시스템

일관성 있는 스페이싱이 좋은 UI 디자인의 비결입니다. 임의적인 간격 대신 수학적 시스템을 사용하세요.

스페이싱 스케일 접근법

• 4px 기준: 4의 배수 사용 (4, 8, 12, 16, 24, 32, 48, 64...)
• 8px 기준: 8의 배수 사용 (8, 16, 24, 32, 48, 64, 80...)
• 모듈러 스케일: 비율로 계산

Tailwind CSS 스페이싱 시스템

Tailwind는 4px(0.25rem) 기준의 세밀한 스케일을 사용합니다: p-1=4px, p-2=8px, p-4=16px, p-8=32px...

간격 결정 원칙

• 관련된 요소는 가깝게 (내부 패딩)
• 독립된 섹션은 멀게 (섹션 간격)
• 같은 레벨의 요소는 같은 간격
• 계층 구조를 간격으로 표현

CSS 커스텀 속성으로 구현

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --space-16: 64px;
}