[React] 가로로 스크롤 진행률 표시하는 UI 만들기 (feat. 커스텀 훅)

티스토리 블로그를 자주 쓰신다면 가로로 스크롤 진행률이 표시되는 UI를 많이 보셨을 것입니다. 많은 브라우저에서 세로 스크롤을 잘 안 보이도록 감춰놓는 경우가 많기 때문에 얼마나 읽어야지 콘텐츠가 끝이 나는지 짐작하기가 어렵습니다. 이때 가로 스크롤 진행률 UI를 사용한다면 사용자들도 콘텐츠의 길이를 한 번에 확인할 수 있고, 좋은 색상만 선택한다면 외관상 한층 업그레이드된 느낌을 받을 수 있습니다. 아래 이미지는 필자가 개발하고 있는 웹에 해당 UI가 적용된 모습입니다. 해당 UI는 요구사항은 아니었지만 비교적 긴 매거진 콘텐츠에서 사용자가 얼마나 읽었는지 짐작할 수 있는 UI는 꼭 필요하다고 생각했기 때문에 추가하게 되었습니다. 추후에는 해당 바에 주요 제목들을 링크해두고 바로 이동할 수 있도록 기능..

2022.06.05