전체 동영상 메인 페이지 만들기 워드프레스 적용 방법

블로그를 운영하다 보면 어느 순간 기본 테마의 한계를 분명하게 느끼게 됩니다. 모든 페이지에 동일하게 적용되는 헤더, 푸터, 사이드바 구조는 안정적이지만, 그만큼 변화를 만들기 어렵습니다. 특히 전체 동영상 메인 페이지나 인트로·이벤트 랜딩 페이지처럼 첫 화면에서 강한 인상을 줘야 하는 경우에는 기존 레이아웃이 오히려 콘텐츠를 가로막는 요소가 됩니다. 이럴 때는 테마 옵션을 억지로 수정하기보다, 목적에 맞는 전용 템플릿 파일을 따로 만드는 것이 훨씬 빠르고 정확한 방법입니다.

예를 들어 전체 화면 동영상 배경 메인 페이지를 만들고 싶다면 헤더와 푸터를 과감하게 제거하고, 영상과 핵심 메시지만 남긴 구조로 설계하는 편이 효율적입니다. 이런 식으로 만들어둔 풀스크린 영상 랜딩 페이지 템플릿은 한 번만 잘 만들어 두면 이후에도 계속 재사용할 수 있습니다. 동영상 배경 레이아웃이나 전환을 고려한 랜딩 페이지 구조를 템플릿으로 만들어두면, 새로운 이벤트나 홍보 페이지를 만들 때마다 그대로 불러와 내용만 바꾸면 되기 때문에 작업 속도와 운영 효율이 크게 올라갑니다.

또한 블로그를 확장하다 보면 특정 페이지에서만 작동해야 하는 기능이 필요해질 때가 있습니다. 예를 들어 자료실이나 repository 페이지에만 다운로드 수를 집계하는 DB 연동 코드를 넣고 싶다면, 공통 페이지 파일에 넣는 방식은 불필요한 코드가 전체 페이지에서 실행되기 때문에 비효율적입니다. 이럴 때 페이지 전용 템플릿을 사용하면 해당 기능은 필요한 페이지에서만 동작하고, 나머지 페이지는 가볍게 유지할 수 있습니다.

결국 템플릿 분리는 단순한 디자인 편의가 아니라 전체 동영상 메인 페이지 구성, 기능 분리, 성능 관리까지 동시에 해결하는 구조입니다. 처음에 구조를 제대로 잡아두면 블로그의 완성도와 확장성이 자연스럽게 따라옵니다.

1. 전체 동영상 메인 템플릿 파일 생성

테마 폴더(/wp-content/themes/사용중인테마/) 안에 새로운 PHP 파일을 만듭니다.

파일명 예시: page-custom-style.php (자유롭게 정하되 .php로 끝나야 합니다.)

2. 선언부 작성 (가장 중요)

파일 최상단에 아래 코드를 넣어야 워드프레스가 “아, 이게 템플릿이구나!”라고 인식합니다.

<?php
/*
Template Name: 나의 커스텀 템플릿
*/
?>

3. 전체 동영상 메인 구조 잡기

워드프레스의 헤더와 푸터를 불러와야 블로그의 디자인(메뉴, 푸터 등)이 유지됩니다.

<?php
/*
Template Name: 인트로 (순수 동영상 재생형)
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QCAI.KR</title>
    <?php wp_head(); ?>
    <style>
    body,
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
        font-family: 'Pretendard', sans-serif;
    }

    /* 비디오가 담길 고정 컨테이너 */
    #video-anchor {
        position: fixed;
        top: 0;
        left: 0;
        width: 120vw !important;
        height: 120vh !important;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* 중앙 정렬 콘텐츠 레이어 */
    .intro-overlay {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        color: #ffffff;
        text-align: center;
    }

    .intro-logo {
        font-size: clamp(48px, 10vw, 80px);
        font-weight: 900;
        letter-spacing: -2px;
        margin-bottom: 5px;
    }

    .intro-slogan {
        font-size: clamp(14px, 2vw, 18px);
        font-weight: 400;
        color: #ddd !important;
        margin-bottom: 40px;
        letter-spacing: 1px;
    }

    /* 사각형 메인 이동 버튼 */
    .enter-btn {
        display: inline-block;
        padding: 15px 50px;
        border: 2px solid #ffffff;
        background: transparent;
        color: #ffffff !important;
        text-decoration: none;
        font-size: 18px;
        font-weight: 700;
        transition: all 0.3s ease;

    }

    .enter-btn:hover {
        background: #ffffff;
        color: #000000 !important;
    }
    </style>
</head>

<body <?php body_class(); ?>>

    <div id="video-anchor"></div>

    <div class="intro-overlay">
        <h1 class="intro-logo">QCAI.KR</h1>
        <p class="intro-slogan">QUANTUM COMPUTING & ARTIFICIAL INTELLIGENCE</p>
        <a href="<?php echo esc_url( home_url( '/main' ) ); ?>" class="enter-btn">ENTER MAIN</a>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const target = document.getElementById("video-anchor");
        if (target && window.innerWidth > 768) {
            // 재생하고 싶은 유튜브 영상 ID
            const vId = "ABnPPtlv6cE";

            const ifrm = document.createElement("iframe");
            ifrm.setAttribute("title", "Background Video");

            ifrm.src =
                `https://www.youtube-nocookie.com/embed/${vId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${vId}&modestbranding=1&rel=0&enablejsapi=1&playsinline=1`;

            Object.assign(ifrm.style, {
                position: "absolute",
                top: "50%",
                left: "50%",
                width: "120vw",
                height: "120vw",
                minHeight: "100%",
                minWidth: "100% !important",
                transform: "translate(-50%, -50%)",
                border: "none",
                pointerEvents: "none",
                zIndex: "0",
                opacity: "0",
                transition: "opacity 1s"
            });

            // 로드 완료 시 바로 표시
            ifrm.onload = () => {
                ifrm.style.opacity = "1";
                               ifrm.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
            };

            target.appendChild(ifrm);
        }
    });
    </script>

    <?php wp_footer(); ?>
</body>

</html>