아임웹 스크롤 진행률 표시 만들기 | 페이지 읽기 진행바 커스텀 코드

 

페이지를 얼마나 읽었는지 한눈에 보여주고 싶다면?

 

블로그나 홈페이지에서 긴 콘텐츠를 읽을 때 사용자는 현재 어디까지 읽었는지 궁금해합니다.

대형 미디어 사이트나 브랜드 홈페이지를 보면 상단에 얇은 진행바가 움직이는 경우가 있는데요.

이번 커스텀 코드는 스크롤 위치에 따라 진행률이 실시간으로 표시되는 기능입니다.

상단에는 진행바가 표시되고, 좌측 상단에는 현재 읽은 비율이 숫자로 나타납니다.

아임웹에서도 코드 위젯 하나만으로 간단하게 적용할 수 있습니다.

실제 구현 예시는 아래 사이트에서 확인할 수 있습니다.

 

실제 구현 URL

믓아 스튜디오

---

 

이 코드로 구현되는 기능

✔ 페이지 스크롤 진행률 표시

✔ 상단 프로그레스 바 자동 증가

✔ 현재 읽은 비율 실시간 표시

✔ 모바일 대응

✔ 고급 브랜드 사이트 느낌 연출

✔ 스크롤 이벤트 최적화 적용

✔ 모든 페이지에서 사용 가능

---

 

 

이런 홈페이지에 추천합니다
블로그	긴 글을 읽는 사용자에게 현재 위치를 알려줄 수 있습니다.
기업 홈페이지	서비스 소개 페이지나 포트폴리오 페이지의 완독률을 높이는 데 도움이 됩니다.
랜딩페이지	길게 구성된 광고용 랜딩페이지에서 사용자가 어디까지 확인했는지 직관적으로 보여줄 수 있습니다.
브랜드 사이트	고급스럽고 세련된 인터랙션을 추가할 수 있습니다.

---

 

적용 방법

1단계 : 아임웹 관리자 → 디자인 모드

2단계 : 코드 위젯 추가

3단계 : 아래 전체 코드를 붙여넣기

4단계 : 저장 후 게시

적용 즉시 스크롤 진행바가 표시됩니다.

---

 

전체 코드

<!-- =========================
High-end Scroll Progress Bar
Black & White Brand Style
========================= -->

<div class="motsa-progress-line">
  <div class="motsa-progress-fill"></div>
</div>

<div class="motsa-progress-percent">
  0%
</div>

<style>
.motsa-progress-line{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:2147483647;

  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  pointer-events:none;
  overflow:hidden;
}

.motsa-progress-fill{
  width:0%;
  height:100%;

  background:#fff;

  transform-origin:left center;
  transition:width .12s ease-out;
}

.motsa-progress-percent{
  position:fixed;
  top:18px;
  left:22px;

  z-index:2147483647;

  min-width:46px;
  padding:7px 10px 6px;

  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  color:#fff;
  font-family:Pretendard, Arial, sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  text-align:center;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  pointer-events:none;
}

@media (max-width:768px){

  .motsa-progress-percent{
    top:16px;
    left:16px;
  }

}
</style>

<script>
(function(){

  const bar = document.querySelector('.motsa-progress-fill');
  const percentText = document.querySelector('.motsa-progress-percent');

  if(!bar || !percentText) return;

  function updateProgress(){

    const scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0;

    const scrollHeight =
      document.documentElement.scrollHeight;

    const clientHeight =
      document.documentElement.clientHeight;

    const maxScroll =
      scrollHeight - clientHeight;

    const progress =
      maxScroll > 0
      ? Math.min(
          100,
          Math.max(
            0,
            (scrollTop / maxScroll) * 100
          )
        )
      : 0;

    bar.style.width = progress + '%';
    percentText.textContent =
      Math.round(progress) + '%';
  }

  let ticking = false;

  function requestUpdate(){

    if(!ticking){

      window.requestAnimationFrame(function(){

        updateProgress();
        ticking = false;

      });

      ticking = true;
    }
  }

  updateProgress();

  window.addEventListener(
    'scroll',
    requestUpdate,
    {passive:true}
  );

  window.addEventListener(
    'resize',
    requestUpdate
  );

  window.addEventListener(
    'load',
    requestUpdate
  );

})();
</script>

---

코드 수정 포인트

1. 진행바 두께 변경

현재 값

height:3px;

더 굵게 사용하려면

height:6px;

 

 

2. 진행바 색상 변경

현재

background:#fff;

브랜드 컬러 적용

background:#0057ff;

 

 

3. 퍼센트 위치 변경

현재

left:22px;

오른쪽으로 이동

right:22px;
left:auto;

 

 

4. 퍼센트 박스 숨기기

숫자는 숨기고 바만 사용하려면

display:none;

를 추가하면 됩니다.

---

 

자주 발생하는 오류와 해결 방법

1. 진행바가 보이지 않는 경우

코드 위젯이 숨겨진 섹션 안에 들어있는지 확인합니다.

가능하면 공통 푸터 영역이나 최상단 코드 위젯에 넣는 것을 추천합니다.

 

2. 진행률이 100%까지 가지 않는 경우

페이지 내부에 동적으로 생성되는 콘텐츠가 있는 경우 발생할 수 있습니다.

이미지 로딩 후 높이가 변경되면서 계산값이 달라지는 현상입니다.

대부분 페이지를 새로고침하면 정상 동작합니다.

 

3. 모바일에서 위치가 이상한 경우

아래 값을 수정하면 됩니다.

left:16px;
top:16px;

 

 

4. 다른 요소에 가려지는 경우

z-index 값을 더 높게 설정합니다.

현재 코드에는 최상위 값이 적용되어 있어 대부분의 경우 문제없이 동작합니다.

---

 

홈페이지 제작에서 작은 인터랙션 하나가 전체적인 완성도를 크게 높여줍니다.

특히 스크롤 진행바는 구현이 간단하면서도 사용자 경험을 개선할 수 있는 대표적인 UI 요소입니다.

아임웹 기본 기능만으로는 구현하기 어려운 디자인이지만 HTML, CSS, JS 커스텀 코드를 활용하면 누구나 적용할 수 있습니다.

앞으로도 아임웹 홈페이지 제작에 활용할 수 있는 다양한 커스텀 코드와 웹디자인 팁을 계속 공유하겠습니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

 

홈페이지 접속 시 인트로 만들기

홈페이지 접속 시 인트로 화면 만들기 | 아임웹 HTML/CSS/JS 코드 공유