티스토리2 블로그 프로그레스 바 (scroll 이벤트, requestAnimationFrame, 완독률) 방문자 대부분이 글의 30% 지점에서 이탈하고 있었습니다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때, 솔직히 좀 허탈했습니다. 글이 문제인지 구조가 문제인지 알 수가 없어서 프로그레스 바를 붙여보기로 했습니다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔습니다.scroll 이벤트와 requestAnimationFrame의 관계처음 코드를 짤 때 scroll 이벤트 핸들러 안에서 바로 style.width를 수정했습니다. 스크롤하는 순간 화면이 뚝뚝 끊겼고, 콘솔을 열어보니 이벤트가 초당 수십 번씩 발생하고 있었습니다. 여기서 scroll 이벤트란 사용자가 페이지를 스크롤할 때마다 브라우저가 연속으로 발생시키는 신호입니다. 문제.. 2026. 4. 28. CSS 폰트 가독성 (font-size, line-height, letter-spacing) 솔직히 처음에는 제 블로그 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 그런데 제가 직접 모바일로 읽어보니 두 문단도 안 가서 눈이 불편해졌습니다. 문제는 콘텐츠가 아니라 CSS였습니다. font-size, line-height, letter-spacing 설정 몇 가지를 바꾸고 나서야 같은 글이 다르게 느껴졌습니다. 이 경험을 바탕으로 블로그 가독성을 실질적으로 높이는 CSS 설정을 정리했습니다.내용이 좋아도 읽기 불편하면 독자는 떠난다. CSS 몇 줄 바꾸고 나서 체류 시간이 달라지는 걸 느꼈다.font-size와 line-height, 숫자 하나가 읽히는 경험을 바꾼다티스토리 기본 스킨은 font-size가 14px으로 설정되어 있습니다. font-size란 화면에 렌더링되는 글자의 기본 크기.. 2026. 4. 8. 이전 1 다음
