WordPress에 프리로더 추가하는 방법: 단계별 가이드

목차

2026년 5월 업데이트.

TL;DR: 프리로더 애니메이션은 무거운 에셋이 로드되는 동안 빈 화면을 채워줍니다. 2026년에 적합한 플러그인은 WP Smart Preloader 또는 가벼운 커스텀 스니펫이지만, 사이트가 이미 빠르다면 건너뛰세요. 제대로 조정되지 않은 프리로더는 LCP에 실제로 악영향을 미칩니다.

2026년에 프리로더를 추가해야 할까요?

방법을 설명하기 전에 솔직한 답변을 먼저 드리겠습니다: 대부분의 사이트는 프리로더를 추가하지 않아야 합니다.

Google의 Core Web Vitals는 Largest Contentful Paint(LCP)—가장 눈에 보이는 콘텐츠가 얼마나 빠르게 나타나는지—를 측정합니다. 프리로더는 애니메이션으로 화면을 덮어 그 페인트를 문자 그대로 지연시킵니다. 프리로더가 1.5초만 실행되어도 모든 페이지 로드에서 1.5초의 LCP 패널티가 보장됩니다.

프리로더가 적합한 경우:

• 사이트가 정말 무거운 경우—큰 히어로 비디오, 인터랙티브 맵, 캔버스 기반 애니메이션 등—프리로더 없이는 빈 상태가 깨진 것처럼 보입니다.
• 사용자에게 미적인 스피너가 아닌 실제 피드백을 주는 로딩 바 또는 진행 표시기가 있는 경우.

완전히 건너뛰어야 할 경우:

• 일반적인 블로그, 포트폴리오, 또는 WooCommerce 스토어를 운영하는 경우. 대신 사이트를 빠르게 만드세요—이미지 지연 로드, CDN 사용, 더 빠른 호스트로 전환.
• LCP가 이미 2.5초 미만인 경우. 프리로더를 추가하면 더 나빠집니다.

그래도 진행하고 싶다면, Gutenberg / Full Site Editing 시대에 올바르게 하는 방법을 설명합니다.

프리로더란?

프리로더는 브라우저가 페이지 리소스를 다운로드하고 렌더링하는 동안 표시되는 UI 요소입니다—일반적으로 애니메이션 스피너, 진행 바, 또는 브랜드 로고 애니메이션. 텍스트와 HTML은 빠르게 로드되지만, 이미지와 삽입된 비디오는 더 오래 걸립니다. 프리로더는 사용자가 빈 화면이나 부분적으로 렌더링된 레이아웃 대신 무언가를 볼 수 있도록 그 간격을 채워줍니다.

구 WordPress(5.0 이전 클래식 에디터 시절)에서는 header.php를 직접 편집하여 프리로더를 추가하는 것이 일반적이었습니다. 2026년, Gutenberg와 FSE 테마 시대에는 테마 파일을 직접 편집하는 것은 강력히 권장하지 않습니다—테마 업데이트가 변경 사항을 덮어씁니다. 대신 플러그인 또는 Code Snippets 방식을 사용하세요.

WordPress에 프리로더 추가하는 방법(2026년 방법)

방법 1 — WP Smart Preloader 플러그인

WP Smart Preloader는 클래식 테마와 블록 테마 모두에서 작동하는 WordPress.org 리포지토리의 무료 플러그인입니다. 설치 전에 현재 WordPress 버전과 호환되며 활발히 유지 관리되고 있는지 확인하세요—플러그인 유지 관리 상태는 변경될 수 있습니다. 리포지토리 페이지의 “마지막 업데이트” 날짜를 확인하세요.

1. WordPress 대시보드에서 플러그인 → 새로 추가로 이동하여 「WP Smart Preloader」를 검색합니다.
2. 설치하고 활성화합니다.
3. 설정 → WP Smart Preloader로 이동합니다.
4. 내장된 옵션에서 프리로더 스타일을 선택하거나 커스텀 HTML/CSS를 붙여넣습니다.
5. 「홈페이지에만 표시」 아래—홈페이지에만 애니메이션을 표시하고 싶다면 이것을 활성화하세요. 모든 페이지에서 프리로더를 실행하면 전체 사이트의 LCP 비용이 배가됩니다.
6. 로더 표시 시간을 설정합니다. 기본값은 1500ms입니다. 더 낮게 설정하는 것을 권장합니다—최대 800~1000ms. 실행 시간이 길수록 LCP 점수가 나빠집니다.
7. 변경 사항 저장을 클릭하고 전후로 PageSpeed Insights로 테스트합니다. LCP가 상승하면 플러그인을 제거하세요.

방법 2 — Code Snippets 플러그인을 이용한 커스텀 코드

전용 프리로더 플러그인 없이 완전한 제어를 원한다면, Code Snippets 플러그인(무료, 널리 유지 관리됨)을 사용하여 테마 파일을 건드리지 않고 마크업과 스타일을 삽입하세요.

단계 1 — HTML 스니펫 추가(PHP)

Code Snippets에서 “프론트엔드 전용”으로 실행되도록 설정된 새 스니펫을 만듭니다:

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

