NOMO.asia

[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 스크립트 설치

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

github.com/nomomo/Twitch-Auto-Max-Quality/raw/master/Twitch-Adblock-dec2020.user.js

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

본 스크립트를 사용하다가 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 에 의해 금방 막혔다.)

Commercial break in progress

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

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

  • 나그네 2021.01.30 19:44

    오 감사합니다 덕분에 해결했네요

  • 오예 2021.02.13 16:29

    와 이거 보고 해결했어요^^
    아무리 찾아도 잘 안 나왔는데 감사합니다

  • 설리번 2021.02.24 21:41

    이방법을 사용해봤는데 아직 보라색화면이 출력되는걸 봐선 저는 안되는 모양이네요 ㅠㅠ

  • 으앙 2021.02.25 00:39

    처음에 스크립트 배포해주신걸로 잘 쓰고 있던 유저입니다.

    그저께까지 멀티트위치로 문제없이 재생되다가 오늘부터 다시 보라색 화면이 뜨더라구요 ㅠㅠ

    어제부터 스쿼드 모드라는 기능을 추가돼서 동일한 게임을 진행하는 스트리머들을 모아서 볼 수 있도록 만들었던데, 이 기능이 추가되면서 멀티트위치와 같은 서비스를 다시 한번 차단하는 로직을 수정한것 같습니다. 다시한번 업데이트를 해야할것 같아요.

    • Favicon of https://nomo.asia 노모 2021.02.25 05:44 신고

      저는 평소에는 터보를 써서 문제 있을 때만 다른 계정으로 확인하는데 증상 재현이 잘 안 되네요.
      현재 되는 사람들은 여전히 문제 없이 잘 되고, 최근에 안 되는 사람들이 일부 생긴 것 같기도 하던데(??) 일단 저는 잘 되는 편이라서요.
      안 되는 조건이 있을 것 같은데 가능한경우 확인해보겠습니다.

  • ㅇㅇ 2021.02.25 10:52

    혹시 bttv나 twitch auto bonus(채널포인트 자동으로 받아주는 프로그램) 같은것도 third party tool로 인식해서 보라색 경고문을 띄우나요? 지금까진 문제 없었는데 오늘부터 계속 저 경고문이 뜨네요.. 애드블럭도 다 껐는데 계속 뜨네요

    • 크레 2021.02.25 11:57

      저도 오늘부터 그러네요ㅠㅠㅠ
      이거 왜 이런걸까요...?
      외부사이트도 아니고 트위치사이트에서 시청중인데 자꾸 떠요ㅠㅠ

    • Favicon of https://nomo.asia 노모 2021.02.25 12:33 신고

      이 스크립트는 embed 로 플레이어가 삽입된 페이지에만 적용하기 위하여 도메인이 player.twitch.tv 로 시작할 때만 동작하도록 되어있습니다.
      만약 twitch.tv 에서도 동일한 메시지가 나타난다면 다른 확장기능이나 광고차단툴 때문이거나 트위치가 무언가를 테스트 중이라서 발생한 문제일 수 있겠네요.
      일단 저는 지금 Chrome 시크릿 모드에서 Tampermonkey, 이 스크립트, Ublock origin 만 활성화 한 채로 embed 로 삽입된 player 에 대해 테스트하면 문제가 없어서 아직 잘 모르겠네요.
      레딧에도 글 몇 개가 올라오긴 했는데 아직 뚜렷하게 분석된건 없어서 기다리면 늘 그랬던 것처럼 해결책이 나올 듯합니다~

    • Favicon of https://nomo.asia 노모 2021.02.25 12:50 신고

      대충 확인해보니 광고차단 툴 때문에 발생하는 문제인데, 어떤 광고 필터를 사용하느냐에 따라 보라색 화면 출력 여부가 달라지는 것 같네요~
      저는 시간이 없어서 능력자 분들이 나중에 해결해주시면 업데이트 해보도록 하겠습니다.
      아래 링크가 아직 업데이트 되지는 않았지만 참고해보시면 좋을 것 같네요~ 개인적으로는 프록시를 사용하는 방법이 아직도 동작하는지 궁금하기는 하네요.
      https://github.com/pixeltris/TwitchAdSolutions

  • ㅇㅇ 2021.02.25 16:05

    이대로 해봤는데 뭐가 개선이 된건지...안된건지 모르겠네요
    오늘 갑자기 이런 증상이 생겨서 뭔가 하고 찾아보니 이렇게 정리된 글이 있어 적용은 해봤지만...
    놔두면 다시 방송이 정상적으로 나오긴 하는데 적용을 해서 나오는건지...
    원래 나올 타이밍이라 나오는건지...증상이 딱히 개선된 느낌은 안 드네요 뭘 잘못했을까요..?

    이걸 적용하니 차이점?이라면 보라색 화면이 떴을 때 채팅창 위에 작은 화면이 생기고
    그 화면에서는 방송이 보이는데 작은 화면에서 별도의 조작이나 위치는 못 바꾸는 것 같아서
    소리가 안 들리는 문제..? 가 있네요 저만 이러는건지 원..

Leave a comment