YouTube Shorts UI를 깔끔하게! Tampermonkey로 UI 정리하는 방법

코딩

YouTube Shorts UI를 깔끔하게! Tampermonkey로 UI 정리하는 방법

킹형 2025. 4. 19. 01:53

728x90

🔥 YouTube Shorts에서 깨끗한 화면을 원하신다면?

YouTube Shorts를 볼 때, 좋아요/댓글/공유 버튼, 제목/채널 정보, 오버레이 UI 등이 화면을 가로막고 있어 신경이 쓰일 수 있습니다. 이를 Tampermonkey를 활용하여 모든 불필요한 UI 요소를 제거하고, 영상만 깔끔하게 감상할 수 있도록 만들어보겠습니다.

📝 준비물: Tampermonkey

먼저 Tampermonkey라는 브라우저 확장 프로그램을 설치해야 합니다.

Tampermonkey는 크롬, 파이어폭스 등 여러 브라우저에서 사용할 수 있는 사용자 스크립트 관리자입니다.
Tampermonkey 다운로드 페이지에서 브라우저에 맞는 버전을 설치하세요.

✨ 스크립트 작성하기

Tampermonkey 확장 프로그램을 설치한 후, 브라우저에서 Tampermonkey 아이콘을 클릭하고 "Create a new script"를 선택합니다.
아래의 스크립트를 복사해서 붙여넣고 저장합니다.

YouTube Shorts UI 정리 스크립트 (Full Minimal)

// ==UserScript==
// @name         YouTube Shorts UI Cleaner (Selective Hide)
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Hide most YouTube Shorts UI except the comments button. Additional buttons hidden: like, share, menu, pivot, metapanel.
// @author       You
// @match        https://www.youtube.com/shorts/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const hideElements = () => {
        // 오른쪽 버튼 패널
        const nav = document.querySelector('.navigation-container.ytd-shorts');
        if (nav) nav.style.display = 'none';


        // 추가로 숨길 요소들
        const idsToHide = ['like-button', 'share-button', 'menu-button', 'pivot-button', 'metapanel'];
        idsToHide.forEach(id => {
            const el = document.getElementById(id);
            if (el) el.style.display = 'none';
        });
    };

    // DOM 변화 감시
    const observer = new MutationObserver(hideElements);
    observer.observe(document.body, { childList: true, subtree: true });

    // 초기 실행
    hideElements();
})();

🚀 스크립트 설명

이 스크립트는 YouTube Shorts에서 불필요한 UI 요소를 제거하여 영상만 깔끔하게 보이도록 만들어줍니다. 아래는 각 부분의 기능입니다:

.navigation-container.ytd-shorts: 영상 오른쪽에 떠 있는 좋아요, 싫어요, 댓글, 공유 버튼 등의 UI 요소를 제거합니다.
ytd-reel-player-overlay-renderer.style-scope: 영상 위에 떠 있는 오버레이 UI를 제거합니다. 주로 제목, 설명, 태그 등이 포함된 부분입니다.
ytd-reel-player-header-renderer.style-scope: 영상 상단에 있는 채널 정보 및 제목을 제거합니다.

🔧 어떻게 작동하나요?

DOM 변화를 감지하는 MutationObserver를 사용하여, 새로운 UI 요소가 나타날 때마다 이를 실시간으로 제거합니다.
페이지 로드 시 처음부터 불필요한 UI를 제거합니다.

👨‍💻 스크립트 적용하기

Tampermonkey 아이콘 클릭 → Create a new script 선택
위 스크립트를 붙여넣기
저장 (Ctrl + S)
YouTube Shorts에서 불필요한 UI가 제거된 화면을 확인합니다!

✨ 이제 YouTube Shorts를 깔끔하게!

이제 YouTube Shorts를 볼 때, 영상만 남고 그 외의 불필요한 UI 요소들은 제거되어 더 몰입감 있게 감상할 수 있습니다.

🛠️ 추가적인 커스터마이즈

이 스크립트는 YouTube Shorts에 특화되어 있지만, 다른 사이트에서도 비슷한 방식으로 UI 요소를 제거할 수 있습니다. 예를 들어, 다른 영상 플랫폼이나 웹사이트에서 불필요한 UI를 숨기고 싶다면, 요소 선택자를 변경하고 remove() 함수를 추가하는 방식으로 쉽게 수정할 수 있습니다.

이 스크립트로 깨끗한 화면을 유지하며 영상 감상하세요! 🎬

📝 사용법

Tampermonkey에 스크립트를 붙여넣고 저장하면 YouTube Shorts에서 UI가 깔끔하게 정리됩니다.
필요한 경우, @match 설정을 수정하여 다른 웹사이트에도 적용할 수 있습니다.
이 스크립트는 YouTube Shorts에서만 동작하도록 설정되어 있지만, 다른 사이트에서도 UI를 정리하는 방식으로 확장할 수 있습니다.

이제 YouTube Shorts를 더 깔끔하게 감상할 수 있겠죠! 🎉

728x90

저작자표시 (새창열림)