참고: wp_body_open은 템플릿에서 wp_body_open()을 호출하는 테마에서만 실행됩니다. 대부분의 최신 블록 테마와 유지 관리된 클래식 테마는 이를 지원합니다. 프리로더가 나타나지 않으면 테마가 이 훅을 지원하는지 확인하세요.

단계 2 — CSS 추가

“프론트엔드 전용 → CSS”로 설정된 두 번째 스니펫을 만듭니다:

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

단계 3 — 해제 JavaScript 추가

“프론트엔드 전용 → JavaScript”로 설정된 세 번째 스니펫을 만듭니다:

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

이것은 너무 일찍 실행되는 DOMContentLoaded가 아닌 window.load 이벤트—이미지와 서브프레임이 로드된 후—에서 프리로더를 제거합니다.

방법 3 — 블록 테마 / FSE: 로딩 오버레이 블록 또는 플러그인 사용

Full Site Editing 테마(Twenty Twenty-Four, Kadence, GeneratePress 블록 모드 등)를 사용하고 있다면, 일부 페이지 빌더 플러그인(Elementor, Kadence Blocks, Spectra)은 설정에 프리로더 또는 로딩 화면 옵션이 내장되어 있습니다. 먼저 테마나 빌더의 문서를 확인하세요—내장된 프리로더 위에 별도의 플러그인으로 중복 추가하면 이중 오버레이가 발생합니다.

공개 전 성능 체크리스트

프리로더를 배포하기 전에 다음 모든 항목을 확인하세요:

1. 프리로더 없이 페이지에서 PageSpeed Insights 테스트를 실행합니다. LCP를 기록합니다.
2. 프리로더를 활성화하고 동일한 테스트를 실행합니다. LCP가 약 100ms 이상 나빠지면 재고합니다.
3. 프리로더 지속 시간을 1000ms 이하로 유지합니다. 그보다 길면 UX와 순위에 불이익을 줍니다.
4. 모바일 4G 스로틀 연결에서 테스트합니다(Chrome DevTools → 네트워크 → Fast 4G). 느린 연결에서 프리로더는 훨씬 길게 느껴집니다.
5. 프리로더가 스크린 리더에서 숨겨져 있고(aria-hidden="true") 키보드 포커스를 가두지 않는지 확인합니다.

WordPress 프리로더 FAQ — 2026

프리로더가 SEO에 영향을 미치나요?

네, 영향을 미칠 수 있습니다. Google의 Core Web Vitals—특히 LCP—는 확인된 순위 신호입니다. 콘텐츠 앞에 있는 프리로더는 LCP를 지연시킵니다. 대부분의 표준 WordPress 사이트에서는 프리로더를 완전히 건너뛰고 이미지 최적화와 캐싱에 시간을 투자하는 것을 권장합니다. 사이트가 실제로 무거워서 프리로더가 필요한 경우, 지속 시간을 짧게 유지하고 Google Search Console에서 CWV를 모니터링하세요.

프리로더 플러그인이 Full Site Editing(Gutenberg) 테마와 작동하나요?

테마가 wp_body_open()을 호출하는 한 대부분 작동합니다. WordPress 블록 에디터 자체는 브라우저에서 페이지 로드 이벤트가 작동하는 방식을 변경하지 않습니다. WordPress.org 리포지토리에서 플러그인의 “테스트된 버전”을 확인하여 설치된 WordPress 버전과의 호환성을 확인하세요—호환성 상태는 변경됩니다. 설치 시에 확인하세요.

2026년에 플러그인 없이 프리로더를 추가할 수 있나요?

네—위의 Code Snippets 방법이 플러그인 없는 가장 깔끔한 접근 방식입니다. 테마 업데이트에도 유지되고, 비활성화가 쉬우며, 마크업과 타이밍에 대한 완전한 제어를 제공합니다. 활성 또는 자식 테마의 header.php를 직접 편집하는 것은 피하세요. 유지 관리 부채를 추가하고 테마를 전환하면 깨집니다.

프리로더가 모든 페이지에 표시됩니다. 홈페이지만으로 제한하려면 어떻게 해야 하나요?

WP Smart Preloader에서는 설정에서 “홈페이지에만 표시”를 체크합니다. 커스텀 코드 방법의 경우, add_action 호출을 조건문으로 감쌉니다:

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

관련 읽기:

• WordPress 사이트 속도 높이는 방법
• 최고의 WordPress 플러그인
• WordPress.com vs. WordPress.org

이 가이드는 alejandrorioja.com의 일부입니다—Alejandro Rioja가 작성했으며, 현재 창업자를 위한 AI 에이전트 시스템을 구축하고 있습니다. 이 사이트를 최신 상태로 유지하는 에이전트 포함. 작동 방식 →

2026년 5월 업데이트

2026년 5월의 짧은 메모: 이 게시물에서 설명된 워크플로우는 기반 도구 및 플랫폼의 현재 상태와 대조하여 확인되었습니다. 특정 도구, UI 또는 기능이 발전한 경우에도 구조적 조언은 여전히 유효합니다—구현은 2026년에는 약간 다르게 보일 것입니다. 화면에 표시되는 내용과 일치하지 않는 단계가 있다면, 그것은 근본적인 접근 방식의 변화가 아닌 UI 업데이트일 가능성이 높습니다. 연락 양식을 통해 메모를 남겨주시면 명시적으로 수정하겠습니다.