July 29, 2025

🏗️ <div> Soup: 시맨틱 HTML 무시로 인한 웹 접근성과 SEO 저하

HTML

웹표준

SEO/접근성

아키텍처

네이밍

Summary

과도한 <div> 사용과 시맨틱 HTML 태그 무시는 웹 접근성, SEO, 코드 가독성 및 유지보수성을 심각하게 저해합니다. 콘텐츠의 의미에 맞는 HTML5 태그를 사용하여 구조적이고 의미 있는 웹 페이지를 구축해야 합니다.

Why Wrong?

웹 페이지를 오직 <div> 요소와 일반적인 인라인/블록 요소(예: <span>, <p>)로만 구성하고 시맨틱 HTML5 태그를 무시하는 것은 다음과 같은 심각한 문제를 야기합니다.

의미 전달 부족: HTML은 단순히 시각적인 레이아웃을 구성하는 도구를 넘어, 문서의 구조와 콘텐츠의 의미를 정의하는 언어입니다. <div>만으로는 검색 엔진, 보조 기술(스크린 리더) 및 개발자가 페이지의 주요 영역(헤더, 내비게이션, 본문, 푸터 등)과 콘텐츠의 맥락을 파악하기 어렵습니다.
웹 접근성 저해: 스크린 리더 사용자는 시맨틱 태그(예: <nav>, <main>, <h1>, <article>)를 통해 페이지의 주요 랜드마크를 빠르게 탐색하거나 콘텐츠의 계층 구조를 이해합니다. 모든 것을 <div>로만 구성하면 이러한 탐색 기능이 제공되지 않아 시각 장애가 있는 사용자가 정보를 얻기 매우 어려워집니다.
SEO 성능 저하: 검색 엔진 크롤러는 시맨틱 태그를 사용하여 페이지의 중요 콘텐츠를 식별하고, 키워드의 맥락을 파악하여 랭킹에 반영합니다. 의미 없는 <div> 위주의 구조는 검색 엔진이 페이지의 가치를 제대로 평가하기 어렵게 만들어 SEO 점수를 낮출 수 있습니다.
코드 가독성 및 유지보수성 저하: 개발자가 코드를 읽을 때 <div>만으로는 해당 섹션이 어떤 역할을 하는지 즉시 알기 어렵습니다. 이는 코드 이해도를 떨어뜨리고, 협업 시 불필요한 커뮤니케이션 비용을 발생시키며, 장기적인 유지보수를 어렵게 만듭니다. CSS 선택자 작성 또한 .class 명에 과도하게 의존하게 되어 복잡해질 수 있습니다.
CSS 및 JavaScript 작업의 비효율성: 구조적 의미가 없는 <div>에 클래스명을 덕지덕지 붙이게 되어 CSS 선택자 작성을 복잡하게 만들고, JavaScript로 특정 콘텐츠를 조작할 때 불필요한 DOM 탐색을 유발할 수 있습니다. 예를 들어, document.querySelector('.header .logo') 대신 document.querySelector('header h1')처럼 더 명확하고 간결하게 접근할 수 있습니다.

How to Fix?

콘텐츠의 의미와 목적에 맞는 HTML5 시맨틱 태그를 적극적으로 활용하여 웹 페이지의 구조를 명확히 해야 합니다.

콘텐츠의 의미에 맞는 HTML5 태그 사용: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <mark>, <time>, <details>, <summary> 등 목적에 맞는 시맨틱 태그를 적극적으로 활용합니다. 예를 들어, 페이지의 최상단 영역은 <header>, 주요 내비게이션 메뉴는 <nav>, 페이지의 주요 콘텐츠는 <main>, 독립적인 게시글이나 뉴스는 <article>, 관련성 있는 콘텐츠를 그룹화하는 섹션은 <section>, 보조 콘텐츠는 <aside>, 페이지의 최하단 영역은 <footer>로 마크업합니다.
제목 태그(<h1>~<h6>)의 올바른 계층 구조 유지: 페이지의 논리적 구조를 반영하여 제목 태그를 사용하고, 계층 순서를 지켜야 합니다. (h1 다음에 h3이 오거나, 한 페이지에 h1이 여러 개 있는 것을 피합니다.)
리스트(<ul>, <ol>)와 테이블(<table>)의 적절한 활용: 목록 형태의 콘텐츠는 <ul> (순서 없는 목록) 또는 <ol> (순서 있는 목록)로, 표 형태의 데이터는 <table>로 마크업하여 구조적인 의미를 명확히 합니다.
ARIA role 속성 활용 (보조적): HTML5 시맨틱 태그로 표현하기 어려운 복잡한 UI 컴포넌트(예: 커스텀 탭, 아코디언)의 경우, ARIA role 속성을 사용하여 보조 기술에 추가적인 의미를 제공할 수 있습니다. 하지만 가능한 한 HTML5 시맨틱 태그를 우선적으로 고려해야 하며, ARIA는 HTML의 의미를 '보강'하는 역할로 사용해야 합니다.
웹 표준 준수: W3C HTML 유효성 검사기 등을 활용하여 작성된 HTML이 웹 표준을 준수하는지 주기적으로 확인하여 잠재적인 문제를 미리 방지합니다.

Before Code (Bad)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 웹사이트</title>
</head>
<body>
    <div class="header">
        <div class="logo">로고</div>
        <div class="navigation">
            <div class="nav-item">홈</div>
            <div class="nav-item">소개</div>
            <div class="nav-item">연락처</div>
        </div>
    </div>

    <div class="main-content">
        <div class="article-section">
            <div class="article-title">게시글 제목</div>
            <div class="article-author">작성자: 홍길동</div>
            <div class="article-body">
                <p>이것은 게시글 내용입니다. 텍스트가 여기에 들어갑니다.</p>
                <p>더 많은 내용...</p>
            </div>
            <div class="comments">
                <div class="comment-title">댓글</div>
                <div class="comment-list">
                    <div class="comment-item">
                        <p>좋은 글이네요!</p>
                        <div class="comment-author">김철수</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-title">관련 링크</div>
            <div class="link-list">
                <div class="link-item">링크 1</div>
                <div class="link-item">링크 2</div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="copyright">© 2023 내 웹사이트. All rights reserved.</div>
    </div>
</body>
</html>

After Code (Good)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 웹사이트</title>
</head>
<body>
    <header>
        <h1><a href="/">로고</a></h1>
        <nav>
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/about">소개</a></li>
                <li><a href="/contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>게시글 제목</h2>
            <address>작성자: 홍길동</address>
            <p>이것은 게시글 내용입니다. 텍스트가 여기에 들어갑니다.</p>
            <p>더 많은 내용...</p>

            <section>
                <h3>댓글</h3>
                <ul>
                    <li>
                        <p>좋은 글이네요!</p>
                        <address>김철수</address>
                    </li>
                </ul>
            </section>
        </article>

        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="#">링크 1</a></li>
                <li><a href="#">링크 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <small>© 2023 내 웹사이트. All rights reserved.</small>
    </footer>
</body>
</html>

MDN의 시맨틱 HTML 문서로, 각 HTML 요소의 의미와 올바른 사용법을 이해하는 데 도움이 됩니다.

https://developer.mozilla.org/ko/docs/Glossary/Semantic_HTML

MDN의 ARIA 역할 문서로, HTML5 시맨틱 태그가 제공하지 못하는 추가적인 의미나 상호작용을 보조 기술에 전달하는 방법을 설명합니다.

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Roles