[접근성연구·저시력] 제목 계층이라는 지도

시맨틱 마크업 연구

〈디지털 접근성 연구 035〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.

들어가며

화면을 보는 사람은 페이지를 한눈에 훑는다. 큰 제목, 작은 제목, 본문의 덩어리 — 글자 크기와 굵기, 위치만으로 "여기가 중요한 부분이구나", "이건 그 아래 세부 항목이구나"를 직관적으로 안다. 눈은 구조를 한순간에 파악한다.

스크린리더를 쓰는 사용자는 이 '한눈'이 없다. 화면을 위에서 아래로 순서대로 들어야 한다. 만약 처음부터 끝까지 한 줄씩 다 들어야만 원하는 곳에 닿을 수 있다면, 긴 페이지는 견디기 어렵다. 그래서 스크린리더 사용자는 제목(heading)을 따라 이동한다. 제목만 건너뛰며 들어 페이지의 구조를 빠르게 파악하고, 원하는 섹션으로 바로 점프한다. 제목 계층은 듣는 사용자에게 페이지의 '지도'다.

이 지도는 화면에 보이는 글자 크기로 그려지지 않는다. 코드 안에서 그 글자가 '제목'으로 표시되어 있어야 — 즉 시맨틱(semantic, 의미를 담은) 마크업으로 작성되어 있어야 — 스크린리더가 그것을 제목으로 인식한다. 이번 편은 'A 기준연구' 관점에서 제목 계층과 시맨틱 마크업이 무엇이고, 왜 듣는 사용자에게 길 안내가 되는지를 정리한다.

1. '보이는 제목'과 '코드 속 제목'은 다르다

이것이 이번 편의 출발점이다. 화면에서 크고 굵게 보이는 글자가 곧 '제목'은 아니다.

화면을 보는 사람에게는, 글자가 크고 굵으면 제목처럼 보인다. 그것으로 충분하다. 그러나 스크린리더는 글자의 '겉모습'이 아니라 '코드 속 의미'를 읽는다. 코드에서 그 글자가 제목 태그(예: <h1>~`

`)로 표시되어 있어야 스크린리더가 "이것은 제목이며, 몇 수준이다"라고 사용자에게 알린다. 단지 글자 크기만 키운 일반 텍스트는, 보기에는 제목 같아도 스크린리더에게는 평범한 문장일 뿐이다.

반대 경우도 있다. 코드에서는 제목 태그인데 화면에서는 작게 보이거나, 시각적으로는 평범한데 의미상으로는 제목인 경우다. 시맨틱 마크업은 이 '의미'를 코드에 명시하는 일이다. WCAG 2.1의 1.3.1 'Info and Relationships'(정보와 관계)는, 시각적으로 전달되는 구조·관계가 프로그램이 인식할 수 있는 형태로도 제공되어야 한다고 설명한다(W3C, 원문 확인이 안전하다). 보이는 구조를 코드의 의미로도 옮기라는 뜻이다.

1-1. 왜 의미를 코드에 담아야 하나

화면을 보는 눈은 글자 크기·위치·색으로 구조를 알아챈다. 그러나 스크린리더, 검색 엔진, 자동 도구는 그 '시각적 단서'를 읽지 못한다. 이들이 읽는 것은 코드의 의미다. 그래서 구조를 시각으로만 표현하면, 보는 사람에게는 전달되지만 듣는 사람·기계에게는 전달되지 않는다. 시맨틱 마크업은 같은 구조를 시각과 코드 양쪽으로 표현해, 보든 듣든 같은 구조를 얻게 한다.

2. 제목 계층이라는 지도

제목은 단순한 '큰 글자'가 아니라, 위계를 가진 구조다. 이 위계가 지도의 등고선처럼 페이지의 깊이를 보여 준다.

2-1. 수준(level)의 의미

제목에는 수준이 있다. 대략 1수준(가장 큰 제목, 보통 페이지의 주제)부터 6수준(가장 세부적인 소제목)까지다. 1수준 아래에 2수준, 2수준 아래에 3수준이 놓이는 식으로, 수준은 '포함 관계'를 나타낸다. 스크린리더 사용자는 이 수준을 들으며 "지금 큰 섹션에 있구나", "그 안의 세부 항목으로 들어왔구나"를 파악한다.

2-2. 건너뛰지 않는 위계

