워드프레스 페이지 로딩 이미지와 애니메이션을 만드는 방법과 ‘상황’ 이라고 제목을 지은 것은 정말 중요한 이유가 있다. 지금 당장 로딩 페이지를 구현하기 위해 온 사람에게 이 말을 먼저 할 정도로 말이다.
현대의 빠른 인터넷 환경에선, 모바일 평균 3초 이상 로딩 시간이 지연되면 상당수의 사용자가 이탈하게 된다. 때문에 아무것도 뜨지 않거나 로딩 중인 화면 대신 로딩 이미지&애니메이션을 띄워서, 사용자가 ‘곧 페이지가 뜬다’는 직관적인 판단을 할 수 있게 도와주고, 이탈할 틈을 만들지 않는 일종의 트릭이다.
때문에 이 페이지로더 플러그인이나 코딩을 통해 로딩 이미지, 혹은 애니메이션을 만들 때 가장 먼저 고려해야 할 사항은, ‘내 사이트가 로딩 이미지를 구현할 정도로 충분히 느린가’ 이다. 이미지가 주를 이루고 있거나 고용량의 페이지, 혹은 많은 스크립트나 느린 호스팅 서버 등 여러 가지 복합적인 이유로 속도가 느리거나 느려진 사이트라면 페이지 로딩 이미지가 아주 효과적이다(통계적으로 이탈률이 30% 정도 감소한다고 한다). 다만 페이지 로딩 속도가 1~2초 내외로 이미 충분히 빠른데 더욱 빠르게 하기 위해서, 혹은 디자인이나 간지(?) 등 다른 이유로 이미지 로딩을 사용하는 거라면 강력하게 비추천한다.
이유는 로딩 이미지를 구현해야 하고, 페이지를 뒤덮고 다시 사라지는 등, 추가적인 로딩과 애니메이션 시간이 생기기 때문에 차라리 적용하지 않는 것 만 못한 상황이 벌어지기 때문이다. 때문에 로딩 이미지를 만들기 전에 다음의 체크리스트를 확인해 보고, 만약 그럼에도 적용해야 한다면 아래의 플러그인들을 적용시켜 보도록 하자.
- 페이지 로딩 속도가 느리다 > 추천
- 페이지 로딩 속도가 빠르다 > 비추천
- 특정 페이지 속도만 느리다 > 플러그인에 특정 페이지만 로딩 페이지를 구현하는 옵션이 있으니 그걸 사용
- 페이지 로딩 속도가 빠르지도 느리지도 않고 애매하다 > 일단은 비추천, 하지만 직접 적용해보고 실질적인 체감속도와 쾌적함을 판단한 후 사용해도 괜찮음
로딩 이미지&애니메이션을 만드는 방법
로딩 페이지를 만드는 방법은 직접 코딩을 통한 방법과 플러그인을 통한 2가지 방법이 있다. 무슨 기능을 구현하든 플러그인의 숫자를 최소한으로 줄이고 웬만하면 직접 코딩해 사이트 로딩 속도를 최우선으로 생각하는 개꿀몬이지만, 페이지 로더(Page loader) 같은 경우는 플러그인을 사용하는 것이 더욱 안정적이고 빨랐다. 특히 코딩 같은 경우엔 특정 환경에서 로딩 이미지가 사라지지 않는 등 버그가 생기는데, 환경별로 오류들을 처리하려면 여간 번거로운 게 아니다. 때문에 페이지 로드 시간에서 사용자의 이탈을 막기 위해 페이지 로더를 사용하는 만큼 안정성이 가장 중요하다고 할 수 있기에 직접 코딩하는 방법은 비 추천한다.
그럼 어떤 플러그인을 설치해야 하냐면, 우선 검색하면 가장 많이 나오는 ‘Preloader by SWS’는 절대 설치하면 안 된다. 현재 이 키워드로 플러그인을 검색하면 ‘Preloader by WordPress Monsters’라는 플러그인으로 이름이 바뀌어서 서비스되고 있는 것 같은데, 구글에 검색하면 최상위에 이 플러그인 추천 글이 나오는 것과는 다르게 업데이트한 지가 2년이 넘어서 더이상 제대로 작동하는 플러그인이 아니다.
개꿀몬이 직접 사용해보고 테스트해본 플러그인은 ‘Preloader’, ‘Loading Page with Loading Screen’, ‘LoftLoader’ 세 가지였다.
Preloader
- 속도 – 느림~보통
- 기능 – 평범
우선 페이지 로더 플러그인이 갖춰야 할 기능들은 기초적으로는 어느 정도 다 갖춘 녀석이다. 해당 플러그인 업체에서 자체적으로 운영하고 있는 Preloaders 로딩 이미지 생성 사이트를 통해 다양한 로딩 이미지를 직접 커스터마이징해서 생성하기 쉽다는 것이 장점이라면 장점(왜냐면 여기서 이미지만 생성하고 다른 플러그인을 써도 되기 때문에…).
단점이라면 가장 큰 것은 역시 ‘속도’ 문제다. 로딩 이미지를 받아오고, 로딩 화면을 출력하고, 로딩이 끝난 후 콘텐츠로 백업하는데 걸리는 시간이 그다지 빠르지 않고, 그 과정들도 버벅임이 있어 쾌적하지 않다. 때문에 반드시 이 플러그인을 사용해야 하는 이유가 있는 것이 아니라면, 그다지 추천하지 않는 플러그인이다. 또한 기초적으로는 어느 정도 기능을 다 갖췄다고 했는데, 정말 기초적이다. 특정 페이지 구성을 URL로 설정할 수도 없고, 다른 이팩트나 기능들도 일절 없다. 심플하다고 하면 심플하다고 할 수도 있겠다(근데 심플하기만 하고 빠르진 않음 ㅋ?).
주의사항으론 플러그인을 설치하고 활성화한다고 바로 사용할 수 없다. 활성화 후 <div id="wptime-plugin-preloader"></div>라는 코드를 사이트의 ‘header.php’의 <body>안에 넣어줘야만 작동한다.
Loading Page with Loading Screen
- 속도 – 매우 빠름
- 기능 – 참신, 다양
기본적인 페이지 로더의 기능을 하는 플러그인 중에서 가장 좋다! 그 이유는 빠르기 때문. 속도가 빠른 이유와 연관이 있는 것 같은데, 로딩 시 버벅거리는 듯한 콘텐츠 표현이 조금 불만족스럽긴 하지만, ‘Preloader’와 비교해보면 압도적으로 빠른 속도 때문에라도 매력적인 플러그인이다.
플러그인 설치 후 바로 사용되고, 기본적으로 사용되고 있는 로딩 아이콘도 훌륭하며, 퍼센테이지로 로딩 화면을 보여주는 로딩 퍼센트바(Display loading percent)도 기본적으로 켜져 있다. 로딩 이미지는 총 10개의 기본 이미지를 가지고 있는데, 보통 원형의 디자인이 가장 직관적이고 깔끔하다. 물론 본인이 원하는 이미지를 링크 입력으로 사용할 수 있다. 또한 로딩 퍼센트 바를 끌 수도 있다. 그 외에 핵심 기능들을 짧게 설명하자면 다음과 같다.
- Enable loading screen – 로딩 스크린 사용 유무
- Display a close screen button – 로딩 화면의 닫기 버튼 사용 유무
- Remove the loading screen in the window onload event – ‘onload’ 이벤트 같은 새 창 열기 사용 중 로딩 스크린 사용 유무
- Display the loading screen – 로딩화면의 영역 크기 조절, 픽셀 단위로 설정 가능
- Display the loading screen – 몇 번 로딩화면을 표시할지 결정. ‘always:항상, once per session:세션 당 한 번, once per page:페이지 당 한 번’
- Display loading screen in – 어느 화면에서 로딩화면을 표시할지 결정. ‘homepage only:홈 화면에서만, all pages:모든 화면에서, the specific pages:특정 페이지에서(게시물 또는 페이지 ID를 쉼표로 구분해서 입력)
- Exclude loading screen from – 특정 화면에서만 로딩 스크린 제거. 마찬가지로 게시물 또는 페이지 ID를 쉼표로 구분해서 입력
- Select the loading screen – 로딩 이미지를 보여줄지, 로딩 퍼센테이지 바만 보여줄지 선택
- Select the logo image (or any other image) – 로딩 이미지 선택. 하단의 기본 이미지 중 선택하거나 직접 설정 가능.
- Select background color – 배경 색상 선택. 우측의 ‘Apply transparency’는 투명도 여부 선택
- Display image in fullscreen – 이미지 전체화면으로 표현 여부. (특정 환경에선 보이지 않음)
- Select foreground color – 전경색 선택
- Additional seconds – 페이지 로드가 끝난 후 추가적으로 몇 초 후에 로드할 것인지 설정(기본 0초)
- Include an ad, or your own block of code – 광고 또는 본인이 원하는 코드 입력 가능. 말 그대로 광고코드나, 본인이 원하는 코드를 로딩화면에 띄울 수 있다. 굉장히 유용하고 재밌는 기능.
- Apply the effect on page – 페이지에 효과 적용. 기본인 ‘none’과 왼쪽에서부터 페이지가 나타나는 ‘rotatelnLeft’ 기능이 있다. 유료 버전을 사용하면 추가적으로 여러 가지 효과를 사용할 수 있다는 것 같다.
- Display loading percent – 로딩 퍼센트 유무. 로딩 퍼센트 바를 켜고 끌 수 있다.
- 가장 아래의 Lazy Loading 기능은 이미지를 늦게 불러와서 속도를 높이는 기법인데, 마찬가지로 유료 버전에서 사용 가능한 것 같다.
빠르고, 비록 제한적이지만 여러 가지 사용 가능한 기능들이 많고 참신한 것이 장점이다. 그중 가장 재미있는 기능은 역시 ‘Include an ad, or your own block of code’ 기능인데, 로딩 화면에 광고나 문구를 자유롭게 띄울 수 있다는 점이 매력적이다. 때문에 꼭 로딩 이미지를 위해서가 아니라 다른 용도로도 사용 가능할 것 같다.
LoftLoader
- 속도 – 느림~보통이지만 워낙 애니메이션이 부드러움
- 기능 – 애니메이션 효과에 중점적
마지막으로 소개할 ‘LoftLoader’는 가장 역동적인 로딩 애니메이션 플러그인이다. 다른 페이지로더와는 차별점이 확실한 게, 이쁘고 부드럽고 자연스러운 로딩 애니메이션에 제대로 포커스를 맞췄다. 설정 화면도 워드프레스 ‘사용자 정의’ 화면처럼 세팅할 수 있다.
로딩 아이콘 이미지도 굉장히 이쁘고 부드럽고 역동적이며 끊김이 없고, 페이드아웃 되거나 좌우, 상하 등으로 쫘악 펼쳐지며 열리는 스크린은 로딩화면 하나로 사이트가 고급스러워 보이게 만드는 효과가 있다. 로딩 시간이 지루한 시간이 아니라 오히려 눈요기가 되는, 어찌 보면 페이지 로더의 목적에 가장 적합한 녀석이라고 할 수 있겠다.
하지만 명확한 단점은 역시 좀 느리다는 것. 암만 이뻐 봤자 ‘LoftLoader’를 사용하지 않을 때보다 눈에 띄게 느려지기 때문에 조금 꺼려지는 게 사실이다. 또한 모바밀 특정 기기나 브라우저에선 전체화면으로 표시되지 않고 짤리는 현상이 빈번하다. 단점이 정말 명확하지만 미적으로 뛰어나기 때문에 사용자의 호불호가 많이 갈릴 것으로 판단된다. 기능들은 설명하는 것보다 직접 눌러보는것이 더욱 빨라서 생략한다.
Finish
현대의 빠른 인터넷 환경에선, 모바일 평균 3초 이상 로딩 시간이 지연되면 대부분의 사용자가 이탈하게 된다. 때문에 로딩 이미지&애니메이션으로 해당 지연시간동안 사용자가 ‘곧 화면이 뜨겠군’ 이라고 직관적인 판단을 할 수 있게 도와주고 지루해하고 이탈할 틈을 만들어주지 않음으로써, 간단한 트릭 하나로 이탈률을 평균 30%나 감소시켜주는 훌륭한 기능이다. 하지만 서두에서도 말했다시피 평균적으로 속도가 괜찮은 사이트라면 오히려 독이 될 수도 있다는 점을 염두에두고 현명하고 효율적으로 사용할 수 있도록 하자.
