블로그UX2 블로그 프로그레스 바 - scroll 이벤트, requestAnimationFrame, 완독률 방문자 대부분이 글의 30% 지점에서 이탈하고 있었다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때 솔직히 좀 허탈했다. 숫자가 나를 판단하는 것 같은 느낌이랄까. 그런데 동시에 글이 문제인지 구조가 문제인지 알 수 없어서, 일단 독자가 어디까지 읽었는지 눈으로라도 보여주는 장치를 달아보고 싶었다.프로그레스 바가 완독률을 높인다는 보장은 어디에도 없었지만, 달기 전에 효과를 따지는 건 써보지도 않고 리뷰를 쓰는 것과 마찬가지라 일단 만들어보기로 했다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔다.scroll 이벤트와 requestAnimationFrame 사이에서 배운 것처음 구현할 때 scroll 이벤트 핸들러 안에서 바로 D.. 2026. 4. 28. CSS only 탭 UI-radio input, :target, details 사용방법 JavaScript 없이도 탭 UI를 구현할 수 있다는 말, 처음 들었을 때 저도 반신반의했습니다. 그런데 직접 세 가지 방식을 다 구현해보고 나서 생각이 바뀌었습니다. 쓸 수 있는 상황이 분명히 있고, 쓰면 안 되는 상황도 분명히 있습니다. 문제는 "CSS only로 모든 걸 해결할 수 있다"는 식의 글들이 그 경계를 잘 알려주지 않는다는 점입니다. 저는 그 경계를 직접 부딪히며 알게 됐습니다. 그리고 솔직히 말하면, 부딪힌 뒤에도 한동안 "내가 뭔가 잘못하고 있는 건가"를 먼저 의심했습니다. 방법의 한계라는 걸 인정하기가 쉽지 않았습니다.radio input으로 탭 만들기CSS only 탭의 가장 대표적인 방법은 radio input과 label을 조합하는 방식입니다. radio input에는 같은 .. 2026. 4. 20. 이전 1 다음
