티스토리 블로그 상단 진행바(Progress Indicator) 만들기

블로그의 방문자가 콘텐츠를 얼마나 읽었는지를 시각적으로 나타내는 방법 중 하나가 바로 상단 진행바입니다. 이를 통해 방문자는 페이지가 얼마나 스크롤되었는지를 한눈에 알 수 있으며, 독서 경험을 더욱 향상할 수 있습니다. 이번 글에서는 티스토리 블로그에 상단 진행바를 추가하는 방법과 코드를 정확한 위치에 입력하는 방법을 설명하겠습니다. 별도의 스크립트도 제공할 것이며, 이를 사용하여 손쉽게 진행바를 설치할 수 있습니다.

진행바(Progress Indicator)란?

정의: 페이지 상단에 위치한 진행바는 사용자가 페이지에서 얼마나 스크롤했는지를 표시하는 UI 요소입니다.
목적:
- 사용자가 페이지의 길이를 인지하고, 어디까지 읽었는지를 시각적으로 확인할 수 있도록 돕습니다.
- 독서 흐름을 끊김 없이 유지하게 하여 사용자 경험을 개선합니다.

필요한 스크립트

아래 스크립트는 jQuery를 활용하여 진행바를 구현한 것입니다. 이 스크립트를 블로그의 HTML 코드에 삽입하면 됩니다.

/* PrognRoll | https://mburakerman.github.io/prognroll/ | @mburakerman | License: MIT */
(function ($) {
    $.fn.prognroll = function (options) {

        var settings = $.extend({
            height: 4, // 진행바 높이
            color: "#180204", // 진행바 배경색
            custom: false // 커스텀 스크롤을 사용할지 여부
        }, options);

        var progressBar = $("<span>", {
            class: "prognroll-bar",
        });

        return this.each(function (i, el) {
            if ($(this).data("prognroll")) {
                return false;
            }
            $(this).data("prognroll", true);

            $("body").prepend(progressBar).end().find(".prognroll-bar").not(":first").remove();

            $(".prognroll-bar").css({
                position: "fixed",
                top: 0,
                left: 0,
                width: 0,
                height: settings.height,
                backgroundColor: settings.color,
                zIndex: 888
            });

            var globals = {
                "windowScrollTop": $(window).scrollTop(),
                "windowOuterHeight": $(window).outerHeight(),
                "bodyHeight": $(document).height()
            }

            function bindWindowScroll() {
                $(window).scroll(function (e) {
                    e.preventDefault();
                    globals.windowScrollTop = $(window).scrollTop();
                    globals.windowOuterHeight = $(window).outerHeight();
                    globals.bodyHeight = $(document).height();

                    var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;
                    $(".prognroll-bar").css("width", total + "%");
                });
            }

            if (settings.custom === false) {
                bindWindowScroll();
            } else {
                if ($(this).css("max-height") == "none") {
                    bindWindowScroll();
                } else {
                    $(this).scroll(function (e) {
                        e.preventDefault();
                        var customScrollTop = $(this).scrollTop();
                        var customOuterHeight = $(this).outerHeight();
                        var customScrollHeight = $(this).prop("scrollHeight");

                        var total = (customScrollTop / (customScrollHeight - customOuterHeight)) * 100;
                        $(".prognroll-bar").css("width", total + "%");
                    });
                }
            }

            var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;
            $(".prognroll-bar").css("width", total + "%");
        });
    };
})(jQuery);

// 실행
$(function() { 
    $("body").prognroll(); 
    $(".content").prognroll({ custom: true }); 
});

코드를 삽입할 위치

HTML 편집:
- 티스토리 블로그의 관리 페이지로 이동합니다.
- '꾸미기' 메뉴를 클릭하고 '스킨 편집'을 선택합니다.
스크립트 추가:
- HTML 코드 중 ~~head~~ 태그 내 또는 ~~body~~ 태그 시작 부분에 위의 스크립트를 붙여 넣습니다.
- ~~(script src="https://code.jquery.com/jquery-3.6.0.min.js")(/script)~~를 포함하여 jQuery를 추가하는 것이 필요합니다. 이를 통해 jQuery가 의존성으로 작동할 수 있습니다.

CSS 스타일 적용하기

진행바의 스타일은 스크립트 내 settings 객체의 height와 color 속성을 통해 조정할 수 있습니다. 필요에 따라 아래와 같은 간단한 CSS를 추가하여 스타일을 변형할 수 있습니다.

.prognroll-bar {
    transition: width 0.2s ease;
}

추가 설정과 조정하기

높이 조정: height 값을 수정하여 진행바의 두께를 변화시킬 수 있습니다.
색상 조정: color 값에 원하는 색상을 HEX 코드 형태로 입력하여 진행바의 색상을 변경합니다.

결론

상단 진행바는 사용자에게 유용한 시각적 도구가 되어 블로그의 품질을 높일 수 있습니다. 위의 코드를 참고하여 티스토리 블로그에 진행바를 추가하고, 독자에게 보다 나은 경험을 제공하세요. 적용이 어렵거나 안내된 설명이 이해하기 어려우신 경우 댓글 남겨주시면 상세하게 알려드리겠습니다.