[JavaScript]웹페이지 접속이 오래걸릴때 필요한 기능(로딩화면 구현)

 

 

안녕하세요 무택입니다 :)

오늘은 로딩화면에 대해 써보려고 합니다. 국내에는 로딩화면을 쓰는 사이트가 많지는 않은 걸로 알고 있습니다. 하지만 해외 사이트를 돌아다니다 보면 로딩화면을 구현한 사이트를 자주 접하는 것 같습니다. 여기에 대한 이유는 아래에서 설명드리겠습니다.

 

 

로딩화면이 필요성

사이트의 소스들(이미지, 영상, 스크립트 등)이 많아서 무거운 사이트의 경우 사이트에 들어가면 화면이 모두 다 불러와지는 데까지 시간이 소요됩니다. 1초에서 길면 10초까지 걸리는 사이트들이 있는데 시간이 1초 정도만 넘어가더라도 사용자는 지루함을 느낄 수 있습니다. 시간이 더해질수록 기다리지 않고 사이트를 이탈하는 경우가 많아지죠.

 

이런 이유에서 어쩔 수 없이 사이트가 무거워지는 경우 로딩화면을 구현함으로써 기다림을 체감상 줄여주는 목적으로 로딩화면을 사용합니다.

 

개인적인 의견으로는 UX면에서 최대한 사이트 리소스를 줄이는 게 1순위, 그다음으로는 로딩화면 구현 or 스켈레톤 ui 사용이라고 생각합니다. 오늘은 먼저 로딩화면에 대해 알아보고 추후에 스켈레톤 ui에 대해서도 써보도록 하겠습니다.

 

HTML / CSS

<style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0 auto;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0);
      z-index: 9999;
      opacity: .5;
      transition: 0.5s ease;
    }

    .wrap {
      position: relative;
      height: 100%;
      background: #157ed1;
      text-align: center;
    }

    .loadingImg {
      position: relative;
      display: block;
      top: 50vh;
      transform: translateY(-50%);
    }
</style>

<!-- 로딩 화면 -->
<div class="mask">
  <img class="loadingImg" src='https://i.ibb.co/20zw80q/1487.gif'>
</div>
<!-- 로딩화면 끝 -->
<div class="wrap">  
    <img src="https://images.unsplash.com/photo-1689122777005-44185708d220?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1670831945939-c8ec61856016?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1670899555263-4546f62ebce9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="">
</div>

 

 

JavaScript

const mask = document.querySelector('.mask');
const html = document.querySelector('html');

html.style.overflow = 'hidden'; //로딩 중 스크롤 방지
window.addEventListener('load', function () {
  //아래 setTimeout은 로딩되는 과정을 임의로 생성하기 위해 사용. 실제 적용 시에는 삭제 후 적용해야함.
  setTimeout(function () {
    mask.style.opacity = '0'; //서서히 사라지는 효과
    html.style.overflow = 'auto'; //스크롤 방지 해제
    mask.style.display = 'none';
  }, 2000);
})

 

 

Codepen

See the Pen [JavaScript]페이지 로딩 시 로딩화면 구현 by TytanLee (@TytanLee) on CodePen.

 

 

로딩화면 구현 이해에 필요한 정보

1. document.addEventListener('DOMContentLoaded', function(){})

외부 리소스나 이미지들을 불러오지 않아도, DOM과정을 완료하면 안의 코드들이 실행됩니다. DOM은 편의상 소스코드들을 위에서부터 아래로 한번 훑는 개념이라고 생각하면 됩니다.(자세하게 들어가면 복잡하지만 이번 글에서는 이해를 돕기 위한 표현입니다.)

 

2. window.addEventListener('load', function(){})

외부 리소스, 이미지들을 모두 불러온 뒤 안의 코드들이 실행됩니다. 만약에 페이지가 100MB 정도의 이미지를 갖고 있어서 불러와야 하면 위 1번은 100MB를 다 불러오지 않아도 실행된다면 2번은 이미지를 다 불러와야 코드를 실행합니다.

때문에 윕페이지가 구현되는 과정은 대략적으로 "1번 >> 이미지 등 모든 소스가 나타남 >> 2번" 형식으로 흘러가는데, 로딩화면을 구현하는 코드는 1번 과정에서 구현되고 2번 과정까지 끝나면 로딩화면을 지우는 형식이라고 보면 됩니다.

 

 

여러 사이트들을 돌아다녀서 코드들을 살펴보며 생각한 결과이며 틀릴 수 있으니 틀린 정보가 있다면 댓글 부탁드립니다.

 

---

.

.

하루에도 수많은 콘텐츠를 접하는 시대, 어떻게 사람들의 마음을 사로잡을 수 있을까요?

감성적인 이미지와 디자인으로 한눈에 스크롤을 멈추게 하는 카드뉴스가 답입니다.

그럼 어떻게 감성적인 카드뉴스를 손쉽게 만들 수 있을까요?

 

바로 감성적인 카드뉴스 디자인 템플릿을 활용하세요😊

 

이번에 제가 카드뉴스 템플릿을 만들었습니다. 가장 사용성이 좋은 디자인으로 29종을 만들어봤는데, 템플릿을 사용하면 전문가 수준의 디자인을 손쉽게 완성할 수 있습니다.

 

아래에서 이미지와 링크를 확인할 수 있으니 감성적인 카드뉴스를 제일 먼저 만나보세요!

감성적인 SNS 운영을 위한 카드뉴스 템플릿 29종 - 크몽