앞선 두 편에서 뼈대의 개념과 시맨틱 태그라는 재료를 익혔습니다. 이번에는 그 재료를 실제 페이지의 골격으로 조립하는 방법을 다룹니다. 제가 실무에서 만든 거의 모든 페이지는 결국 머리글과 이동 메뉴와 본문과 바닥글이라는 네 개의 큰 뼈대로 나뉩니다. 이 네 구획의 자리와 관계를 몸에 익히면, 어떤 페이지를 마주해도 뼈대를 세우는 손이 흔들리지 않습니다.
이번 편에서는 이 네 구획을 어떤 순서로 놓고, 무엇을 본문 안에 두고 무엇을 바깥에 둘지, 그리고 같은 구획을 여러 번 쓸 때 어떻게 구분할지를 차례로 풀어가겠습니다. 골격이 튼튼해야 그 위에 어떤 콘텐츠를 올려도 안정적입니다.
1. 네 개의 큰 뼈대
페이지의 가장 바깥 골격은 대개 네 부분으로 나뉩니다. 위쪽에서 사이트를 소개하는 머리글, 그 안이나 근처에서 페이지 사이를 오가게 해주는 이동 메뉴, 이 페이지만의 고유한 핵심을 담는 본문, 그리고 아래쪽에서 저작권과 연락처 같은 마무리 정보를 담는 바닥글입니다. 대부분의 페이지가 이 네 틀 안에 들어갑니다.
머리글은 페이지 상단에 오는 소개 영역입니다. 로고, 사이트 이름, 주요 메뉴가 흔히 여기 들어갑니다. 다만 머리글이 반드시 페이지 맨 위에만 오는 것은 아닙니다. 하나의 글 안에서 그 글의 제목과 작성 정보를 묶는 작은 머리글로도 쓸 수 있습니다. 머리글은 그 영역의 도입부라는 의미이지 위치를 못 박는 태그가 아닙니다.
이동 메뉴는 페이지 사이 또는 페이지 안의 여러 지점 사이를 오가는 링크 묶음입니다. 모든 링크 묶음을 이동 메뉴로 감쌀 필요는 없고, 주요한 이동 수단에만 씁니다. 본문 속 문장에 딸린 링크 하나까지 이동 메뉴로 감싸면 오히려 이정표가 많아져 혼란스럽습니다. 큰 이동 축에만 쓰는 것이 핵심입니다.
본문은 이 페이지에서만 볼 수 있는 고유한 알맹이입니다. 여러 페이지에 똑같이 반복되는 머리글이나 메뉴, 바닥글은 본문이 아닙니다. 그래서 본문 태그는 한 문서에 하나만 둡니다. 화면 낭독 프로그램 사용자는 본문 바로가기 기능으로 반복되는 영역을 건너뛰고 곧장 알맹이로 뛰어들 수 있습니다.
바닥글은 페이지의 마무리 정보를 담습니다. 저작권 표시, 연락처, 관련 정책 링크가 흔합니다. 머리글과 마찬가지로 바닥글도 페이지 전체의 바닥글일 수도 있고, 하나의 글 안에서 그 글의 출처를 묶는 작은 바닥글일 수도 있습니다. 위치가 아니라 역할로 이해하는 것이 열쇠입니다.
2. 무엇을 본문 안에 두고 무엇을 바깥에 둘까
초보 시절 저를 가장 헷갈리게 한 질문이 바로 이것이었습니다. 머리글과 메뉴를 본문 안에 넣어야 하나 밖에 넣어야 하나. 답의 기준은 단순합니다. 여러 페이지에 공통으로 반복되는가, 아니면 이 페이지에만 있는가. 반복되는 것은 본문 바깥에, 고유한 것은 본문 안에 둡니다.
사이트의 로고와 전역 메뉴는 거의 모든 페이지에 똑같이 나옵니다. 그러니 이들은 본문 바깥의 머리글에 둡니다. 반대로 이 글의 제목, 이 글의 내용, 이 글에 달린 댓글은 이 페이지에만 있는 고유한 것이니 본문 안에 둡니다. 이 구분만 지켜도 본문이 페이지의 진짜 알맹이를 정확히 가리키게 됩니다.
바닥글도 같은 기준으로 나눕니다. 사이트 전체의 저작권과 정책 링크는 모든 페이지에 반복되니 본문 바깥의 바닥글에 둡니다. 그런데 이 글의 출처나 이 글을 쓴 사람의 소개처럼 이 페이지에만 해당하는 마무리는 본문 안, 그 글 태그 안의 작은 바닥글에 두는 것이 자연스럽습니다.
이 구분이 왜 중요한지는 검색과 접근성 양쪽에서 드러납니다. 검색엔진은 본문 안의 내용을 이 페이지의 주제로 무겁게 봅니다. 반복되는 메뉴까지 본문에 넣으면 주제가 흐려집니다. 화면 낭독 프로그램 사용자도 본문 바로가기로 반복 영역을 건너뛰려는데, 반복 영역이 본문 안에 섞여 있으면 그 편의가 사라집니다.
제가 이 원칙을 적용한 뒤로 페이지의 성격이 또렷해졌습니다. 어떤 페이지를 열어도 본문 태그 하나만 찾으면 그 페이지의 알맹이가 어디부터 어디까지인지 즉시 보였습니다. 반복 껍데기와 고유 알맹이가 코드 수준에서 분리되니, 나중에 공통 껍데기를 바꿀 때도 알맹이를 건드릴 일이 없었습니다.
정리하면 판단 기준은 반복이냐 고유냐 하나입니다. 이 질문을 매 요소마다 던지면 본문 안팎의 경계가 저절로 그어집니다. 그리고 그 경계가 곧 유지보수의 경계이자 검색과 접근성의 경계가 됩니다.
3. 같은 구획을 여러 번 쓸 때
한 페이지에 이동 메뉴가 두 개 이상 필요한 경우가 흔합니다. 위쪽의 전역 메뉴와 옆쪽의 페이지 내 목차가 함께 있는 식입니다. 둘 다 이동 메뉴 태그로 감싸는 것은 옳지만, 그러면 화면 낭독 프로그램이 이동 메뉴가 두 개라고만 알려줄 뿐 어느 것이 무엇인지 구분하지 못합니다.
이때 각 구획에 이름표를 달아 구분해 줍니다. 아래 예시처럼 각 이동 메뉴에 서로 다른 설명 이름을 붙이면, 하나는 주요 메뉴, 다른 하나는 페이지 내 목차라고 또렷이 안내됩니다. 같은 종류의 랜드마크가 여러 개일 때는 이렇게 이름표로 구분하는 것이 원칙입니다.
<nav aria-label="주요 메뉴"> ... </nav>
<nav aria-label="페이지 내 목차"> ... </nav>
이 이름표는 화면에는 보이지 않지만 보조기기에는 또렷이 전달됩니다. 눈으로 보는 사용자는 위치와 모양으로 두 메뉴를 구별하지만, 소리로 듣는 사용자에게는 이름표가 유일한 단서입니다. 그래서 저는 같은 구획을 두 번 이상 쓸 때 이름표 다는 것을 잊지 않으려 합니다.
머리글과 바닥글도 하나의 글 안에서 반복될 수 있다고 앞서 말했습니다. 페이지 전체의 머리글과 글 하나의 머리글이 함께 있어도 문제없습니다. 브라우저는 어느 태그의 자식인지로 둘을 구분하기 때문입니다. 페이지 바깥쪽 머리글과 글 안쪽 머리글은 소속이 다르니 서로 충돌하지 않습니다.
이렇게 같은 구획 태그를 문맥에 따라 여러 번 쓸 수 있다는 점이 시맨틱 태그의 유연함입니다. 위치를 못 박지 않고 역할로 정의되어 있기에, 페이지 수준에서도 글 수준에서도 같은 태그가 자연스럽게 쓰입니다. 이 유연함을 이해하면 태그를 훨씬 대담하게 활용할 수 있습니다.
4. 골격을 조립한 전체 예시
지금까지의 이야기를 하나의 골격으로 모아 보겠습니다. 아래 예시는 특정 사이트가 아니라 어디에나 통하는 일반적인 페이지 뼈대입니다. 반복되는 껍데기는 본문 바깥에, 고유한 알맹이는 본문 안에 놓인 것에 주목해 보세요.
<body>
<header>
<a href="/">로고</a>
<nav aria-label="주요 메뉴">메뉴</nav>
</header>
<main>
<article>
<h1>글 제목</h1>
<p>본문 내용</p>
</article>
</main>
<footer><p>저작권 표시</p></footer>
</body>
이 골격을 보면 머리글이 로고와 메뉴를 품고 맨 위에 있습니다. 이 둘은 모든 페이지에 반복되므로 본문 바깥에 자리 잡았습니다. 로고는 홈으로 돌아가는 링크로, 메뉴는 이름표가 달린 이동 메뉴로 되어 있어 각자의 역할이 태그로 선언됩니다.
가운데의 본문 태그 안에는 글 태그가 놓이고, 그 안에 이 페이지만의 제목과 내용이 담겼습니다. 이 부분이 이 페이지의 고유한 알맹이입니다. 만약 이 글에 여러 주제가 있다면 구획 태그로 나누고 각 구획에 소제목을 달면 됩니다.
맨 아래 바닥글은 저작권 표시를 담고 본문 바깥에 있습니다. 이 역시 모든 페이지에 반복되기 때문입니다. 이렇게 네 뼈대가 각자의 자리에서 각자의 역할을 하면, 코드만 봐도 페이지의 구조가 그대로 읽힙니다. 이것이 우리가 목표로 하는 스스로 설명되는 골격입니다.
5. 골격을 세울 때 저의 순서
실전에서 저는 페이지를 항상 바깥에서 안으로 짭니다. 먼저 머리글과 본문과 바닥글의 큰 세 틀을 세우고, 필요하면 머리글 안에 이동 메뉴를 넣습니다. 이 큰 틀이 서고 나서야 본문 안으로 들어가 글과 구획을 채웁니다. 큰 것부터 정하면 작은 것들이 헤매지 않습니다.
두 번째로, 각 요소를 놓을 때마다 이것이 반복인가 고유인가를 되묻습니다. 이 질문 하나로 본문 안팎의 자리가 정해지기 때문입니다. 이 습관이 붙으면 나중에 공통 껍데기를 한꺼번에 바꾸는 일이 아주 쉬워집니다.
세 번째로, 같은 종류의 랜드마크가 둘 이상이면 반드시 이름표를 답니다. 눈에 보이지 않아 잊기 쉽지만, 소리로 듣는 사용자에게는 결정적인 단서입니다. 저는 이동 메뉴를 하나 더 추가할 때마다 이름표부터 챙기는 것을 규칙으로 삼았습니다.
마지막으로, 완성한 골격을 개발자 도구의 접근성 트리로 확인합니다. 머리글, 이동 메뉴, 본문, 바닥글이 랜드마크 목록에 또렷이 잡혀 있으면 골격이 제대로 선 것입니다. 여기에 정체불명의 상자만 가득하다면 아직 의미가 부족한 것이니 되짚습니다.
이 순서를 몸에 붙이고 나서, 저는 새 페이지를 시작하는 데 드는 망설임이 크게 줄었습니다. 골격 세우는 절차가 정해져 있으니 매번 고민할 필요가 없었습니다. 반복되는 절차를 습관으로 만드는 것이 초보를 벗어나는 지름길이라고 저는 믿습니다.
여기서 초보들이 자주 혼동하는 지점을 하나 더 짚고 싶습니다. 머리글과 이동 메뉴는 별개의 태그이지, 하나가 다른 하나를 반드시 품는 관계가 아닙니다. 흔히 머리글 안에 이동 메뉴를 넣지만, 그것은 그렇게 배치하는 것이 자연스럽기 때문이지 규칙이라서가 아닙니다. 이동 메뉴는 머리글 밖에 독립적으로 둘 수도 있고, 본문 안에서 페이지 내 목차로 쓸 수도 있습니다. 태그의 역할과 배치를 분리해서 생각하는 것이 중요합니다.
또한 모든 페이지가 반드시 이 네 뼈대를 다 갖춰야 하는 것도 아닙니다. 어떤 페이지에는 곁가지가 없을 수 있고, 아주 단순한 페이지에는 이동 메뉴가 머리글에 짧게만 들어갈 수도 있습니다. 네 뼈대는 강제 규격이 아니라 대부분의 페이지에 통하는 기본 틀입니다. 페이지의 성격에 따라 필요한 뼈대만 골라 쓰되, 있는 뼈대는 올바른 태그로 표시한다는 원칙만 지키면 됩니다.
제가 실무에서 겪은 흔한 실수 하나는 본문 태그를 여러 개 둔 것이었습니다. 페이지에 큰 영역이 두 개 있길래 각각을 본문으로 감쌌는데, 이는 잘못이었습니다. 본문은 이 페이지의 고유한 핵심을 담는 단 하나의 영역이어야 합니다. 두 영역이 모두 핵심이라면 하나의 본문 안에서 구획 태그로 나누는 것이 맞습니다. 본문이 둘이면 어느 것이 진짜 핵심인지 기계가 판단할 수 없습니다.
반대로 곁가지 태그는 여러 개 있어도 괜찮습니다. 관련 글 모음과 광고 영역이 따로 있다면 각각을 곁가지로 감싸고 이름표로 구분하면 됩니다. 본문은 하나, 곁가지는 여럿이라는 이 비대칭을 이해하면 구획을 배치할 때 헷갈릴 일이 줄어듭니다. 핵심은 하나뿐이지만 곁가지는 여러 갈래일 수 있다는 상식과 맞닿아 있습니다.
골격을 세운 뒤에는 반드시 눈으로만이 아니라 구조로도 확인하는 습관을 권합니다. 화면상 잘 나온다고 골격이 옳게 선 것은 아니기 때문입니다. 저는 개발자 도구에서 문서의 개요를 펼쳐 제목 계층과 랜드마크가 의도대로 잡혔는지 매번 확인합니다. 여기서 빠진 뼈대나 중복된 본문이 발견되면 화면에 나오기 전에 바로잡습니다.
이런 확인 과정을 거치면 골격의 완성도가 눈에 띄게 올라갑니다. 화면만 보고 넘어갔다면 놓쳤을 구조적 결함을 미리 잡아낼 수 있기 때문입니다. 뼈대를 세우는 일은 겉으로 화려하지 않아 소홀히 하기 쉽지만, 이 보이지 않는 토대가 페이지의 접근성과 검색과 유지보수를 조용히 떠받칩니다.
이번 편에서는 네 개의 큰 뼈대로 페이지 골격을 세우는 법을 다뤘습니다. 다음 편에서는 이 골격 안을 채우는 텍스트 콘텐츠, 그러니까 제목과 문단과 목록과 인용을 의미에 맞게 표시하는 방법으로 들어가겠습니다. 골격이 섰으니 이제 그 안에 글을 담을 차례입니다.