웹페이지(블로그, 사이트) 로딩 화면 추가하는 방법

로딩화면 구성

웹페이지에 로딩화면을 구성하면 여러 가지 좋은 점이 있습니다.

첫째로, 사용자에게 웹페이지가 로딩되고 있는 중임을 시각적으로 알려줍니다. 이로써 사용자는 기다리는 동안 페이지가 멈추거나 고장 났다고 오해하지 않습니다.
둘째로, 로딩 화면은 사용자 경험을 개선할 수 있습니다. 로딩 시간 동안 빈 화면을 보는 것보다는 화면에 어떤 것이 발생하고 있는지를 알 수 있기 때문에 사용자들이 더 기다리기 쉽습니다.
마지막으로, 로딩 화면을 통해 개발자들은 페이지가 완전히 로딩될 때까지 사용자들에게 대기할 수 있도록 할 수 있습니다.

이렇게 함으로써 초기 화면이 빠르게 표시되고 사용자들이 더 나은 경험을 할 수 있게 됩니다.

로딩 이미지 준비

로딩 화면을 구성하기에 제일 먼저 필요한 것은 로딩 이미지 파일입니다. 아래 icons8.com 공식사이트에서 자신의 웹페이지에 어울리는 이미지파일을 다운로드하셔서 준비해 주세요.

Loading Icons, Logos, Symbols – Free Download PNG, SVG

일러스트 및 그래픽 디자인 요소를 제공하는 웹사이트입니다. 다양한 카테고리의 아이콘을 무료로 다운로드하거나 유료로 구매할 수 있습니다.

icons8.com

위 icons8.com 사이트에 접속하면 아래 같은 화면을 보실 수 있습니다.

천천히 보시면서 선택하셔도 되고 검색을 통해 원하는 이미지를 찾아보실 수 있습니다.

로딩 이미지 업로드

이제 준비한 로딩 이미지 파일을 티스토리 블로그에 업로드합니다.

로딩 화면 스크립트

로딩화면을 구현하기 위해 Html, JavaScript, Css 코드를 적용합니다.

Html

<!-- Loading gif Start -->
<div id="loading">
    <img src="./images/loading.gif" alt="loading">
</div>

위의 HTML 코드는 로딩 화면을 나타내는 요소를 정의합니다.

<div id="loading">: 이 부분은 id가 "loading"인 <div> 요소를 정의합니다. 이 <div> 요소는 로딩 화면을 감싸는 컨테이너 역할을 합니다.
<img src="./images/loading.gif" alt="loading">: 이 부분은 로딩 화면에 표시될 이미지를 정의합니다. src 속성은 이미지 파일의 경로를 지정합니다. 여기서는 "./images/loading.gif"라는 경로에 있는 GIF 이미지를 사용합니다. alt 속성은 이미지의 대체 텍스트를 지정하는데, 이는 이미지가 로드되지 못할 때 대신 표시됩니다.

따라서 이 HTML 코드는 로딩 화면을 나타내는 <div> 요소 안에 GIF 이미지를 포함하여 화면에 로딩 중임을 시각적으로 나타냅니다. JavaScript 코드와 함께 사용되면, 페이지가 로드될 때 이 로딩 화면이 서서히 사라지도록 구현될 수 있습니다.

Html은 ~~body~~ 상단에 붙여 넣어줍니다.

JavaScript

<script type="text/javascript">
window.onload = function() {
    var loading = document.getElementById('loading');
    
    // Fade out 효과
    loading.style.opacity = 0;

    // Fade out 완료 후 로딩 화면 숨김
    setTimeout(function() {
        loading.style.display = 'none';
    }, 500); // CSS transition 시간과 동일하게 설정
};
</script>

이 JavaScript 코드는 웹 페이지가 로드될 때 실행되는 함수를 정의합니다. 이 함수는 페이지 로딩 시 로딩 화면을 자연스럽게 사라지게 하는 효과를 추가합니다.

