멀티뷰 전체화면 모드로 여러 경기를 동시에 보는 화면

여러 방송 한 화면에, 멀티뷰 크롬 확장 만들기 1편 (2026)

작성자:

여러 방송을 한 화면에 같이 띄워서 보고 싶었다. 크롬 기본 기능으로는 안 돼서 멀티뷰 크롬 확장을 직접 만들어봤다. 이번 글에서는 유튜브를 한 화면에 여러 개 띄우기까지를 정리했다.

목차

출발점: 한 화면에서 같이 보고 싶었다

같은 시간에 두 경기가 열리면 둘 다 보고 싶어진다. 그런데 탭을 왔다 갔다 하며 봐야 하니까, 한쪽을 보다 보면 다른 쪽 결정적 장면을 놓친다. 그게 은근히 스트레스였다.

생각해보니 요즘은 경기만 덩그러니 보지도 않는다. 야구나 축구를 볼 때 인터넷 방송의 편파중계를 같이 틀어두면 훨씬 재밌다. 좋아하는 팀을 응원하면서 같이 봐주는 그 느낌 말이다. 그러니까 내가 원했던 건 결국 “경기 화면이랑 편파중계를 한 화면에 나란히” 두는 거였다.

크롬에도 PiP, 그러니까 화면 속 화면 기능이 있긴 하다. 그런데 막상 써보면 창이 하나만 뜨고, 볼륨도 못 줄이고, 크기도 잘 안 커진다. 딱 거기까지다. 없으면 만들면 되지, 하는 마음으로 시작했다.

멀티뷰 크롬 확장 출발점 — 크롬 기본 PiP
크롬 기본 PiP — 영상은 하나만 띄울 수 있고, 창 크기도 모니터의 약 80%까지만 커진다

크롬의 벽, 그래서 바꾼 계획

떠 있는 창은 하나만 된다

가장 먼저 “떠 있는 작은 창을 여러 개 띄우는 게 되나?”부터 알아봤다. 답은 안 된다는 거였다. 크롬은 이런 떠 있는 창(Document Picture-in-Picture)을 한 번에 하나만 허용한다. 새 창을 열면 먼저 있던 게 그냥 닫혀버린다. 알아보니 Firefox는 여러 개가 되는데, 크롬만 막혀 있었다.

그럼 창 하나에 다 넣자

며칠 고민하다 방향을 틀었다. 창을 여러 개 못 띄운다면, 창 하나 안에 영상을 여러 개 깔면 되지 않나? 한 창을 2분할, 4분할로 쪼개는 식이다. 이렇게 생각을 바꾸니 오히려 깔끔했다. 여러 방송도, 볼륨도, 크기 조절도 결국 “창 하나 안에서” 다 해결할 수 있었다. 막혔다고 생각했는데 우회로가 바로 옆에 있었던 셈이다.

만든 과정: 웹에서 확장으로

처음엔 웹페이지였다

처음엔 그냥 웹페이지로 만들었다. 주소를 넣으면 화면에 타일로 깔리고, 끌어서 옮기고, 모서리를 잡아 크기를 바꾸는 정도. 여기까진 코딩 에이전트(Claude)한테 시키니 생각보다 금방 됐다. 요즘은 이런 걸 대신 만들어주는 AI 에이전트도 흔하니, 안 만들 이유가 없었다.

그런데 쓰다 보니 매번 띄우는 것도 번거롭고, 나중에 다른 플랫폼까지 보려면 아무래도 크롬 확장 프로그램이 맞겠다 싶었다. 그래서 확장으로 갈아탔다.

유튜브가 자꾸 막혔다

확장으로 옮기자마자 유튜브가 “오류 153″을 띄웠다. 한참 들여다보니, 유튜브는 영상을 띄울 때 “이게 어디서 띄우는 건지”를 확인하는데 확장 화면은 그 정보를 안 보낸다는 거였다. 그래서 거부당한 것이다. 이게 왜 안 되지, 하면서 꽤 헤맸다.

확장은 그 정보를 대신 채워 보낼 수 있길래 한번 채워봤다. 그랬더니 이번엔 “오류 152″로 바뀌었다. 한 칸 전진하고 또 막힌 거다. 원인은 값의 형식이었다. 내가 엉뚱한 값을 넣어서 또 퇴짜를 맞은 거였고, 유튜브가 원하는 형식(확장의 고유 ID)으로 맞춰주고 나서야 드디어 영상이 떴다.

// 유튜브 153/152 해결: 확장 고유 ID를 "출처"로 넣어준다
chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    id: 1, priority: 1,
    condition: {
      initiatorDomains: [chrome.runtime.id],
      requestDomains: ["www.youtube.com", "www.youtube-nocookie.com"],
      resourceTypes: ["sub_frame"]
    },
    action: {
      type: "modifyHeaders",
      requestHeaders: [{ header: "referer", operation: "set", value: "https://" + chrome.runtime.id }]
    }
  }]
});

