Design Tools
간격 스케일 생성기
디자인을 위한 일관된 간격 시스템을 생성합니다
프리셋
4px
12
비주얼 미리보기
0
0rem
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
7
1.75rem
8
2rem
9
2.25rem
10
2.5rem
11
2.75rem
12
3rem
스케일 테이블
| 이름 | px | rem | 변수 |
|---|---|---|---|
| 0 | 0px | 0rem | --space-0 |
| 1 | 4px | 0.25rem | --space-1 |
| 2 | 8px | 0.5rem | --space-2 |
| 3 | 12px | 0.75rem | --space-3 |
| 4 | 16px | 1rem | --space-4 |
| 5 | 20px | 1.25rem | --space-5 |
| 6 | 24px | 1.5rem | --space-6 |
| 7 | 28px | 1.75rem | --space-7 |
| 8 | 32px | 2rem | --space-8 |
| 9 | 36px | 2.25rem | --space-9 |
| 10 | 40px | 2.5rem | --space-10 |
| 11 | 44px | 2.75rem | --space-11 |
| 12 | 48px | 3rem | --space-12 |
:root {
--space-0: 0rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
}
왜 간격 스케일 생성기을(를) 사용해야 할까요?
- ✓100% 무료 - 숨겨진 비용이나 유료 기능이 없습니다
- ✓회원가입 불필요 - 계정 생성 없이 바로 사용 가능합니다
- ✓개인정보 보호 - 모든 처리가 브라우저에서 이루어집니다. 데이터가 서버로 전송되지 않습니다
- ✓초고속 - 서버 지연 없이 즉시 결과를 확인하세요
사용 방법
- 위의 입력 영역에 텍스트를 입력하거나 붙여넣으세요
- 도구가 자동으로 입력을 처리합니다
- 결과를 복사하거나 파일로 다운로드하세요
주요 기능
- ✓Multiple scale types (linear, geometric, fibonacci)
- ✓Base size configuration
- ✓Custom step count
- ✓Visual spacing preview
- ✓CSS, SCSS, and Tailwind output
- ✓Design system presets
자주 묻는 질문
어떤 간격 스케일을 사용해야 하나요?
선형 스케일은 단순하고, 기하 스케일은 지수적으로 증가하며, 피보나치 스케일은 자연스러운 비율을 따릅니다.