🏛️ 02. 시맨틱 HTML: div 공화국에서 탈출하는 법

2026년 3월 5일 수정됨

📋 개요

article, section, aside, nav, main, header, footer — 의미 있는 태그 하나가 SEO, 접근성, 유지보수를 한 번에 해결하는 이유를 파헤칩니다.

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 18분 / 핵심 파트만: 10분

🗺️ 이 문서의 흐름

[div 남용의 폐해] → [시맨틱 태그 총정리] → [article vs section 결정 트리] → [Next.js 컴포넌트와의 연계]

🎯 이 문서를 다 읽으면 할 수 있는 것

<div> 대신 써야 할 시맨틱 태그를 상황에 맞게 선택할 수 있다.
<article> 과 <section> 의 차이를 원리로 설명할 수 있다.
시맨틱 HTML이 SEO와 스크린리더에 미치는 영향을 설명할 수 있다.
React/Next.js 컴포넌트에서 시맨틱 태그를 올바르게 적용할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철 ( 신입 ): "영호 님, 저 지금까지 모든 레이아웃을 <div> 로 잡았는데요, 뭐가 문제인가요? 화면에는 똑같이 나오고, 기능도 다 돼요. 근데 영숙 님이 '시맨틱하게 짜야 한다'고 계속 얘기하는데, 솔직히 <div> 쏙 집어넣고 CSS 입히면 똑같지 않나요?"
🦁 영호 ( 리드 ): "화면에 보이는 게 똑같다고 코드가 똑같은 건 아니에요. 브라우저는 <div> 를 보면 '이게 뭔지 모르겠다'고 해요. 근데 <article> 을 보면 '아, 이건 독립적인 콘텐츠 덩어리구나'라고 바로 파악해요. 구글 봇, 스크린리더, 심지어 6개월 후의 영철 님도 시맨틱 태그가 있어야 코드를 읽을 수 있어요."

🤔 왜 알아야 하는가

영수네 커뮤니티 SEO 개선 작업을 맡은 영철이, Google Search Console을 열었다.

🐣 영철: "아니... 우리 커뮤니티 글이 구글에 제대로 나와야 하는데 왜 이렇게 검색 순위가 낮아요?"

👔 영수(PM): "개발자 분들 도움 좀 받아야 할 것 같아요. 검색 엔진 최적화 점수가 너무 낮아요."

영철이의 기존 코드:

<!-- ❌ 영철이의 최초 코드: div 공화국 -->
<div class="wrapper">
  <div class="header">
    <div class="logo">영수네 커뮤니티</div>
    <div class="nav">
      <div class="nav-item">홈</div>
      <div class="nav-item">게시판</div>
    </div>
  </div>
  <div class="main">
    <div class="post">
      <div class="post-title">리액트 상태관리 어떻게 하나요?</div>
      <div class="post-content">저는 요즘 Zustand를 쓰는데...</div>
    </div>
  </div>
  <div class="sidebar">
    <div class="popular-posts">인기 게시글</div>
  </div>
</div>

이 코드를 구글 봇이 읽으면? <div> 는 구글에게 완전히 의미 없는 그릇이야. "여기가 nav인지, main인지, footer인지" 전혀 알 수 없어.

🏛️ 1. 시맨틱 태그 총정리 — 각 태그의 '역할 카드'

1-1. 페이지 레벨 구조 태그

<!-- ✅ 5년 차의 코드: 시맨틱 태그로 의미 있는 구조 -->
<body>
  <header>          <!-- 최상위: 사이트 로고, 메인 내비게이션 -->
    <nav>           <!-- 내비게이션 링크 묶음 -->
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/posts">게시판</a></li>
      </ul>
    </nav>
  </header>
 
  <main>            <!-- 페이지의 핵심 콘텐츠: 페이지당 딱 하나만 -->
    <article>       <!-- 독립적으로 배포/공유될 수 있는 완결된 콘텐츠 -->
      <h1>리액트 상태관리 어떻게 하나요?</h1>
      <p>저는 요즘 Zustand를 쓰는데...</p>
    </article>
  </main>
 
  <aside>           <!-- 본문과 간접적으로 연관된 보조 콘텐츠 -->
    <h2>인기 게시글</h2>
  </aside>
 
  <footer>          <!-- 저작권, 연락처, 부가 링크 -->
    <p>© 2025 영수네 커뮤니티</p>
  </footer>
