"보이는 글"과 "검색엔진이 읽는 글"은 다르다
아임웹·카페24 에디터로 글을 작성하면 화면에는 깔끔하게 보입니다. 그러나 브라우저 개발자 도구로 HTML을 열어보면 한 단락 안에 다음과 같은 코드가 들어 있는 경우가 많습니다.
<p><span style="font-family: 맑은고딕; font-size: 16px;"><span style="color: rgb(51, 51, 51);">본문 텍스트</span></span></p>
같은 단락에 평균 8~12개의 인라인 스타일 태그가 누적됩니다. 사용자에게는 보이지 않지만, 구글·네이버 크롤러에게는 명확하게 보입니다. 그리고 이 구조가 검색 순위에 직접 영향을 줍니다.
인라인 스타일 누적의 4가지 원인
1. 외부 복사·붙여넣기: 한글·워드·노션에서 텍스트를 복사하면 원본 서식이 함께 따라옵니다. 빌더 에디터가 이 서식을 그대로 받아들여 HTML에 박아 넣습니다.
2. 에디터 자체의 출력: 폰트·색상·크기를 한 번 변경할 때마다 인라인 스타일이 새로 추가됩니다. 글자 한 줄에 5번 색을 바꾸면 5겹의 span이 쌓입니다.
3. 자동 클린업 부재: 빌더 에디터는 입력된 스타일을 자동으로 정리하지 않습니다. 한 번 들어간 잡 코드는 수동으로 지우지 않는 한 영구 보존됩니다.
4. WYSIWYG 구조: 화면에 보이는 그대로 HTML로 저장하는 구조이므로, 시각적 표시에 필요한 모든 스타일이 그대로 코드로 남습니다.
이 코드가 SEO에 미치는 4가지 영향
1. 시맨틱 마크업 손상: <h2>, <article>, <section> 같은 의미 태그가 묻혀 크롤러가 글의 구조를 파악하지 못함.
2. 페이지 용량 증가: 같은 글이 깨끗한 HTML의 2~4배 용량을 차지. 모바일 LCP 지연으로 검색 순위 하락.
3. 텍스트 비율 저하: HTML 대비 실제 텍스트 비율이 낮아져 구글이 "내용이 빈약한 페이지"로 판단할 위험.
4. AI 검색 인용 누락: ChatGPT·Perplexity가 페이지를 파싱할 때 잡 코드 때문에 핵심 문장 추출에 실패. AEO(AI 검색 최적화) 인용률 하락.
풀스택 + 마크다운의 출력 비교
치로웹디자인 블로그는 MDX(마크다운+컴포넌트) 기반으로 운영됩니다. 같은 단락의 HTML 출력이 다음처럼 됩니다.
<p>본문 텍스트</p>
태그가 1개, 인라인 스타일 0개입니다. 모든 색상·폰트·크기는 별도 CSS 파일에서 관리하고, HTML은 의미만 전달합니다.
| 항목 | 빌더 에디터 출력 | 마크다운+MDX 출력 |
|---|---|---|
| 단락당 평균 태그 수 | 8~12개 | 1개 |
| 인라인 스타일 비율 | 60~80% | 0% |
| 시맨틱 태그 사용 | 거의 없음 | 표준 적용 |
| 동일 글 HTML 용량 | 12KB | 3KB |
| 크롤러 텍스트 추출 | 부분 실패 | 정상 |
콘텐츠 품질이 같아도 검색 결과가 다른 이유
같은 글을 빌더 사이트와 풀스택 사이트에 동시 발행하면, 풀스택 쪽이 평균 2~4주 안에 검색 순위가 더 높게 올라옵니다. 콘텐츠 차이가 아니라 HTML 출력 품질 차이가 만드는 격차입니다.
치로웹디자인은 모든 블로그를 마크다운 기반으로 운영하고, 풀스택에서 깨끗한 HTML로 자동 변환합니다. 치로의 홈페이지 제작 서비스에서 작업 방식을 확인할 수 있습니다. 시맨틱 HTML이 SEO에 미치는 영향은 시맨틱 HTML과 SEO에서 더 다룹니다.
자주 묻는 질문
아임웹 에디터에서 HTML 직접 편집 모드를 쓰면 깨끗하게 만들 수 있나요? 가능은 합니다. 다만 글마다 매번 HTML을 손으로 정리해야 하므로 작성 시간이 3~5배 늘어납니다. 실무에서는 사실상 운영되지 않습니다.
기존 빌더 블로그 글을 풀스택으로 옮기면 잡 코드도 함께 옮겨지나요? 이전 시 자동 정리 스크립트를 적용해 인라인 스타일을 모두 제거합니다. 결과적으로 같은 글이 더 깨끗한 HTML로 다시 발행됩니다.
시맨틱 마크업이 정말 검색 순위에 큰 차이를 주나요? 2024년 구글 SEO 가이드 업데이트 이후 시맨틱 태그 가중치가 상승했습니다. 같은 글 기준 시맨틱 구조 적용 사이트의 검색 순위가 평균 5~10단계 더 높게 측정됩니다.