제목 안에도 단계가 있다

KRDS DS-039 — 헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정하고 있다.

0. 들어가며 — 제목의 ‘깊이’

지난 편들에서 타이포 계층을 display·heading·body로 나눴습니다(37편). 이번엔 그중 heading(제목) 의 내부 구조 — h1부터 h5까지의 단계입니다.

제목이라고 다 같은 제목이 아닙니다. 가장 큰 대제목(h1), 그 아래 중제목(h2), 또 그 아래 소제목(h3)… 이렇게 제목에도 깊이(level) 가 있습니다. 책으로 치면 ’장 → 절 → 항’의 구조죠. DS-039는 이 제목의 단계를 h1부터 h5까지 설정하라고 규정합니다.

이 단계는 단순히 크기를 다르게 하는 것을 넘어, 문서의 구조 자체를 만듭니다. 그리고 이 구조는 시각적 위계만이 아니라 접근성(스크린리더 탐색)에도 직결됩니다. 이번 편은 제목 단계가 왜 필요한지, 시각과 접근성 양면에서 풀어냅니다.

1. 규칙 원문 — 제목의 단계

DS-039 (디자인 스타일 > 타이포그래피) “헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정하고 있다.”

“h1부터 h5까지”

제목을 5단계로 나눕니다. h1(가장 큰 대제목)부터 h5(가장 작은 소제목)까지요. HTML의 <h1>~<h5> 태그에 대응합니다.

“계층을 설정”

각 단계의 크기를 위계에 맞게 정의한다는 뜻입니다. h1이 가장 크고, h2·h3…로 갈수록 작아지는 체계죠.

정리: 제목을 h1~h5까지 단계로 나누고, 각 단계의 크기를 위계에 맞게 설정하라. 이게 DS-039입니다.

2. 왜 제목에 단계가 필요한가 — 문서의 구조

제목 단계는 문서의 구조(목차) 를 만듭니다.

긴 콘텐츠를 떠올려 보세요. 큰 주제(h1) 아래 여러 중주제(h2)가 있고, 각 중주제 아래 세부 항목(h3)이 있습니다. 이 제목들의 단계가 곧 콘텐츠의 목차 구조입니다. 사용자는 제목 크기만 보고도 “이건 큰 주제, 저건 그 하위 항목”을 파악하죠. 제목 단계가 없으면 — 모든 제목이 같은 크기면 — 콘텐츠가 평평해져 구조를 알 수 없습니다.

이는 36·37편에서 본 ’크기로 위계를 전달한다’의 연장입니다. 다만 heading 내부에서 더 세밀하게, 제목들 사이의 상하 관계까지 표현하는 것이죠. h1>h2>h3>h4>h5의 크기 위계가 콘텐츠의 논리적 구조를 시각화합니다.

핵심은 이 단계가 ‘순서대로’ 쓰여야 한다는 것입니다. h1 다음에 갑자기 h4로 건너뛰거나, 크기가 역전되면 구조가 깨집니다. h1 → h2 → h3 순으로 차례로 내려가야 논리적 구조가 유지됩니다. 크기뿐 아니라 순서도 구조의 일부입니다.

3. 접근성과 직결된다 — 스크린리더의 탐색

제목 단계가 특히 중요한 이유는 접근성 때문입니다. 이게 다른 타이포 규칙과 구별되는 점입니다.

시각장애 사용자는 스크린리더로 화면을 듣습니다. 그런데 긴 페이지를 처음부터 끝까지 다 듣는 건 비효율적 이죠. 그래서 스크린리더에는 ‘제목으로 이동’ 기능이 있습니다. 제목(h1~h5)만 건너뛰며 탐색해, 원하는 섹션으로 빠르게 이동하는 것이죠. 마치 시각 사용자가 제목을 훑어보며 원하는 곳으로 스크롤하듯이요.