위계는 순서대로 내려가는 것이 자연스럽다. 1수준 다음에 갑자기 4수준이 나오면, 사용자는 "2·3수준은 어디 갔지?"하고 혼란스러워한다. 화면에서는 글자 크기로 어물쩍 넘어가도, 코드의 수준이 건너뛰면 듣는 사용자의 지도에 구멍이 생긴다. 수준을 단계적으로 쓰는 것이 권장되는 이유다(원문 확인 권장).

2-3. 제목으로 점프하는 사용

스크린리더는 '다음 제목으로 이동' 같은 단축 기능을 제공한다. 사용자는 본문을 다 듣지 않고 제목만 건너뛰며 페이지 전체의 구조를 먼저 훑은 뒤, 필요한 섹션으로 바로 간다. 이는 화면을 보는 사람이 페이지를 스캔하는 것과 같은 효율을 듣는 사용자에게 준다. 제목이 제대로 마크업되어 있어야 이 점프가 작동한다.

제목 계층이 듣는 사용자에게 무엇을 주는지, 어긋날 때 무슨 일이 생기는지 정리하면 다음과 같다.

구조 요소	주는 것	어긋날 때
제목 수준	포함 관계·깊이	1→4 점프 시 지도에 구멍
제목 태그(h1~h6)	제목으로 점프 가능	큰 글자뿐이면 점프 불가
순서대로 내려가는 위계	예측 가능한 항해	수준 건너뛰면 혼란
윤곽(outline)	페이지 줄거리 미리 듣기	뒤죽박죽이면 줄거리 안 잡힘

(인용) 수준을 단계적으로 쓰도록 권하는 근거는 WCAG 1.3.1·2.4.6 등에 있다. 구체 적용 방식은 버전에 따라 달라질 수 있어 원문 확인을 권한다.

3. 제목만이 지도가 아니다 — 랜드마크와 구조 요소

페이지의 지도는 제목만으로 그려지지 않는다. 페이지에는 머리말, 본문, 탐색 메뉴, 꼬리말 같은 큰 구역이 있고, 이 구역들도 의미로 표시될 수 있다. 이를 흔히 **랜드마크(landmark)**라고 부른다.

3-1. 랜드마크 구역

머리말(header), 주 탐색(navigation), 본문(main), 보조 영역(complementary), 꼬리말(footer) 같은 구역을 의미 있는 요소나 역할(role)로 표시하면, 스크린리더 사용자는 "본문으로 바로 가기", "탐색 메뉴로 가기"처럼 구역 단위로 이동할 수 있다. 긴 머리말과 메뉴를 매번 다 듣지 않고 본문으로 건너뛸 수 있는 것이다.

3-2. 목록·표·폼의 구조

목록은 목록으로, 표는 표로, 입력 양식은 폼으로 — 콘텐츠의 종류에 맞는 의미 요소를 쓰면, 스크린리더가 "목록, 항목 5개 중 1번째"처럼 구조를 함께 알린다. 같은 내용을 의미 없는 일반 텍스트로 나열하면, 사용자는 그것이 목록인지, 몇 개인지조차 알 수 없다. 표의 머리글이나 폼의 라벨은 이후 편(040·041 등)에서 더 다룬다.

3-3. '의미 요소'가 주는 것

시맨틱 마크업이 주는 것은 결국 '맥락'이다. 같은 글자라도 그것이 제목인지, 목록 항목인지, 버튼인지, 어느 구역에 속하는지를 코드가 알려 주면, 스크린리더는 그 맥락을 사용자에게 전한다. 맥락이 빠지면, 사용자는 글자는 듣지만 그것이 페이지 어디에서 무슨 역할을 하는지 모른 채 떠다닌다.

제목 외의 구조 요소가 듣는 사용자에게 주는 것을 정리하면 다음과 같다.

구조 요소	듣는 사용자에게 주는 것	빠지면
랜드마크(header/nav/main)	구역 단위로 점프	머리말·메뉴 매번 다 들음
목록(list)	"항목 5개 중 1번째" 맥락	목록인지·개수조차 모름
표(table) 머리글	행·열의 의미 연결	칸의 의미가 흩어짐
폼(form) 라벨	입력칸이 무엇을 묻는지	빈칸만 듣고 막힘