window.onload: 이 부분은 웹 페이지의 모든 자원이 완전히 로드되었을 때 실행되는 이벤트 핸들러입니다. 즉, HTML, CSS, 이미지 등의 모든 자원이 다운로드되고 렌더링이 완료된 후에 이 코드가 실행됩니다.
var loading = document.getElementById('loading');: 이 코드는 id가 'loading'인 요소를 찾아 변수 loading에 할당합니다. 이 요소는 일반적으로 로딩 화면을 나타내는 데 사용됩니다.
loading.style.opacity = 0;: 이 코드는 로딩 화면 요소의 투명도를 0으로 설정하여 요소를 투명하게 만듭니다. 이렇게 하면 로딩 화면이 서서히 사라지는 효과를 만들 수 있습니다.
setTimeout(function() {...}, 500);: setTimeout() 함수는 일정한 시간이 지난 후에 특정한 작업을 실행하기 위해 사용됩니다. 이 코드에서는 500밀리초(0.5초) 후에 로딩 화면을 숨기기 위한 작업을 실행합니다.
loading.style.display = 'none';: 위의 setTimeout() 함수에서 지정한 시간이 지난 후에 실행되는 작업으로, 이 코드는 로딩 화면 요소의 CSS display 속성을 'none'으로 설정하여 해당 요소를 화면에서 숨깁니다.
이렇게 하면 화면에서 로딩 화면이 완전히 사라집니다.

JavaScript는 ~~body~~ 적당한 위치에 붙여 넣어줍니다.

Css

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    opacity: 1; /* 초기 투명도 설정 */
    transition: opacity 0.5s ease-out; /* 투명도 변화에 대한 transition 설정 */
    z-index: 99;
}

#loading > img {
    max-width: 100px;
    max-height: 100px;
}

위의 CSS 코드는 로딩 화면을 스타일링하는 데 사용됩니다.

1. #loading: 이 부분은 id가 "loading"인 요소에 대한 스타일을 정의합니다.

width: 100%; height: 100%;: 요소의 너비와 높이를 화면 전체 크기로 설정합니다.
top: 0; left: 0; position: fixed;: 요소를 화면의 좌측 상단에 고정시킵니다.
display: flex; justify-content: center; align-items: center;: 내부 요소를 가운데 정렬하기 위해 Flexbox 레이아웃을 사용합니다.
background: white;: 배경색을 흰색으로 설정합니다.
opacity: 1;: 초기 투명도를 1로 설정하여 로딩 화면을 완전히 불투명하게 만듭니다.
transition: opacity 0.5s ease-out;: 투명도가 변할 때의 전환 효과를 설정합니다. opacity 속성이 변할 때 0.5초 동안 ease-out 방식으로 전환됩니다.
z-index: 99;: 다른 요소 위에 표시되도록 z-index를 설정합니다.

2. #loading > img: 이 부분은 id가 "loading"인 요소의 자식인 이미지에 대한 스타일을 정의합니다.

max-width: 100px; max-height: 100px;: 이미지의 최대 너비와 높이를 각각 100px로 설정하여 화면이 작아도 이미지가 너무 커지지 않도록 제한합니다.

이 CSS 코드는 로딩 화면의 위치, 크기, 색상 및 전환 효과를 설정하여 사용자가 페이지를 기다리는 동안 시각적으로 표시될 수 있도록 합니다.

css는 관리하기 쉽도록 원하시는 위치에 붙여 넣어줍니다.

SEO 영향

로딩 화면 구성을 한다고 해서 SEO에 직접적인 영향을 미치는 것은 아닙니다. 그러나 로딩 화면이 사용자 경험에 영향을 미치고, 사용자 경험이 좋으면 사이트의 성과와 이용자들의 만족도가 향상될 수 있습니다. 이는 간접적으로 SEO에 좋은 영향을 줄 수 있습니다.

좋은 사용자 경험은 사이트의 이용자들이 만족스럽게 사용할 수 있도록 도와주며, 이는 방문자들이 사이트에 더 오래 머무르고 더 많은 페이지를 탐색하도록 유도할 수 있습니다. 이는 검색 엔진에서 사이트의 신뢰도와 관련성을 평가하는 데 중요한 요소 중 하나입니다. 사용자가 페이지가 로딩될 때까지 기다리는 대신 즉시 콘텐츠를 볼 수 있다면, 이는 사용자 경험을 향상하고 페이지 이탈률을 줄일 수 있습니다.

따라서 로딩 화면을 구성함으로써 사용자 경험을 개선하고, 사이트의 성과를 향상하는 데 도움이 될 수 있으며, 이는 간접적으로 SEO에 긍정적인 영향을 줄 수 있습니다. 여러분들도 자신의 블로그에 매력적인 로딩 화면을 구성해 보세요.