이 기능이 작동하려면, 제목이 올바른 단계(h1~h5)로 마크업되어 있어야 합니다. 만약 제목을 단순히 ’큰 글씨’로만 만들고(예: <div> + 큰 폰트) 실제 heading 태그를 안 쓰면, 스크린리더는 그게 제목인지 모릅니다. 시각적으로는 제목처럼 보여도, 보조기기에는 그냥 큰 글자일 뿐이죠. 그러면 시각장애 사용자는 제목 탐색 기능을 쓸 수 없어, 긴 페이지를 처음부터 다 들어야 합니다.

그래서 DS-039의 ’h1~h5 계층’은 시각적 크기 + 올바른 HTML 태그 두 가지를 모두 의미합니다. 제목은 크기로 위계를 보여주되, 그 위계가 h1~h5 태그로도 정확히 표현되어야 합니다. 이는 색에만 의존하지 말라(6편)는 원리와 통합니다 — 위계를 시각(크기)만이 아니라 구조(태그)로도 전달해, 화면을 못 보는 사용자에게도 닿게 하는 것입니다.

4. 크기 위계와 태그 위계를 일치시키기

여기서 자주 발생하는 함정이 있습니다 — 시각적 크기와 HTML 태그의 위계가 안 맞는 경우입니다.

예를 들어 디자인상 어떤 제목을 크게 보이고 싶어서, 실제로는 h3인데 h1처럼 크게 만들거나, 반대로 h1인데 작게 만드는 경우가 있습니다. 그러면 시각적으로 보는 위계(크기)와 구조적 위계(태그)가 어긋나, 스크린리더 사용자가 혼란스러워집니다. “h1이라는데 왜 작지?”, “이게 대제목인데 왜 h3이지?” 같은 불일치가 생기죠.

올바른 방법은 태그는 문서 구조대로, 크기는 그 태그에 맞게 정하는 것입니다. 즉 논리적으로 대제목이면 h1 태그를 쓰고, h1의 크기를 가장 크게 정의합니다. 시각적 강조가 더 필요하면 크기·색·여백으로 조정하되, 태그 자체를 바꾸지는 않습니다. 구조(태그)와 시각(크기)이 일치해야, 보는 사람과 듣는 사람 모두에게 같은 위계가 전달됩니다.

KRDS는 h1~h5 각각의 크기를 토큰으로 정의해, 태그를 쓰면 적절한 크기가 자동 적용되게 합니다. 이러면 태그와 크기가 자연스럽게 일치하죠. 자체 설계라면 ’h 태그 = 정의된 크기’의 매핑을 일관되게 유지해야 합니다.

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

흔한 위반 패턴

함정 ① 제목 단계 없음. 모든 제목이 같은 크기 → 구조 불명확. → h1~h5 단계 설정. 함정 ② 태그 미사용. 큰 <div>로 제목 표현 → 스크린리더가 제목 인식 못 함. → h 태그 사용. 함정 ③ 크기-태그 불일치. h3을 h1처럼 크게 → 시각·구조 위계 어긋남. → 일치시킴. 함정 ④ 단계 건너뜀. h1 다음 h4로 → 구조 깨짐. → 순서대로(h1→h2→h3).

무엇을 점검하나

단계 설정 — h1~h5 크기 계층이 정의됐는가.

태그 사용 — 제목이 실제 h 태그로 마크업됐는가.

크기-태그 일치 — 시각 위계와 구조 위계가 맞는가.

순서 — h 태그가 건너뜀 없이 순서대로 쓰였는가.

Before / After

<!-- ❌ Before: div로 제목 흉내, 단계·구조 없음 --> <div class="big-title">신청 안내</div> <div class="big-title">제출 방법</div> <!-- ✅ After: h 태그 + 크기 계층 --> <h1>신청 안내</h1> <!-- 대제목 --> <h2>제출 방법</h2> <!-- 중제목 --> <h3>온라인 제출</h3> <!-- 소제목 -->

