이번 글에서는 티스토리 스킨 최적화를 위해 문서에 주요 랜드마크가 없습니다의 경고 문제 해결 방법과 주요 랜드마크를 적용하는 방법을 상세히 다룹니다. 랜드마크 태그, WCAG 기준, SEO 최적화, 그리고 JavaScript를 활용한 동적 활용방법까지 모든 요소를 포함했습니다.
Ⅰ. Lighthouse 오류와 SEO의 상관관계 분석
블로그를 운영하고 있다면 구글의 핵심 성능 측정 도구인 PageSpeed Insights와 Lighthouse에서 자주 마주치는 치명적인 접근성(Accessibility) 오류가 있습니다. 바로“문서에 주요 랜드마크가 없습니다” 또는 “페이지에 두 개 이상의 main 요소가 있습니다”라는 경고입니다.
이러한 오류는 단순히 접근성 점수만을 깎는 것이 아니라, 검색 엔진 최적화(SEO)에도 직접적인 악영향을 미쳐 블로그의 랭킹 및 노출도를 저해합니다
특히 티스토리처럼 CMS 기반 플랫폼에서는 이 오류가 구조적 특성 때문에 더욱 자주 발생합니다.
단순한 경고처럼 보일 수 있지만, 문서에 주요 랜드마크가 없습니다라는 메시지는 검색엔진이 페이지의 핵심 콘텐츠 범위를 정확히 식별하지 못한다는 의미이며, 이는 곧 SEO 점수 하락으로 이어지는 문제입니다.
검색엔진은 HTML5 랜드마크 구조를 기준으로 페이지의 우선순위를 판단하는데, main 태그가 없거나 중복되어 있을 경우 페이지의 핵심 정보를 제대로 파악하기 어렵습니다. 그 결과 랭킹 신호가 약해지고 사용자 경험 점수가 떨어지게 됩니다.
문서에 주요 랜드마크의 필요성
HTML5는 문서 구조를 명확하게 하기 위해시맨틱 태그를 도입했습니다. 그중에서도 main 태그는 문서당 단 하나만 존재해야 하는 핵심 랜드마크입니다. 하지만 문서에 주요 랜드마크가 없습니다 오류가 발생하는 페이지는 대체로 다음과 같은 조건을 갖고 있습니다.
- 메인 콘텐츠가 main 태그로 감싸져 있지 않음
- 메인 콘텐츠가 article, section 등으로만 구성됨
- 티스토리 스킨에서 main 태그가 누락된 구조 사용
- 광고 영역 또는 목차 스크립트가 main을 덮어버리는 구조
- 여러 개의 main 태그가 존재하여 Lighthouse가 유효한 랜드마크로 인식하지 못함
`main` 랜드마크의 핵심 역할
Google Lighthouse는 웹페이지의 품질을 측정하는 주요 도구 중 접근성(Accessibility) 항목에서 시맨틱 HTML5 요소의 올바른 사용 여부를 중점적으로 확인합니다. 이 중 랜드마크(Landmark Role)는 페이지의 구조를 파악하는 데 결정적인 역할을 합니다.
랜드마크의 정의: `main`, `header`, `nav`, `footer`, `aside` 등 웹페이지의 주요 구역을 정의하는 시맨틱 요소입니다.
이들은 스크린 리더 사용자에게 페이지의 구조적 지도를 제공하고 Skip Navigation 기능을 제공합니다.
`main` 태그는 웹페이지의 가장 핵심적인 콘텐츠를 지정하는 랜드마크이며, WCAG 2.1 성공 기준 1.3.1 (정보 및 관계)에 따라 페이지당 오직 하나의 유효하고 고유한 `main` 랜드마크만 존재해야 합니다.
오류 발생 시 UX 및 SEO 영향: `main` 태그가 없거나 중복될 경우, 스크린 리더 사용자는 핵심 콘텐츠로 바로 이동할 수 없어 사용자 경험(UX)이 치명적으로 저하됩니다.
Ⅱ. 티스토리에서 유독 자주 발생하는 이유
티스토리는 오래된 스킨 구조에서 HTML5 시맨틱 구조가 완전히 반영되지 않은 경우가 많습니다. 또한 티스토리 스킨 개발은 강력한 조건 치환자에 의존합니다. 이 유연성은 개발 편의성을 높이지만, 표준 HTML 구조적 제약을 쉽게 위반하는 구조적 문제를 안고 있습니다.
치환자 반복과 `main` 중복
목록 페이지(홈, 카테고리)에서 치환자는 반복문처럼 작동합니다. 만약 이 반복문 내에 `main` 태그를 실수로 삽입하면, 페이지에 로드된 게시글 수만큼 중복된 `main` 태그가 생성되어 WCAG 규칙(단 하나의 주요 랜드마크)을 명백히 위반하게 됩니다.
콘텐츠 영역의 모호성
대부분의 티스토리 스킨은 “와 같은단일 공통 컨테이너를 사용하여 글 목록, 글 본문, 공지사항 등 모든 유형의 콘텐츠를 담아냅니다. 이 때문에 순수 HTML 조건문만으로는 콘텐츠의 성격에 따라 `main` 태그를 삽입할지 여부를 정확히 판단하고 분리하기가 극도로 까다롭습니다.
Ⅲ. 문서에 주요 랜드마크가 없습니다 해결 방법 (JavaScript 동적 삽입)
티스토리의 복잡한 서버 측 렌더링 제약을 극복하고, 클라이언트 측 JavaScript를 이용하여 페이지 로드 후 콘텐츠의 성격에 맞춰 main 랜드마크를 정확하고 안전하게 후처리하는 방법입니다.
이 전략은 브라우저가 HTML을 모두 파싱한 후(DOMContentLoaded), 현재 페이지의 경로(location.pathname)를 분석하여 콘텐츠의 성격을 식별하고 main 태그를 삽입합니다.
대상 요소 지정: 모든 콘텐츠를 담는 태그를 main 랜드마크가 감싸야 할 최상위 컨테이너로 지정합니다.
페이지 유형 식별 및 aria-label을 부여해 메인, 카테고리, 본문의 세 가지 핵심 페이지 유형을 정확히 구분하고, 각 유형에 맞는 aria-label을 동적으로 부여하여 WCAG 기준을 충족시킵니다.
안전한 삽입 및 중복 방지를 위해 코드를 실행하기 전, 대상 요소의 부모 요소가 이미 MAIN 태그인지 검사하여 중복 삽입을 철저히 방지합니다.
이는 Lighthouse의 *문서에 주요 랜드마크가 없습니다*와 페이지에 두 개 이상의 main 요소가 있습니다 오류를 원천 차단합니다.
실제 Lighthouse 문구 분석
위 문구를 보면 Lighthouse는 정확히 하나의 main 랜드마크를 요구하고 있습니다. 많은 블로그 운영자분들은 main 태그가 아예 누락되어 있거나, 콘텐츠가 여러 영역으로 나누어져 사이트 구조 전체가 비시맨틱 상태가 되는 경우가 많습니다.
이럴 경우 문서에 주요 랜드마크가 없습니다 오류는 지속적으로 발생하며, 검색엔진은 페이지의 핵심 범위를 정확히 파악하기 어렵습니다.
이제 문서에 주요 랜드마크가 없습니다 오류를 실제로 해결할 수 있는 구조적 방법을 설명드리겠습니다. 단순히 main 태그를 넣는 수준이 아니라 페이지 구조 전체를 WCAG 2.1, HTML5 시맨틱 구조, SEO/AEO 기준에 맞게 재정렬해야 합니다.
특히 티스토리를 사용하시는 경우 본문 콘텐츠 영역을 정확히 main으로 지정하는 작업이 필수이며, 이를 자동화하려면 JavaScript 후처리 방식이 가장 안정적입니다.
1. 가장 빠른 해결: main 태그 자동 삽입 스크립트
티스토리 스킨은 직접 HTML을 수정하기 어렵거나 제한이 있는 경우가 많습니다. 따라서 문서 로드 후 main 태그를 자동으로 생성하여 본문을 감싸는 방식이 가장 안정적이며 유지 관리에도 용이합니다.
아래 스크립트는 문서에 주요 랜드마크가 없습니다 오류를 즉시 해결하도록 설계되었으며, 본문 영역을 감지해 정확히 main으로 변환합니다. 적용 코드는 글 하단에서 확인할 수 있습니다.
아래 코드는 main 태그를 자동으로 한 개만 삽입하며 본문 전체를 정확히 감쌉니다. 이를 통해 Lighthouse에서 문서에 주요 랜드마크가 없습니다 오류는 즉시 해결되며, 접근성 점수와 SEO 신호가 함께 개선됩니다.
2. 중복 main 제거 로직 및 WCAG 최적화 적용
일부 스킨에서는 개발자가 실수로 main태그를 여러 개 삽입한 경우가 있습니다. 이는 문서에 주요 랜드마크가 없습니다 오류를 더 심각하게 만들기 때문에 반드시 제거해야 합니다.
WCAG 최적화 적용
웹 접근성은 단순히 `main` 태그를 넣는 것을 넘어, 해당 랜드마크의 목적을 명확히 하는 것을 요구합니다. `aria-label`은 스크린 리더 사용자에게 랜드마크의 기능을 구체적으로 전달하여 탐색 효율을 높입니다.
페이지 유형에 따라 “메인 페이지 주요 콘텐츠”,“카테고리 페이지 글 목록”, “본문 콘텐츠” 등으로 레이블을 다르게 부여합니다. 이를 통해 사용자는 현재 위치와 콘텐츠의 성격을 즉시 파악하고 필요한 정보를 빠르게 탐색할 수 있습니다.
(WCAG 4.1.2 – 이름, 역할, 값 충족) `lang=”ko”`: 랜드마크의 언어를 명확히 지정하여 스크린 리더가 올바른 언어로 텍스트를 읽어주도록 합니다.
Schema.org 마크업 통합: 글 본문 페이지에 `main` 태그를 삽입할 때, 구조화된 데이터 마크업인 Schema.org 속성을 함께 부여함으로써 SEO 품질을 보장합니다. `itemscope` 및 `itemtype=”https://schema.org/Article”`: 이 마크업은 검색 엔진 크롤러에게 이 `main` 영역이 단순히 일반적인 콘텐츠가 아닌 단일 기사(Article)라는 것을 명확하게 알려줍니다.
3. 최종 점검 체크리스트
- main 태그가 반드시 하나만 존재하는가?
- 본문 전체가 main 내부에 존재하는가?
- side, footer, header는 main 외부에 존재하는가?
- 광고목차 스크립트가 main 구조를 깨뜨리지 않는가?
- Lighthouse에서 오류가 완전히 사라졌는가?
위 체크리스트를 모두 만족하시면 문서에 주요 랜드마크가 없습니다 오류는 완전히 해결되며 SEO/AEO 점수가 상승합니다. 이러한 구조적 개선은 단순 오류 해결을 넘어 사이트 전체 품질을 한 단계 높이는 효과가 있습니다.
4. WCAG 성공 기준과의 직접적인 연관성
이 `main` 랜드마크 해결책은 웹 접근성 지침(WCAG) Level AA의 다음 세 가지 핵심 성공 기준에 직접적으로 기여합니다.
| WCAG 성공 기준 | 내용 및 중요성 | main 태그 해결의 의미 |
| 1.3.1 (정보 및 관계) | 콘텐츠의 정보와 관계를 프로그램적으로 파악할 수 있어야 한다. | `main` 태그 자체가 주요 콘텐츠와 보조 콘텐츠(사이드바, 푸터)의 구조적 관계를 검색 엔진과 스크린 리더에 명확히 정의한다. |
| 2.4.1 (블록 건너뛰기) | 반복되는 콘텐츠 블록(헤더, 메뉴 등)을 건너뛰는 메커니즘을 제공해야 한다. | `main` 랜드마크는 스크린 리더 사용자가 페이지 로드 직후 “주요 콘텐츠로 이동” 기능을 사용하여 반복 영역을 즉시 건너뛰고 본론으로 진입하는 가장 기본적인 경로를 제공한다. |
| 4.1.2 (이름, 역할, 값) | 모든 UI 구성 요소의 이름, 역할, 상태가 프로그램적으로 결정 가능해야 한다. | “을 통해 역할을, `aria-label`을 통해 이름을 명확히 정의하여, 모든 보조 기술과의 호환성을 극대화한다. |
5. Lighthouse 접근성 점수와 궁극적인 SEO 이점
Lighthouse 접근성 점수는 구글이 웹사이트의 품질을 판단하는 주요 신호 중 하나입니다. `main` 랜드마크 문제를 해결함으로써 얻는 이점은 다음과 같습니다.
- 치명적 오류 제거: “문서에 주요 랜드마크가 없습니다” (Major Issue) 오류를 제거하여 접근성 점수가 크게 상승합니다.
- 시맨틱 요소 활용 점수 증가: 시맨틱 HTML5 태그를 올바르게 사용하여 “모범 사례(Best Practices)” 점수까지 긍정적인 영향을 받게 됩니다.
- 크롤링 효율 개선: 검색 엔진 크롤러가 `main` 랜드마크를 통해 페이지의 핵심 콘텐츠를 빠르게 식별하고 인덱싱할 수 있게 되면서, 크롤링 예산을 효율적으로 사용하게 됩니다. 이는 궁극적으로 검색 랭킹 상승으로 이어지는 견고한 기반을 마련합니다.
Ⅳ. `main` 태그 이외의 주요 랜드마크 활용 전략
`main` 태그 외에도 다른 랜드마크 태그들을 올바르게 사용하는 것은 티스토리 스킨의 시맨틱 구조를 완벽하게 만드는 데 필수적입니다. 이들을 적절히 활용하여 페이지스피드 인사이트에서 높은 점수를 받도록 확장해 보십시오.
| 랜드마크 태그 | 사용 목적 | 티스토리 스킨 적용 예시 |
| `header` | 페이지의 소개 콘텐츠, 제목, 로고, 검색창 등을 포함. | 블로그 제목, 내비게이션 바가 위치한 최상단 영역. |
| `nav` | 현재 문서나 다른 문서로의 주요 탐색 링크 그룹. | 블로그의 카테고리 목록, 상단 메뉴 바. |
| `article` | 독립적이거나 자체적으로 완성된 콘텐츠. (`main` 안에 포함) | 블로그 포스트 하나하나 또는 댓글 영역. |
| `aside` | 주요 콘텐츠와 간접적으로 관련된 콘텐츠 (사이드바). | 인기 글, 최근 댓글, 광고 배너 등이 포함된 사이드바 영역. |
| `footer` | 가장 가까운 섹션 또는 전체 페이지의 푸터 정보. | 저작권 정보, 연락처, 개인정보 처리방침 링크 영역. |
티스토리 스킨에서 이 랜드마크들을 HTML 편집을 통해 정적으로 올바르게 배치한다면, JavaScript를 통한 `main` 태그 동적 삽입은 마지막 퍼즐 조각으로서 완벽한 웹 접근성 및 SEO 기반을 완성하게 됩니다.
Ⅴ. 결론 및 FAQ
이 main 랜드마크 동적 삽입 작업은 단순한 코딩 스킬의 문제가 아닙니다.
이는 웹 표준을 준수하고 모든 사용자에게 동등한 접근 기회를 제공하기 위한, 웹의 근본적 가치 실현을 목표로 하는 전략적 투자입니다.
이처럼 세심하게 구조화된 코드를 적용하면, 블로그는 검색 엔진이 신뢰하고 사용자에게 더 높은 편의성을 제공하는 고성능고접근성 디지털 콘텐츠로 확고하게 자리매김할 것입니다.
자주 묻는 질문 (FAQ)
Q1. 왜 티스토리에서는 문서에 주요 랜드마크가 없습니다 오류가 자주 발생하나요?
티스토리는 서버 측 렌더링 구조가 고정되어 있어 HTML5 랜드마크(main, header, footer 등)가 상황에 따라 누락되거나 중복되는 경우가 많습니다. 특히 main 태그가 기본 제공되지 않거나, 스킨 구조가 여러 개의 콘텐츠 영역으로 나뉘어 시맨틱 구성이 깨지면 Lighthouse에서 주요 랜드마크 없음 오류가 반복적으로 발생합니다.
Q2. main 태그가 없으면 검색엔진 SEO에 어떤 문제가 생기나요?
검색엔진은 main 랜드마크를 기준으로 페이지의 핵심 콘텐츠 범위를 인식합니다. main 태그가 없거나 여러 개일 경우, Google과 네이버 모두 페이지의 우선순위를 정확히 판단하기 어렵고 랭킹 신호가 약해집니다. 이는 곧 검색 순위 하락과 사용자 경험 점수 감소로 이어집니다.
Q3. JavaScript로 main 태그를 후처리하면 왜 해결되나요?
DOMContentLoaded 이후에 실행되는 자바스크립트는 브라우저가 HTML을 모두 파싱한 뒤 페이지의 구조를 안전하게 재정의할 수 있습니다. 현재 경로(pathname)를 분석해 카테고리/메인/본문 페이지를 식별하고, 최상위 콘텐츠 컨테이너를 자동으로 main 태그로 감싸도록 만들면 누락/중복 문제를 완벽히 차단할 수 있습니다.
Q4. main 태그를 여러 번 삽입하면 Lighthouse 경고가 줄어드나요?
아니요. main 태그는 문서당 정확히 하나만 존재해야 합니다. 여러 개가 존재하면 페이지에 두 개 이상의 main 요소가 있습니다라는 또 다른 오류가 발생합니다. 따라서 후처리 스크립트에서 부모 요소가 이미 MAIN인지 검사한 뒤 중복 삽입을 방지하는 것이 필수입니다.
Q5. 본문/카테고리/메인 페이지마다 aria-label을 다르게 넣어야 하는 이유는?
WCAG 접근성 기준에서는 main 랜드마크에 페이지 용도를 명확히 표시하는 것을 권장합니다. 예를 들어 main content, category content, post content처럼 페이지 성격을 구분하여 aria-label을 적용하면 스크린리더와 검색엔진 모두 페이지 구조를 더 정확히 이해할 수 있습니다.
★ 문서에 주요 랜드마크가 없습니다. 적용 코드
script
setTimeout(function() {
document.addEventListener("DOMContentLoaded", function () {
let ariaLabel = null;
const path = location.pathname;
if (path === "/") {
ariaLabel = "메인 페이지 주요 콘텐츠";
} else if (path.includes("/category/")) {
ariaLabel = "카테고리 페이지 글 목록";
} else if (path.length 1 && !path.includes("/tag/") && !path.includes("/page/")) {
ariaLabel = "본문 콘텐츠";
}
if (!ariaLabel) return;
const contentBlock = document.getElementById("content");
if (!contentBlock || contentBlock.parentElement.tagName === "MAIN") return;
const mainWrapper = document.createElement("main");
mainWrapper.setAttribute("role", "main");
mainWrapper.setAttribute("aria-label", ariaLabel);
mainWrapper.setAttribute("lang", "ko");
if (ariaLabel === "본문 콘텐츠") {
mainWrapper.setAttribute("itemscope", "");
mainWrapper.setAttribute("itemtype", "https://schema.org/Article");
}
contentBlock.parentNode.insertBefore(mainWrapper, contentBlock);
mainWrapper.appendChild(contentBlock);
});
}, 0);
/script
>