내 게시글에 쓰지도 않은 글자가 포함되는 이유는? : 파파고가 범인이다
내가 작성한 글의 미리보기가 영어 한국어 일본어 중국어 (간체) 중국어 (번체) 베트남어 인도네시아어 태국어 독일어 러시아어 스페인어 이탈리아어 프강스어 복사하기 이 확장을 지원합니다로 시작하는 경우가 있다. 내가 작성하지도 않은 이 문구가 삽입되는 이유는 웹 브라우저에 파파고의 번역 에드온을 설치했기 때문이다.
파파고 번역 확장 기능이 만든 황당한 오염
티스토리에 블로그를 만들고 열심히 게시글을 작성하던 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를 글 앞부분에 자동으로 삽입한다.
문제는 다음 세 가지였다.
- 코드가 display:none 상태이지만, 내부 텍스트는 HTML에 그대로 존재한다.
- 검색엔진과 블로그 시스템은 보이는지 여부가 아니라 HTML에 존재하는 텍스트만 보고 요약을 생성한다.
- 이 요약이 메타 디스크립션과 요약문으로 표출된다.
문제 해결 및 교훈
원인을 파악한 후, 본 필자는 해당 확장 기능을 즉시 삭제했다. 확장 프로그램 하나가 나도 모르게 콘텐츠를 오염시키고 있었던 것이다.
이번 일을 통해 다음과 같은 두 가지 교훈을 얻었다.
-
게시글이 실제 목록에서 어떻게 보이는지 반드시 확인해야 한다.
검색엔진 미리보기, SNS 공유 카드, 블로그 목록에서의 첫 줄이 정상인지 점검하는 과정은 필수다. -
확장 프로그램은 반드시 검증된 것만 사용해야 한다.
브라우저 확장 기능이 HTML을 조작하는 일은 생각보다 흔하며, 블로거에게는 심각한 문제로 이어질 수 있다.