h1 { font-size: 2rem; } /* 32px */ h2 { font-size: 1.5rem; } /* 24px */ h3 { font-size: 1.25rem; } /* 20px */

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

역할	책임
디자이너	h1~h5 크기 계층 설계
퍼블리셔/개발	제목을 올바른 h 태그로 마크업, 크기-태그 일치
기획/콘텐츠	콘텐츠 구조에 맞게 제목 단계 부여

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

제목이 있는 모든 사이트 = 해당. 콘텐츠 구조가 있으면 적용됩니다.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제목이 h1~h5 단계로 크기가 구분되나요?

□ 제목을 실제 h 태그로 마크업했나요(div가 아니라)?

□ 시각적 크기와 h 태그 위계가 일치하나요?

□ h 태그를 순서대로(건너뜀 없이) 쓰나요?

□ 스크린리더로 제목 탐색이 가능한가요?

❓ FAQ

Q1. 꼭 h5까지 다 써야 하나요? 콘텐츠 깊이에 맞게 쓰면 됩니다. 단순한 페이지는 h1~h3만으로 충분할 수 있습니다. 중요한 건 단계가 정의돼 있고, 쓸 때 순서대로 쓰는 것입니다.

Q2. 디자인상 제목을 크게 하고 싶은데 태그를 바꿔도 되나요? 태그는 문서 구조대로 두고, 크기는 CSS로 조정하세요. h3인데 크게 보이고 싶으면 h3 태그를 유지하고 크기만 키웁니다. 태그를 바꾸면 구조가 깨집니다.

Q3. 왜 div로 제목을 만들면 안 되나요? 스크린리더는 h 태그만 제목으로 인식합니다. div로 만든 ’시각적 제목’은 보조기기에 제목으로 안 잡혀, 시각장애 사용자가 제목 탐색을 못 합니다. 반드시 h 태그를 써야 합니다.

Q4. h1은 페이지에 하나만 써야 하나요? 일반적으로 페이지의 주 제목(h1)은 하나가 권장됩니다. 그 아래로 h2, h3을 구조에 맞게 씁니다. 여러 h1은 구조를 모호하게 할 수 있습니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 h1~h5 크기를 토큰으로 정의합니다. 채택하고 h 태그를 올바르게 쓰면 크기·구조가 함께 충족됩니다. 다만 ’올바른 태그 사용’은 콘텐츠 작성 시 챙겨야 합니다.

8. 마무리 — 보는 구조, 듣는 구조

DS-039의 메시지는 시각과 접근성을 잇습니다.

제목의 단계는 보는 사람에게는 시각적 위계를, 듣는 사람에게는 탐색의 구조를 만든다.

h1~h5의 크기 계층은 콘텐츠의 구조를 시각화하는 동시에, 스크린리더 사용자가 제목으로 페이지를 탐색하게 해줍니다. 그래서 제목은 크기로만이 아니라 올바른 h 태그로도 표현되어야 하고, 둘의 위계가 일치해야 합니다. 보는 사람과 듣는 사람 모두에게 같은 구조를 전달하는 것 — 이는 색에만 의존하지 말라(6편)는 원리가 제목에 적용된 모습입니다.

다음 편은 제목과 본문의 관계를 다룹니다. DS-040 — “타이틀이 본문보다 더 눈에 띄게 적용한다.” 제목이 본문보다 두드러져야 하는, 당연하지만 중요한 원칙을 살펴봅니다.

다음 편 예고 ▶ 「040. 타이틀이 본문보다 더 눈에 띄게 적용하고 있다.」

우리 사이트의 제목 계층이 올바른지 확인하려면? ViewCheck는 제목이 h1~h5 단계로 구성됐는지, 실제 h 태그로 마크업됐는지, 시각 위계와 구조 위계가 일치하는지, 스크린리더 탐색이 가능한지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

WCAG 2.1 Understanding 1.3.1 Info and Relationships — https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

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

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