</body>

각 태그가 브라우저/검색엔진에게 전달하는 의미:

태그	ARIA Role	브라우저/검색엔진이 이해하는 의미
`<header>`	`banner`	"이 페이지/섹션의 소개와 네비게이션이 있어요"
`<nav>`	`navigation`	"이건 내비게이션 링크 모음이에요"
`<main>`	`main`	"이 페이지의 핵심 콘텐츠는 여기예요" (페이지당 1개)
`<article>`	`article`	"독립적으로 뜯어내도 의미가 완전한 콘텐츠예요"
`<section>`	`region`	"같은 주제를 묶은 섹션이에요"
`<aside>`	`complementary`	"본문과 간접 연관된 보조 정보예요"
`<footer>`	`contentinfo`	"저작권, 연락처 등 하단 정보예요"

🔀 2. article vs section — 가장 많이 헷갈리는 쌍

🐣 영철: "아, 근데요. <article> 이랑 <section> 이 제일 헷갈려요. 둘 다 콘텐츠 묶는 거 아닌가요?"

🦁 영호 리드: "딱 하나만 기억해요. <article> 은 RSS, 카카오톡으로 공유했을 때 그것만 따로 봐도 말이 되는 콘텐츠예요. <section> 은 페이지 안에서만 의미가 있는 주제별 챕터고요."

결정 트리로 이해하기

이 콘텐츠 블록이...

Q1. 혼자 떼어내서 공유해도 의미가 통하는가?
  ├─ YES → <article> (블로그 포스트, 댓글, 뉴스 기사, 제품 카드)
  └─ NO  → Q2. 같은 주제로 묶인 챕터인가?
             ├─ YES → <section> (페이지 내 탭, 소개/기능/가격 섹션)
             └─ NO  → 그냥 스타일용이면 <div>

<!-- 영수네 커뮤니티 게시글 상세 페이지 실전 예시 -->
<main>
  <!-- article: 이 게시글 자체가 독립적인 콘텐츠 단위 -->
  <article>
    <h1>리액트 상태관리 비교: Zustand vs Jotai</h1>
    <p>저는 요즘 Zustand를 쓰는데, Jotai와 성능 차이가...</p>
 
    <!-- section: article 안의 챕터 구분 -->
    <section>
      <h2>Zustand 장단점</h2>
      <p>...</p>
    </section>
    <section>
      <h2>Jotai 장단점</h2>
      <p>...</p>
    </section>
 
    <!-- article 안의 article: 댓글도 독립적인 콘텐츠 -->
    <section>
      <h2>댓글 3개</h2>
      <article>
        <h3>영철 님의 댓글</h3>
        <p>저도 Zustand 씁니다!</p>
      </article>
      <article>
        <h3>영호 님의 댓글</h3>
        <p>원리부터 파악하세요.</p>
      </article>
    </section>
  </article>
</main>

🔍 3. 헤딩 계층구조 — H1~H6의 올바른 사용법

시맨틱 HTML에서 헤딩 계층 은 문서의 목차나 다름없어. 스크린리더 사용자는 헤딩으로 페이지를 탐색하거든.

<!-- ❌ 흔한 실수: 크기 때문에 헤딩 레벨을 선택 -->
<h1>영수네 커뮤니티</h1>
<h3>리액트 게시판</h3>  <!-- h2 건너뜀! -->
<h5>인기 글 제목</h5>   <!-- h4 건너뜀! -->
<!-- 해결책: CSS로 크기 조정, 헤딩 레벨은 논리적 계층으로 -->
 
