사이트에 로딩 화면(Preloader)을 추가하는 방법
워드프레스 활용 이야기
사이트 주소를 열었을 때 각 화면 요소가 로딩이 되면서 제자리를 찾는 모습을 보여주는 대신 html과 css, javascript가 모두 다 동작을 하여 준비가 완벽히 끝난 모습을 방문자에게 보여주고 싶을 때 페이지 위에 잠시 로딩 화면을 보여주면 좋습니다. 또는 페이지의 특성상 부득이 약간의 로딩이 되는 시간이 필요한 경우 화면에 빈 페이지가 나오는 것보다는 페이지가 준비 중이라는 상황을 방문자에게 알려주는 데에도 로딩 화면을 이용하면 좋습니다. 또는 재밌는 로딩 이미지를 이용해서 사이트에 더 흥미를 줄 수도 있는 용도로 사용할 수도 있습니다.
아래 링크는 우연히 검색해서 열어봤다가 저도 재밌어서 끝까지 스크롤을 해 보게 됐네요. 한 번 참고해 보세요.
> https://www.svgator.com/blog/best-preloader-examples/
그러면, 이런 프리로더를 내가 운영 중인 사이트에 적용을 하려고 한다면 어떻게 해야 할까요?
핵심이 되는 부분들을 요약해 보면,
1. body라는 콘텐츠 영역 안에 프리로더가 표시되는 html 요소를 하나 추가한다.
2. css를 이용해서 추가한 html이 화면 맨 위에서 전체의 넓이와 높이를 갖게 스타일을 정의한다. (원래 페이지 위를 덮은 상태)
3. 페이지 요소들이 모두 준비되면(jQuery로 로딩 완료를 체크 가능) 화면을 덮은 프리로더 화면을 안 보이게 한다. (fadeout)
이렇게 간단한 원리로 동작이 됩니다.
그럼 위 과정을 순서대로 적용하는 방법을 소개해 보겠습니다.
1. body 태그 아래 html 추가하기
워드프레스 테마의 템플릿 파일(header.php)을 열어서 여기에 직접 html 코드를 적어도 되지만 훅을 이용하면 굳이 템플릿 파일을 건드리지 않아도 html을 추가할 수 있습니다. 워드프레스 5.2 버전(2019) 이후 wp_body_open라는 훅이 추가가 됐고, 이후 개발된 테마라면 body 다음에 저 훅(Hook)을 적어놨을 겁니다.
따로 핵심 동작을 하기보다는 body 태그 바로 다음에 검색 엔진 관련 스크립트를 추가하거나 할 때 유용하게 이용할 수 있는 훅으로 보입니다. 자식 테마의 functions.php 파일에 아래 내용을 추가합니다. 이미지 태그 소스 주소는 어드민에서 미디어에 업로드 후 나오는 주소를 적습니다.
/**
* preloader add to body
*/
function custom_preloader_function() {
?>
<div class="custom-loader-wrapper">
<div class="custom-loader">
<img src="/wpcomponent/wp-content/uploads/2023/11/preloader.gif" alt="pre-loader">
</div>
</div>
<?php
}
add_action( 'wp_body_open', 'custom_preloader_function', 10 );
(설명 : wp_body_open()이라고 적힌 훅 위치에 추가하고자 하는 html을 표시되도록 하는 코드)
그러면 body 태그 바로 아래 단계로 어드민 바 구조 바로 다음, html이 추가된 걸 볼 수 있습니다.
만약 조금 오래전에 구축된 사이트라면 wp_body_open 훅이 없을 수 있습니다. 그때에는 테마 개발 시 body 태그 근처에 적힌 훅(hook)을 사용해도 됩니다. 핵심은 body 태그 바로 아래 단계로 프리로더용 html을 콘텐츠들이 나오는 위쪽에 추가하는 게 목표입니다.
2. CSS로 추가한 html이 화면을 덮게 만들기
z-index를 충분히 높게(다른 모든 화면 요소보다 높게) 해서 다른 화면 요소들 위에 있게 할 수 있습니다. 좌상단 (0,0) 위치부터 가로, 세로 끝까지 백그라운드 색을 가진 화면을 만들어 덮습니다. 이미지는 정 중앙에 올 수 있게 flex 특성을 이용해서 정렬했습니다.
/* custom preloader ----- */
.custom-loader-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
이제 사이트를 열어보면 프리로더가 화면을 덮고 있는 걸 볼 수 있습니다.
3. 페이지가 다 준비되면 프리로더 숨김
웹 페이지가 완전히 로드되고 DOM(문서 객체 모델)이 생성된 후에 실행되어야 하는 것이 있다면 jQuery의 $( document ).ready()라는 함수를 이용하면 됩니다.
자식테마의 functions.php에 wp_footer() 훅을 이용해서 footer 쪽(body 태그가 닫히기 전)에 추가되는 스크립트를 작성합니다.
설명 : $(function() { }); = $( document ).ready(function() { }); 같은 의미입니다.
페이지가 다 준비되면 1초 기다렸다가 프리로더를 숨기는 함수를 호출합니다. 호출된 함수는 로더 이미지를 숨긴 후 화면 전체를 가렸던 영역도 0.5초 동안 서서히 사라지게 합니다.
// pre loader remove ------------------------
$(function(){
setTimeout(removeLoader, 1000); // wait for page load PLUS (1/1000) seconds.
});
function removeLoader(){
$('.custom-loader').hide();
$('.custom-loader-wrapper').fadeOut(500);
}
4. 스크롤 숨기기
프리로더가 나오는 중 뒤에 있는 본문 영역이 화면보다 긴 경우 스크롤이 오른쪽에 보일 수 있습니다. 이를 숨기기 위해 body 태그에 css를 추가해서 화면을 벗어나는 영역은 숨겨지게 조치를 했다가, 프리로더가 없어지는 시점에 다시 원래 높이대로 보이게 하면 해결되었습니다.
적용한 모습 >
https://oks-dev.tk/wpcomponent/
(※ 해외 호스팅이라 첫 로딩이 살짝 길 수 있습니다. 워드프레스나 테마가 느린 게 아닙니다.)
워드프레스 플러그인들 중에 이러한 프리로더를 추가할 수 있는 다양한 플러그인도 있습니다. 단, 불필요한 너무 많은 기능이 담겨 있는 게 문제지요. 원리만 알고 자식테마나 코드를 추가할 수 있는 방법만 있다면 간단하게 프리로더를 추가할 수 있습니다.
끝.
