한 줄 정의
디자인 시스템과 개발 코드 상의 여백(Margin, Padding), 아이콘, 높이 및 줄 높이 등을 8픽셀의 배수(예외 시 4픽셀) 단위로 고정하여 화면 해상도 렌더링을 보장하고 인터페이스 전반의 시각적 일관성을 확보하는 여백 시스템이다.
핵심 요지
- 해상도 매핑: 스마트폰 및 PC의 표준 해상도는 가로나 세로 축 중 하나가 8로 나누어떨어지며, 모바일 가로 폭 표준 수치들(360, 375, 390px 등)도 8의 배수와 잘 맞아 떨어져 소수점 픽셀(Half-pixel)로 인한 렌더링 뭉개짐을 완벽히 방지한다.
- 인지적 일관성: 게슈탈트 근접성의 법칙(Gestalt law of proximity)을 기반으로 간격의 규칙성을 인지하게 하며, 정보의 그룹화 및 위계를 직관적으로 읽히게 한다.
- 의사결정 피로 감소: 마진이나 패딩을 13px, 15px 중 어떤 것으로 정할지 매번 고민하는 비효율을 제거하고, 미리 약속된 표준 스페이싱 스케일(4, 8, 12, 16, 24, 32, 48, 64, 96px 등) 중에서만 선택하여 생산성을 높인다.
상세
- 안팎 간격의 법칙 (Internal-to-External Rule): ‘그룹 내부의 간격은 그룹 사이의 간격보다 작아야 한다’는 기본 원칙이다. 만약 컴포넌트 내부 여백이 외부 마진보다 크면 여러 컴포넌트가 하나의 덩어리로 어색하게 뭉쳐 보여 인지적 혼란을 준다.
- 경계해야 할 4대 여백 실수:
- 과도한 내부 여백: 콘텐츠의 밀도를 고려하지 않고 본문 카드에 무조건 넓은 여백(예: 32px 이상)을 설정해 뼈대 없이 화면을 텅 비어 보이게 하는 문제.
- 섹션 간격 부족: 연관성이 없는 독립 섹션들을 촘촘하게 배치하여, 시선이 내용 전환을 알지 못하고 오독하게 만드는 현상.
- 일관성 없는 간격 혼용: 유사 컴포넌트 간에 미세한 수치 차이(어떤 카드는 16px, 옆 카드는 20px)를 두어, 조잡하고 정돈되지 않은 불안정한 느낌을 유발하는 실수.
- 모바일 환경 고려 누락: 데스크톱 화면 기준으로 넉넉하게 잡은 간격 스케일이 모바일 좁은 화면(375px)으로 압축될 때 레이아웃 붕괴를 일으키는 현상.
- 도구 및 코드 구현 기법:
- 피그마 설정: ‘Big nudge’ 값을 8px로 변경하여
Shift + 방향키조작 시 정확히 그리드 1칸 단위로 이동하게 설정한다. - CSS 사용자 정의 속성 매핑: 픽셀 하드코딩 대신 변수형 토큰을 선언하여 사용함으로써 오차 발생을 원천 방지한다.
- 피그마 설정: ‘Big nudge’ 값을 8px로 변경하여
예시
- CSS 간격 토큰 정의 예시:
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; } .card { padding: var(--space-4); /* 내부 패딩 16px */ margin-bottom: var(--space-6); /* 외부 하단 마진 24px */ }
충돌
- 콘텐츠 자유 비율론: 8px라는 수치적 제약은 디자이너의 레이아웃 구성 창의성을 제한하며, 특정 폰트의 서체적 높낮이나 유니크한 이미지 구성에서는 5px나 7px 등 디자이너 고유의 감각적 조정이 더 정교하다는 주장.
- 8px 그리드 시스템 옹호론: 임의의 간격 조정은 디자이너와 개발자 간의 불필요한 소통 비용을 낳고, 협업 과정에서 시스템적 규칙이 빠르게 붕괴된다. 디스플레이 렌더링 규격 및 제품 개발의 경제성, 확장성을 고려하면 8px(서브그리드 4px) 규칙을 철저히 고수하는 것이 전체 품질 면에서 훨씬 가치가 높다는 반론.