<!-- ✅ 올바른 헤딩 계층 -->
<body>
  <header>
    <h1>영수네 커뮤니티</h1>  <!-- 페이지당 H1은 딱 하나 -->
  </header>
  <main>
    <h2>리액트 게시판</h2>
    <article>
      <h3>게시글 제목</h3>
      <section>
        <h4>댓글</h4>
      </section>
    </article>
  </main>
</body>

🔗 SEO 연결 고리
Google 검색 봇은 H1이 단 하나여야 한다고 강하게 권장해요. H1은 "이 페이지가 무엇에 관한 페이지인지" 를 선언하는 가장 중요한 신호거든요. H1이 여러 개이거나 없으면 페이지 주제를 잘못 파악해서 검색 순위에 불리하게 작용해요.

⚛️ 4. React/Next.js 컴포넌트에서의 시맨틱 HTML

🐣 영철: "근데 React에서는 컴포넌트로 쪼개니까, 어차피 <div> 로 감싸는 거 아닌가요?"

🦁 영호 리드: "바로 그 착각이 많은 React 코드베이스를 div 공화국으로 만들어요. 컴포넌트 = JSX 래퍼 = 반드시 <div> 라는 공식은 틀려요."

// ❌ div 남용 패턴: 의미 없는 div가 DOM에 쌓임
function PostList() {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id} className="post-card">
          <div className="post-title">{post.title}</div>
          <div className="post-content">{post.content}</div>
        </div>
      ))}
    </div>
  );
}
 
// ✅ 시맨틱 패턴: 의미 있는 태그 사용
function PostList() {
  return (
    <section aria-label="게시글 목록">
      {posts.map(post => (
        // article: 각 게시글은 독립적인 콘텐츠 단위
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </section>
  );
}

// Next.js 레이아웃 컴포넌트: 시맨틱 뼈대 고정
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header>
          <nav>
            <Link href="/">홈</Link>
            <Link href="/posts">게시판</Link>
          </nav>
        </header>
        {/* main이 children을 감싸면, 모든 페이지의 핵심 콘텐츠가 올바르게 래핑됨 */}
        <main>{children}</main>
        <footer>
          <p>© 2025 영수네 커뮤니티</p>
        </footer>
      </body>
    </html>
  );
}

React Fragment 활용: 불필요한 DOM 노드를 만들지 않으면서 여러 시맨틱 요소를 반환할 수 있어.

// Fragment로 불필요한 div 래퍼 제거
function ArticleWithSidebar() {
  return (
    <>
      <article>
        <h1>게시글 제목</h1>
      </article>
      <aside>
        <h2>관련 글</h2>
      </aside>
    </>
  );
}

🏁 핵심 패턴 총정리

상황	쓸 태그	절대 쓰지 말 것
사이트 로고 + 메인 내비	`<header>` + `<nav>`	`<div class="header">`
페이지 핵심 콘텐츠 영역	`<main>`	`<div id="content">`
블로그 글, 뉴스, 댓글	`<article>`	`<div class="post">`
페이지 내 챕터/탭 구분	`<section>` (h자식 필수)	`<div class="tab">`
본문 연관 보조 정보	`<aside>`	`<div class="sidebar">`
저작권/연락처 하단	`<footer>`	`<div class="footer">`
순수 스타일 래핑	`<div>`	—

📝 마무리 퀴즈

Q1. 다음 시나리오에서 가장 적합한 HTML 태그는?

영수네 커뮤니티에 사용자가 작성한 리뷰 카드들이 있다.
각 리뷰는 제목, 별점, 내용, 작성일로 구성되어 있으며,
독립적으로 RSS 피드나 SNS에 공유될 수 있다.

A) <section>
B) <div>
가) <article>
라) <aside>

✅ 정답: 가

