외부 사이트에서 Twitch 재생 시 보라색 화면이 뜨는 증상에 대한 분석

Posted 2020. 12. 24. 12:28, Filed under: 개발/UserScript

[2021.02.25 코멘트 추가] 본 글은 2020년 12월 처음 작성되었으며, Multitwitch 와 같이 embed player 가 삽입된 외부 사이트에서 보라색 화면이 나타난 경우에 대한 해결 방법에 대해 요약한 글입니다.

2021년 2월 현재 발생하고 있는 Adblock 과 같은 광고 차단 툴 사용 시 Twitch.tv 에서 발생하는 보라색 화면과 관련된 글은 아닙니다.

이에 대한 내용은 2021년 2월 Twitch.tv 에서 Adblock 사용 시 나타나는 보라색 화면에 대한 내용 정리(https://nomo.asia/469) 글을 참고하십시오.

외부 사이트에서 재생 시 나타나는 Twitch 의 보라색 화면

Twitch 는 twitch.tv 가 아닌 외부 페이지에서 실시간 스트림을 embeds(iframe) 으로 삽입하여 함께 볼 수 있도록 하는 기능을 기본 기능으로 제공한다.

그런데 12월 18일경부터 멀티트위치와 같은 외부 페이지에서 embed 로 삽입된 비디오를 재생할경우, 아래의 그림과 같은 보라색 화면을 띄우며, 광고 차단툴을 사용하는 경우(?) 대략 20~30초를 대기하여야하는 프리롤 메시지를 내보이기 시작했다.

Thanks for watching! You may be using a third party tool or browser extension that is impacting site performance. For the best Twitch experience, head over to Twitch.tv and support the stream. If you're already watching on Twitch.tv, please review your third party tools.

보라색 화면 해결 방법

해결 방법부터 바로 설명하자면, 내 경우에는 Ublock Origin + 아래에서 소개하는 스크립트의 조합으로 중간 광고가 잘 차단되는 것을 확인했다(2020년 12월 24일 기준). 다만 아래 스크립트만 쓴다고 광고가 차단되는 것은 아니며 Ublock 등의 광고 차단 툴을 함께 써야한다. 아래에서 소개하는 방법을 사용해도 여전히 프리롤 & 미드롤 광고가 출력된다는 사람도 있으니 참고 바라며 시도만 해보길 바란다. 언제든 막힐 수 있다.

주의: 이 스크립트는 외부 페이지에 embed(iframe) 으로 삽입된 플레이어에 대응하기 위하여 player.twitch.tv 로 시작하는 도메인에서만 작동하므로 twitch.tv 에서 발생하는 adblock 관련 문제를 해결해주지 않는다.

STEP 1. 자신의 브라우저에 맞는 유저스크립트 관리 확장기능 설치

동작은 Chrome 브라우저에서만 확인했다.

STEP 2. UserScript 스크립트 설치

확장 기능 설치 이후 아래의 링크를 클릭하여 이동, 설치 버튼을 누른다.

Twitch-disable-embed-preroll-dec2020.user.js

0.00MB

주의: 본 스크립트를 설치 및 사용하며 브라우저 과부하로 인한 응답 없음/뻗음 등 으로 인한 데이터 손실 등 문제 발생 시 개발자는 책임지지 않음(보고된 문제는 없음)

본 스크립트를 사용하다가 Twitch 접속에 문제가 생기거나 동영상 재생이 제대로 안 되거나 중간 광고 차단 등이 제대로 되지 않는 경우, 이 스크립트가 막힌 것이므로 Tampermonkey 의 관리 메뉴에서 삭제하면 된다.

보라색 화면 발생 메커니즘

이 메시지가 뜨는 메커니즘에 대해 살펴보았다.

재생 전 Twitch player 는 Twitch 로부터 마스터 플레이리스트라는 것을 받아오는데, 이 안에는 각 화질별 플레이리스트(m3u8) 링크가 존재한다. 각 m3u8 파일에는 2초 정도의 길이로 조각난 실시간 비디오들의 주소가 포함되어 있다. Twitch player 는 이 비디오들을 순차 재생한다.

고전적인 광고의 경우, 비디오의 재생을 잠시 중지하고 광고를 띄우는 방법을 사용했다. 이 때, 광고가 재생 중인 상태에서도 실시간 비디오들의 주소는 계속 받아올 수 있었고, 광고 재생에 필요한 비디오의 주소는 별도의 요청을 통해 받아왔다. 이러한 경우 광고를 어떻게든 막고 중지된 비디오를 어떻게든 다시 재생하기만 하면 광고 차단이 가능했다.

하지만 최근(이라고 하기엔 조금 된 기술이지만) 프리롤(사전) 또는 미드롤(중간) 광고는 광고가 재생될 때 아예 플레이 리스트에 실시간 비디오 조각을 포함시키지 않는 방법을 사용함으로써 광고 차단을 번거롭게 한다. 간단하게 예시를 들어 설명하면,

cdn.mycdn.com/token?ad_preroll.ts
cdn.mycdn.com/token?1.ts
cdn.mycdn.com/token?2.ts
cdn.mycdn.com/token?3.ts
...
cdn.mycdn.com/token?303.ts
cdn.mycdn.com/token?ad_midroll.ts

위의 예시와 같이, 실시간 비디오 재생에 필요한 순차적으로 재생하여야하는 비디오를 아예 광고로 대체한다. 문제는 이 광고를 차단하게되면 재생할 수 있는 실시간 비디오 링크가 없으므로 까만 화면이 나타나거나 위와 같이 Twitch 가 의도한 광고 차단 화면이 나타나게 된다.

이번 보라색 화면 이슈의 경우에도 이를 응용한 것이다. 마스터 플레이리스트를 요청할 때 사용되는 쿼리에서 player_type 이 외부 페이지 재생에 해당하는 embed 인 경우, 플레이리스트가 프리롤과 미드롤 광고를 포함하도록 생성된다. Twitch.tv 에서 직접 재생하면 player_type 이 site 이므로, 이 경우에는 현재 문제가 없다.

Twitch 는 이러한 짓을 왜 한걸까?

그럼 이러한 짓을 왜 한 것일까? 그냥 단순히 외부 페이지에서 재생을 막기 위해서 그런 것일까...? Twitch.tv 에서 재생하나 외부 사이트에서 재생하나 광고를 재생할 수 있는 것은 공통사항이지만, 외부 사이트에서의 재생을 불편하게하여 Twitch.tv 에서의 직접 재생을 유도하면 시청자 참여도 높일 수 있고, 사용자가 비트 충전 & 후원하는 과정에서 Twitch 는 수익을 높일 수 있을테니 말이다. 하지만 개인적으로 뇌피셜을 씨부려보자면 아래의 이슈와도 연결되어있다고 생각한다.

올해 10월경, 광고를 차단한 경우 Commercial break in progress 라고 나타나는 중간 광고를 Twitch 에서 시범적으로 테스트한 적이 있었다. 이것은 한 때 Twitch.tv 에서 동영상을 재생하는 사용자들에게만 나타났다. 이것을 회피하는 방법은 여러가지가 있었지만, 그 중 하나는 마스터 플레이리스트를 받아올 때 player_type 을 site 에서 embed 로 바꾸어 외부 페이지에서 재생하는 것처럼 속이는 방법이 있었다. (참고로 이 방법은 Twitch 에 의해 금방 막혔다.)

이런식으로 Third party 툴이 player_type 을 임의로 바꾸는 시도나, Alternative Twitch Player 와 같은 대체 플레이어의 경우 player_type 을 embed 로 설정하여 플레이리스트를 받아왔던 것 같은데 이런 것을 막기 위함이 아닌가 싶다.

저 중간 광고에 대한 테스트는 현재는 중단된 것으로 보이지만, 만약 현재도 사용자가 당시의 광고 회피를 위한 Third party 툴을 활성화해둔 상태여서 player_type 을 site 에서 embed 로 변경해둔 상태라면, 최근 Twitch.tv 에서 재생하는 경우에 외부 페이지 재생으로 인식하여 보라색 화면이 나타났을 것이다. 뭐 이런것과 관련이 있지 않을까싶다.