Naver 카페에서 외부 클립 링크를 비디오로 변환해주는 UserScript 기반 브라우저 확장기능

Posted 2022. 1. 9. 16:34, Filed under: 개발/UserScript

Naver-Cafe-Clip-Loader

Naver 카페는 Youtube 링크를 카페 글 내에서 바로 볼 수 있게 비디오로 자동 변환해주는 기능을 지원한다. 하지만 Twitch Cilp 이나 Youtube Clip 에 대해서는 해당 기능을 지원하지 않아서, 매번 새 창을 띄워 클립을 재생해야 하는 귀찮음이 있다. 그래서 네이버 카페 글에서 외부 VOD 나 Clip 링크를 감지하는 경우, 재생 가능한 비디오로 변환해주는 툴을 브라우저 확장 기능의 일종인 UserScript 기반으로 만들었다. 이름은 Naver-Cafe-Clip-Loader 이다. 일단 생각나는대로 코드를 짜깁기해서 동작만 되게 만들어둔 것이지만 작동은 잘 된다. Github 링크(https://github.com/nomomo/Naver-Cafe-Twitch-Clip-Loader)

참고로 단순히 주소만 달랑~ 있는 형태의 링크의 경우 변환하지 않으며, 위 그림과 같이 섬네일이 있는 형태의 링크만 재생 가능한 비디오로 자동 변환하도록 해두었다. 그리고 PC 버전만 지원한다.

추가 편의 기능

또한 다음의 편의 기능들을 제공한다.

- Twitch(해외), Youtube Clip, SOOP(숲), Afreecatv, Chzzk, Streamable, Twip VOD & Clip, Kakao TV, Dailymotion, gfycat, Tiktok 과 같은 외부 동영상 링크를 Cafe 에서 바로 볼 수 있도록 비디오로 변환
- 비디오 재생 시 다른 재생 중인 Naver Video 와 Twitch Clip 자동 정지: 다음 동영상을 재생하기 위하여 이전 동영상을 정지할 필요가 없다. (엄청 편하다!)
- 전체화면 해제 후 스크롤 동작 개선: 본문의 내용이 많은 글에 삽입된 비디오를 전체화면 한 후 해제했을 때, 스크롤이 다른 위치로 변경되는 네이버 카페의 버그를 강제로 수정해준다.
- 네이버 비디오를 항상 최대 화질로 시작: 더 이상 1080p 화질을 직접 수동으로 설정할 필요가 없다.
- 영화관 모드 (클립 등 비디오 감상에 적합하도록 본문을 더 넓게 표시)
- 카페에서 새로고침 시 메인 페이지 대신 마지막 탐색한 페이지로 이동 (상세 설정에서 활성화 필요)

설치 방법

Github 에 모든 소스코드가 공개되어 있다. 필요한 사람이 있다면 https://github.com/nomomo/Naver-Cafe-Twitch-Clip-Loader#install 링크의 설명이나 아래의 방법을 참고하여 설치하면 된다.

참고로 Chrome 웹스토어에도 유사한 확장기능이 올라가있는데, 다른 사람이 본 스크립트의 "구버전"을 Chrome 확장기능 형태로 포팅하여 업로드 한 것으로 내가 직접 올린 것이 아니다. 이상한 것(?)은 없어보이지만 유지보수 및 새기능 업데이트가 되지 않으므로 아래 방법을 따라 설치하는 것을 권장한다.

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

위 링크에서 자신이 사용할 브라우저에 맞는 유저스크립트 관리 확장기능(Tampermonkey)을 설치한다. 스크립트의 동작은 Chrome, Firefox 브라우저에서만 확인했다.

STEP 2. Naver-Cafe-Twitch-Clip-Loader 스크립트 설치

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

https://github.com/nomomo/Naver-Cafe-Twitch-Clip-Loader/raw/main/Naver-Cafe-Clip-Loader.user.js

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

본 스크립트를 사용하다가 Naver 카페 접속에 문제가 생기거나 Twitch Clip 재생이 안 되는 문제 등이 발생하는 경우 이 스크립트를 그냥 끄고 업데이트가 될 때 까지 기다리거나 Tampermonkey 의 관리 메뉴에서 삭제하면 된다.

상세 설정

브라우저 툴바의 Tampermonkey 아이콘을 클릭하면 아래 그림처럼 상세 설정 창을 열 수 있는 버튼이 있으며, 이 창에서 몇 가지 설정을 변경할 수 있다.

설정 페이지에서 설정을 변경하면 자동으로 저장되며, 변경된 설정 적용을 위하여 Naver Cafe 에서 새로고침이 필요할 수 있다.