블로그스팟 읽기 스크롤 진행바 만들기 | 블로그스팟 HTML 자바스크립트 설치 방법

내가 지금 읽고 있는 글은 얼마나 남았나요?

💡

블로그 상단에 스크롤 진행 표시바를 추가하면 독자의 체류시간과 가독성이 함께 개선됩니다.
블로그스팟에서도 HTML/JavaScript 가젯만으로 간단히 구현할 수 있습니다.

사람들은 막연히 기다리는 것을 싫어합니다. 식당에 입장하려면 앞으로 몇 분을 더 기다려야하고, 지금 읽고 있는 전자책의 몇%를 읽고 있는 중이고, 운전하면 도착 예정시간을 알아야 마음이 편안해지고 현재에 집중 할 수 있습니다.

블로그에서 글을 읽을때도 지금 읽고 있는 것이 전체분량의 얼마정도에 와있는지, 얼마나 더 남았는지를 알면 창을 닫고 이탈할지 조금더 읽어볼지를 결정하는데 도움이 될 수 있습니다.  블로그 스크롤 진행바, 또는 읽기 진행 표시바는 이런 독자의 니즈를 해소시켜 줍니다. 특히 긴 글에서 더 유용합니다. 장문 콘텐츠는 정보는 많지만 그 끝이 어디인지 모르면 독자에게도 부담이 갑니다. 

이 글에서는 구글 블로그(블로그스팟, Blogspot)에 상단 스크롤 진행바 추가하는 방법을 단계별로 정리합니다. 코드 원리, 설치 위치, SEO 관점의 의미까지 함께 다뤄보겠습니다. 

 

왜 블로그에 스크롤 진행 표시바가 필요할까?

💡

독자는 지금 글의 어느 지점을 읽고 있는지 알고 싶어합니다.
진행 표시바는 예측 가능성을 제공해 이탈률을 낮춥니다.

다른 사람의 블로그를 읽다 보면 이런 생각이 듭니다. “이 글, 얼마나 남았지?”

특히 긴 정보형 콘텐츠에서는 지금 읽고 있는 부분이 도입부인지 본론인지 결론인지 헷갈릴 때가 많습니다. 스크롤을 내려도 전체 분량이 가늠되지 않습니다.

이때 상단에 얇은 막대가 보입니다. 스크롤을 내릴수록 오른쪽으로 채워집니다. 글의 끝에 도달하면 100%가 됩니다.

이 단순한 요소가 사용자 경험(UX)을 바꿉니다. 심리적으로 “얼마나 남았는지” 알 수 있기 때문입니다. 이는 체류시간 증가, 이탈률 감소로 연결될 수 있습니다.

UX 관점에서의 장점

• 가독성 향상 – 글의 구조가 명확해짐
• 이탈 방지 – 끝이 보이면 포기하지 않음
• 신뢰도 상승 – 정돈된 사이트 인상 제공
• 모바일 가독성 개선 – 작은 화면에서 특히 효과적

특히 SEO 장문 콘텐츠 전략을 사용하는 블로거라면 이 기능은 많은 도움을 줄 수 있습니다. 블로그에 독자가 얼마나 체류했느냐가 SEO에 중요한 지표중 하나이기 때문에, 독자들에게 이탈하지 않고 끝까지 읽게 할 동기요인을 주는 역할을 할 수 있습니다. 

아래 이미지의 동그라미 영역처럼 읽기 진행 정도가 표시됩니다. 

위 화면의 동그라미 영역처럼 보여집니다.

Blogspot 스크롤 진행바 설치 방법

💡

관리자 페이지 → 레이아웃 → 가젯 추가 → HTML/JavaScript 순서로 진행합니다.
코드 복사 후 저장하면 즉시 적용됩니다.

설치는 어렵지 않습니다. 개발 지식이 없어도 가능합니다. 
아래에 간단하게 설명드리겠습니다. 

1단계. 관리자 페이지 접속

블로그스팟 관리자 화면으로 이동합니다. 왼쪽 메뉴에서 레이아웃을 클릭합니다.

2단계. 가젯 추가

상단 영역(헤더 근처)에 가젯 추가를 선택합니다. 가능하면 페이지 최상단에 배치하는 것이 좋습니다.

3단계. HTML/JavaScript 선택

가젯 목록 중 HTML/JavaScript를 선택합니다. 코드 입력 창이 나타납니다.

