1편에 이어, 유튜브 다음은 인터넷 방송이었다. 멀티뷰 크롬 확장에 치지직·SOOP·트위치를 하나씩 붙인 기록이다.
목차
- 출발점: 플랫폼마다 안 되는 이유가 달랐다
- 치지직: 임베드가 없어서 API로
- SOOP: 도메인과 방송 번호
- 트위치: 연결 거부, 그리고 자동재생 정책
- 어떻게 시켰나 — 프롬프트로 진행한 과정
- 마무리
출발점: 플랫폼마다 안 되는 이유가 달랐다
유튜브는 1편에서 풀었다(1편 보기). 다음은 인터넷 방송 차례였다. 야구 중계를 틀어놓고, 옆에 좋아하는 스트리머의 편파중계를 같이 보는 그림. 그러려면 치지직·SOOP·트위치를 한 화면에 얹어야 했다.
문제는 이 셋이 전부 다른 이유로 안 됐다는 거다. 치지직은 깨끗한 임베드 자체가 없고, SOOP은 도메인이 헷갈렸고, 트위치는 아예 “연결을 거부”했다. 하나씩 본다.
치지직: 임베드가 없어서 API로
치지직은 유튜브처럼 “이 주소만 넣으면 깔끔하게 뜨는” 임베드가 없었다. 그냥 주소를 넣으면 사이드바까지 통째로 딸려와서 지저분했다.
그래서 방향을 틀었다. 치지직 비공식 API로 실시간 스트림 주소(m3u8)를 직접 받아서, 그걸 영상으로 재생하는 방식이다. 확장 프로그램이라 가능한 일이었다. 보통 웹페이지는 다른 사이트의 API를 막는 보안(CORS) 때문에 이런 걸 직접 못 받는데, 확장은 그 제약을 우회할 수 있고 로그인 상태도 그대로 쓸 수 있다.
결과적으로 치지직은 사이드바 없이 영상만 깔끔하게, 볼륨 조절까지 되게 붙었다. 단 해당 채널이 라이브 중일 때만 잡힌다.
SOOP: 도메인과 방송 번호
SOOP은 처음에 계속 검은 화면만 떴다. 한참 헤맸는데 원인이 허무했다. 내가 넣은 주소가 sooplive.com(.com)이었는데, 코드는 sooplive.co.kr(.co.kr)만 인식하고 있었다. 도메인 한 글자 차이로 SOOP이 아니라 그냥 “알 수 없는 영상”으로 빠졌던 거다.
여기에 더해, SOOP 라이브는 방송 번호(broadNo)가 있어야 재생된다. 다행히 주소(.../아이디/방송번호)에 그 번호가 이미 들어 있어서, 그걸 그대로 가져다 썼다. 없을 때는 SOOP API로 현재 방송 번호를 받아오게 했다.
다만 한 가지 못 없앤 게 있다. SOOP은 “고화질 직접연결” 안내를 자기 플레이어 안에서 띄우는데, 이건 SOOP 영역이라 우리가 끌 수가 없다. 닫으면 일반 화질로 잘 나온다. 자동으로 닫는 것도 시도해봤지만 깔끔하게 되진 않았다. 아직 아쉬운 부분이다.
트위치: 연결 거부, 그리고 자동재생 정책
연결 거부 — 헤더를 떼니 떴다
트위치는 아예 “player.twitch.tv가 연결을 거부했습니다”가 떴다. 트위치가 “남의 사이트 안에 끼워 넣기”를 막는 보안 헤더(X-Frame-Options)를 보내기 때문이다. 확장에서는 그 응답 헤더를 떼어낼 수 있어서, 그걸 제거하니 화면이 떴다.
멈춤 — 트위치 자동재생 정책
그런데 새 문제가 생겼다. 트위치 영상이 다른 걸 건드리면 멈췄다. 콘솔을 보니 “자동재생 요건 미충족 — viewport/style visibility”라고 적혀 있었다. 트위치 임베드는 플레이어가 화면에 온전히 보여야만 재생을 유지하는 정책이 있어서, 살짝 가려지거나 작아지면 멈춰버리는 거였다. 이건 트위치 쪽 정책이라 코드로 완전히는 못 없앤다. 대신 전체화면이나 PiP 모드로 보면 플레이어가 늘 온전히 보여서 안 멈춘다.
어떻게 시켰나 — 프롬프트로 진행한 과정
2편도 코드를 직접 친 게 아니라, 코딩 에이전트(Claude)에게 말로 시켜서 진행했다. 흐름은 1편과 같았다. “증상을 설명 → 에이전트가 원인을 찾아 고침 → 다시 확인.” 단계마다 넣은 프롬프트는 대략 이랬다.
- 플랫폼 추가 요청 — “SOOP, 트위치도 되게 하자.” → 각 플랫폼 임베드 방식부터 조사했다.
- 막힘 보고 — “숲은 검은 화면, 트위치는 연결 거부가 떠.” → 본 증상을 그대로 전달했다.
- 콘솔 공유 — 트위치가 큰 화면인데도 멈추길래 콘솔 메시지를 그대로 붙여넣었다. 거기서 “viewport visibility” 정책이 원인이라는 걸 찾았다.
- 정보 보강 — “SOOP 주소는 이거야: play.sooplive.com/아이디/방송번호” → 도메인·방송번호 문제를 그걸로 해결했다.
- 다듬기 — “겹친 영상은 클릭하면 위로 올라오게 해줘”, “상단에도 크기 조절 핸들을 넣어줘”처럼 쓰면서 느낀 불편을 그때그때 요청했다.
코드를 몰라도, 화면에 뜬 에러 문구와 콘솔 메시지를 그대로 전달하는 게 가장 빠른 디버깅이었다.
마무리
치지직·SOOP·트위치까지 한 화면에 붙였다. 유튜브 멀티뷰(1편)에 더해, 이제 경기와 편파중계를 한 화면에서 같이 보는 그림이 얼추 완성됐다.
남은 아쉬움도 분명하다. 쿠팡플레이 같은 DRM 서비스는 로드 자체가 안 돼서 못 붙였고(그건 별도 프로그램이 필요해 보인다), SOOP 고화질 안내는 못 껐고, 트위치는 가려지면 멈추고, 비공식 API라 플랫폼이 구조를 바꾸면 또 손봐야 한다. 그래도 필요해서 직접 만들었고 내 손에서 굴러간다는 건 분명하다. 다음엔 이걸 데모 영상으로 정리해볼 생각이다.