디자인 간격 스케일 계산기
기본 간격, 비율, 시작 단계와 토큰 수를 설정해 인터페이스 간격 사다리를 만드세요.
값을 설정해 간격 스케일을 생성하세요.
간격 토큰
기본값 × 비율^단계를 반올림합니다.
사용 방법
사용 방법
- 양의 기본값과 px 또는 rem, 1보다 큰 비율을 입력합니다.
- 시작 단계와 토큰 수를 선택합니다.
- 반올림된 값을 확인하고 CSS 사용자 지정 속성을 복사하거나 다운로드합니다.
기하학적 토큰 사다리
각 토큰은 기본값 × 비율^단계입니다. 0단계는 기본값을 포함합니다.
투명한 반올림 규칙
px는 가장 가까운 정수로, rem은 소수점 이하 최대 4자리로 표시합니다. CSS 주석에 원래 공식을 남깁니다.
로컬 CSS 출력
모든 계산은 브라우저에서 이루어지며 디자인 값이나 프로젝트 파일을 업로드하지 않습니다.
자주 묻는 질문
더 알아보기
px를 왜 반올림하나요?
정수 픽셀이 많은 디자인 토큰에서 사용하기 쉽기 때문입니다.
시작 단계는 무엇을 바꾸나요?
0은 기본값이고 1은 기본값 × 비율입니다. 음수 단계는 더 작은 값을 만듭니다.
최적의 디자인 시스템을 정하나요?
아니요. 예측 가능한 수학적 스케일만 생성합니다.