만약 해당 내용이 어려우신분은 제가 기존에 쓴 글의 링크를 같이 걸어 두었습니다. 
상세 내용은 그 글을 참조해주세요. 

반응형

2026.03.29 - [구글 블로그] - 블로그스팟 레이아웃 설정 방법 | 가젯 추가·HTML 위젯 설치·사이드바 인기글 설정

블로그스팟 레이아웃 설정 방법 | 가젯 추가·HTML 위젯 설치·사이드바 인기글 설정

스크롤 진행바 HTML + JavaScript 코드

💡

아래 코드는 PC와 모바일 모두에서 작동합니다.
CSS로 디자인을 조정하고 JS로 스크롤 비율을 계산합니다.

HTML/JavaScript 코드 확인

<style> #readingProgress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background-color: #555; z-index: 9999; transition: width 0.25s ease-out; } </style>

<div id="readingProgress"></div>

<script> window.addEventListener("scroll", function () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var scrollHeight = document.documentElement.scrollHeight - window.innerHeight; var scrollPercent = (scrollTop / scrollHeight) * 100; document.getElementById("readingProgress").style.width = scrollPercent + "%"; }); </script>

코드를 그대로 복사해 붙여넣고 저장하면 됩니다. 페이지를 새로고침하면 상단에 얇은 막대가 나타납니다.

혹시 위의 코드가 복사기 되지 않는다면 옆의 링크에서 다운 받아주세요. : [코드 확인 링크]

코드 작동 원리 간단 설명

핵심은 스크롤 위치 비율 계산입니다. 현재 스크롤 값과 전체 문서 높이를 비교합니다.

계산된 퍼센트를 width 값으로 적용합니다. 그래서 스크롤에 따라 막대가 자연스럽게 채워집니다.

transition 속성 덕분에 움직임이 부드럽게 보입니다.

디자인 커스터마이징 방법

💡

height, background-color 값을 바꾸면 색상과 두께를 자유롭게 조정할 수 있습니다.

브랜드 컬러가 있다면 색상을 맞추는 것이 좋습니다. 예를 들어 네이비 블로그라면 진한 파랑으로 변경할 수 있습니다.

• height: 6px; → 두께 증가
• background-color: #ff9900; → 색상 변경
• top: 0; → 상단 고정

투명도를 주고 싶다면 rgba를 사용하면 됩니다. 모바일에서는 3~4px가 가장 자연스럽습니다.

SEO 관점에서의 의미

💡

스크롤 진행바는 직접적인 SEO 요소는 아니지만,
체류시간 증가와 사용자 경험 개선을 통해 간접적 효과를 기대할 수 있습니다.

구글은 사용자 경험을 중요하게 봅니다. 체류시간, 이탈률, 페이지 상호작용은 간접 지표입니다.

진행바는 긴 글의 완독률을 높입니다. 특히 니치 롱테일 키워드 장문 전략을 쓰는 블로그라면 효과가 큽니다.
위에서 여러번 강조했던 것처럼 독자의 이탈을 방지할 수 있는 역할을 이 간단한 스크립트가 해줍니다. 

모바일 환경에서의 테스트

💡

모바일 브라우저에서도 동일하게 작동합니다.
다만 테마에 따라 z-index 충돌 여부를 확인하세요.

테마에 고정 메뉴가 있다면 막대가 가려질 수 있습니다.

이 경우 z-index 값을 더 크게 조정하면 해결됩니다. 예: 9999 → 99999

맺음말

💡

작은 UI 요소 하나가 블로그 완성도를 크게 높입니다.
긴 글을 운영하는 블로거라면 꼭 적용해볼 만합니다.

종이책은 남은 분량을 눈으로 확인할 수 있습니다. 전자 화면은 그렇지 않습니다.

진행 표시바는 그 차이를 메웁니다. 독자에게 예측 가능한 읽기 환경을 제공합니다.

단순하지만 효과적인 기능. Blogspot에서도 충분히 구현 가능합니다.

FAQ | 블로그 스크롤 진행바 자주 묻는 질문

Q1. 애드센스와 충돌하지 않나요?

일반적으로 충돌하지 않습니다. 상단 고정 광고가 있다면 위치만 조정하면 됩니다.

Q2. 특정 글에서만 적용할 수 있나요?

가젯이 아닌 개별 포스트 HTML에 삽입하면 가능합니다. 다만 관리 편의성은 떨어집니다.

Q3. 페이지 로딩 속도에 영향이 있나요?

코드가 매우 가볍습니다. 속도 저하는 거의 없습니다.