시맨틱 마크업은 HTML 요소를 콘텐츠의 의미와 역할을 반영해 사용하는 방식으로, <div> 대신 <header>, <main>, <article> 같은 태그를 활용합니다. 이는 접근성, SEO, 유지보수성 향상에 중요합니다.
접근성
시맨틱 태그는 스크린 리더가 페이지 구조를 이해하도록 도와 시각장애인 등 다양한 사용자가 웹을 쉽게 탐색할 수 있게 합니다.
SEO
검색 엔진은 시맨틱 구조를 통해 콘텐츠의 계층과 중요도를 파악하며, 이는 검색 순위에 긍정적인 영향을 미칩니다.
유지보수성
의미 있는 태그는 코드 가독성을 높여 협업과 유지보수를 용이하게 합니다.
시맨틱 마크업이란?
시맨틱 마크업은 HTML 요소를 시각적 스타일링이 아닌, 콘텐츠의 의미와 역할을 중심으로 사용하는 것을 의미합니다.
- 비시맨틱:
<div class="header">→ 의미 전달 부족. - 시맨틱:
<header>→ 페이지의 헤더임을 명확히 전달.
대표적인 시맨틱 태그
<header>: 페이지 또는 섹션의 머리글.
<nav>: 내비게이션 메뉴.
<main>: 페이지의 주요 콘텐츠.
<article>: 독립적인 콘텐츠(예: 블로그 포스트).
<section>: 주제별 콘텐츠 그룹.
<aside>: 부수적인 콘텐츠(예: 사이드바).
<footer>: 페이지 또는 섹션의 바닥글.
<figure>/<figcaption>: 이미지와 캡션.
시맨틱 마크업의 중요성
(1) 접근성 (Accessibility)
시맨틱 태그는 스크린 리더(예: NVDA, VoiceOver)가 페이지 구조를 파악하도록 돕습니다.
<!-- 비시맨틱 -->
<div class="nav">Menu</div>
<!-- 시맨틱 -->
<nav aria-label="Main navigation">Menu</nav><nav>는 내비게이션 영역임을 알려줘 사용자가 메뉴를 쉽게 찾을 수 있습니다.- WAI-ARIA 속성(예: role, aria-label)과 함께 사용하면 접근성이 더욱 강화됩니다.
(2) SEO (검색 엔진 최적화)
검색 엔진은 <header>, <main>, <article> 같은 태그를 통해 콘텐츠의 계층과 중요도를 판단합니다.
- 예:
<h1>은 페이지의 주요 제목으로 인식되며,<article>은 독립적인 콘텐츠로 간주되어 검색 결과에 더 잘 반영됩니다.
시맨틱 마크업은 크롤러가 페이지의 핵심 콘텐츠를 빠르게 파악하도록 돕습니다.
(3) 유지보수성
시맨틱 태그는 코드의 의도를 명확히 전달해 개발자 간 협업과 유지보수를 쉽게 만듭니다.
- 예:
<div id="content">보다<main>이 콘텐츠 영역임을 직관적으로 보여줍니다.
CSR에서의 SEO 영향
CSR에서는 초기 HTML이 비어 있어 SEO에 불리할 수 있지만, 현대 검색 엔진(예: Google)은 JavaScript 렌더링을 일부 지원합니다. 시맨틱 마크업은 렌더링된 콘텐츠의 구조를 명확히 해 검색 엔진이 중요한 콘텐츠를 더 잘 인식하도록 돕습니다. 따라서 CSR에서도 SEO에 긍정적인 영향을 미칩니다.
실무 팁
React/Vue: <div> 남용 대신 시맨틱 태그 사용(예: <header>).
ARIA: <nav role="navigation">으로 접근성 강화.
도구: ESLint(eslint-plugin-jsx-a11y)로 시맨틱 마크업과 접근성 규칙 강제.