(관점) 제목이 '큰 지도'라면 랜드마크·목록·표·폼은 '구역 안내판'이다. 둘이 함께 있어야 듣는 사용자가 떠다니지 않고 자기 위치를 안다.

4. 시맨틱 마크업을 둘러싼 관점

시맨틱 마크업은 '코드를 깔끔하게 쓰자'는 취향의 문제로 오해되곤 한다. 기준 연구의 관점에서 몇 가지를 짚어 둔다.

4-1. 스타일과 의미를 분리하는 사고

"제목처럼 보이게 하려고 큰 글자를 썼다"는 시각 중심 사고와, "이건 제목이니 제목 태그를 쓰고 모양은 따로 입힌다"는 의미 중심 사고는 결과가 다르다. 후자는 보는 사람에게도 같은 모양을 주면서, 듣는 사람·기계에게도 의미를 전한다. 모양은 스타일로, 의미는 마크업으로 — 이 분리가 시맨틱 마크업의 핵심 사고다.

4-2. 접근성만의 이득이 아니다

시맨틱 마크업은 스크린리더 사용자만을 위한 것이 아니다. 검색 엔진은 제목 구조로 페이지의 내용을 이해하고, 자동 도구는 구조를 분석하며, 향후 유지보수에서도 의미가 분명한 코드가 다루기 쉽다. 접근성을 위한 선택이 부수적으로 여러 이득을 준다. 그래서 우리는 시맨틱 마크업을 '비용'이 아니라 '여러 곳에 닿는 기반'으로 본다.

4-3. 완벽한 구조보다 일관된 구조

제목 수준을 한 치의 오차 없이 완벽하게 짜는 것이 목표는 아니다. 더 중요한 것은 일관성이다. 같은 종류의 콘텐츠가 같은 수준·같은 요소로 표시되면, 사용자는 한 페이지의 구조를 익혀 다른 페이지에서도 같은 방식으로 길을 찾는다. 들쭉날쭉한 '정확함'보다 일관된 '예측 가능함'이 사용자에게 낫다.

시맨틱 마크업을 둘러싼 흔한 오해와, 기준 연구의 시선을 표로 둔다.

흔한 오해	기준 연구의 시선
"큰 글자면 제목"	모양은 스타일, 의미는 마크업 — 분리
"접근성만의 부담"	검색·자동도구·유지보수에도 이득
"완벽한 수준이 목표"	정확함보다 일관된 예측 가능함

(관찰) 세 오해 모두 '시각'으로 구조를 끝내려는 데서 온다. 보이는 구조를 코드의 의미로도 옮길 때, 보든 듣든 같은 지도를 얻는다.

5. 구조를 다루는 실무적 시선

기준을 알았다면, 이를 실제로 적용하는 자리도 정리해 둘 만하다. 다음 편(036·037)에서 관찰과 점검을 더 다루므로, 여기서는 기준 연구의 마무리로 큰 줄기만 짚는다.

제목 계층은 디자인 단계에서 이미 정해진다. 시안에서 "이건 큰 제목, 저건 소제목"을 정할 때, 그 위계를 코드의 제목 수준과 맞춰 두면 구현이 어긋나지 않는다. 디자인의 시각적 위계와 코드의 의미적 위계가 처음부터 같은 그림이면, 나중에 둘이 따로 노는 일이 줄어든다.

또 페이지의 구조는 '윤곽(outline)'으로 확인할 수 있다. 페이지의 제목만 뽑아 목차처럼 늘어놓으면, 그 윤곽이 페이지의 줄거리로 읽히는지를 본다. 윤곽만 읽고도 페이지가 무슨 내용을 어떤 순서로 다루는지 짐작된다면, 그 구조는 듣는 사용자에게도 좋은 지도가 된다. 윤곽이 뒤죽박죽이라면, 그것은 화면에서 보이지 않더라도 듣는 사용자의 지도가 엉켜 있다는 뜻이다.

구조를 시각에서 의미로 옮기는 두 실무 시선을 정리하면 다음과 같다.

실무 시선	하는 일	어긋날 때
디자인-코드 위계 정렬	시안 위계 ↔ 제목 수준 일치	구현에서 둘이 따로 놂
윤곽으로 검증	제목만 뽑아 줄거리 확인	윤곽이 엉키면 듣는 지도도 엉킴

