글 읽기 진행률 시각화로 완독률 높이는 법 5단계
"CSS 프로그레스 바"를 블로그 상단에 추가하면 독자가 글을 끝까지 읽는 완독률이 올라간다. 독자가 현재 글의 어느 위치에 있는지 시각적으로 알 수 있으면 "조금만 더 읽으면 된다"는 심리적 동기가 생긴다. 마라톤 결승선이 보이면 포기하지 않는 원리와 같다. 구현도 복잡하지 않다. CSS와 짧은 JavaScript 10줄이면 완성된다.
긴 글을 써두고 독자들이 절반도 읽지 않고 나간다는 분석 데이터를 보면 솔직히 허탈하다. 열심히 쓴 글인데 스크롤도 안 내리고 나가는 독자가 70%라는 히트맵 데이터가 실제로 있다. "CSS 프로그레스 바" 하나로 그 비율을 줄일 수 있다면 충분히 시도해볼 가치가 있다. 이 글에서는 읽기 진행 바를 만드는 방법 5단계를 정리했다.
읽기 진행 바가 완독률에 미치는 영향
UI/UX 연구에서 진행 상태를 시각화하면 사용자가 작업을 완료할 가능성이 높아진다는 결과가 반복적으로 나온다. 이걸 "골 그라디언트 효과"라고 부른다. 목표가 가까울수록 동기가 강해지는 현상이다. 블로그 글에 "CSS 프로그레스 바"를 넣으면 독자가 "이 글이 얼마나 긴지" 한눈에 파악하고, 남은 양이 적을수록 끝까지 읽을 가능성이 높아진다.
실제 블로거들의 A/B 테스트 결과를 보면 진행 바를 넣은 페이지가 그렇지 않은 페이지보다 평균 스크롤 깊이가 15~25% 더 깊다는 데이터가 있다. 구글 애드센스 수익 관점에서도 독자가 더 오래 페이지에 머물면 광고 노출 시간이 늘어나고 클릭 기회도 증가한다.
기본 CSS 프로그레스 바 구조
"CSS 프로그레스 바"의 HTML 구조는 아주 단순하다.
/* CSS */
#reading-progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 0%;
background: linear-gradient(90deg, #1a73e8, #00bcd4);
z-index: 10000;
transition: width 0.1s ease;
}
height는 3~6px가 가장 자연스럽다. 너무 얇으면 안 보이고 너무 두꺼우면 콘텐츠를 방해한다. background에 그라디언트를 주면 진행에 따라 색이 변하는 시각적 효과가 생긴다.
스크롤 위치 계산 JavaScript (최소 코드)
스크롤 진행률을 계산하는 JavaScript 코드다. 딱 10줄이다.
원리는 간단하다. 현재 스크롤 위치(scrollY)를 전체 스크롤 가능한 높이(scrollHeight - innerHeight)로 나누면 진행률(0~1)이 나온다. 이걸 100 곱해서 %로 변환해서 width에 넣는다. 스크롤 이벤트마다 계산해서 진행 바 너비를 업데이트하는 방식이다.
성능 최적화를 원한다면 `requestAnimationFrame`을 써서 렌더링과 동기화시킬 수 있다.
디자인 변형 5가지
기본 파란 바 외에도 다양한 스타일로 변형할 수 있다.
- 단색 포인트 바: `background: #FF6D00` — 주황 단색. 심플하고 눈에 띈다.
- 그라디언트 바: `background: linear-gradient(90deg, #e91e63, #ff9800)` — 진행할수록 색이 바뀐다.
- 네온 바: `background: #39ff14; box-shadow: 0 0 10px #39ff14` — 네온 효과. 다크 테마에 잘 맞는다.
- 투명도 바: `background: rgba(26,115,232,0.7)` — 살짝 투명하게. 세련된 느낌.
- 얇은 라인 바: `height: 2px` — 2px 두께로 최대한 티 안 나게. UX를 해치고 싶지 않을 때.
상단 고정 vs 하단 고정 선택 기준
진행 바를 상단에 둘지 하단에 둘지가 생각보다 중요한 UX 결정이다. 상단 고정(`top: 0`)은 항상 시야에 들어오는 위치라 인지가 쉽고 동기 부여 효과가 크다. 단, 상단에 이미 알림 바나 네비게이션이 있으면 복잡해 보일 수 있다.
하단 고정(`bottom: 0`)은 콘텐츠 방해 없이 조용하게 진행 상황을 보여준다. 모바일에서는 하단이 엄지손가락 닿는 영역이라 좀 더 자연스럽게 눈에 들어올 수 있다. 두 가지를 모두 설치해서 A/B 테스트를 해보고 완독률 데이터로 결정하는 게 가장 정확하다.
모바일 최적화와 성능 주의사항
모바일에서 스크롤 이벤트가 너무 자주 발동하면 성능 저하가 생길 수 있다. `passive: true` 옵션을 추가해서 브라우저가 스크롤 성능을 최적화하도록 힌트를 준다.
window.addEventListener('scroll', updateProgress, { passive: true });
`passive: true`를 추가하면 브라우저가 스크롤 이벤트 핸들러가 `preventDefault()`를 호출하지 않는다는 걸 알아서 스크롤 처리를 메인 스레드에서 최적화한다. 모바일 스크롤이 훨씬 부드러워진다. "CSS 프로그레스 바"를 블로그에 넣을 때 이 옵션을 빠뜨리면 모바일에서 스크롤이 약간 버벅이는 증상이 생길 수 있으니 반드시 포함하자.
참고 출처
- MDN Web Docs – scroll event
- MDN Web Docs – requestAnimationFrame
- Google Web Fundamentals – Passive Event Listeners
- Nielsen Norman Group – Progress Indicators
- CSS Tricks – Reading Position Indicator