제목과 본문 사이 간격도 위계를 말한다

KRDS DS-066 — 타이포그래피 계층 구조인 h1부터 h5까지의 콘텐츠 사이의 간격으로 계층 구조를 준수하여 사용하고 있다.

0. 들어가며 — 간격이 만드는 문서 구조

지금까지 간격의 체계(8pt)·반응형·일관성을 봤습니다. 이번 66편은 그 간격을 타이포그래피 계층과 연결 합니다 — 제목(h1~h5)과 콘텐츠 사이의 간격으로 계층 구조를 표현하는 규칙입니다.

39편(h1~h5)에서 제목의 ’크기’로 위계를 만들었습니다. DS-066은 거기에 ’간격’을 더합니다. 제목과 그에 딸린 본문 사이의 간격, 그리고 단계별 제목 사이의 간격이 위계에 맞아야 한다는 것이죠. 큰 제목 앞에는 넉넉한 간격, 작은 소제목 앞에는 좁은 간격처럼요. 이번 편은 간격이 어떻게 문서 구조를 만드는지를 풀어냅니다.

1. 규칙 원문 — 간격으로 계층 준수

DS-066 (디자인 스타일 > 레이아웃) “타이포그래피 계층 구조인 h1부터 h5까지의 콘텐츠 사이의 간격으로 계층 구조를 준수하여 사용하고 있다.”

제목(h1~h5)과 콘텐츠 사이의 간격을 계층에 맞게 설정해, 간격으로도 위계를 표현하라는 뜻입니다.

정리: 제목 단계(h1~h5)와 콘텐츠 사이 간격을 위계에 맞게 설정하라. 이게 DS-066입니다.

2. 왜 간격이 위계를 만드나

위계는 크기(39편)만이 아니라 간격으로도 표현됩니다. 어떻게일까요?

문서에서 큰 제목(h1) 앞에는 보통 넉넉한 간격이 있습니다. 그래야 ‘새로운 큰 주제가 시작된다’는 구분이 분명 하죠. 반면 작은 소제목(h4) 앞에는 좁은 간격이 적당합니다 — 같은 주제 안의 세부 항목이니까요. 즉 간격의 크기가 그 제목의 위계를 나타냅니다. 넓은 간격은 ’큰 구분’, 좁은 간격은 ’작은 구분’을 뜻하죠.

또한 제목과 그에 딸린 본문 사이의 간격도 중요합니다. 제목과 본문이 너무 붙으면 답답하고, 너무 멀면 제목이 어느 본문의 것인지 모호해집니다. 적절한 간격이 ’이 제목은 이 본문의 것’이라는 연결을 만들죠. 이를 근접성 (proximity) 원리라 합니다 — 가까이 있는 것은 한 그룹으로, 멀리 있는 것은 다른 그룹으로 인식되는 것. 제목과 본문을 적절히 가깝게, 다른 섹션과는 멀게 두면, 간격만으로 문서 구조가 드러납니다.

그래서 간격은 크기와 함께 위계를 만드는 또 하나의 도구입니다. 39편의 크기 위계에 66편의 간격 위계가 더해 지면, 제목과 본문의 구조가 더 명확해지죠. 이는 8편(강조)·37편(타이포 계층)에서 본 ’여러 도구를 조합하라’는 원리의 연장입니다. 크기와 간격이 함께 작동해 문서 구조를 시각화합니다.

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

흔한 위반 패턴

함정 ① 균일 간격. 모든 제목 앞 간격이 같음 → 위계 안 보임. → 단계별 차등 간격. 함정 ② 제목-본문 분리. 제목과 본문 간격이 섹션 간격과 비슷 → 연결 모호. → 근접성 활용. 함정 ③ 간격 역전. 작은 소제목 앞이 큰 제목 앞보다 넓음 → 위계 혼란. → 위계대로.

무엇을 점검하나

단계별 간격 — 제목 단계에 따라 간격이 차등되는가.

근접성 — 제목과 본문이 적절히 가깝고, 섹션 간은 먼가.

위계 일치 — 간격 위계가 크기 위계(39편)와 맞는가.

Before / After

/* ❌ Before: 균일 간격 (위계 안 보임) */ h1, h2, h3 { margin-top: 24px; margin-bottom: 24px; } /* ✅ After: 단계별 차등 + 근접성 */ h1 { margin-top: 48px; margin-bottom: 16px; } /* 큰 구분 + 본문 근접 */ h2 { margin-top: 32px; margin-bottom: 16px; } h3 { margin-top: 24px; margin-bottom: 8px; } /* 작은 구분 */

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

역할	책임
디자이너	제목 단계별 간격 설계
퍼블리셔/개발	제목-콘텐츠 간격 구현

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

제목·본문 구조가 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목 단계에 따라 간격이 차등되나요?

□ 큰 제목 앞 간격이 작은 소제목 앞보다 넓은가요?

□ 제목과 본문이 적절히 가까운가요(근접성)?

□ 간격 위계가 크기 위계와 맞나요?

❓ FAQ

Q1. 39편(h1~h5 크기)과 다른가요? 39편은 제목의 ’크기’로 위계를, 66편은 제목과 콘텐츠 사이 ’간격’으로 위계를 만듭니다. 둘이 함께 작동해 문서 구조를 더 명확히 합니다.

Q2. 근접성이 뭔가요? 가까이 있는 것은 한 그룹, 멀리 있는 것은 다른 그룹으로 인식되는 원리입니다. 제목과 본문을 가깝게, 다른 섹션과는 멀게 두면 간격만으로 구조가 드러납니다.

Q3. 간격도 8포인트 그리드를 따르나요? 네. 제목 간격도 8의 배수(62편)로 설정하면 일관성이 유지됩니다. 단계별로 8·16·24·32… 중 골라 차등을 줍니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 타이포 계층별 간격을 정의합니다. 채택하면 DS-066이 충족됩니다.

6. 마무리 — 간격이 그리는 구조

DS-066의 메시지는 간격의 구조적 역할을 담습니다.

간격도 위계를 말한다 — 큰 구분엔 넓은 간격, 작은 구분엔 좁은 간격, 제목과 본문은 가깝게.

위계는 크기만이 아니라 간격으로도 표현됩니다. 제목 단계에 따라 간격을 차등하고, 제목과 본문을 근접성으로 묶으면, 간격만으로 문서 구조가 드러나죠. 크기 위계(39편)에 간격 위계가 더해지면 구조가 더 명확해집니다. 간격은 빈 공간이 아니라 구조를 그리는 도구입니다.

다음 편부터는 컴포넌트별 구체적 간격(gap 토큰)을 다룹니다. DS-067 — “카드를 gap-7(24px)의 간격으로 적용한다.” 카드 사이의 표준 간격을 살펴봅니다.

다음 편 예고 ▶ 「067. 카드 세로형, 가로형, 모듈형을 gap-7(24px)의 간격으로 적용하고 있다.」

우리 사이트의 제목 간격이 위계에 맞는지 확인하려면? ViewCheck는 제목 단계별 간격이 위계에 맞게 차등되는지, 제목-본문 근접성이 적절한지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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