티스토리 자체광고 삭제를 위한 본문 수정 방법(코드 인젝션)

 

작성계기

최근 블로그 유입을 보다가 깜짝 놀랐는데, 모바일 페이지에서 글 하단에 다른 추천 글 부분에 티스토리 광고가 떡하니 들어있는 것을 발견했다. PC버전에서는 없었는데?? 뭐 자체 광고 자체는 이전에 2023년 6월 공지에서 확인한 바 있었고 엄청난 반발에도 불구하고 밀어붙이기로 한 것을 알고는 있었지만 이렇게까지 직접적으로 확인한 것은 처음이었다. 문제는 내가 동의한 적도 없었고, 분명히 광고 설정 안한 블로그에는 안나온다고 봤었는데 어이없게도 내 블로그에 나와버린 것이다. 제일 화나는 부분은 차라리 내 블로그랑 연관된 내용의 글이 표시되었더라면 그나마 참고 넘어갔을 텐데, 뭔 되도않는 조회수만 올리려는 관련도 없는 글들이 잔뜩 있었다. 글은 내가 썼는데 동의도 안한 광고로 자기네 트래픽을 늘리겠다? 어림도 없지... 없애는 방법을 이리저리 검색했지만 현재로서는 편법밖에 없고, 결국 내가 생각해낸 방법으로 글에 script 태그를 넣는 방식으로 광고를 수작업으로 싹 다 제거한 시점에서 현재 글을 작성한다.

 

티스토리 자체광고 삽입 대응 방안 모색

몇 가지 실험을 해본 결과 티스토리가 교묘하게 pc버전의 html을 모바일에 적용되지 않게 해서 수정할 수 없게 해둔 다음 모바일 페이지에서 자기네들이 원하는 광고를 넣고 있는 것을 확인했다. 내 블로그 최근 한 달간 유입 기준으로 데스크톱이 73%, 모바일이 27% 정도이므로 모바일 유입을 무시할 수 없다. 내가 사용하고 있는 google analytics의 looker studio 기준으로도 다음과 같이 상당한 비중이 모바일에서 유입되는 것을 확인할 수 있었다 (해당 페이지).

티스토리 통계 페이지에서 나오는 모바일/PC 분류

 

앞으로 모바일 유입 비중이 늘어났으면 늘어났지 줄어들진 않을 것으로 예상되고, 이를 적절히 처리하지 못하면 내가 원하지도 않는데 티스토리 자체광고에 시선강탈 되고, 내 글의 퀄리티와 추천 내용의 괴리로 인해 작성된 글을 읽는 경험에 심각하게 부정적인 영향을 줄 것은 자명하다.

 

2023년 8월 30일 기준으로 컨텐츠 크리에이터인 블로그 주인이 모바일 페이지에 개입할 수 있는 권한은 전혀 없다. 심지어 티스토리에 돈을 내도 해당 광고를 막을 수 있는 방법은 없다. 이러한 상황에서는 결국 각자도생으로 해결해야 한다. 운영진에 의존하다가는 언제든지 통수를 맞을 수 있기 때문에 근본적인 해결 방법이 필요하다. 다음은 일반적인 해결 방법과 내가 해결한 방법을 설명한다.

 

일반적인 해결 방법 (비권장)

1. 모바일 페이지 사용 안함

문제가 되는 것은 모바일 페이지이므로 모바일 페이지를 사용하지 않는 방법을 택할 수 있다. 블로그 관리 페이지에서 꾸미기-모바일 페이지에서 다음과 같이 옵션을 확인할 수 있다.

본인의 경우 진작부터 모바일 웹을 따로 사용하지 않고 PC/모바일 호환 가능한 반응형 스킨인 Odyssey 스킨을 이용하고 있기 때문에 이걸 꺼도 모바일에서의 사용자 경험은 여타 모바일 최적화 스킨들과 동일하게 가져갈 수 있다. 그러나 위의 스샷에서도 확인할 수 있듯이 직접 /m/ 을 포함하는 모바일 페이지로 접속하는 경우 블로그 주인이 수정할 수도 없는 모바일 페이지에서 자체광고를 봐야 하는 점은 동일하다. 특히 현재 티스토리의 행보대로라면 앞으로 모바일 기기에서는 자동으로 모바일 페이지로 리디렉션되게 만들 것이 유력하기 때문에 근본적인 해결방법은 될 수 없다.

 

2. 스킨 html 및 css 수정

티스토리의 장점이라고 하면 스킨을 직접 수정해서 블로그 주인 입맛에 맞는 화면을 구성하는 것일 것이다. 그래서 스킨을 수정하려는 시도를 해볼 수 있는데, 결론부터 이야기하자면 사용자가 수정하는 스킨은 pc버전에서만 유효하며, 해당 내용은 모바일 페이지에서 적용되지 않는다. 즉 아무리 pc버전에서 화면을 바꿔봤자 모바일 페이지에서는 티스토리에서 자체 제공하는 템플릿을 강제 적용하며 사용자 코드가 먹히지 않는다는 뜻이다.

 

