서드파티 쿠키 해결하고 유튜브 동영상 팝업창으로 재생하는 꿀팁

유튜브 영상을 블로그에 넣을 때마다 속도 점수가 깎여서 고민이셨죠? 서드파티 쿠키 문제를 해결하고 PageSpeed Insights 점수를 100점으로 유지할 수 있는 팝업창 재생 방법을 알려드릴게요. 사용자 경험(UX)도 챙기고 검색 엔진 점수도 지키는 꿀팁이니 천천히 따라와 보세요.

1. 그냥 넣으면 안 되는 이유: 쿠키와 속도 저하

블로그에 유튜브 영상을 어떻게 넣느냐에 따라 검색 엔진 최적화(SEO) 점수가 확 달라진다는 사실, 알고 계셨나요? 보통은 유튜브 링크를 그냥 붙여넣거나 iframe 코드를 사용하는데, 이게 생각보다 큰 문제가 될 수 있어요.

가장 큰 문제는 바로 ‘서드파티 쿠키(Third-Party Cookies)’ 때문이에요. 유튜브 영상을 그냥 삽입하면 페이지를 열자마자 유튜브 도메인의 쿠키를 불러오거든요. 그러면 PageSpeed Insights 같은 성능 측정 도구에서 ‘권장하지 않는 방법’이라며 점수를 100점 만점에 70~80점대로 뚝 떨어뜨려요. 게다가 크롬 같은 브라우저들은 서드파티 쿠키 지원을 점점 줄이고 있어서, 길게 봤을 때도 SEO에 좋지 않아요.

서드파티 쿠키가 뭐길래?

쿠키는 웹사이트에 방문할 때 컴퓨터에 저장되는 작은 데이터 파일이에요. 내가 방문한 사이트의 쿠키는 ‘퍼스트 파티’라고 하지만, 다른 사이트에서 생성된 쿠키는 ‘서드파티’라고 부르죠. 유튜브 iframe을 넣으면 영상 시청 기록이나 광고 추적을 위해 유튜브 쪽에서 서드파티 쿠키를 심는데, 이게 사이트 속도를 느리게 하고 프라이버시 경고를 띄우는 원인이 된답니다.

실제로 테스트해보니

그냥 일반적인 방법으로 유튜브 영상을 넣고 테스트해보면 점수가 79점 정도로 떨어지는 걸 볼 수 있어요. 경고 메시지를 보면 ‘서드 파티 쿠키 사용’이라는 문구가 뜨고, VISITOR_INFO1_LIVE 같은 쿠키들이 발견되죠.

3. 바로 쓸 수 있는 코드와 적용 방법

어렵게 코딩할 필요 없이 아래 코드를 복사해서 쓰시면 돼요. HTML, CSS, 자바스크립트가 다 합쳐진 코드인데, 이미지랑 유튜브 링크만 바꿔주면 바로 작동한답니다.

코드 이해하기

코드는 크게 세 부분으로 나뉘어 있어요. CSS는 팝업창의 디자인과 위치를 잡아주고, HTML은 팝업창의 뼈대를 만들어요. 그리고 자바스크립트는 이미지를 클릭했을 때 팝업창을 열고 영상을 재생하는 역할을 하죠.

유튜브 링크 바꾸는 법

유튜브 영상 주소를 가져올 때 주의할 점이 있어요. 공유 주소(youtu.be/…)를 그대로 쓰지 말고, 코드 안의 videoSrc 변수 부분에 ‘https://www.youtube.com/embed/영상ID’ 형태로 넣어야 해요.

이미지 설정 꿀팁

썸네일로 쓸 이미지는 유튜브 화면을 캡처해서 써도 되고, 다른 예쁜 이미지를 써도 돼요. 중요한 건 이미지의 ALT 속성(대체 텍스트)을 꼭 ‘유튜브 이미지’라고 적어주는 거예요. 제가 만든 스크립트가 이 이름표를 보고 작동하거든요.

적용 순서는 간단해요. 먼저 이미지를 넣고 ALT 속성을 ‘유튜브 이미지’로 설정하세요. 그다음 HTML 모드로 바꿔서 아래 코드를 붙여넣으면 끝이에요.

복사해서 쓸 코드

아래 코드를 HTML 블록에 그대로 붙여넣어 보세요.

<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]; 
}

window.onclick = function(event) {
 // 모달 외부를 클릭했을 때 모달을 닫고 재생을 중지합니다.
 if (event.target === document.getElementById("myModal")) {
 closeModal();
 }
}
</script>

4. 앞으로의 SEO 전략

구글이 2024년부터 서드파티 쿠키 지원을 점점 종료한다고 하잖아요? 이제는 단순히 기술적인 문제가 아니라 SEO 전략 자체가 바뀌어야 해요. 이 팝업창 방식은 그런 변화에 딱 맞는 모범 답안이라고 볼 수 있어요.

보통 동영상 iframe은 페이지가 뜰 때 렉을 유발해서 사용자 반응 속도(INP) 같은 지표를 떨어뜨리거든요. 하지만 이 방식을 쓰면 클릭하기 전까진 아무것도 실행하지 않으니까 웹 활력 지표(Core Web Vitals) 점수를 아주 좋게 유지할 수 있어요.

그리고 썸네일 이미지 최적화도 잊지 마세요. WebP 같은 가벼운 파일 형식을 쓰고 이미지 크기를 정확히 지정해주면 레이아웃이 흔들리는 현상(CLS)도 막을 수 있답니다.