Youtube 유투브 | 1.x 배속 재생, 속도 변경 토글 버튼 만들기 (Feat. Tampermonkey 탬퍼몽키 스크립트)

우측 하단에 컨트롤 바에 만든 유투브 속도 표시 및 속도 변경 버튼

유투브의 속도 변경 방식, 슬슬 바뀔 때가 된듯한데 여전히 참 불편합니다. '설정 클릭 → 재생 속도 클릭 → 변경할 속도 클릭' 3단계 과정, 프리셋에 없는 속도는 스크롤 바로 맞춤 설정까지 해야하죠.

유투브를 볼 때 재생 속도를 빈번하게 바꾸는터라 탬퍼몽키 스크립트를 활용하여 '속도 변경 버튼'을 만들어 봤습니다. 일단 기본 속도는 제가 평소 선호하는 배속인 1.15x 배속으로 고정해서 시작하고, 속도 버튼을 누르면  ' → 1x → 1.25x → 1.5x → 2x → 다시 1.15x 기본 배속 → '으로 계속 순환합니다.

// ==UserScript==
// @name         YouTube - 속도 1.15x 배속 기본 + 속도 변경 토글 버튼
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  기본은 1.15배속, 버튼으로 1x→1.25x→1.5x→2x→기본 순환 (전체화면 대응)
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const modes = [
    { label: "1x", rate: 1.0, force: true },
    { label: "1.25x", rate: 1.25, force: true },
    { label: "1.5x", rate: 1.5, force: true },
    { label: "2x", rate: 2.0, force: true },
    { label: "1.15x", rate: 1.15, force: true }
  ];

  let currentMode = 4; // 기본 모드 (1.15x)
  let button = null;

  function applyMode(video) {
    if (!video) return;
    const mode = modes[currentMode];
    if (mode.force) video.playbackRate = mode.rate;
  }

  function updateButtonStyle(isFullscreen) {
    if (!button) return;

    const screenHeight = window.screen.height;

    if (isFullscreen) {
      // 전체 화면 모드 버튼 크기 - 화면 높이에 비례
      const buttonHeight = Math.max(52, screenHeight * 0.055); // 화면 높이의 5.5%, 최소 52px
      const buttonWidth = buttonHeight * 1.06; // 세로 높이 기준 가로 비율값
      const fontSize = buttonHeight * 0.325; // 폰트 사이즈 배율

      button.style.cssText = `
        width: ${buttonWidth}px; height: ${buttonHeight}px; color: white;
        font-size: ${fontSize}px; font-weight: 900;
        background: none; border: none; cursor: pointer; opacity: 0.9;
        display: flex;
        justify-content: center;
        align-items: center;
      `;
    } else {
      // 일반 창 모드 버튼 크기 - 화면 높이에 비례
      const buttonHeight = Math.max(40, screenHeight * 0.037); // 화면 높이의 3.7%, 최소 40px
      const buttonWidth = buttonHeight * 1.2; // 세로 높이 기준 가로 비율값
      const fontSize = buttonHeight * 0.325; // 폰트 사이즈 배율

      button.style.cssText = `
        width: ${buttonWidth}px; height: ${buttonHeight}px; color: white;
        font-size: ${fontSize}px; font-weight: 900;
        background: none; border: none; cursor: pointer; opacity: 0.9;
        display: flex;
        justify-content: center;
        align-items: center;
      `;
    }
  }

  function createToggleButton() {
    if (button) return;

    const btnContainer = document.createElement('div');
    btnContainer.className = 'ytp-button ytp-speed-toggle-custom';
    btnContainer.style.position = 'relative';

    button = document.createElement('button');
    button.className = 'ytp-button';
    button.title = '재생 속도 토글 (1x / 1.25x / 1.5x / 2x / 기본)';
    button.textContent = modes[currentMode].label;

    // 초기 스타일 적용
    updateButtonStyle(!!document.fullscreenElement);

    button.onclick = (e) => {
      e.preventDefault(); e.stopPropagation();
      currentMode = (currentMode + 1) % modes.length;
      button.textContent = modes[currentMode].label;
      const v = document.querySelector('video');
      if (v) applyMode(v);
    };

    btnContainer.appendChild(button);

    const insertButton = () => {
      const fullscreenButton = document.querySelector('.ytp-fullscreen-button, button[title="전체 화면(f)"]');
      if (fullscreenButton && fullscreenButton.parentNode) {
        const oldBtn = document.querySelector('.ytp-speed-toggle-custom');
        if (oldBtn) oldBtn.remove();
        fullscreenButton.parentNode.insertBefore(btnContainer, fullscreenButton.nextSibling);
        return true;
      }
      return false;
    };

    let tries = 0;
    const tryInsert = () => {
      if (insertButton() || tries++ > 50) return;
      setTimeout(tryInsert, 100);
    };
    tryInsert();
  }

  function watchVideoElement() {
    let lastVideo = null;
    setInterval(() => {
      const video = document.querySelector('video');
      if (video && video !== lastVideo) {
        lastVideo = video;
        applyMode(video);
        video.addEventListener('ratechange', () => {
          const mode = modes[currentMode];
          if (mode.force && video.playbackRate !== mode.rate) {
            video.playbackRate = mode.rate;
          }
        });
      }
    }, 1000);
  }

  function watchFullscreenChange() {
    // 전체 화면 변경 감지
    document.addEventListener('fullscreenchange', () => {
      updateButtonStyle(!!document.fullscreenElement);
    });

    document.addEventListener('webkitfullscreenchange', () => {
      updateButtonStyle(!!document.webkitFullscreenElement);
    });

    document.addEventListener('mozfullscreenchange', () => {
      updateButtonStyle(!!document.mozFullScreenElement);
    });

    document.addEventListener('msfullscreenchange', () => {
      updateButtonStyle(!!document.msFullscreenElement);
    });
  }

  function init() {
    currentMode = 4;
    button = null;
    createToggleButton();
    watchVideoElement();
    watchFullscreenChange();
  }

  let lastUrl = location.href;
  const observer = new MutationObserver(() => {
    if (location.href !== lastUrl) {
      lastUrl = location.href;
      setTimeout(init, 1000);
    }
  });
  observer.observe(document.body, { childList: true });

  window.addEventListener('yt-navigate-finish', () => setTimeout(init, 1000));
  window.addEventListener('load', () => setTimeout(init, 1000));
})();

사용 방법 : 웹브라우저의 확장 기능인 Tampermonkey 탬퍼몽키 설치, '새 스크립트 만들기'해서 에디터에 뜨는 내용은 지우고 위 내용 전체 복사해서 붙여넣은 후 '파일 메뉴 → 저장(Ctrl S)' 하면 스크립트가 자동 활성화 됩니다.

버튼 크기 변경 및 스크립트 수정 방법 : 버튼 크기는 기본 일반 창 모드, 전체 화면 모드 두 가지 방식에 대응합니다. 만약 사용하는 환경에서 버튼 크기가 안 맞다면 주석 참고해서 크기를 변경하면 됩니다. 그외 기본 속도를 변경하거나, 속도 추가 및 삭제 등을 원한다면 ChatGPT, Gemini 에 위 스크립트를 던져주고 요청 사항을 적어서 바꿔달라고 하면 하면 바꿔줍니다.