CSS 간격 스케일 생성기

사용 방법

1. 1

   기준 크기 입력하기

   기준은 첫 단계의 값이며 1에서 64px 사이입니다. 4나 8에서 시작하는 팀이 많습니다.

2. 2

   비율 정하기

   배수를 1에서 3 사이로 정합니다. 1.25는 완만하게, 1.5는 빠르게 커지고, 2는 매 단계 두 배가 됩니다.

3. 3

   단계 수 정하기

   3에서 12 사이 정수로 --space-N 토큰이 몇 개 생성될지 정합니다.

4. 4

   px 또는 rem 고르기

   rem을 고르면 루트 글자 크기(1rem에 해당하는 px 값)를 8에서 32 사이로 함께 입력합니다. px를 고르면 이 칸은 숨겨집니다.

5. 5

   토큰 이름 정하기

   접두어 기본값은 space이고 --space-1처럼 이름이 붙습니다. size나 gap으로 바꾸면 모든 이름, var() 참조, 출력 형식이 함께 바뀝니다. 첫 글자는 영문자·밑줄·비 ASCII 문자 중 하나여야 하며, 그 뒤에는 이 문자들과 숫자·하이픈을 쓸 수 있습니다.

6. 6

   확인하고 복사하기

   토큰 이름과 크기, rem이면 px 환산값이 나란히 나오는 막대를 확인합니다. 막대를 누르면 그 토큰으로 안쪽 여백을 준 카드를 볼 수 있습니다. 마음에 들면 CSS, SCSS, 디자인 토큰 JSON 중 하나로 복사합니다.

작동 원리

:root {
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6.25px;
}

실제 예시

기준 4, 비율 2, 4단계, rem, 루트 16

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
}

기준 4, 비율 1.25, 8단계, px

:root {
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6.25px;
  --space-4: 7.81px;
  --space-5: 9.77px;
  --space-6: 12.21px;
  --space-7: 15.26px;
  --space-8: 19.07px;
}

기준 8, 비율 1.5, 5단계, rem, 루트 16

:root {
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.6875rem;
  --space-5: 2.5313rem;
}

기준 4, 비율 1.5, 4단계, rem, 루트 10

:root {
  --space-1: 0.4rem;
  --space-2: 0.6rem;
  --space-3: 0.9rem;
  --space-4: 1.35rem;
}

기준 4, 비율 1.25, 13단계

단계 수 칸 오류: 3~12 사이의 정수를 입력해 주세요.

기준 4, 비율 2, 3단계, rem, 루트 16, 접두어 size, SCSS 탭

$size-1: 0.25rem;
$size-2: 0.5rem;
$size-3: 1rem;

자주 하는 실수

• 작은 기준과 작은 비율은 비슷한 값만 만듭니다

  기준 4에 비율 1.25이면 처음 세 토큰이 4, 5, 6.25px입니다. 화면에서 구별하기 어려워 결국 팀원이 기억나는 대로 아무거나 쓰게 됩니다. 비율이나 기준을 키우세요.

• 비율 1은 같은 값만 나옵니다

  모든 단계가 기준값과 같습니다. 1도 범위 안이라 허용되지만 스케일이라고 할 수 없어서 도구가 경고를 보여 줍니다.

• 소수 픽셀은 테두리를 흐리게 할 수 있습니다

  7.81px 같은 값은 저밀도 화면에서 1px 테두리나 간격의 가장자리를 흐릿하게 그릴 수 있습니다. 아주 작은 간격은 정수 픽셀이 되는 값을 쓰는 편이 좋습니다.

• 루트 크기가 틀리면 모든 rem 값이 어긋납니다

  페이지 루트가 18px인데 루트 16으로 만들었다면 16px로 의도한 토큰이 18px로 그려집니다. 루트 설정을 실제 html 글자 크기와 맞추세요.

• 등비 스케일은 금방 커집니다

  기준 4에 비율 2이면 여섯 단계 만에 4, 8, 16, 32, 64, 128에 이릅니다. 6~7단계를 넘기면 레이아웃용 간격은 별도의 섹션 스케일로 두세요.

자주 묻는 질문

더 깊이 읽기

• 9분 읽기CSS clamp() 유동 타이포그래피: 공식을 처음부터 유도하기유동 타입은 여러 개의 브레이크포인트를 CSS 한 줄로 대신합니다. 그래프 위의 두 점에서 그 한 줄을 직접 유도해 보면, 생성기가 만든 값도 스스로 검산할 수 있습니다.