티스토리 블로그 사이트 부드러운 로딩 화면 추가하기 및 소스코드

끄적끄적/블로그이야기

티스토리 블로그 사이트 부드러운 로딩 화면 추가하기 및 소스코드

멱군 2024. 2. 23. 21:40

블로그 페이지 로딩 시간은 방문자의 첫인상과 사용자 경험에 큰 영향을 미칩니다. 특히 구글 애드센스나 카카오 애드핏과 같은 광고를 포함한 페이지는 로딩 시간이 길어질 수 있어, 방문자가 완전히 로드되지 않은 페이지를 보게 되는 경우가 종종 있습니다. 이러한 문제를 해결하기 위해, 모든 콘텐츠가 로드될 때까지 안내하는 매력적인 로딩 화면을 구현하는 방법을 소개합니다.

1. 로딩 이미지 준비하기

로딩 화면의 첫 단계는 적절한 로딩 이미지를 선택하는 것입니다. 로딩 이미지는 방문자에게 페이지가 여전히 로드 중임을 알리는 동시에 기다림의 답답함을 줄여줍니다.

구글이나 네이버에서 '로딩 이미지'를 검색하거나, ICONS8( https://icons8.com/icons/set/loading)같은 사이트에서 다양한 로딩 이미지를 무료로 다운로드할 수 있으며, '로딩 이미지'를 검색하여 원하는 이미지를 찾을 수도 있습니다.

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

icons8.com

이미지 이름 설정의 중요성

다운로드한 이미지 파일의 이름을 "loading"으로 변경하는 것이 좋습니다.

이는 설정 과정에서의 혼란을 방지하고, 추후 유지보수를 용이하게 합니다.

티스토리에 로딩 이미지 업로드하기

선택한 로딩 이미지는 티스토리 블로그에 업로드해야 합니다. 티스토리 관리자 페이지에서 "꾸미기 > 스킨 편집 > HTML 편집"으로 이동한 후, "파일 업로드" 기능을 통해 이미지를 업로드합니다.

"HTML 편집"에서 "파일 업로드" 기능을 사용하여 로딩 이미지를 업로드합니다.

로딩 화면 구현을 위한 스크립트 적용

로딩 이미지가 준비되면, 다음으로는 해당 이미지를 활용하여 로딩 화면을 구현하는 코드를 작성해야 합니다.

HTML 편집기에서 아래 코드를 페이지의 태그 바로 위에 추가하세요.

저는 소스 가장 아래쪽에 만들어주었습니다.

다음은 순수 자바스크립트와 CSS를 사용하여 부드러운 fade out 효과와 함께 로딩 화면을 구현하는 방법입니다

자바스크립트 소스

<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>

CSS 소스

<style type="text/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;
}
</style>

html 소스

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

적용 결과 확인하기

설정을 마친 후, 티스토리의 메인 페이지나 개별 게시글을 열어 로딩 화면이 정상적으로 적용되었는지 확인합니다.

잘 적용이 되었네요.

추가 참고 자료

설정 과정을 나중에 참조하거나 다른 사용자와 공유할 수 있도록, 사용한 이미지와 코드를 파일로 저장해두는 것이 좋습니다.

아래는 완성된 소스 코드입니다. 이 코드는 티스토리 블로그에 로딩 화면을 추가하는 데 사용할 수 있으며, 페이지의 모든 콘텐츠가 로드될 때까지 로딩 이미지를 표시합니다.

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

<style type="text/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;
    z-index: 99;
}
#loading > img {
    max-width: 100px;
    max-height: 100px;
}
</style>

<script type="text/javascript">
window.onload = function() {
    var loading = document.getElementById('loading');
    loading.style.opacity = 0;
    setTimeout(function() {
        loading.style.display = 'none';
    }, 500);
};
</script>
<!-- Loading Code End -->

이 코드를 티스토리 블로그의 HTML 편집기 내 body 태그 바로 위에 추가합니다.

위 소스코드는 아래 파일을 다운로드 받으셔도 됩니다.

티스토리 블로그 사이트 부드러운 로딩 화면 추가하기 및 소스코드.zip

0.00MB

결론

로딩 화면은 티스토리 블로그의 사용자 경험을 크게 개선할 수 있는 간단하면서도 효과적인 방법입니다. 방문자가 블로그의 모든 콘텐츠가 완전히 로드될 때까지 기다리는 동안 긍정적인 인상을 줄 수 있으며, 이는 방문자의 만족도를 높이고 사이트에 머무는 시간을 연장할 수 있습니다. 위에서 소개한 방법을 통해 여러분의 티스토리 블로그에 매력적이고 효과적인 로딩 화면을 추가해 보세요.

저작자표시 비영리 동일조건