WordPress에서 페이지 로딩 애니메이션(프리로더)을 추가하는 방법

페이지 속도는 웹사이트 성능에 중요한 역할을 합니다. 페이지가 완전히 로드되는 데 1~2초 이상 걸리면 사용자가 사이트를 떠날 정도로 짜증을 낼 수 있습니다. 그러나 방문자가 페이지 로드를 완료하는 동안 관심을 끄는 내용이 있는 경우 도움이 될 수 있습니다.

페이지 로드 애니메이션 또는 '프리로더 애니메이션'은 방문자에게 페이지가 로드되고 있음을 알리고(멈추지 않음) 사이트에 머물 가능성을 높입니다. 이러한 방식으로 사용자 경험(UX)을 개선하고 이탈률을 줄일 수 있습니다.

이 게시물에서는 프리로더 애니메이션의 이점과 사용 시기에 대해 설명합니다. 그런 다음 WordPress 페이지 로딩 애니메이션을 추가하기 위한 옵션을 안내합니다. 시작하자!

프리로더 애니메이션이란 무엇입니까?

프리로더 애니메이션은 페이지가 활발하게 로드되고 있음을 사용자에게 알립니다. 한 번에 특정 콘텐츠만 로드하는 페이지의 진행률 표시기로 사용할 수 있는 간단한 애니메이션입니다.

WordPress 프리로더는 방문자가 전체 페이지 로드가 완료될 때까지 기다리는 동안 몇 초 만에 볼 수 있는 더 즐겁고 흥미로운 것을 제공합니다. 경우에 따라 남은 시간에 대한 추정치를 제공할 수도 있습니다.

언제 프리로더를 사용해야 합니까?

프리로더는 일반적인 것보다 로드하는 데 약간 더 오래 걸리는 비디오 또는 이미지가 많은 WordPress 사이트가 있는 경우 현명한 선택입니다. 이렇게 하면 사이트가 의도한 대로 작동하고 손상되지 않았음을 방문자가 안심할 수 있습니다.

그러나 사이트가 대부분 텍스트 기반인 경우 프리로더 애니메이션이 필요하지 않을 수 있습니다. 대신 페이지 속도를 개선하는 데 집중하는 것이 더 합리적입니다.

WordPress에 페이지 로딩 애니메이션을 추가하기 위한 2가지 옵션

WordPress 프리로더 애니메이션을 사이트에 추가하는 데 사용할 수 있는 두 가지 주요 방법이 있습니다. 더 쉬운 옵션인 플러그인을 사용하거나 수동으로 작업을 수행할 수 있습니다. 두 가지 방법으로 시작하는 방법을 살펴보겠습니다.

옵션 1: 플러그인을 사용하여 프리로더 애니메이션 추가

플러그인을 통해 프리로더 애니메이션을 추가하는 것이 대부분의 사용자에게 더 빠르고 쉬운 옵션입니다. 사용할 수 있는 몇 가지 플러그인이 있지만 WP Smart Preloader를 권장합니다.

이것은 고도로 사용자 정의 가능한 무료 플러그인입니다. CSS와 최소한의 HTML 마크업을 사용하여 콘텐츠가 로드될 때 사용자가 웹사이트를 떠날 위험을 줄이는 데 도움이 됩니다. 다음 단계에서는 작동 방식을 보여줍니다.

1단계: WP 스마트 프리로더 다운로드

WordPress Plugin Directory를 통해 WP Smart Preloader 플러그인을 다운로드할 수 있습니다. 그런 다음 관리자 대시보드에서 플러그인 > 새로 추가 > 플러그인 업로드로 이동하여 WordPress 사이트에 .zip 파일을 업로드할 수 있습니다.

또 다른 옵션은 플러그인 > 새로 추가 화면의 검색 표시줄을 통해 플러그인을 검색하는 것입니다.

어느 쪽이든 플러그인이 설치되면 활성화 버튼을 클릭합니다. 그런 다음 설정 > WP 스마트 프리로더 에서 해당 옵션을 찾을 수 있습니다.

2단계: 스타일 선택

WP 스마트 프리로더 설정 페이지에서 가장 먼저 할 일은 프리로더의 스타일을 선택하는 것입니다. 프리로더 선택 섹션 아래에는 6가지 스타일 옵션과 사용자 지정 애니메이션 옵션 중에서 선택할 수 있는 드롭다운 메뉴가 있습니다.

스타일을 선택하면 아래 창에서 미리 볼 수 있습니다. 나만의 맞춤 애니메이션을 추가하려는 경우 맞춤 애니메이션 섹션 아래에 HTML 코드를 포함할 수 있습니다.

이 화면의 끝에서 로더 자체의 지속 시간과 '페이드 아웃' 효과를 설정할 수 있습니다.

이 필드를 비워 두면 기본값이 각각 1500밀리초(1.5초)와 2500밀리초(2.5초)로 설정됩니다. 완료되면 변경 사항 저장 버튼을 클릭합니다.

3단계: 프리로더 애니메이션 미리보기