CSS 수정하는 방법으로는 이전에 다른 사람 글에서 제시된 바 있지만, 현재에는 적용 불가하다. 뭐 내가 보는 광고야 F12 눌러서 DOM 접근을 통해 제거할 수는 있겠지만 중요한 것은 프로그래밍 지식이 아예 없는 방문자들에게 광고를 차단하는 방법일 테니까.

 

3. 구글 애널리틱스 플러그인에 코드 인젝션

이전에는 텐핑 플러그인 이란 곳에 코드 인젝션이 가능해서 그걸로 모바일 광고를 차단하는 방법을 사용했었던 것 같은데, 현재에는 구글 애널리틱스만 살아있다. 아마 티스토리 입장에서는 구글 애널리틱스를 차단할 수는 없으니 앞으로도 코드 인젝션 방어 코드가 적용되지 않는 한 유효할 것으로 생각한다. 아이디어는 여기에서 얻었다.

 

원리는 구글 애널리틱스의 자체 script tag를 강제로 닫은 다음 내가 원하는 코드를 실행하는 것이다. 웹 브라우저는 깨진 코드라도 어떻게든 처리해서 웹 페이지를 보여줄 것이므로 깨진 구글 애널리틱스는 제대로 실행되지 않겠지만 내가 원하는 코드를 전역 기능으로 넣을 수 있다. 그러나 나의 경우 현재 블로그 유입경로 분석을 위해 구글 애널리틱스를 사용하고 있기 때문에 해당 방법으로 적용할 수는 없었다.

 

4. PC 페이지로 리디렉션하는 코드 삽입

옛날부터 많이 사용되던 방식인데, 원리는 모바일 페이지에 href로 redirection 해서 PC버전 페이지로 보내는 것이다. 이렇게 하는 경우 문제는 사용자가 모바일 페이지에 접속했다가 다시 PC페이지로 넘어가기 때문에 로딩 시간이 2배 가까이 걸리고 사용자 경험이 안좋아진다. 로딩 0.1초 차이가 매우 크다는 것은 이 글을 보고 있는 사람들은 누구나 알 것이므로 이 방법을 별로 추천하지는 않는다.

 

내 해결 방법(본문에 script 태그 삽입)

나도 삽질을 여러 번 많이 하긴 했는데, 최종적으로 해결한 방법은 다음과 같다.

 

적용 방법(본문 code injection)

티스토리 글을 PC 브라우저에서 수정할 때 보면 오른쪽 위에 html 상태로 편집이 가능한 기능이 있다.

이걸 누르면 본문에 작성한 내용을 html로 보여 준다. 여기의 맨 아래에 엔터를 치고 다음과 유사한 방식으로 코드를 작성한다.

 

<script>setInterval( function() {let t = document.getElementById("story-contents-box-root-container");if (t) {t.setAttribute('style','display:none !important');}}, 1500);</script>

이렇게 하면 1.5초 간격으로 티스토리 광고가 있는 tag를 감지해서 방문자에게 보이지 않게 만들어 준다. 이 방법의 장점은 PC와 모바일에 상관 없이 본문에 있는 기능만을 이용해서 스크립트를 실행하기 때문에 앞으로도 계속 유효할 것으로 예상된다는 것이다.

 

만약 이런 스크립트 인젝션을 막을 경우 본문에서 사용하는 다양한 플러그인들이나 embed도 막힐 것이기 때문에 앞으로도 타겟팅으로 막지 않는 한 script 태그 삽입 자체는 안막힐 가능성이 크다.

 

작동원리

광고가 뜨는 티스토리의 모바일 페이지에서 F12를 눌러 개발자 도구에서 코드를 확인하면 다음과 같이 태그 속성을 확인할 수 있다. 이것을 아예 삭제하게 되면 이를 감지하는 코드를 통해 재삽입이 가능할 수 있으므로 안 보이게만 하는 것을 목적으로 한다.

안 보이게 만드는 방법은 div tag의 display style을 none으로 바꿔 주면 된다. 그러나 우선순위가 높은 속성에 의해 override당할 수 있으므로 뒤에 important도 넣어 준다.

이렇게 하면 이제 화면에서 광고가 사라진다. 이것을 자동화해서 구현하면 된다. 코드상으로는 다음과 같다. jquery나 최신 ES6 문법을 이용해서 더 간결하게 할 수도 있겠지만 웹 브라우저 하위호환을 고려하여 아무런 fancy한 문법을 쓰지 않고 그냥 다음과 같이 만들었다.

let t = document.getElementById("story-contents-box-root-container");
if (t) {
  t.setAttribute('style','display:none !important');
}

