요즘 웹사이트나 블로그를 보면 텍스트보다 영상이 먼저 눈에 들어오는 경우가 많죠? 확실히 글을 읽는 것보다 유튜브 같은 영상으로 정보를 얻는 게 익숙한 시대라 그런지, 사이트 첫인상도 동적인 디자인으로 꾸미는 게 트렌드인 것 같아요. 그중에서도 배경 전체를 동영상으로 꽉 채우는 방법은 정말 매력적이에요.
블로그에서 동영상 전체 배경화면을 사용하면 비주얼이 확 살아나서 방문자에게 깊은 인상을 남길 수 있어요. 단순히 글만 있는 것보다 훨씬 몰입감 있고, 시각적으로 풍성한 느낌을 주니까요.
하지만 무작정 영상을 넣는다고 다 좋은 건 아니에요. 스마트폰으로 접속하는 분들도 많기 때문에 모바일 환경에서도 잘 보여야 하고, 누구나 불편함 없이 이용할 수 있도록 신경 써야 할 점들이 있답니다.
모바일과 PC 모두 보기 편한 동영상 배경 설정하기
누구나 편하게 볼 수 있는 접근성 챙기기
동영상 배경은 멋지지만, 시각이나 청각이 예민한 분들에게는 오히려 불편함을 줄 수도 있어요. 갑자기 소리가 크게 나거나 화면이 너무 정신없이 움직이면 집중을 방해해서 바로 나가버릴 수도 있거든요. 그래서 몇 가지는 꼭 챙기는 게 좋아요.
배려가 담긴 설정 방법
- 소리는 끄고 자동 재생하기: 사이트에 들어오자마자 소리가 쾅 하고 나오면 당황스럽겠죠? 자동 재생을 하더라도 음소거 상태로 시작하는 게 기본 매너예요.
- 친절한 설명 넣기: 영상이 어떤 내용을 담고 있는지 텍스트나 대체 텍스트로 설명해 주면, 영상을 볼 수 없는 환경에 있는 분들에게도 내용을 전달할 수 있어요.
- 건너뛰기 버튼 만들기: 영상을 보고 싶지 않은 분들을 위해 재생을 멈추거나 바로 본문으로 넘어갈 수 있는 버튼을 만들어주는 센스가 필요해요.
SEO(검색 노출)에도 도움이 될까요?
결론부터 말하면 도움이 돼요! 배경 영상 덕분에 방문자가 “오, 멋진데?” 하고 사이트에 오래 머물게 되면 체류 시간이 늘어나서 SEO에 긍정적인 영향을 주거든요. 물론 영상 때문에 로딩이 너무 느려지면 안 되니까 최적화는 필수죠.
검색 엔진이 좋아하는 영상 활용 팁
- 키워드 챙기기: 유튜브 영상 제목이나 설명에 내 블로그 주제와 관련된 키워드를 잘 넣어두면 검색 엔진이 내용을 더 잘 이해해요.
- 가벼운 영상 사용하기: 고화질도 좋지만, 페이지가 너무 무거워지면 안 돼요. 적절한 해상도로 조절해서 로딩 속도를 빠르게 유지하는 게 SEO의 핵심이에요.
블로그 전체화면 동영상 배경 적용 코드
이제 실제로 블로그에 적용해볼까요? 아래 코드를 사용하면 유튜브 영상을 배경으로 설정할 수 있어요. 화면 크기에 맞춰서 영상 사이즈가 자동으로 조절되도록 만들었기 때문에, PC나 모바일 어디서든 깔끔하게 보일 거예요.
코드 적용하는 순서
웹사이트나 블로그 스킨 편집(HTML)에 들어가서 아래 순서대로 적용해 보세요.
- 코드 복사 & 붙여넣기: 아래의 스크립트 코드를 복사해서
<body>태그 안쪽 끝부분에 넣어주세요. - 유튜브 주소 변경: 코드 중간에 있는 유튜브 URL 부분을 내가 보여주고 싶은 영상 주소로 바꿔주면 돼요.
- 버튼 텍스트 수정: “동영상 전체 배경화면 글 보기”라고 적힌 부분을 내 블로그 분위기에 맞는 멘트로 고쳐보세요.
<script>
window.addEventListener("DOMContentLoaded", () => {
// 특정 주소에서만 실행하고 싶다면 아래 주소를 변경하세요. 필요 없으면 삭제해도 됩니다.
// if (window.location.href !== "https://qcai.kr/362") return;
if (sessionStorage.getItem('videoShown') === 'true') return;
let c = document.getElementById("container");
if (c) c.style.display = "none";
let v = document.createElement("div");
Object.assign(v.style, {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100vh",
zIndex: 9999,
background: "rgba(0, 0, 0, 0.7)",
overflow: "hidden"
});
let i = document.createElement("iframe");
// 아래 주소를 원하는 유튜브 영상 ID로 변경하세요 (kddVKHFSUAw 부분)
i.src = "https://www.youtube.com/embed/kddVKHFSUAw?autoplay=1&mute=1&loop=1&playlist=kddVKHFSUAw&modestbranding=1&controls=0&showinfo=0&rel=0";
i.setAttribute("aria-label", "배경 동영상");
Object.assign(i.style, {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
border: 0,
pointerEvents: "none",
maxWidth: "none"
});
function resizeVideo() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const videoAspectRatio = 16 / 9;
if (screenWidth / screenHeight > videoAspectRatio) {
i.style.width = `${screenWidth}px`;
i.style.height = `${screenWidth / videoAspectRatio}px`;
} else {
i.style.width = `${screenHeight * videoAspectRatio}px`;
i.style.height = `${screenHeight}px`;
}
}
resizeVideo();
window.addEventListener("resize", resizeVideo);
let b = document.createElement("button");
b.innerText = "블로그 글 보러가기"; // 버튼 텍스트 수정
Object.assign(b.style, {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "10px 20px",
color: "black",
border: "2px solid black",
fontSize: "1rem",
cursor: "pointer",
zIndex: 10001,
fontWeight: "bold",
background: "white"
});
b.addEventListener("click", () => {
if (c) c.style.display = "";
v.remove();
Object.assign(document.body.style, { margin: "", overflow: "" });
window.removeEventListener("resize", resizeVideo);
sessionStorage.setItem('videoShown', 'true');
window.location.reload();
});
v.append(i, b);
document.body.appendChild(v);
Object.assign(document.body.style, { margin: 0, overflow: "hidden" });
});
</script>코드가 어떻게 작동하나요?
배경 화면 만들기
이 코드는 div 태그를 새로 만들어서 화면 전체를 덮고, 그 안에 유튜브 iframe을 넣어서 영상을 재생하는 원리예요. 사용자가 들어오자마자 영상이 꽉 찬 화면으로 반겨주는 거죠.
화면 크기에 딱 맞게 조절
가장 중요한 부분은 resizeVideo() 함수예요. 이 친구가 화면의 너비와 높이를 계산해서, PC 모니터든 스마트폰 화면이든 영상이 잘리지 않고 꽉 차게 보이도록 모바일 및 데스크탑 비율을 자동으로 맞춰줘요.
센스 있는 버튼 추가
영상 한가운데에 텍스트 버튼을 띄워서, 방문자가 원할 때 언제든 메인 콘텐츠로 넘어갈 수 있게 했어요. 버튼을 누르면 영상이 사라지고 원래 블로그 글이 짠 하고 나타납니다.
마치며
블로그 배경을 동영상으로 바꾸는 건 방문자에게 강한 인상을 남기는 정말 좋은 방법이에요. 오늘 알려드린 코드는 모바일과 PC 환경을 모두 고려해서 만들었으니, 안심하고 적용해 보셔도 돼요. 여러분의 블로그를 좀 더 감각적이고 멋지게 꾸미는 데 도움이 되었으면 좋겠네요!
