# 티스토리 게시글 예상 읽기 시간 표시하기
개요
테마파크(놀이공원)에 가면 예상 대기 시간을 알려주고 쇼핑몰에 접속하면 이벤트가 언제 끝나는 지 남은 시간을 표시해 사용자에게 알려줍니다.
시간이라는 건 실생활에서 바로 접할 수 있는 그런 녀석(?)이지만 막상 그 중요성에 대해선 간과하고 있는 것 같습니다. 테마파크에서 대기 시간이 표시되어 있지 않으면 언제까지 기다려야 하는 지 알 수 없고 대기 시간이 길어지면 줄을 이탈하기도 합니다. 막상 있다가도 없으면 불편해지는 그런 녀석이죠...
블로그도 똑같이 적용될 수 있다고 생각합니다. 사용자가 콘텐츠(게시글)에 접근하여 글을 읽을 때 해당 콘텐츠가 얼마나 긴 글인지 짧은 글인지 읽어보지 않고는 잘 알 수 없습니다. 그래서 읽다가 긴 글로 판단될 경우 초반만 읽다가 정보도 얻지 못한 채 이탈할 확률이 있습니다. 정성껏 작성한 글인데 끝까지 안 읽어주고 정보도 얻지 못하면 양쪽 모두 속상하죠.
예상 읽기 시간을 표시해야 하는 이유
사실 예상 읽기 시간을 표시하는 건 필수사항이 아니지만... 표시해야 하는 이유로 사용자가 있습니다.
게시글을 읽으러 온 사용자는 글을 읽기 전에 얼마나 시간이 걸릴 지 알 수 없습니다. 그래서 내가 해당 콘텐츠를 소비해야 할 만한 가치가 있는 지 생각하게 됩니다. 바쁜 현대인의 일상 속에서 1분 1초가 중요하고, 시간은 금이다! 라는 말이 있듯이 예상 읽기 시간이 표시된 콘텐츠는 시간을 아끼려는 사용자에게 매력적으로 다가올 수 있습니다.
예상 읽기 시간이 짧은 글은 부담을 아무래도 덜 주게되고 빠르게 읽을 수 있다는 점에서 이탈 확률을 낮출 수 있습니다. 이는 웹 사용자 경험 측면에서 보았을 때 검색 엔진 최적화와 사용자 경험을 개선하는 데 있어 큰 도움을 줄 수 있습니다.
긴 예상 읽기 시간을 가진 경우 시간을 투자해야한다는 부담 때문에 이탈 확률이 높아질 수 있는데, 이 부분은 필요한 정보에 빠르게 접근할 수 있는 목차 기능을 제공함으로써 어느정도 상쇄시킬 수 있습니다.
코드
const contentsStyleElement = document.querySelector('.contents_style');
if (contentsStyleElement) {
}티스토리의 본문 내용은 .contents_style이라는 클래스 이름을 가진 요소에 있습니다. document.querySelector로 그 요소를 가져오고 존재하는 지부터 확인합니다.
const contents = contentsStyleElement.innerText || contentsStyleElement.textContent;본문에 있는 모든 텍스트(콘텐츠의 내용)를 변수에 담습니다. 텍스트는 innerText나 textContent로 취득할 수 있습니다.
const words = contents.trim().split(/\s+/).length;공백을 기준으로 단어의 수를 취득합니다. 더 정확하게 단어를 추출하는 것이 중요하지만 분석하는 데 시간과 성능이 소요될 수 있으니 대략적으로 처리합시다.
const wordsPerMinute = 200;분당 얼마나 많은 단어 수를 읽는 지 기준을 정합니다. 200에서 300 사이가 적당한 것 같습니다.
const readingTimeMinutes = (words / wordsPerMinute);단어의 수를 평균 읽기 속도로 나누어 예상되는 읽기 시간을 구합니다.
const readingTimeElement = document.getElementById('READING-TIME');
if (readingTimeElement) {
readingTimeElement.textContent = `예상되는 읽기 시간은 ${readingTimeMinutes.toFixed(2)}분입니다.`;
}예상 읽기 시간이 표시될 요소를 추가하고 해당 요소에 접근하여 예상되는 읽기 시간을 분 단위로 표시하도록 합니다. 초 단위로 표시할 경우 아주 짧은 게시글이라면 알아보기 쉽지만 1분 이상을 넘어가면 초 계산이 귀찮기 때문에 분 단위가 적당하고 좋습니다.
예상 읽기 시간 코드를 추가하면 위 사진과 같이 글을 읽기 전에 얼마나 시간이 소요될 지 사용자에게 알려줄 수 있습니다.
예상 읽기 시간에 스타일을 주어 사용자 눈에 띄게 하는 것이 중요하며, 평균 읽기 속도를 너무 높게하여 고의로 짧은 시간을 추출하는 건 진짜 의미 없습니다.
무분별한 매크로 및 스팸성 댓글로 인하여 티스토리 내 댓글 기능을 비활성화하고 giscus 댓글 시스템으로 운영 중입니다.
댓글 작성이 필요할 경우 GitHub 계정이 필요합니다.