그런데 이렇게만 하면 이후에 해당 태그의 속성을 변경하는 코드에 의해 무용지물이 될 수 있다. 그러므로 setInterval 을 써서 반복적으로 실행하게 만들었다. 시간 간격은 위에서 1500ms로 예시를 들었는데, 자기가 원하는 시간 간격을 넣어 주면 된다. 너무 빠르게 하면 해당 코드를 실행하느라 블로그 퍼포먼스에 영향을 줄 수 있고, 너무 느리게 하면 광고가 안 보이게 되는 시간이 늘어나므로 없애기 전에 독자가 광고를 볼 가능성이 있다.

 

하여간 자신만의 코드를 만들었다면 이 전체를 script tag로 감싸고 본문에서 임의의 위치에 넣어 주면 된다. 본인의 경우 별도 서식을 사용하고 있지 않아서 약 200여 개의 블로그 전체 글에 일일이 들어가서 넣어 줬었는데, 서식을 사용하는 경우 서식의 html 코드에 추가하면 될 것이다. 매 글마다 넣어줘야 해서 글 수가 많은 경우 이전에 작성한 글들에 대해 적용이 현실적으로 어려운 사람들도 있을 수도 있겠다.

 

티스토리 이용약관과 운영진의 약속 불이행

앞에서도 언급했지만 2023년 6월부터 이 광고는 강제로 삽입됐다. 그리고 약관도 개악되어 현재 이용약관을 확인해보면 15번 항목에 어떤 방식으로든 광고를 없애면 안된다 라고 써 있다. 그러나 나는 수익형 블로그도 아니고 아래와 같이 본인들의 공지에서도 광고를 안 쓰는 블로그에서는 안 나오게 만들어놨다고 하는데, 어쨌거나 나오고 있는 게 현실이고 이걸 개별 블로그에 대해 수동으로 처리하겠다는 생각인 것으로 보인다.

---

안녕하세요. 티스토리팀입니다.
6월 27일부터 개별 티스토리 본문 내에 티스토리 자체 광고를 신설합니다.

 

Q. 티스토리 자체 광고는 언제 노출되나요?(6월 27일 추가)
- 6월 27일 오전 11시 이후로 티스토리 자체 광고는 시작됐습니다. 말씀드린 대로 방문 시마다 본문 상단 혹은 하단에 랜덤 노출됩니다. 

 

Q. 티스토리 자체 광고는 모든 블로그에 나오나요?
- ‘수익형 블로그’에만 나옵니다. 수익 메뉴에 계정이 연동돼 있거나, 플러그인을 활용하거나, 광고 스크립트를 직접 추가하는 등 어떤 방식으로든 블로그 스킨 및 본문에 광고 코드를 포함한 경우 티스토리 자체 광고가 노출됩니다. 만약 광고를 사용하지 않는다면, 자체 광고도 추가되지 않습니다. 

 

Q. 2차 도메인(개인도메인)에는 티스토리 자체 광고가 노출되지 않나요?(6월 29일 추가)
- 아닙니다. 수익형 블로그라면 티스토리 자체 광고는 노출됩니다. 수익형 블로그임에도 티스토리 자체 광고가 미노출되는 블로그는 추가 조치를 통해 자체 광고를 적용할 예정입니다. 잠시만 기다려 주세요. 

 

Q. 수익형 블로그가 아닌데 티스토리 자체 광고가 나오면 어떻게 해야 하나요?(6월 28일 추가)
- 바로 고객센터로 문의해 주시기 바랍니다. 확인 후 즉시 조치하겠습니다. 

---

애초부터 제대로 적용이 안되거나 하는 등의 문제가 생길 것으로 예상은 했었지만 뭐 보상해줄 것도 아니고, 나의 경우에도 현재에는 취미로 하는거라 수입창출을 하지 않고 있는데 장기적으로 십 년 후를 봤을 때는 수익창출의 가능성을 열어 두고 있기 때문에 이 문제에 민감할 수밖에 없다. 내 앞가림은 내가 하는 수밖에..

 

적용 후기

하여간 본 블로그에는 적용을 완료했고, 앞으로 새로 글 작성할 때마다 html 편집기로 바꿔서 글 한 줄을 추가해야 하는 귀찮은 작업이 될 것이다. 이전부터 카카오 정책에 신물이 나서 현재에는 카카오 플랫폼 의존성을 줄이는 작업을 진행 중이다. 블로그도 몇몇 milestone에 해당하는 글들이 있고 방문자들의 편의를 위해 유지는 하고 있지만 이러한 콘텐츠 제공자와의 상생을 포기하는 행위가 개선되지 않는다면 메이저 블로거들이 이탈하는 현상은 막을 수 없을 것이다. 나도 이것저것 대안들을 시도해보고 있으며, 완성되면 티스토리를 미련 없이 떠날 생각이다.

아프리카tv의 사례만 봐도 알 수 있듯이 의미없이 수익이나 창출하는 플랫폼이 될 것인지 아니면 많은 이용자들에게 사랑받는 고급 정보가 가득한 믿을만한 플랫폼이 될 것인지는 티스토리 운영진의 향후 행보에 달려 있다고 생각한다.