Velog
시멘틱 HTML이 여전히 중요한 이유
<div> 으로 도배된 마크업이 접근성·SEO·성능을 어떻게 깎는지, <article>/<header>/<footer> 같은 시멘틱 태그가 왜 "인프라" 인지 정리한다.
핵심 요약
축별 정리:
| 축 | div 도배의 비용 | 시멘틱의 이득 |
|---|---|---|
| 접근성 | 스크린 리더가 구조 파악 불가 | 암묵적 ARIA role + 키보드 기본 동작 |
| SEO | header/main/article 신호 없음 | 검색 엔진의 컨텍스트 추출 |
| 성능 | DOM 폭증 → layout/paint 비용 | contain, content-visibility: auto 같은 CSS 컨테이너 기법 활용 가능 |
| AI 에이전트 | 의미 추론 비용 큼 | RAG/스크래핑/요약에 강함 |
경계: Tailwind/CSS-in-JS 자체가 나쁜 게 아니라 구조 의미가 사라지는 것 이 문제. tw-bg-white tw-p-4 만 가득한 <div> 트리는 div soup. 같은 카드도 <article><header>...</header><footer>...</footer></article> 로 감싸면 의미가 살아난다.
시멘틱 HTML 은 "예쁘게 쓰기" 가 아니라 "기계(스크린 리더, 검색엔진, AI 에이전트)에게 의미를 전달하는 어휘" 다. 의미가 빠진 마크업은 렌더링은 되지만 접근성·SEO·성능·자동화에서 모두 비용을 발생시킨다.
면접에서 "<div> 와 <button> 의 차이" 같은 질문에 "button 이 의미적이라" 로 답하면 약하다. 본문은 ① 접근성 ② SEO ③ 성능(DOM 크기·layout 비용) ④ AI 에이전트 인덱싱이라는 4축 으로 시멘틱 가치를 풀어내, 답변 깊이를 한 단계 끌어올린다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
div soup 이 단순 "가독성 문제" 가 아니라 _렌더링 성능_ 까지 깎는다
DOM 노드 하나마다 style 계산·layout·paint 가 따라 붙는다. 깊게 중첩된 wrapper <div> 가 늘면 한 번의 클래스 토글이 서브트리 전체 의 layout 무효화로 번질 수 있다. 60fps 예산 16ms 를 쉽게 넘긴다.
"div 가 많아도 브라우저가 알아서 한다" — 알아서 처리하긴 하지만 그 비용이 CPU/배터리 로 나온다.
시멘틱 태그는 `contain`/`content-visibility` 같은 모던 CSS 의 _전제 조건_
.list-item {
content-visibility: auto;
contain: layout paint;
}
이 최적화는 "이 박스 밖으로 영향이 새지 않는다" 가 보장돼야 한다. div soup 처럼 부모/자식 의존이 얽히면 브라우저가 안전을 위해 컨테이너 격리를 포기 한다. 결과적으로 가상 스크롤 같은 기능이 약해진다.
최적화 속성을 넣고도 효과가 없다고 의아해 하는 것. 실제론 구조가 격리 가능한 형태 가 아니라서 브라우저가 무시했을 가능성.
AI 에이전트 시대의 SEO/스크래핑 — 마크업이 곧 API
검색 엔진뿐 아니라 LLM 기반 요약/구매 에이전트가 페이지를 분석 한다. <article class="product-card"><h1>Blue Widget</h1><span class="product-price">$49.99</span></article> 같은 구조는 "product/price" 를 추론 비용 없이 추출 가능. div soup 은 누군가 추론해 주기를 바라는 도박.
"우리 사이트는 검색 엔진만 신경 쓰면 됨" — 이미 가격비교/AI 어시스턴트가 사람보다 더 먼저 페이지를 본다.
읽는 순서
- 1이론
HTML Living Standard 의 Sections 와 WAI-ARIA Authoring Practices 의 ARIA First Rule 을 5분간 읽고 핵심 한 줄씩 메모.
- 2구현
본문의
tw-카드 예제를<article>/<header>/<footer>구조로 리팩터. Lighthouse Accessibility 점수와 DOM 노드 수 변화 비교. - 3실무
현재 프로젝트의 핵심 페이지 1개를 골라 "div / 시멘틱" 비율을 측정(
document.querySelectorAll('div').length). div 비율이 80% 이상이면 리팩터 후보. - 4설명
"왜 시멘틱 HTML 이 SEO·접근성·성능 세 마리 토끼 를 잡는가" 5분 발표. 4축 비교표 + ARIA First Rule +
content-visibility사례 묶어서.
면접 연결 질문
[좋은 답변] ① Enter/Space 키 자동 처리, ② 스크린 리더에 "button" role 자동, ③ disabled 속성 + form 통합, ④ form submit/reset 트리거, ⑤ 키보드 포커스 기본. div 로 흉내내려면 모두 직접 구현해야 하고 누락 가능성이 크다.
[좋은 답변] ① 항목들이 격리 가능한 컨테이너 인지(부모와 layout 의존성), ② 항목 높이가 일정한지(아니면 contain-intrinsic-size 필요), ③ DOM 깊이/wrapper 노이즈로 인해 브라우저가 격리를 포기했는지. 마크업 구조부터 점검.
[좋은 답변] "네이티브 시멘틱이 가능하면 ARIA 보다 우선". 위배 사례: <div role="button"> + 키보드 이벤트 누락, 또는 <button aria-label> 위에 또 <span aria-label> 중복.
자기 점검
"Tailwind 쓰면 div soup" — 도구 문제가 아니라 구조를 어떤 태그로 감싸느냐 의 문제.
"같은 거지만 의미가 있다" — <section> 은 heading 을 동반하는 주제 단위 라는 contract 가 있다.