Question 1

스페이싱 스케일이란 무엇인가요?

Accepted Answer

스페이싱 스케일은 디자인 시스템 전반에 걸쳐 일관되게 사용되는 미리 정해진 간격 값의 집합입니다. 4pt 그리드(4, 8, 12, 16...) 또는 8pt 그리드(8, 16, 24, 32...)가 일반적인 예입니다.

Question 2

4pt 또는 8pt 그리드 시스템이란?

Accepted Answer

4pt 그리드는 모든 간격 값이 4px의 배수임을 의미합니다. 8pt 그리드는 8px의 배수를 사용합니다. 이러한 시스템은 대부분의 화면 크기가 8로 나누어지므로 시각적 일관성을 만들어냅니다.

Question 3

CSS 커스텀 속성을 간격에 사용하는 방법은?

Accepted Answer

:root { --spacing-1: 4px; --spacing-2: 8px; }로 정의한 후 margin: var(--spacing-2); padding: var(--spacing-4);와 같이 사용합니다.

Question 4

선형 스케일과 배수 스케일의 차이는?

Accepted Answer

선형 스케일은 고정된 양씩 증가합니다(예: 4, 8, 12, 16). 배수 스케일은 비율로 증가합니다(예: 4, 6, 9, 13.5). 선형 스케일은 UI 간격에, 배수 스케일은 타이포그래피 계층에 적합합니다.

Question 5

어떤 기본 단위를 사용해야 하나요?

Accepted Answer

4px가 가장 일반적인 기본 단위입니다. Tailwind CSS와 호환성을 위해 4px를 사용하는 것이 좋습니다.

Spacing Scale Generator

자주 묻는 질문