시맨틱 HTML로 마크업 개선하고 접근성 높이기

문제 상황

회사 메인 프로젝트의 마크업이 전부 div와 span으로만 이루어져 있었다. 웹 접근성 검수를 받으면서 여러 문제가 발견되어 시맨틱 HTML로 전환 작업을 진행했다.

주요 변경 사항

레이아웃 구조화

<!-- Before -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
</div>

<!-- After -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

콘텐츠 구조 명확화

• <section>: 주제별 콘텐츠 그룹
• <article>: 독립적인 콘텐츠 (블로그 포스트, 댓글)
• <aside>: 사이드바, 관련 링크
• <footer>: 하단 정보

제목 계층 구조

가장 큰 문제는 h1이 여러 개 있거나 h2 다음에 h4가 오는 등 계층이 엉망이었다. 문서 아웃라인을 그려가며 제목 레벨을 재정리했다.

<article>
  <h2>게시글 제목</h2>
  <section>
    <h3>소제목</h3>
    <p>내용...</p>
  </section>
</article>

결과

스크린리더로 테스트했을 때 랜드마크 영역으로 빠른 이동이 가능해졌고, 제목 단위로 문서 탐색이 자연스러워졌다. Google Search Console에서도 구조화 데이터 점수가 올라갔다.

CSS는 거의 건드릴 필요가 없었다. 클래스 선택자 대신 태그 선택자를 쓸 수 있게 되어 오히려 스타일 코드가 간결해졌다.

배운 점

시맨틱 마크업은 추가 비용이 거의 없으면서도 접근성, SEO, 유지보수성을 모두 개선할 수 있는 가성비 좋은 작업이었다. 앞으로는 초기부터 적절한 태그를 선택하는 습관을 들여야겠다.