뭐가 문제인지 찾느라 검색에 시간이 좀 들었다. 그래도 153에서 152로 좁혀가다 결국 해결했다.

멀티뷰 크롬 확장에서 유튜브 여러 개 재생
유튜브 영상이 멀티뷰 페이지에서 재생되고, 여러 영상을 한꺼번에 연결하는 문제도 해결했다

어떻게 시켰나 — 프롬프트로 진행한 과정

이 확장은 코드를 한 줄씩 직접 친 게 아니라, 코딩 에이전트(Claude)에게 말로 시켜서 만들었다. 흐름은 대체로 “증상을 설명 → 에이전트가 원인을 찾아 고침 → 다시 확인”의 반복이었다. 단계마다 내가 넣은 프롬프트는 대략 이랬다.

  1. 발굴 — “여러 실시간 방송을 한 화면에서 같이 보고 싶은데 크롬 PiP는 하나밖에 안 돼. 멀티 PiP 확장으로 만들 수 있을까?” → 가능 여부와 한계, 방향부터 같이 정리했다.
  2. 만들기 — “진행하자.” → 웹 프로토타입이 먼저 나왔고, 곧 크롬 확장으로 옮겼다.
  3. 막힘 보고 — “유튜브가 오류 153이 떠. 확장에서도 안 돼.” → 내가 본 증상을 그대로 전달했다.
  4. 원인·수정 — 에이전트가 검색해 “확장 페이지라 referer가 없어서”임을 찾아 referer를 확장 ID 형식으로 맞춰 고쳤다. 152로 바뀌었을 때도 같은 방식으로 한 번 더.
  5. 다듬기 — “겹친 영상은 클릭하면 위로 올라오게 해줘”처럼 쓰면서 느낀 불편을 그때그때 요청했다.

코드를 몰라도 “뭐가 안 되는지”만 정확히 말하면 굴러갔다. 사실 이 글의 절반은 그 대화를 정리한 것에 가깝다.

아직 아쉬운 점

유튜브는 풀었지만 만들면서 한계도 보였다. 떠 있는 창은 화면의 80% 정도가 최대라, 진짜 꽉 찬 전체화면은 안 된다. 크롬이 그렇게 막아둔 거라 어쩔 수 없었다. 그래서 “크게 깔끔하게 볼 땐” 전체화면 모드, “다른 일 하면서 위에 띄워둘 땐” PiP 모드, 이렇게 두 가지로 나눠 넣었다.

그리고 이번 편은 딱 유튜브까지다. 치지직, 트위치, SOOP은 또 각자 다른 벽이 있었는데 그건 다음에 풀어보려고 한다.

멀티뷰 크롬 확장 PiP 모드 크기 한계
우리 멀티뷰도 PiP 모드에선 모니터의 약 80%가 한계고, PiP 창 위에 붙는 탭(타이틀바)도 거슬린다 — always-on-top의 공통 제약

지금까지의 결과물

지금은 확장 아이콘을 누르면 멀티뷰 화면이 열리고, 유튜브 주소를 넣으면 타일로 깔린다. 여러 영상을 한 화면에 동시에 틀어놓고, 전체화면이나 떠 있는 창으로 보고, 타일을 끌어 옮기거나 크기를 바꾸고, 클릭하면 그 영상을 크게 키울 수 있다. 타일마다 볼륨도 따로 조절된다. 보던 탭에서 아이콘만 눌러도 그 영상이 알아서 추가된다.

직접 써보니 네이티브 PiP로는 안 되던 “여러 개 + 볼륨 + 크기 조절”이 된다는 게 확실히 체감됐다. 완전하진 않지만 충분히 쓸 만하다.

멀티뷰 크롬 확장 전체화면 모드
전체화면 모드 — 경기와 편파중계를 한 화면에
멀티뷰 크롬 확장 스포트라이트
스포트라이트 — 한 영상을 크게
멀티뷰 크롬 확장 개별 크기 조정
개별 영상 크기 조정

막혔던 지점 정리

막혔던 지점은 크게 셋이었다. 떠 있는 창은 크롬에서 여러 개가 안 돼서, 창 하나에 그리드로 까는 방식으로 우회했다. 확장에서 유튜브가 153·152 오류를 낸 건 “출처” 값을 확장 고유 ID 형식으로 맞춰주고 풀렸다. 창 크기는 80%가 한계여서, 크게 볼 땐 전체화면 모드를 따로 뒀다.

마무리

오늘은 유튜브를 한 화면에 여러 개 띄우는 것까지 됐다. 전체화면과 PiP로 보고, 크기와 볼륨도 조절된다. 대신 창 크기 80% 제한 같은 한계는 그대로 남았다.

원래 하고 싶었던 건 경기를 보면서 인터넷 방송의 편파중계를 같이 틀어두는 거다. 그래서 다음엔 치지직, SOOP, 트위치 같은 플랫폼을 붙여볼 차례다.

댓글 남기기