liminfoUI Spacing Calculator
UI 스페이싱 계산기 - 8px 그리드 시스템 기반
CSS Custom Properties
:root {
--space-0: 0px;
--space-0_5: 2px;
--space-1: 4px;
--space-1_5: 6px;
--space-2: 8px;
--space-2_5: 10px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}Tailwind Config
spacing: {
'0': '0rem', // 0px
'0.5': '0.125rem', // 2px
'1': '0.25rem', // 4px
'1.5': '0.375rem', // 6px
'2': '0.5rem', // 8px
'2.5': '0.625rem', // 10px
'3': '0.75rem', // 12px
'4': '1rem', // 16px
'5': '1.25rem', // 20px
'6': '1.5rem', // 24px
'8': '2rem', // 32px
'10': '2.5rem', // 40px
'12': '3rem', // 48px
'16': '4rem', // 64px
'20': '5rem', // 80px
'24': '6rem', // 96px
}UI Spacing Calculator 소개
UI 간격 계산기는 단일 기본 단위 값에서 완전한 비례 간격 체계를 생성합니다. 기본값 4px(Tailwind CSS 기본값)에서 시작해 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24배의 16단계 간격을 계산하고, 각 단계의 픽셀 값, rem 환산값, 크기에 비례한 시각적 막대를 보여줍니다. 이를 통해 간격 체계가 어떻게 확장되는지 즉시 파악할 수 있습니다.
프론트엔드 개발자와 UI/UX 디자이너들이 디자인 시스템을 구축하거나 컴포넌트 라이브러리를 커스터마이징할 때 활용합니다. 일관된 간격 체계는 시각적 위계의 기본 요소입니다. 단일 기본 단위의 배수로 크기를 설정한 요소들은 인터페이스 전체에서 수학적 조화를 유지합니다. 기본 단위를 변경하면 6px나 8px 그리드가 기본 4px 그리드와 어떻게 다른지 즉시 미리 볼 수 있어, 디자인 시스템을 확정하기 전에 올바른 기반을 선택하는 데 도움이 됩니다.
두 가지 바로 붙여넣을 수 있는 코드 스니펫을 출력합니다: 모든 간격 단계를 커스텀 프로퍼티로 정의하는 CSS `:root` 블록(예: `--space-4: 16px`)과 rem 값과 픽셀 주석이 포함된 Tailwind CSS `spacing` 설정 객체. 둘 다 클릭 한 번으로 복사할 수 있습니다. 모든 계산은 브라우저에서만 실행되며 서버가 관여하지 않고 데이터도 저장되지 않습니다.
주요 기능
- 설정 가능한 단일 기본 단위에서 16단계 간격(0~24배)을 생성
- 각 단계의 픽셀 값, rem 환산값, 비례 시각 막대 표시
- 바로 붙여넣을 수 있는 완성된 CSS 커스텀 프로퍼티 블록(`:root { --space-N: Npx; }`) 출력
- rem 값과 px 주석이 포함된 Tailwind CSS `spacing` 설정 객체 출력
- CSS 변수와 Tailwind 설정 코드 각각 원클릭 복사
- 실시간 업데이트 — 기본 단위 변경 시 16단계 전체 즉시 재계산
- 서버 호출 없는 100% 클라이언트 사이드 계산, 데이터 저장 없음
- 다크 모드 지원 및 구문 강조 코드 블록
자주 묻는 질문
간격 체계(spacing scale)란 무엇이며 왜 중요한가요?
간격 체계는 UI 전체에서 마진, 패딩, 갭, 레이아웃 치수에 일관되게 사용되는 사전 정의된 크기 값들의 집합입니다. 단일 기본 단위의 배수를 사용하면 모든 간격 관계가 수학적으로 일관성을 유지하여 시각적으로 조화롭고 유지 관리하기 쉬운 인터페이스를 만들 수 있습니다.
기본 단위가 4px인 이유는 무엇인가요?
4픽셀은 일반적인 화면 밀도에 균등하게 나누어지고 Tailwind CSS의 기본 간격 체계와 일치하기 때문에 널리 사용되는 기본 단위입니다. 표준 컴포넌트 크기에 잘 맞는 편안한 증분(4, 8, 12, 16, 24, 32px)을 제공합니다. Tailwind의 `spacing-1`은 4px, `spacing-4`는 16px입니다.
CSS 커스텀 프로퍼티 출력은 어떻게 사용하나요?
CSS 블록을 복사해 전역 스타일시트나 CSS 파일의 `:root` 선택자에 붙여넣으세요. 이후 CSS 전체에서 `var(--space-4)`(기본 4px에서 16px), `var(--space-8)`(32px) 등으로 간격 값을 참조할 수 있습니다. 이 방식은 CSS 프레임워크나 순수 CSS 어디에서나 사용할 수 있습니다.
Tailwind 설정 출력은 어떻게 사용하나요?
간격 객체를 복사해 `tailwind.config.js` 파일의 `theme.spacing` 또는 `theme.extend.spacing` 키에 붙여넣으세요. Tailwind의 기본 간격 체계가 커스텀 기본 단위로 재정의 또는 확장되어 모든 Tailwind 간격 유틸리티(p-4, m-6, gap-8 등)가 디자인 시스템에 맞게 반영됩니다.
px와 rem 값의 차이는 무엇인가요?
픽셀(px)은 사용자 설정에 관계없이 항상 동일한 화면 픽셀에 고정된 절대 단위입니다. rem은 루트 폰트 크기에 상대적인 단위로, 대부분의 브라우저에서 기본값은 16px입니다. 간격에 rem을 사용하면 사용자의 브라우저 폰트 크기 설정을 존중하여 기본 폰트 크기를 늘린 사용자의 접근성이 향상됩니다.
3.5px처럼 소수점 기본 단위도 사용할 수 있나요?
네. 기본 단위 입력란에 소수점 값을 입력할 수 있습니다. 3.5를 입력하면 3.5px 기반 체계가 생성되어 간격 단계 4는 14px가 됩니다. 4px보다 촘촘한 그리드가 필요하거나 비표준 기본 단위를 사용하는 기존 디자인 시스템과 맞춰야 할 때 유용합니다.
이 도구는 몇 단계의 간격을 생성하나요?
0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 배수를 사용해 16단계를 생성합니다. 이 배수들은 Tailwind CSS의 기본 스케일과 일치하므로 출력 결과가 Tailwind의 명명 규칙과 직접 호환됩니다.
Tailwind를 사용하지 않는 프로젝트에서도 유용한가요?
네. CSS 커스텀 프로퍼티 출력은 바닐라 CSS, SCSS, CSS Modules, Styled Components, Emotion 등 모든 CSS 설정에서 작동합니다. 생성된 CSS 변수를 CSS를 작성하는 어디서나 사용할 수 있어, 프레임워크에 관계없이 모든 디자인 시스템에 유용합니다.