설정 구성을 마치면 새 브라우저 탭에서 WordPress 사이트를 방문하여 프리로더 애니메이션을 미리 봅니다. 필요에 따라 돌아가서 스타일을 변경할 수 있습니다. 프리로더에 만족하면 설정되고 사용할 준비가 된 것입니다.

옵션 2: 수동으로 프리로더 애니메이션 추가

플러그인 사용에 관심이 없다면 이 기능을 사이트에 수동으로 추가할 수 있습니다. 사용자 지정 프리로더 생성의 주요 이점은 디자인 방식에 더 많은 유연성이 있다는 것입니다.

물론 더 어려운 과정이기도 하다. 다음으로 WordPress 사이트에 대한 사용자 지정 프리로더 애니메이션을 만들고 업로드하고 형식을 지정하는 방법을 안내합니다.

1단계: 애니메이션 브레인스토밍

첫 번째 단계는 사용할 애니메이션 종류를 결정하는 것입니다. 원하는 스타일에 대한 아이디어를 얻기 위해 다른 프리로더 애니메이션 도구를 조사할 수 있습니다. Codepen에서 사용하고 탐색할 수 있는 몇 가지 무료 애니메이션이 있으며, 이는 몇 가지 아이디어를 얻을 수 있는 좋은 방법이 될 수 있습니다.

2단계: 애니메이션 개발 또는 다운로드

애니메이션을 개발하려면 Photoshop과 같은 도구를 사용하여 GIF 또는 회전하는 프리로더 애니메이션을 만들 수 있습니다. CSS를 사용하여 WordPress 애니메이션 만들기에 대한 리소스를 참조할 수도 있습니다.

WordPress 사이트에 GIF 프리로더를 추가하는 것이 플러그인을 사용하는 것이 가장 좋으므로 후자의 접근 방식을 권장합니다. 위에서 언급한 Codepen 외에도 Spinkit 및 LoadLab과 같은 사이트에서 애니메이션을 다운로드할 수도 있습니다.

이 튜토리얼에서는 Spinkit의 프리로더 애니메이션을 사용합니다. 애니메이션을 가져온 위치에 관계없이 WordPress 사이트에 수동으로 추가하려면 CSS 소스 코드가 필요합니다.

대부분의 무료 프리로더 애니메이션에는 HTML과 CSS를 모두 찾을 수 있는 소스 링크가 포함됩니다.

프리로더 애니메이션에서 CSS 소스 코드를 사용한 다음 나중에 원하는 대로 사용자 지정할 수도 있습니다.

3단계: 하위 테마 만들기

애니메이션이 있으면 WordPress 사이트에 추가할 수 있습니다. 가장 안전한 방법은 자식 테마를 설정하는 것입니다. 방법을 잘 모르겠다면 WordPress 자식 테마를 만드는 방법에 대한 자습서를 검토할 수 있습니다.

4단계: 테마의 header.php 파일에 HTML 코드 추가

다음 단계는 WordPress 테마의 header.php 파일을 찾는 것입니다. 워드프레스 테마 편집기 화면을 통해 이 작업을 수행할 수 있습니다.

FileZilla와 같은 FTP 클라이언트를 사용하여 파일을 편집할 수도 있습니다. 파일은 사이트 루트 디렉토리의 wp-content > themes 폴더에 있습니다.

파일을 찾아 열면 body 태그 아래에 다음 HTML 코드를 삽입합니다.

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

특정 WordPress 프리로더 애니메이션에 필요한 HTML 코드를 조정하거나 추가하고 파일을 저장합니다.

5단계: 스타일시트에 CSS 코드 추가

이제 CSS를 추가하여 애니메이션 스타일을 지정할 차례입니다. WordPress 테마에 대한 CSS 스타일시트( style.css )를 찾은 다음 애니메이션에 대한 CSS 소스 코드를 복사하여 붙여넣습니다. 우리의 경우 다음을 추가할 것입니다.

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

변경 사항을 저장하기 전에 "margin: 100px auto;" 부분을 제거하십시오. 그 자리에 다음을 복사하여 붙여넣습니다.

 position: absolute; top: 48%; left: 48%;

그런 다음 파일을 저장할 수 있습니다.

6단계: jQuey 코드를 추가하여 애니메이션 작동

스피너 프리로더 애니메이션이 작동하도록 하려면 약간의 jQuery를 추가해야 합니다. 이를 위해 header.php 파일로 돌아가서 닫는 본문 태그 앞에 다음을 삽입할 수 있습니다.

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

그런 다음 파일을 저장하고 사이트를 미리 보고 WordPress 프리로더 애니메이션이 의도한 대로 작동하는지 확인합니다.

WP 엔진에서 더 많은 팁과 가이드 찾기

사이트에 WordPress 프리로더 애니메이션을 추가하면 방문자 참여를 유도하고 이탈률을 줄이는 데 도움이 될 수 있습니다. 또한 작업을 신속하게 완료할 수 있는 여러 옵션이 있습니다.

WP Engine에서는 개발자에게 팁, 요령 및 리소스를 제공하여 웹 사이트가 항상 최상의 상태로 보이도록 하는 것이 우리의 임무입니다. 오늘 우리의 계획에 대해 자세히 알아보십시오!