Quartz 4

시맨틱 웹과 시맨틱 태그 개념

8 min read

시맨틱 태그와 시맨틱 웹: ‘잘’ 쓰는 법과 더 큰 그림

웹 페이지를 만들 때 <div> 태그만으로 전체 구조를 짜는 경우가 많습니다. 기술적으로 가능하지만, 이는 마치 모든 물건을 ‘상자’라는 이름의 똑같은 상자에 담아두는 것과 같습니다. 어떤 상자에 무엇이 들었는지 열어보기 전엔 알 수 없죠. 시맨틱 태그는 각 상자에 ‘옷’, ‘책’, ‘주방용품’처럼 명확한 이름표를 붙여주는 행위입니다.

이 아티클에서는 시맨틱 태그를 ‘잘’ 사용하는 구체적인 방법과, 이것이 웹의 미래인 ‘시맨틱 웹’과 어떻게 연결되는지 심화적인 관점에서 알아보겠습니다.

🧐 Before & After: 차이를 한눈에 보기

간단한 블로그 게시물 구조를 예로 들어보겠습니다.

❌ Before: <div>만 사용한 경우

<div class="header">
  <h1>My Blog</h1>
  <div class="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</div>
 
<div class="main-content">
  <div class="article">
    <h2>Article Title</h2>
    <p>Article content...</p>
  </div>
</div>
 
<div class="footer">
  <p>&copy; 2025 My Blog</p>
</div>
  • 문제점: 구조를 파악하려면 class 이름을 일일이 해석해야 합니다. 기계(검색엔진, 스크린리더)는 이 div가 머리말인지, 본문인지 전혀 알 수 없습니다.

✅ After: 시맨틱 태그를 사용한 경우

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
 
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>
 
<footer>
  <p>&copy; 2025 My Blog</p>
</footer>
  • 개선점: 코드만 봐도 각 영역의 역할이 명확하게 드러납니다. 기계는 <main> 태그를 보고 “이것이 핵심 콘텐츠”라고 즉시 인식할 수 있습니다.

🚀 왜 써야만 하는가? 구체적인 이점들

1. SEO: 구글이 내 페이지를 더 좋아하게 만드는 법

단순히 “SEO에 좋다”를 넘어, 구글은 시맨틱 태그를 분석해 검색 결과 자체를 다르게 보여줍니다. 예를 들어, 레시피 페이지에 <article>과 함께 상세 정보를 구조화하면, 구글 검색 결과에 조리 시간, 평점(별점) 등이 표시되는 **리치 스니펫(Rich Snippet)**이 나타날 확률이 높아집니다. 이는 사용자의 눈길을 사로잡아 클릭률을 높이는 직접적인 효과를 가져옵니다.

2. 웹 접근성: 모두를 위한 웹

스크린 리더 사용자는 키보드 단축키로 페이지의 주요 영역을 건너뛰며 탐색합니다. 예를 들어, 사용자는 “다음 main 영역으로 가기” 또는 “모든 nav 목록 보기” 같은 명령을 내릴 수 있습니다. 시맨틱 태그는 이러한 ‘랜드마크’ 역할을 하여 정보의 바다에서 길을 잃지 않도록 돕는 등대와 같습니다.

🛠️ 흔한 실수와 모범 사례

  • ❌ 실수: <section>을 <div>처럼 사용하기
    • <section>은 단순한 영역 구분이 아닙니다. 연관 있는 콘텐츠를 그룹화하고, 보통 그 그룹을 설명하는 제목(h1-h6)을 포함해야 합니다. 제목 없는 <section>은 의미적으로 부족할 수 있습니다.
  • ❌ 실수: <header>와 <footer>는 페이지에 단 한 번만?
    • 아닙니다. <header>와 <footer>는 <article>이나 <section> 내부에도 각자의 머리말과 꼬리말을 정의하기 위해 얼마든지 사용될 수 있습니다.
  • ✅ 모범 사례: <article> vs <section>
    • 이 내용만 떼어서 RSS 피드나 다른 사이트에 발행해도 말이 되면 <article>입니다. (예: 블로그 글 하나)
    • 전체적인 맥락의 일부로서 의미가 있다면 <section>입니다. (예: “회사 소개” 페이지의 “연혁”, “CEO 인사말”, “찾아오시는 길” 각 부분)

🌌 심화 관점: 시맨틱 웹을 향한 다음 단계

시맨틱 태그는 문서의 구조적 의미를 부여하지만, 내용물의 데이터적 의미까지 알려주진 못합니다. “이것은 기사(article)다”라고는 알려주지만, “이 기사는 ‘레시피’에 대한 것이고, 조리 시간은 ‘30분’이다”라는 상세한 데이터는 알려주지 못하죠.

이것이 바로 **구조화된 데이터(Structured Data)**와 JSON-LD가 등장하는 지점입니다.

  • 구조화된 데이터: 웹 페이지에 있는 정보에 대한 명세서입니다. 사람 이름, 이벤트 날짜, 상품 가격 같은 데이터의 의미를 명확하게 정의하는 약속(어휘집, 예: schema.org)입니다.
  • JSON-LD: 이 구조화된 데이터를 웹 페이지에 표현하는 현대적인 방식입니다. 보통 <script> 태그 안에 JSON 형식으로 작성하며, 사용자 눈에는 보이지 않지만 기계(검색엔진)는 읽을 수 있습니다.

간단한 JSON-LD 예시:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Gildong Hong",
  "url": "http://www.example.com",
  "jobTitle": "Software Engineer"
}
</script>

시맨틱 태그로 뼈대를 잡고, JSON-LD로 그 안의 데이터에 상세한 의미를 부여하는 것. 이 두 가지가 함께할 때 우리는 진정한 시맨틱 웹에 더 가까워질 수 있습니다.

결론

시맨틱 태그는 더 이상 선택이 아닌 필수입니다. SEO, 접근성, 유지보수성을 모두 잡는 기본기이며, 더 나아가 지능형 웹으로 나아가는 초석입니다. <div>의 유혹에서 벗어나, 지금부터라도 모든 태그에 의미를 부여하는 습관을 들여보세요.

작성일: 2025-10-31

그래프 뷰