블로그UX2 블로그 프로그레스 바 (scroll 이벤트, requestAnimationFrame, 완독률) 방문자 대부분이 글의 30% 지점에서 이탈하고 있었습니다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때, 솔직히 좀 허탈했습니다. 글이 문제인지 구조가 문제인지 알 수가 없어서 프로그레스 바를 붙여보기로 했습니다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔습니다.scroll 이벤트와 requestAnimationFrame의 관계처음 코드를 짤 때 scroll 이벤트 핸들러 안에서 바로 style.width를 수정했습니다. 스크롤하는 순간 화면이 뚝뚝 끊겼고, 콘솔을 열어보니 이벤트가 초당 수십 번씩 발생하고 있었습니다. 여기서 scroll 이벤트란 사용자가 페이지를 스크롤할 때마다 브라우저가 연속으로 발생시키는 신호입니다. 문제.. 2026. 4. 28. CSS only 탭 UI (radio input, :target, details) JavaScript 없이도 탭 UI를 구현할 수 있습니다. CSS만으로 말이죠. 저도 처음엔 반신반의했는데, 실제로 써보니 생각보다 쓸 만한 상황이 분명히 있었습니다. 다만 "CSS only로 모든 걸 해결할 수 있다"고 단언하는 시각도 있는데, 제 경험상 그건 좀 다릅니다. 방법마다 분명한 한계가 있고, 어느 쪽이 낫다고 쉽게 말하기 어렵습니다.radio input으로 탭 만들기CSS only 탭의 가장 대표적인 구현 방식은 radio input과 label을 조합하는 방법입니다. 원리는 단순합니다. 브라우저가 radio input의 :checked 상태를 CSS로 감지할 수 있다는 점을 이용합니다. 여기서 :checked란 체크박스나 라디오 버튼이 선택된 상태를 CSS가 인식하는 가상 클래스(pseu.. 2026. 4. 20. 이전 1 다음
