블로그 미리보기에 ‘영어 한국어 일본어’ 문구가 나오는 이유: 파파고 확장 기능이 범인

블로그 게시글의 미리보기가 영어 한국어 일본어 중국어... 같은 작성하지 않은 문구로 시작하는 경우가 있다. 본 글에서는 파파고 번역 확장 기능이 HTML 내부에 숨겨진 언어 선택 코드를 삽입해 메타 디스크립션과 검색 요약을 오염시킨 사례를 정리하고, 원인 확인 방법과 해결 방법을 설명한다.

파파고 번역 확장 기능이 만든 황당한 오염

티스토리에 블로그를 만들고 열심히 게시글을 작성하던 2024년 겨울, 본 필자는 황당한 상황을 마주하게 된다. 모든 게시글의 미리보기가 똑같이 다음 문구로 시작하고 있었던 것이다.

영어 한국어 일본어 중국어 (간체) 중국어 (번체) 베트남어 인도네시아어 태국어 독일어 러시아어 스페인어 이탈리아어 프강스어 복사하기 이 확장을 지원합니다

특히 ‘프강스어’라는 오타까지 동일하게 포함된 이 문구는, 본 필자가 직접 입력한 적이 없었다. 심지어 본 필자는 티스토리의 편집기를 사용하지 않고 메모장에서 HTML을 직접 작성해 넣는 방식으로 글을 쓰기 때문에, 더욱 이해가 되지 않았다.

처음에는 티스토리 쪽의 문제인가 싶어 문의를 해 보았으나 전에 문의했을 때와 다르지 않게, 납득할 만한 답을 얻지 못했다.

그렇다 해서 손 놓고 있을 수만은 없다. ‘도대체 어디서 잘못된 걸까?’라는 의문을 안고 검색을 해 보니 놀랍게도 같은 문제를 겪고 있는 글들이 수없이 많았다.

그리고 그 글들은 티스토리만의 문제가 아니었다. 본 필자의 글 말고도 수많은 글들이 동일하게 같은 문구로 시작하고 있었던 것이다. 심지어 ‘프강스어’라는 오타까지 동일하게 말이다.

메타 디스크립션까지 오염된 이유

블로그 운영자라면 누구나 Meta Description(메타 디스크립션)이 얼마나 중요한지 안다. 메타 디스크립션은 검색 결과에서 사용자가 글의 내용을 미리 판단하는 데 중요한 역할을 하기 때문에 검색 결과의 클릭률과 첫인상에는 큰 영향을 주기 때문이다.

결국 HTML 어딘가에서 검색엔진이 읽을 수 있는 텍스트가 존재한다는 결론을 내고 페이지 소스를 열어보기로 했다. 그리고 바로 원인을 찾아냈다.

범인은 브라우저에 설치해 둔 파파고 번역 확장 기능

게시글의 본문 영역이 아래와 같은 코드로 시작하고 있었다.

<div class="papagoExt-icon" style="display: none;">
<div style="background-image: url('moz-extension://9af00c08-a694-48b4-8b4f-134db624052e/icons/19.png'); height: 19px; width: 19px;"> </div>
</div>
<div class="papagoExt-inline dark" style="font-family: Tahoma, Tahoma, Geneva, sans-serif; display: none;">
<div id="papagoExt-blur" class="papagoExt-flex-column">
<div class="papagoExt-flex papago-draggable"><select id="papagoExt-language-target" class="papagoExt-bordered" name="papagoExt-target">
<option id="papagoExt-en" value="en">영어</option>
<option id="papagoExt-ko" value="ko">한국어</option>
<option id="papagoExt-ja" value="ja">일본어</option>
<option id="papagoExt-zh-CN" value="zh-CN">중국어 (간체)</option>
<option id="papagoExt-zh-TW" value="zh-TW">중국어 (번체)</option>
<option id="papagoExt-vi" value="vi">베트남어</option>
<option id="papagoExt-id" value="id">인도네시아어</option>
<option id="papagoExt-th" value="th">태국어</option>
<option id="papagoExt-de" value="de">독일어</option>
<option id="papagoExt-ru" value="ru">러시아어</option>
<option id="papagoExt-es" value="es">스페인어</option>
<option id="papagoExt-it" value="it">이탈리아어</option>
<option id="papagoExt-fr" value="fr">프강스어</option>
</select>
<div id="papagoExt-copy-button" class="papagoExt-bordered">복사하기</div>
</div>
<div id="papagoExt-result-text" class="papagoExt-bordered"> </div>
<div id="papagoExt-links" class="papagoExt-flex"><span>이 확장을 지원합니다</span></div>
</div>
<div id="papagoExt-loader">
<div id="papagoExt-loading-animation"> </div>
</div>
</div>

그리고 이 코드를 몰래 삽입한 범인은, 파이어폭스에 설치한 확장 기능인 Translating with Papago였다.

이 플러그인은 사용자가 웹페이지에 입력한 텍스트를 번역해서 볼 수 있도록, 언어 선택 UI를 글 앞부분에 자동으로 삽입한다.

문제는 검색엔진과 블로그 시스템이 페이지 요약을 만들 때 화면에 보이는 본문뿐 아니라 HTML 안에 포함된 텍스트도 참고할 수 있다는 것이다. 따라서 display:none으로 숨겨진 코드라 하더라도, 위치와 상황에 따라 미리보기나 요약문에 영향을 줄 수 있다.

문제 해결 및 교훈

원인을 파악한 후, 본 필자는 해당 확장 기능을 즉시 삭제했다. 확장 프로그램 하나가 나도 모르게 콘텐츠를 오염시키고 있었던 것이다.

이번 일을 통해 다음과 같은 두 가지 교훈을 얻었다.

1. 게시글이 실제 목록에서 어떻게 보이는지 반드시 확인해야 한다.
   검색엔진 미리보기, SNS 공유 카드, 블로그 목록에서의 첫 줄이 정상인지 점검하는 과정은 필수다.
2. 확장 프로그램은 반드시 검증된 것만 사용해야 한다.
   브라우저 확장 기능이 HTML을 조작하는 일은 생각보다 흔하며, 블로거에게는 심각한 문제로 이어질 수 있다.