SOYOYU
페이지 영역

<main>

페이지의 주요 콘텐츠 영역을 표시하는 landmark. 본문이 어디인지를 보조 기술과 AI에 알리는 핵심 신호.

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

SEO

●●●●○높음

구글이 본문 영역의 키워드를 사이드바·푸터보다 높은 가중치로 평가. main 명시가 그 평가의 전제.

GEO

●●●●○높음

AI Overviews와 Perplexity가 답변 추출 시 main 안 콘텐츠를 1순위로. 본문 vs 광고 구분의 신호.

AEO

●●●●○높음

Featured Snippet 인용에서 main 안의 정답이 사이드바 정답보다 우선.

A11y

●●●●○높음

스크린리더 D키 / VoiceOver rotor의 landmark 점프 1순위. skip link의 표준 타깃.

올바른 사용

  • 페이지당 정확히 한 개
  • header/nav/footer 밖에 위치 (형제)
  • id="main-content" + skip link 타깃
  • tabindex="-1"로 프로그램 포커스 가능
단일 main + skip link
<body>
  <a href="#main-content" class="skip-link">본문으로</a>
  <header>...</header>
  <main id="main-content" tabindex="-1">
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

id로 skip link 타깃, tabindex로 프로그램 포커스 가능.

Next.js layout에 한 번만
// app/layout.tsx
<body>
  <Header />
  <main id="main-content">{children}</main>
  <Footer />
</body>

page.tsx에는 main 없음. article·section만.

자주 보는 안티패턴

  • Next.js layout.tsx + page.tsx에 main 중복
  • main 안에 또 다른 main 중첩
  • div로 main 흉내 (role="main" 가능하지만 native가 우선)
  • main 없이 페이지 — 본문 영역 식별 어려움
layout과 page 양쪽에 main
// layout.tsx
<main>{children}</main>
// page.tsx
<main>...</main>

한 페이지에 main 두 개. accessibility tree에서 본문 영역 모호.

main을 div로 대체
<body>
  <div className="main-content">
    <h1>...</h1>
  </div>
</body>

스크린리더의 landmark 점프에서 사라짐. AI 본문 식별 어려움.

해설

페이지의 주요 콘텐츠가 어디인지를 명시하는 landmark. body 직속 자식 중 가장 중요한 시맨틱 요소. header·nav·footer 같은 부속 영역과 진짜 본문을 명확히 구분한다.

SEO 관점에서 구글은 페이지의 주요 콘텐츠 영역을 식별해 본문 키워드에 더 높은 가중치를 둔다. 사이드바·푸터·헤더에 박힌 키워드는 보조 신호로, main 안 키워드는 주요 신호로 분리 평가. main이 명시된 페이지는 이 평가가 빠르고 정확하다. 모든 게 div인 페이지에서는 구글이 시각적 비율·콘텐츠 밀도로 본문을 추측하고, 추측은 자주 틀린다 — 광고나 사이드바가 본문으로 오인되기도 한다.

GEO 관점에서 AI Overviews와 Perplexity는 답변을 추출할 때 어디서 끌어올지를 판단해야 한다. main이 있으면 그 안만 본다. 광고·푸터·사이드바 텍스트가 답변에 섞이지 않는다. 결과적으로 같은 콘텐츠라도 더 깨끗한 답변 인용을 받는다.

A11y 관점에서 main은 스크린리더 사용자의 가장 중요한 단축키 타깃. NVDA의 D 키, VoiceOver의 rotor "Landmarks"에서 본문으로 한 번에 점프. skip link의 표준 타깃도 main. 시리즈 #16과 #6에서 자세히 다뤘다.

자주 보는 안티패턴: Next.js App Router에서 layout.tsx와 page.tsx 양쪽에 <main>을 박아 한 페이지에 두 개의 main이 렌더되는 케이스. 시리즈 #6에서 본 최대 흔한 실수. layout에 한 번만 두고, page에는 <article>이나 <section>만 두는 게 표준.

main이 없는 페이지는 — <body> 직속 div들이 본문인지 사이드바인지를 보조 기술과 AI 모두가 추측해야 한다. <main id="main-content" tabindex="-1"> 한 줄이 그 추측을 명시적 사실로 바꾼다. tabindex="-1"은 프로그램 포커스를 가능하게 해서, SPA 라우팅 후 main에 포커스를 옮기는 시리즈 #10 패턴과 연결된다.