(관점) 구조는 구현이 끝난 뒤가 아니라 디자인 단계에서 정해진다. 시각적 위계를 잡을 때 의미적 위계도 함께 잡으면, 나중에 둘이 어긋날 일이 줄어든다.

5-1. 반론과 한계

시맨틱 마크업이 만능은 아니다. 아래 반론을 함께 둔다.

가능한 반론	우리의 한계 인정	보완하는 태도
"구조만 맞으면 읽힌다?"	구조≠내용 품질	제목 문구 자체도 명료하게
"완벽한 계층 강박"	정확함만 좇으면 경직	일관성·예측 가능성 우선
"기존 페이지 다 고치라?"	전면 개편은 부담	템플릿·신규부터 점진 적용

(한계) 이 글은 특정 사이트를 평가하지 않는다. 제목 계층과 시맨틱 마크업이 '무엇이고 왜 지도가 되는지'를 기준 연구로 정리했을 뿐, 개별 페이지의 적정 구조는 그 맥락을 본 뒤의 판단이다.

5-2. ViewCheck의 관점 — 사람과 도구의 분담

구조 점검에서, 자동 점검이 잘하는 자리와 사람이 봐야 하는 자리는 다음과 같다.

점검 항목	자동 점검이 보는 것	사람이 봐야 하는 것
제목 태그 유무	h1~h6 존재·수준 추출	큰 글자만이고 태그 없는지
수준 건너뜀	1→4 점프 등 위계 비약	줄거리가 자연스러운지
랜드마크	header/nav/main 역할 탐지	구역 구분이 실제 맞는지
윤곽	제목만 추출해 목차화	줄거리로 읽히는지

(관점) 도구는 제목 태그·수준·윤곽을 빠짐없이 뽑아 주지만, '그 윤곽이 줄거리로 읽히는가', '큰 글자를 제목으로 착각하지 않았는가'는 사람이 판단한다. 추출은 도구가, 의미 검증은 사람이 맡는다.

한 장 요약

구조 요소	듣는 사용자에게 주는 것
제목 태그(h1~h6)	페이지의 지도 — 제목으로 점프
제목 수준	포함 관계·깊이 (건너뛰면 혼란)
랜드마크	구역 단위 이동 (본문으로 바로가기)
목록·표·폼 요소	콘텐츠 종류·개수·관계의 맥락

맺으며

제목 계층은 화면을 보는 사람에게는 굳이 의식하지 않아도 되는 것이다. 눈이 알아서 구조를 읽기 때문이다. 그러나 듣는 사람에게는 이 계층이 페이지를 항해하는 거의 유일한 지도다. 그리고 그 지도는 글자 크기가 아니라 코드 속 의미로 그려진다.

시맨틱 마크업은 '코드를 예쁘게 쓰는 취향'이 아니라, 보이는 구조를 듣는 사람·기계에게도 전하는 다리다. 모양은 스타일로, 의미는 마크업으로 — 이 분리를 지키면, 같은 페이지가 보는 사람에게도 듣는 사람에게도 길을 안내한다. 다음 편에서는 이 지도가 사라진 화면 — 구조 없는 마크업에서 스크린리더가 길을 잃는 모습 — 을 관찰의 시선으로 들여다본다.

다음 편 예고 (036): 036편은 'B 관찰' 관점입니다. 제목처럼 보이지만 제목이 아니고, 구역이 나뉜 듯하지만 코드에는 구조가 없는 화면 — 스크린리더가 길을 잃는 순간이 어떤 모습인지를, 단정하지 않고 관찰의 시선으로 살펴봅니다.

참고한 공개 자료(출처):

W3C, Web Content Accessibility Guidelines (WCAG) 2.1 — 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, 2.4.1 Bypass Blocks (원문 확인 권장)
W3C, WAI — Page Structure / Headings, Landmarks 안내 (원문 확인 권장)
한국웹접근성 관련 지침(KWCAG) — 제목 제공·콘텐츠 구조 관련 항목 (원문 확인 권장)
행정안전부, 「전자정부 웹사이트 품질관리 지침」 — 접근성 영역 (고시 원문 확인 권장)

※ 위 자료의 구체 조항·수치는 인용 시점과 버전에 따라 달라질 수 있어, 실제 적용 전 원문 확인이 안전합니다. 본 글은 연구·관점 정리이며 특정 기관의 평가가 아닙니다.