반응형 간격 체계 설계기

1. 간격 단계 입력

기본 루트 16px 기준 CSS 픽셀입니다. 1~6단계는 양의 정수이면서 각 단계가 이전 단계보다 커야 합니다.

두 밀도에 공통으로 적용하는 계획 값입니다. 높이는 미리보기의 최소 높이를 정하며 실제 글줄은 더 늘어날 수 있습니다. 폭 경고는 입력한 최소값과 안쪽 공간을 비교합니다.

설정을 바꾸면 표와 미리보기가 갱신됩니다.

2. 화면 폭별 간격 표

기본 루트 16px에서의 계산값입니다. 간격 0은 고정 0입니다.

폭·밀도 전체 점검

입력한 예시 요구값으로 최소·중간·최대 폭의 두 밀도와 네 컴포넌트를 검사합니다. 내용 폭 부족과 최소 높이 확장 건수를 표시합니다.

3. 컴포넌트 밀도·제약

두 밀도는 같은 토큰에 서로 다른 패딩·gap 단계를 배정합니다. 입력한 예시 요구값이 검사와 미리보기 최소 높이에 반영됩니다.

4. CSS·JSON 내보내기

CSS에 --space-0~6과 두 밀도의 컴포넌트 규칙이 포함되며 주석에 예시 계획 크기를 기록합니다. JSON에는 간격 단계·예시·밀도 배정이 담깁니다. 실제 폰트·문구·확대를 시험하세요.

/* Pixel examples assume a 16px root. rem bounds follow user font settings; test browser zoom and text wrapping in the final layout. */
:root {
  --space-0: 0;
  --space-1: clamp(0.25rem, calc(0.214286rem + 0.178571vw), 0.375rem);
  --space-2: clamp(0.5rem, calc(0.428571rem + 0.357143vw), 0.75rem);
  --space-3: clamp(0.75rem, calc(0.642857rem + 0.535714vw), 1.125rem);
  --space-4: clamp(1rem, calc(0.857143rem + 0.714286vw), 1.5rem);
  --space-5: clamp(1.5rem, calc(1.285714rem + 1.071429vw), 2.25rem);
  --space-6: clamp(2rem, calc(1.714286rem + 1.428571vw), 3rem);
}
/* Apply data-density="compact" or "comfortable" to a .spacing-kit ancestor. */
/* button sample requirement: 96px minimum content width; 20px content height. Planning values only. */
/* field sample requirement: 128px minimum content width; 24px content height. Planning values only. */
/* list sample requirement: 144px minimum content width; 24px content height. Planning values only. */
/* card sample requirement: 160px minimum content width; 96px content height. Planning values only. */
.spacing-kit { box-sizing: border-box; padding-inline: var(--space-2); }
.spacing-kit * { box-sizing: border-box; min-width: 0; }
.spacing-kit :is(.space-button, .space-field, .space-list, .space-card) { display: flex; }
.spacing-kit :is(.space-button, .space-field, .space-list) { align-items: center; }
.spacing-kit .space-card { flex-direction: column; }
.spacing-kit[data-density="compact"] .space-button { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-field { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-list { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-card { padding: var(--space-3) var(--space-3); gap: var(--space-2); }
.spacing-kit[data-density="comfortable"] .space-button { padding: var(--space-2) var(--space-3); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-field { padding: var(--space-2) var(--space-3); gap: var(--space-2); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-list { padding: var(--space-2) var(--space-3); gap: var(--space-2); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-card { padding: var(--space-4) var(--space-4); gap: var(--space-3); }