[티스토리] 블로그 꿀팁전수 4 - 프로그레스 바 만들기

 

 

 

  오늘은 티스토리 블로그에 '프로그레스 바(Progress bar)'를 삽입하는 방법에 대해 알아보자. 프로그레스 바 기능을 배치하면 블로그를 이용하는 사람들에게 '새로운 경험(UX)'과 '인터페이스(UI)' 디자인에서 얻을 수 있는 편안함을 선사할 수 있다.

 

 

 

---

 

 

 프로그레스 바(Progress Bar)

 

© Unsplash, Volodymyr Hryshchenko

 

  프로그레스 바는 유저가 현재 보고 있는 페이지에서 얼마나 스크롤했는지를 시각적으로 구현해 주는 기능이다. 일반적으로 블로그 상단에 위치하며, 유저가 페이지를 아래로 스크롤할 때마다 그 거리에 따라 바의 길이나 진행도가 변화하는 것을 말한다.

 

  이로써, 방문자는 현재까지 얼마나 봤는지 그리고 앞으로는 얼마나 남았는지 현재 자신이 보고있는 위치를 쉽게 파악할 수 있다. 때문에 긴 글로 구성된 포스팅에서는 더욱 빛을 발한다고 볼 수 있다.

 

 

 프로그레스 바의 중요성

 

  프로그레스 바 기능을 설치하면 디자인적인 관점에서 간접적으로나마 예상 완료 시간을 보여줌으로써 방문자에게 신선한 경험을 선사해 주고, 자칫 찾아올 수 있는 지루함을 해소해주는 순기능이 있다. 블로그 꾸미기를 좋아하는 유저라면 현재 내 블로그 성격에 맞는 나만의 컬러 테마로 설정해 '브랜드 아이덴티티 강화'를 꾀할 수도 있겠다.

 

  또한, 경험 개선의 면에서 봤을 때 로딩 중인 모습과 같은 지연 상황에서 명확한 피드백을 제공해 주기에 '이 시스템이 제대로 작동하고 있구나'라는 확신을 준다. 이는 곧 내 블로그에 대한 방문자의 '신뢰도 향상'과도 이어진다.

 

  이러한 메리트를 이용해 블로그 전반에 '퍼포먼스, 신뢰성, 유지율 강화'라는 세 마리 토끼를 잡을 수 있다.

 

 

 프로그레스 바 만드는 방법

 

  본격적으로 프로그레스 바를 만드는 방법에 대해 알아보자. 티스토리 블로그에서 프로그레스 바를 추가하는 과정은 어렵지 않다. 코드 삽입을 위해 먼저, '관리자홈 > 꾸미기 > 스킨 편집 > html 편집 > HTML'로 이동해보자. 

 

1. 현재 내가 쓰고 있는 프로그레스 바 스타일이다. 먼저, 아래 코드를 'HTML의 <s_t3> 바로 아래'에 배치해 주자.

 

<!-- 프로그레스바 시작 -->
<div id="mybar"></div>
<script>function myBar(){var a=(document.body.scrollTop||document.documentElement.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)*100;document.getElementById("mybar").style.width=a+"%"}window.onscroll=function(){myBar()};</script>
<!-- 프로그레스바 끝 -->

 

2. 이어서 아래 코드도 'CSS의 최하단'에 배치해 주자.

 

/* 그라데이션 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
  }
/* 그라데이션 프로그레스바 끝 */

 

3. HTML/CSS 코드들을 순서대로 잘 삽입했다면 '미리 보기'를 통해 구현된 것을 볼 수 있을 것이다. 프로그레스 바의 컬러는 background-image에서 원하는 대로 바꿀 수 있다.

 

 

3-1. 기본형 프로그레스 바(단색)

 

/* 기본형 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: #22ac38; /* 색상 */
}
/* 기본형 프로그레스바 끝 */

 

3-2. 응용형 프로그레스 바(그러데이션)

 

/* 그라데이션 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background-image: linear-gradient(135deg, #fa709a, #fee140); /* 색상 */
}
/* 그라데이션 프로그레스바 끝 */

 

 

 그러데이션 소스 링크

 

Free Gradients Collection by itmeo.com

275 CSS Gradients Collection - CSS Pro

 

 

 마치며,

 

  오늘은 프로그레스 바에 대해 알아봤다. 손이 많이 가는 만큼 블로그를 꾸미는 데 있어 작은 변화가 큰 효과를 가져올 수 있다는 점을 잊지 말자.

 

 

[꿀팁전수] 관련글 바로가기

 

 

[티스토리] 블로그 꿀팁전수 1 - 포스팅 시간 단축

[티스토리] 블로그 꿀팁전수 2 - 닫는 큰따옴표 인용구 만들기

[티스토리] 블로그 꿀팁전수 3 - 나만의 서식 만들기

 

 

📌도움을 주신 분 출처: 

 

가람과 함께하는 이야기