Ch.2 8px 그리드 시스템

스페이싱 스케일과 일관성

4-8-12-16-24-32-48-64 스페이싱 스케일을 이해한다컴포넌트 내부 간격과 외부 간격의 역할을 구분할 수 있다일관된 간격이 시각적 질서를 만드는 원리를 설명할 수 있다

8의 배수를 안다고 끝이 아닙니다

8, 16, 24, 32… 무한한 선택지 중에서 어떤 값을 쓸지 매번 고민한다면, 그리드를 아는 것만으로는 부족합니다.

8의 배수는 많다. 그중 어떤 값을 언제 쓰는가?

답은 미리 정해진 스케일 — 선택지를 제한하면 일관성이 자동으로 생깁니다.

article

핵심 내용

제한된 선택지가 일관성을 만듭니다

스페이싱 스케일이란 디자인 시스템에서 사용할 간격 값의 목록입니다. 이 목록에 없는 값은 쓰지 않습니다.

4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 처음엔 4씩, 그 다음엔 8씩, 나중엔 16씩 증가합니다. 작은 간격일수록 섬세하게, 큰 간격일수록 과감하게 — 이것이 비선형 스케일입니다.

Tailwind CSS의 spacing도 이 스케일을 따른다: 1(4px), 2(8px), 3(12px), 4(16px)…

간격에는 두 가지 역할이 있습니다 안쪽을 채우는 것과 바깥을 벌리는 것

컴포넌트 간격

내부 간격(Padding): 버튼 안의 텍스트와 테두리 사이, 카드 안의 콘텐츠와 가장자리 사이. 보통 8px 또는 12px.

외부 간격(Margin/Gap): 카드와 카드 사이, 섹션과 섹션 사이. 관련도가 낮을수록 넓게 — 16px(같은 그룹) → 24px(다른 그룹) → 48px(다른 섹션).

게슈탈트 연결 고리 내부 간격이 좁으면 → 요소가 하나로 묶여 보임(근접성) 외부 간격이 넓으면 → 그룹 간 분리가 명확(근접성) 스페이싱 스케일은 게슈탈트 근접성 원칙을 수치로 통제하는 도구입니다.

같은 레이아웃이라도 간격의 일관성이 질서와 혼돈을 가릅니다

카드 컴포넌트 내부 패딩을 설정하려 합니다. 8px 스페이싱 스케일에서 적절한 값은?

같은 그룹의 아이템 간격(8px)은 다른 그룹 사이 간격(24px)보다 좁아야 한다

key

4px — 아이콘 내부, 인라인 간격

8px — 관련 요소 간 최소 간격

12px — 컴포넌트 내부 패딩

16px — 카드 패딩, 리스트 간격

24px — 그룹 간 간격

32px — 섹션 내 큰 간격

48px — 섹션 간 간격

64px — 페이지 레벨 여백

compare_arrows

일관된 간격 = 뇌가 패턴을 인식 → '깔끔하다' / 랜덤 간격 = 패턴 실패 → '어수선하다'

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요