📏UI 스페이싱 시스템 계산기

베이스 단위를 설정하면 UI 스페이싱 스케일과 CSS 변수를 자동 생성합니다.

베이스 단위

스케일 타입

웹 UI 여백 체계(8pt Grid) 계산기

기준 단위 기반 여백 스케일 자동 생성

🔤

타이포그래피 스케일 계산기

기준 폰트와 비율로 폰트 사이즈 생성

UI 스페이싱 시스템이란?

UI 스페이싱 시스템은 디자인 전반의 여백, 패딩, 마진을 일정한 단위로 표준화한 간격 체계입니다. 베이스 단위(보통 4px 또는 8px)를 정하고, 이를 배수로 확장해 xs, sm, md, lg, xl 등의 스페이싱 토큰을 만듭니다. 이를 통해 디자인과 개발 간의 일관성을 유지하고 협업 효율을 높일 수 있습니다.

8pt 그리드 시스템 장점

8px를 베이스로 쓰는 이유는 대부분의 화면 해상도(1x, 2x, 3x DPR)에서 8의 배수가 정수 픽셀로 떨어지기 때문입니다. 픽셀 완벽성(Pixel Perfect)을 추구하는 디자인에서 서브픽셀 렌더링 문제를 최소화할 수 있습니다. Google Material Design, Apple Human Interface Guidelines 모두 4~8dp 기준을 사용합니다.

CSS 변수로 적용하는 방법

:root { --space-1: 4px; --space-2: 8px; --space-3: 16px; } 형식으로 CSS 변수를 정의하면, 컴포넌트에서 padding: var(--space-2)처럼 사용할 수 있습니다. 디자인 시스템 툴(Figma, Tokens Studio 등)에서도 같은 토큰 이름을 사용하면 디자인-개발 핸드오프가 매우 간편해집니다.

자주 묻는 질문

Tailwind CSS 스페이싱과 호환되게 쓸 수 있나요?

네, Tailwind 호환 스케일 타입을 선택하면 Tailwind의 기본 스페이싱 배수(1, 2, 4, 6, 8...)를 기반으로 한 스케일이 생성됩니다. Tailwind의 기본 베이스는 4px입니다.

4pt와 8pt 중 어떤 것을 선택해야 하나요?

복잡한 대시보드나 데이터 밀도가 높은 UI라면 4pt가 세밀한 조정에 유리합니다. 일반적인 웹/앱 UI라면 8pt가 더 단순하고 관리하기 쉽습니다. 시작은 8pt를 권장합니다.

관련된 도구