모든 간격을 8의 배수로

KRDS DS-062 — 8-point grid system을 기준으로 간격을 설정하여 일관성을 유지하고 있다.

0. 들어가며 — 간격에도 규칙이 있다

레이아웃의 큰 구조(마진·칼럼·너비)를 봤습니다. 이번 62편부터는 요소들 사이의 간격(spacing) 을 다룹니다. 그 기준이 되는 것이 8-point grid system(8포인트 그리드) 입니다.

화면의 모든 간격 — 요소 사이 여백, 안쪽 패딩, 위아래 마진 — 을 아무 값이나 쓰면(7px, 13px, 22px…) 일관성이 깨집니다. 8포인트 그리드는 모든 간격을 8의 배수(8px, 16px, 24px, 32px…)로 맞추는 체계입니다. DS-062는 이를 기준으로 간격을 설정해 일관성을 유지하라고 규정합니다. 이번 편은 8포인트 그리드가 왜 일관성을 만드는지를 풀어냅니다.

1. 규칙 원문 — 8의 배수

DS-062 (디자인 스타일 > 레이아웃) “8-point grid system을 기준으로 간격을 설정하여 일관성을 유지하고 있다.”

“8-point grid system”

모든 간격을 8의 배수(8·16·24·32·40…)로 맞추는 체계입니다. 8px을 기본 단위로 삼는 것이죠.

정리: 간격을 8의 배수(8포인트 그리드)로 설정해 일관성을 유지하라. 이게 DS-062입니다.

2. 왜 8의 배수인가 — 일관성과 정렬

간격을 8의 배수로 맞추면 무엇이 좋을까요?

일관성

간격을 감각으로 정하면 7px, 10px, 13px, 22px처럼 제각각이 됩니다. 비슷한 위치인데 미묘하게 다른 간격이 섞여 화면이 정돈되지 않죠. 8의 배수로 통일하면 모든 간격이 8·16·24·32… 중 하나가 되어, 간격에 질서가 생깁니다. 같은 위계의 간격은 같은 값을 갖고, 화면 전체가 일관된 리듬을 갖습니다. 이는 색을 팔레트 단계로 (4편), 레디어스를 5단계로(43편) 관리한 것과 같은 ’체계화’입니다 — 무한한 값 대신 정해진 배수에서 고르는 것.

정렬과 계산 편의

8은 2, 4로 나누어떨어지는 수라, 절반·1/4 값도 깔끔합니다(8→4→2). 그래서 다양한 크기 조합이 자연스럽게 맞아떨어지죠. 또 대부분의 화면 해상도가 8로 나누어떨어져, 8의 배수 간격이 픽셀에 또렷하게 렌더링됩니다. 그리고 개발자가 간격을 계산하기도 쉽습니다 — ’한 단계 = 8px’이라는 단순한 규칙으로요. 8포인트 그리드는 이런 실용적 이점 때문에 업계 표준이 됐습니다(구글 Material 등 많은 디자인 시스템이 채택).

토큰화

8의 배수 간격은 토큰으로 관리됩니다 — gap-1(8px), gap-2(16px)… 이렇게요(KRDS도 gap 토큰을 씁니다, DS-067~072). 간격을 토큰으로 정의하면, 디자이너·개발자가 ‘16px’ 대신 ’gap-2’로 소통하고, 일관성이 자동 보장됩니다. 8포인트 그리드는 간격 토큰 체계의 기반입니다.

3. 8포인트 그리드의 실제 — 간격의 눈금

8포인트 그리드를 실제로 쓰면 간격이 이런 눈금을 갖습니다.

토큰(예)	값	용도
gap-1	8px	아주 좁은 간격
gap-2	16px	좁은 간격
gap-3	24px	보통 간격
gap-4	32px	넓은 간격
gap-5	40px	아주 넓은 간격

(실제 KRDS gap 토큰 번호·값은 가이드 기준) 화면의 모든 간격은 이 눈금에서 골라 씁니다. 요소 사이 여백, 패딩, 마진 모두요. 그러면 화면의 간격이 8·16·24… 의 리듬으로 통일되어, 정돈되고 일관된 느낌을 줍니다.

