항상 글을 작성하다 보면 생각했던 것보다 내용이 많이 추가되어 스크롤 압박이 생기고, 독자가 어느 정도 읽었는지 진행 상황을 파악하기 어려운 점이 있었습니다. 그러던 중 인터넷을 조금 찾아보니 '진행 표시줄(Progress Bar)'을 적용하면 해결할 수 있다는 것을 알게 되었고, 흔하게 정보가 공유되고 있어 어렵지 않게 적용할 수 있었습니다. 여기에 ChatGPT를 활용해 조금 더 보기 좋게 디자인을 다듬어 보았고, 필자의 블로그에서는 정상적으로 작동하는 것을 확인하였기에 아래와 같이 내용을 공유해 봅니다. ↓ 미리 적용된 예시 참고
◈ STEP① 심플 버전
자신의 스킨 HTML 편집에서 Ctrl+F 단축기를 이용해「body id」 부분을 검색합니다. 사용하시는 스킨마다 적용 위치나 방법이 조금씩 다를 수 있습니다. 커스텀(유료 스킨)에서는 대체로 body id= 를 많이 활용하는 것 같습니다. 검색이 되지 않는다면, </head><body> 또는 <body> 바로 아래에 삽입하여 정상 작동 여부를 테스트해 본 후 문제가 생긴다면 위치를 조금씩 옮겨가며 조정해 보시기 바랍니다.
<!-- start progress bar -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js">
</script>
<script type="text/javascript">
$(function() {
$("body").prognroll(
{height:7, color:"#1e73be"}
);
$(".content").prognroll({
custom:true});
});
</script>
<!-- end progress bar -->
◇ 추가 설명
→ PrognRoll.js라는 라이브러리를 외부에서 불러오는 스크립트 방식입니다. (raw.)githack.com은 GitHub의 raw 파일을 안정적으로 CDN(콘텐츠 전송 네트워크, Content Delivery Network)처럼 전달해 주는 서비스입니다. 그렇기에 영구적용이 되지 않을 수 있습니다. 해당 개발자 말씀으로는 2013년부터 시작하여 10년 이상 유지하였지만 특별한 문제가 없으면 계속 유지를 할 것으로 보입니다.
→ height: 7, 진행 바의 높이(두께)를 7px로 설정한다는 의미로, 숫자가 커질 수록 진행바가 두꺼워집니다.
→ color: "#1e73be", 바의 색상을 파란색 계열로 설정한다는 의미로, 원하는 RGB(Hex color codes) 색상을 넣습니다. (구글 검색 예시)
◈ STEP② 진행률 표시 레트로 버전
<!-- start progress bar + gauge -->
<style>
#scroll-gauge {
position: fixed;
top: 0;
left: 10px;
font-size: 13px;
font-family: monospace;
font-weight: bold;
color: #006dd7;
z-index: 9999;
background: rgba(255, 255, 255, 0.7);
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
</style>
<script src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script>
$(function () {
$("body").prognroll({
height: 5,
color: "#006dd7"
});
var gaugeDiv = $('<div id="scroll-gauge">░░░░░░░░░░</div>');
$("body").append(gaugeDiv);
$(window).on("scroll", function () {
var scrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var docHeight = $(document).height();
var percent = Math.round((scrollTop / (docHeight - winHeight)) * 100);
var totalBars = 10;
var filledBars = Math.round(percent / 10);
var gauge = '▓'.repeat(filledBars) + '░'.repeat(totalBars - filledBars);
$("#scroll-gauge").text(gauge + ' ' + percent + '%');
});
});
</script>
<!-- end progress bar + gauge -->
◈ STEP③ 진행률 표시 100% 완료 체크 버전
<!-- start progress bar + check -->
<style>
#scroll-check {
position: fixed;
top: 0;
left: 10px;
font-size: 14px;
font-weight: bold;
color: #006dd7;
z-index: 9999;
background: rgba(255,255,255,0.7);
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
</style>
<script src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script>
$(function () {
$("body").prognroll({
height: 5,
color: "#006dd7"
});
var checkDiv = $('<div id="scroll-check">⬆️</div>');
$("body").append(checkDiv);
$(window).on("scroll", function () {
var scrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var docHeight = $(document).height();
var percent = Math.round((scrollTop / (docHeight - winHeight)) * 100);
if (percent >= 100) {
$("#scroll-check").text("✔ 완료");
} else {
$("#scroll-check").text("⬆️ " + percent + "%");
}
});
});
</script>
<!-- end progress bar + check -->
저는 세 가지 방식 중에서 3번이 가장 마음에 들었습니다. 확실히 AI가 발달하면서 업무나 블로그 작성의 효율이 크게 올라간 건 사실입니다. 하지만 어디까지나 AI는 '보조'일뿐이고, 실제로 자료를 바탕으로 직접 실행하고 테스트해 보는 게 가장 중요하다고 생각합니다. 어쨌든 단순한 작업이었지만, 블로그에 진행 표시줄 하나 추가한 것만으로도 페이지가 조금 더 풍성해 보이는 효과가 있네요. 현재 사용 중인 유료 스킨도 기본 구성만으로 충분히 멋지지만, 이렇게 하나씩 커스텀해서 내 스타일대로 꾸며가는 재미도 꽤 쏠쏠한 것 같습니다.
'◈『Information』 > 티스토리 블로그(Blog)' 카테고리의 다른 글
| 티스토리 디데이(D-Day) 모듈 만들기 (2) | 2022.07.19 |
|---|---|
| 구글[Google]/네이버[NAVER] 티스토리 사이트 맵 등록 방법 (0) | 2020.06.25 |
| 구글[Google] 티스토리 블로그 등록 - Search Console (0) | 2020.06.11 |
| 네이버[NAVER] 티스토리 블로그 등록 - Search Advisor (0) | 2020.06.10 |