유튜브 동영상 삽입 시 발생하는 서드파티 쿠키 문제를 해결하고 PageSpeed Insights 성능 점수를 100점으로 최적화하는 팝업창 재생 스크립트 코드를 공개합니다. Core Web Vitals 점수 유지와 사용자 경험(UX) 극대화를 위한 유튜브 최적화 재생 방법과 HTML, CSS, JavaScript 코드 구현 방법을 안내합니다.
1. 유튜브 동영상 삽입의 함정: 서드파티 쿠키와 SEO 성능 저하 문제
블로그 포스팅에서 유튜브 동영상 재생 방법을 어떻게 구성하느냐에 따라 페이지의 검색 엔진 최적화(SEO) 점수와 사용자 경험(UX)에 큰 영향을 미칠 수 있습니다. 하지만 단순히 유튜브 링크를 삽입하거나 iframe 코드를 붙여 넣는 기존의 방식은 생각보다 큰 문제를 야기할 수 있습니다.
바로 서드파티 쿠키(Third-Party Cookies) 문제 때문입니다. 일반적인 유튜브 삽입 방식은 외부 도메인인 youtube.com 또는 youtu.be의 쿠키를 불러오게 되며, 이는 성능 측정 도구(Lighthouse, PageSpeed Insights)에서 ‘권장하지 않는 방법’ 또는 ‘서드파티 코드 영향’으로 분류되어 전체 페이지의 성능 점수를 100점 만점에서 70~80점 대로 하락시키는 주요 원인이 됩니다. 게다가 Google Chrome을 비롯한 주요 브라우저들은 서드파티 쿠키 지원을 점차 종료하고 있기 때문에, 기존 방식으로는 검색 최적화 측면에서도 장기적으로 불리해질 수 있습니다.
서드파티 쿠키 문제의 심층 분석
쿠키(Cookies)는 웹사이트 방문 시 사용자의 컴퓨터에 저장되는 데이터 파일입니다. 서드파티 쿠키는 저장되는 쿠키가 사용자가 직접 방문한 페이지의 쿠키가 아닌 다른 사이트의 도메인에서 생성된 쿠키를 의미합니다. 사용자가 직접 방문한 웹사이트의 쿠키는 “퍼스트 파티 쿠키”라고 하고, 사용자가 방문한 사이트가 아니고 사용자가 모르는 사이트의 쿠키는 서드파티 쿠키라고 합니다. 유튜브 iframe을 삽입하면, 해당 iframe이 로드될 때 유튜브 도메인에서 사용자의 시청 기록, 광고 추적 등을 위한 서드파티 쿠키를 생성합니다. 이것이 성능 저하 및 프라이버시 경고의 원인이 됩니다.
유튜브 동영상 성능 테스트 결과 (문제 진단)
유튜브 동영상을 일반적인 방법으로 설정 후 검색 최적화 성능 문제 진단 결과, 성능 측정 결과는 100점에서 79점으로 하락합니다. 주요 원인은 유튜브 동영상을 링크할 때 사용하는 코드의 서드파티 쿠키로 발생합니다.
✔경고 표시: 서드 파티 쿠키 사용 쿠키 2개 찾음 서드 파티 쿠키에 대한 지원은 Chrome 향후 버전에서 삭제될 예정입니다. 서드파티 쿠키는 VISITOR_INFO1_LIVE, YSC 등의 이름으로 발견됩니다.
URL YouTube video YSC /embed/SK3LFFfWKNY?si=(www.youtube.com) VISITOR_INFO1_LIVE /embed/SK3LFFfWKNY?si=(www.youtube.com)
이러한 문제를 해결하려면 유튜브 동영상을 삽입하면서도 성능 점수를 유지하고 SEO까지 고려할 수 있는 방법이 필요하며, 바로 팝업창을 이용한 유튜브 재생 방식이 그 해답이 됩니다.
2. 유튜브 최적화 동영상 재생방법: 팝업창(Modal) 재생 원리
유튜브 최적화 동영상 재생 방법은 일반적인 링크나 플러그인 사용 시 발생하는 성능 문제를 해결하기 위해, 초기 페이지 로딩 시 동영상 플레이어 자체를 로드하지 않고, 사용자가 클릭했을 때만 동영상을 팝업창(Modal) 형태로 띄워 재생하는 방식입니다. 이 방법을 통해 성능 문제를 개선하고, 사용자 집중도를 높일 수 있습니다.
팝업창 재생 방식의 기술적 이점 (Lighthouse 100점 달성 전략)
유튜브 동영상을 팝업창으로 재생하게 설정해주면 다음과 같은 기술적 이점을 얻을 수 있습니다.
- 초기 성능 점수 유지: 초기 페이지 로드 시에는 가벼운 이미지와 자바스크립트 코드만 로드하고, 무거운
iframe및 서드파티 쿠키가 로드되지 않습니다. 이로 인해 Largest Contentful Paint (LCP)와 Total Blocking Time (TBT)이 크게 개선되어 PageSpeed Insights 점수가 100점에 가깝게 유지됩니다. - 서드파티 쿠키 지연 로드: 동영상 클릭 시점에만 서드파티 쿠키가 로드되므로, 초기 페이지 로딩 시 발생하는 쿠키 경고를 회피할 수 있습니다.
- 향상된 사용자 경험 (UX): 팝업창으로 재생되기 때문에 사용자는 페이지의 다른 요소에 방해받지 않고 동영상에 더 집중해서 시청할 수 있는 장점도 있습니다.
변경 후 테스트 결과 (성능 개선 확인)
유튜브 동영상 재생 방법을 변경한 후 검색 최적화 성능 진단을 다시 실행해 보면, 성능 점수가 100점으로 크게 개선되는 것을 확인할 수 있습니다.
3. 유튜브 최적화 재생 팝업창 코드 상세 분석 및 수정 방법
아래 제공된 코드는 HTML, CSS, JavaScript를 조합하여 유튜브 팝업창(Modal) 기능을 완벽하게 구현한 코드입니다. 이 코드를 그대로 사용하면 되며, 수정할 부분은 이미지(또는 글자) 설정과 유튜브 링크 주소 값만 변경해 주면 됩니다.
코드 구조와 기능 분리
제공된 코드는 세 부분으로 명확히 분리되어 있습니다.
- CSS (
style태그 내부): 팝업창(.modal)과 내용 컨테이너(.modal-content)의 위치, 크기, 배경을 정의합니다. 특히aspect-ratio: 16 / 9;는 동영상 비율을 유지하며 반응형으로 표시되도록 합니다. - HTML 구조 (
div id="myModal"): 모달 창의 기본 구조와iframe플레이어, 닫기 버튼을 정의합니다. 초기에는display: none으로 숨겨져 있습니다. - JavaScript (
script태그 내부): 모달 창을 열고 닫는 논리를 제어합니다. 사용자가 이미지를 클릭할 때 모달을 표시하고iframe의src에 자동 재생 파라미터를 추가하여 영상을 로드합니다.
유튜브 링크 주소 변경 가이드
유튜브의 링크는 유튜브 게시물 공유에서 설정해주는 주소를 그대로 가져와서 코드의 중간 주소 부분만 복사해서 사용하시면 됩니다. 예를 들어, 공유 주소가 https://youtu.be/M9tG__0dpek 라면, 코드의 videoSrc 변수에 https://www.youtube.com/embed/M9tG__0dpek 형태로 변경하여 사용해야 합니다.
이미지 사용 방법 및 ALT 속성 활용
유튜브를 재생할 문구나 이미지는 유튜브의 이미지를 캡처해서 사용하셔도 되며 다른 이미지를 사용해도 됩니다. 이미지 주소는 텍스트 형식으로 변경해주면 간단하게 사용할 수 있으며, 만약 이미지를 이용할 경우는 블로그에 이미지를 먼저 설정한 후 그 이미지 주소를 이용하는 방법도 있습니다. 이 방법의 핵심은 링크를 작성할 이미지 ALT 속성만 ‘유튜브 이미지’로 설정하는 것입니다. JavaScript 코드가 이 ALT 속성을 가진 이미지를 찾아 클릭 이벤트를 연결하기 때문입니다.
1. 이미지를 먼저 페이지에 넣고 이미지 ALT 속성을 ‘유튜브 이미지’로 지정합니다.
2. 임시 저장 후 이미지 경로를 복사합니다.
3. 이미지 경로를 원하는 위치에 넣어줍니다.
4. 아래 스크립트 코드를 유튜브 팝업창 코드와 같이 사용합니다.
최적화된 팝업창 코드 (HTML, CSS, JavaScript)
✔ 코드수정: 2024.9.13. 아래 코드는 자바스크립트를 이용하여 ALT 속성 ‘유튜브 이미지’를 가진 모든 이미지를 클릭 가능하도록 연결합니다.
✔ 팝업창 코드
style
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
overflow: auto;
}
.modal-content {
background: #fff;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 960px;
position: relative;
box-sizing: border-box;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.close {
position: absolute;
top: 10px;
right: 20px;
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #000;
}
.modal-content iframe {
width: 100%;
height: 100%;
border: none;
}
/style
div id="myModal" class="modal"
div class="modal-content"
span class="close" onclick="closeModal()"×/span
iframe id="videoFrame" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen/iframe
/div
/div
script
// 유튜브 동영상 URL (여기에 복사한 유튜브 임베드 주소의 'embed/영상ID' 부분을 입력하세요)
const videoSrc = "https://www.youtube.com/embed/M9tG__0dpek";
document.addEventListener('DOMContentLoaded', () = {
// ALT 속성이 "유튜브 이미지"인 모든 이미지를 찾아 클릭 가능하게 만듭니다.
document.querySelectorAll('img[alt="유튜브 이미지"]').forEach(img = {
const link = document.createElement('a');
link.href = '#';
link.classList.add('popup-link');
link.addEventListener('click', openModal);
// 이미지를 태그로 감싸서 클릭 영역을 설정합니다.
img.parentNode.insertBefore(link, img);
link.appendChild(img);
});
});
function openModal(event) {
event.preventDefault();
document.getElementById("myModal").style.display = "block";
// 모달창 열릴 때만 src를 설정하고 autoplay 파라미터를 추가하여 재생을 시작합니다.
document.getElementById("videoFrame").src = `$videoSrc}?autoplay=1`;
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
const videoFrame = document.getElementById("videoFrame");
const currentSrc = videoFrame.src;
// 모달창 닫을 때 src를 초기화하여 동영상 재생을 중지하고 리소스를 해제합니다.
videoFrame.src = '';
videoFrame.src = currentSrc.split('?')[0]; // src를 원본 주소로 재설정 (선택 사항)
}
window.onclick = function(event) {
// 모달 외부를 클릭했을 때 모달을 닫고 재생을 중지합니다.
if (event.target === document.getElementById("myModal")) {
closeModal();
}
}
/script
4. 서드파티 쿠키 종료 시대의 SEO 대응 전략 및 성능 최적화
Google은 2024년부터 서드파티 쿠키 지원을 단계적으로 종료하고 있습니다. 이는 웹사이트 운영자들에게 단순한 기술적 문제가 아닌, 근본적인 SEO 및 웹 성능 전략의 변화를 요구합니다. 유튜브 팝업창 재생 방법은 이러한 변화에 가장 효율적으로 대응하는 모범 사례 중 하나입니다.
Core Web Vitals (CWV) 지표에 미치는 영향
일반적으로 동영상 iframe은 페이지 로딩 초기에 메인 스레드를 차지하여 TBT (Total Blocking Time) 및 FID/INP (사용자 응답성) 지표에 부정적인 영향을 미칩니다. 팝업창 방식은 동영상을 클릭하기 전까지 이 무거운 스레드 작업을 완전히 지연시키므로, Core Web Vitals의 세 가지 주요 지표(LCP, INP, CLS)를 모두 긍정적으로 개선하는 효과를 가져옵니다.
사용자 이미지 선택의 중요성
이 방법을 사용할 경우, 이미지가 2개가 노출될 수 있으므로, 원본 이미지는 display: none 설정 등으로 사용자에게 노출되지 않게 처리해야 합니다. 가장 중요한 것은 동영상의 썸네일 역할을 할 이미지입니다. 이 이미지는 LCP 요소로 작용할 가능성이 높으므로, 반드시 압축하고 WebP와 같은 최신 형식으로 변환해야 하며, 이미지의 크기(width, height) 속성을 명시하여 CLS(레이아웃 이동)를 방지해야 합니다. 사용자가 이미지를 클릭할 때만 비로소 실제 플레이어를 로드하는 ‘클릭 투 플레이’ 원칙이 완벽하게 적용됩니다.
코드 유지보수 및 확장성
제공된 JavaScript 코드는 document.querySelectorAll('img[alt="유튜브 이미지"]')를 사용하여 유연하게 여러 동영상을 처리할 수 있도록 설계되었습니다. 블로그 글에 여러 개의 유튜브 동영상을 삽입할 경우에도, 각 동영상의 썸네일 이미지에 동일한 alt 속성(“유튜브 이미지”)을 지정하고, JavaScript의 videoSrc 변수를 해당 이미지에 맞게 동적으로 변경하는 로직을 추가하면 하나의 스크립트로 모든 동영상을 관리할 수 있습니다. 이는 장기적인 웹사이트 유지보수 효율성을 높여줍니다.
유튜브 팝업창 방식을 사용하면 PageSpeed Insights 점수가 정말 100점이 되나요?
이 방법은 동영상 iframe과 이로 인해 발생하는 서드파티 쿠키 로드를 초기 페이지 로딩에서 완전히 제거하여, 웹사이트의 Core Web Vitals 점수를 극적으로 개선합니다. 일반적으로 동영상 삽입 외 다른 성능 문제가 없다면 100점 또는 그에 준하는 높은 점수를 달성할 수 있습니다. 이는 무거운 리소스를 필요할 때만 로드하는 ‘지연 로딩(Lazy Loading)’의 최적화된 구현 방식입니다.
팝업창으로 설정하면 모바일 사용자 경험은 어떻게 되나요?
제공된 CSS 코드에 width: 90%; max-width: 960px; 및 aspect-ratio: 16 / 9;가 적용되어 모바일 환경에서도 팝업창이 화면 중앙에 반응형으로 뜨게 됩니다. 또한 사용자가 직접 동영상을 클릭해야 재생되므로, 원치 않는 데이터 사용이나 사운드 발생을 막아 모바일 사용자 경험을 오히려 개선합니다.
하나의 페이지에 여러 개의 유튜브 팝업 동영상을 넣을 수 있나요?
네, 가능합니다. 다만, 제공된 스크립트는 const videoSrc가 단일 영상 주소를 가지고 있으므로, 여러 개의 동영상을 사용하려면 JavaScript 로직을 수정해야 합니다. 예를 들어, 썸네일 이미지의 data-video-id 속성에 영상 주소를 저장하고, openModal 함수 내에서 클릭된 이미지의 data-video-id를 읽어와 videoFrame.src에 설정하도록 코드를 확장해야 합니다.
모달창 닫기 버튼(X) 외에 다른 방법으로도 팝업창을 닫을 수 있나요?
네. 제공된 스크립트의 window.onclick 함수는 사용자가 모달 창 외부의 배경(.modal)을 클릭했을 때도 팝업창을 닫고 동영상 재생을 중지하도록 설정되어 있습니다. 이는 사용자에게 직관적인 닫기 기능을 제공합니다.