핵심은 ’간격을 발명하지 않고 눈금에서 고른다’는 것입니다. “이 여백은 얼마로?”를 감각으로 정하는 대신, “gap-2(16px)”처럼 정해진 단계에서 고르면 됩니다. 디자이너가 바뀌어도, 페이지가 달라도 같은 눈금을 쓰니 일관성이 유지되죠. 이후 편들(DS-066~072)에서 다룰 구체적 간격 규칙(카드 24px, 인풋 16px 등)도 모두 이 8포인트 그리드 위에서 정의됩니다.

4. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 임의 간격. 7px·13px·22px 등 8의 배수 아닌 값 → 일관성 붕괴. → 8의 배수로. 함정 ② 감각적 간격. 화면마다 다른 간격 → 리듬 깨짐. → gap 토큰으로 통일. 함정 ③ 토큰 미사용. 간격을 하드코딩 → 일관 관리 불가. → 토큰화.

무엇을 점검하나

8의 배수 — 간격이 8의 배수로 설정됐는가.

일관성 — 같은 위계 간격이 같은 값인가.

토큰화 — 간격이 gap 토큰으로 관리되는가.

Before / After

/* ❌ Before: 임의 간격 */ .a { margin-bottom: 13px; } .b { padding: 22px; gap: 7px; } /* ✅ After: 8포인트 그리드(8의 배수) 토큰 */ :root { --gap-1: 8px; --gap-2: 16px; --gap-3: 24px; --gap-4: 32px; } .a { margin-bottom: var(--gap-2); } /* 16px */ .b { padding: var(--gap-3); gap: var(--gap-1); } /* 24px, 8px */

5. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자인 시스템 담당	8포인트 그리드 기반 간격 토큰 정의
디자이너	간격을 8의 배수로 설계
퍼블리셔/개발	gap 토큰으로 간격 구현

기관 유형	DS-062 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

간격이 있는 모든 사이트 = 해당(즉 모든 사이트).

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 간격이 8의 배수(8·16·24·32…)인가요?

□ 7px·13px 같은 임의 간격을 쓰지 않나요?

□ 같은 위계 간격이 같은 값인가요?

□ 간격이 gap 토큰으로 관리되나요?

❓ FAQ

Q1. 왜 하필 8인가요? 8은 2·4로 나누어떨어져 다양한 조합이 깔끔하고, 대부분 해상도가 8로 나누어져 픽셀에 또렷이 렌더링되며, 계산도 쉽습니다. 그래서 업계 표준 간격 단위가 됐습니다(Material 등 다수 채택).

Q2. 4px은 못 쓰나요? 8의 절반인 4px은 아주 좁은 간격(아이콘과 글자 사이 등)에 쓸 수 있습니다. 8포인트 그리드 안에서 4px도 허용되는 세부 단위입니다. 핵심은 7·13처럼 체계 밖 값을 피하는 것입니다.

Q3. 모든 간격을 8의 배수로 하면 부족하지 않나요? 8·16·24·32·40·48… 로 충분히 다양한 간격이 나옵니다. 4px 세부 단위까지 더하면 더 세밀하죠. 임의 값 없이도 모든 간격을 표현할 수 있습니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 8포인트 그리드 기반 gap 토큰을 정의합니다. 채택하면 DS-062가 충족됩니다. 이후 편들의 구체적 간격 규칙도 이 토큰을 씁니다.

7. 마무리 — 간격의 리듬

DS-062의 메시지는 간격의 체계화를 담습니다.

모든 간격을 8의 배수로 — 정해진 눈금이 일관된 리듬을 만든다.

간격을 감각으로 정하면 제각각이 되어 화면이 정돈되지 않지만, 8의 배수로 통일하면 모든 간격이 일관된 리듬을 갖습니다. 8은 나눗셈·렌더링·계산에 유리해 업계 표준이 됐고, gap 토큰으로 관리하면 일관성이 자동 보장되죠. 이는 색·레디어스를 단계로 관리한 것과 같은 ’감각을 체계로 대체한다’는 디자인 시스템의 일관된 원리입니다.

다음 편은 이 간격을 반응형으로 다룹니다. DS-063 — “디바이스 사이즈에 따라 적절한 반응형 간격을 설정한다.” 화면 크기에 따라 간격을 조정하는 법을 살펴봅니다.

다음 편 예고 ▶ 「063. 디바이스 사이즈에 따라 적절한 반응형 간격을 설정하고 있다.」

우리 사이트의 간격이 8포인트 그리드를 따르는지 확인하려면? ViewCheck는 사이트의 간격(margin·padding·gap)이 8의 배수로 일관되게 설정됐는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준