<aside> — 페이지 영역 태그 도감

올바른 사용

본문에서 떼어내도 본문 의미가 유지되는 콘텐츠

aria-label 또는 aria-labelledby로 정체성 명시

본문이 아닌 모든 콘텐츠는 아님 — 보조성이 핵심

여러 aside가 있으면 각각 라벨 다르게

블로그 글의 관련 글 사이드바

<main>
  <article>
    <h1>본문 글</h1>
    ...
  </article>
  <aside aria-labelledby="related">
    <h2 id="related">관련 글</h2>
    <ul>...</ul>
  </aside>
</main>

본문을 빼도 페이지가 성립 → aside 적합.

라벨 있는 여러 aside

<aside aria-label="저자 소개">...</aside>
<aside aria-label="관련 자료">...</aside>

같은 페이지에 여러 aside가 있을 때 각각의 정체성을 라벨로 분리.

자주 보는 안티패턴

본문을 aside에 넣음 — 검색 가중치 손해

라벨 없는 aside 여러 개 — 구분 불가

광고만 aside에 — 보조 콘텐츠 의미 약화

div로 사이드바 만들기 — landmark 손실

본문을 aside에

<main>
  <aside>
    <h1>본문 글</h1>
    <p>이게 본문...</p>
  </aside>
</main>

검색엔진이 본문을 보조 콘텐츠로 평가. SEO 가중치 손해.

라벨 없는 여러 aside

<aside>...관련 글...</aside>
<aside>...광고...</aside>
<aside>...뉴스레터...</aside>

스크린리더가 "complementary, complementary, complementary"로 발화. 사용자가 구분 못 함.

해설

본문 옆에 있어도 되고 없어도 본문이 성립하는 콘텐츠 영역. 사이드바, 관련 글 목록, 광고 박스, 인용 박스, 저자 소개. 본문의 일부가 아닌 것이 aside의 정의다.

SEO 관점에서 구글은 페이지의 주요 콘텐츠와 보조 콘텐츠를 분리해 평가한다. main 안 콘텐츠는 주요, aside 안은 보조. 같은 키워드라도 어느 영역에 있는가가 페이지의 주제 적합도 평가에 영향. 본문이 aside에 들어가 있으면 — 그 본문은 보조로 평가받아 검색 가중치 손해.

GEO 관점에서 AI는 답변을 추출할 때 어느 영역의 콘텐츠인가를 본다. main이면 1순위, aside면 후순위. 페이지의 핵심 정보가 aside에 묻혀 있으면 같은 콘텐츠라도 인용 가능성이 떨어진다.

A11y 관점에서 aside는 complementary landmark role로 자동 노출된다. 스크린리더의 landmark 점프에서 "complementary"로 들리고, 사용자가 이 영역은 부속 정보임을 인지해 건너뛰거나 듣거나를 선택할 수 있다. 본문 듣다가 그만 듣고 다음으로 가고 싶을 때 aside는 자연스러운 종료 지점.

자주 보는 안티패턴: 본문을 aside에 넣는 경우 (e.g. 모바일 우선 디자인에서 본문이 우측 사이드바 위치로 가게 되어 마크업이 aside로 잘못 박힘 — 시각 배치와 시맨틱은 별개), 한 페이지에 여러 aside가 라벨 없이 있는 경우 (스크린리더 사용자가 어느 영역인지 모름), aside를 광고 전용으로 쓰는 경우 — 광고만 aside면 보조 콘텐츠의 의미가 광고와 동일시된다. 관련 글·저자 소개 같은 유익한 부속 콘텐츠도 aside에 두는 게 표준.

여러 aside가 있을 때 각각의 aria-label — "저자 소개", "관련 글", "광고", "최근 댓글". 이렇게 라벨이 다르면 스크린리더 landmark 점프에서 "complementary, 관련 글", "complementary, 저자 소개" 식으로 구분되어 들린다.

div로 사이드바 만들기와의 차이 — aside는 landmark, div는 안 보임. 사이드바를 div로 만들면 시각적으로는 같지만 보조 기술과 AI에는 사라진다. landmark 5인방의 의미는 명시적 시맨틱에 있다.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설