💡 상세 해설:

원리 설명: <article> 은 "독립적으로 배포 및 재사용 가능한 완결된 콘텐츠" 를 나타냅니다. 각 리뷰는 맥락 없이도 혼자 의미가 통하는 콘텐츠이므로 <article> 이 정확합니다.
오답 피드백: <section> 은 페이지 내에서 챕터를 나누는 용도로, 혼자서는 의미가 완결되지 않아요. <aside> 는 본문과 간접 연관된 보조 정보에, <div> 는 순수 스타일 래핑에 써야 해요.
📌 핵심 기억법: "공유 가능한 완결 콘텐츠 = <article>, 페이지 내 챕터 구분 = <section>"

Q2. 아래 코드에서 잘못된 점을 모두 고르세요.

<body>
  <div class="header">
    <h3>영수네 커뮤니티</h3>
  </div>
  <div class="content">
    <h1>게시글 1</h1>
    <h1>게시글 2</h1>
    <h1>게시글 3</h1>
  </div>
</body>

✅ 정답: ① <div class="header"> → <header> 로, ② H3이 H1보다 먼저 등장 (헤딩 계층 역전), ③ H1이 여러 개 (페이지당 H1은 하나)

💡 상세 해설:

원리 설명: ① <header> 는 시맨틱 태그이므로 <div> 대신 써야 해요. ② 사이트 제목이 H3인데 게시글 제목이 H1이면 계층이 역전돼요. 사이트 제목이 H1, 게시글 제목이 H2~H3이 맞습니다. ③ H1은 검색엔진에게 "이 페이지의 핵심 주제", 페이지당 하나여야 해요.
📌 핵심 기억법: "H1은 페이지당 1개, 헤딩 레벨은 논리 계층 순서대로 (건너뛰기 금지)"

Q3. 영철이의 테스트 타임

영수(PM)가 새로운 요구사항을 들고 왔다: "우리 사이트 하단에 고객센터 연락처, 이용약관, 개인정보처리방침 링크를 넣어주세요. 그리고 메인 콘텐츠 오른쪽에 '이 글을 읽은 사람들이 읽은 글' 박스도 추가해주세요."

영철이는 두 요소 모두 <div> 로 짜려 한다. 영호 리드가 코드 리뷰에서 어떤 태그를 권장할까?

✅ 정답: 하단 정보 → <footer>, 추천 글 박스 → <aside>

💡 상세 해설:

오답 피드백: 영철 님, <div> 로 짜면 구글 봇도, 스크린리더도, 6개월 후의 영철 님 본인도 "이게 footer야, sidebar야?" 라고 되물을 거예요.
📌 핵심 기억법: "하단 법적/연락처 정보 = <footer>, 본문 옆 보조 정보 = <aside>"

🐣 영철이의 퇴근 일기

오늘 코드 리뷰에서 영호 리드 님이 내 PR에 남긴 코멘트가 아직도 머리에 맴돈다. "이 페이지 전체가 div 하나로만 되어 있어요. 스크린리더 켜보셨나요?" — 그 한마디에 진짜 뭔가 얻어맞은 것 같았다.

💡 "<div> 는 스타일용 그릇, 시맨틱 태그는 의미 있는 계약서다. 브라우저·구글·스크린리더 모두 시맨틱 태그를 읽고 페이지를 이해한다."

퇴근하고 집에서 스크린리더(VoiceOver) 켜고 우리 서비스 직접 써봤는데 진짜 충격이었다. 시맨틱 태그가 없으니까 "div div div div..." 라고 읽어주는데 뭐가 뭔지 하나도 모르겠더라. <article> 하나 쓴다고 개발이 더 복잡해지는 것도 아닌데, 이걸 왜 이제야 알았나 싶어서 좀 반성했다. 내일부터는 PR 올리기 전에 시맨틱 태그 체크리스트 한 번씩 돌려봐야겠다.

🔗 더 알아보기