mousedown 이벤트와 CDN 직접 접근으로 광고 없는 2가지 웹 도구를 개발함

I built 2 free web tools to solve problems that annoyed me — here's what I learned

Hamaad Butt2026년 4월 2일2분beginner

AI 요약

Context

유튜브 썸네일 다운로드 시 스팸 팝업이 반복 노출되는 환경 문제와 CPS 테스트 사이트에서 event debouncing으로 인한 입력 지연 문제가 존재함.

YouTube 이미지 CDN 직접 활용: 페이지 스크래핑 대신 CDN URL을 직접 호출하여 HD(1280×720), SD(640×480) 등 다양한 해상도 썸네일 다운로드함
mousedown 이벤트 사용: click 이벤트 대신 raw mousedown 이벤트를 사용하여 브라우저 내장 클릭 지연 제거함
DOM reflow 최적화: 테스트 구간 중 불필요한 DOM 리플로우를 제거하여 0-latency 클릭 감지 달성함
채널 프로필 이미지 및 배너(2560×1440) 원본 크기 다운로드 지원함
터치 이벤트 구현으로 모바일 환경에서도 완벽 작동함

단순 도구일수록 하나의 기능을 극도로 잘 수행해야 사용됨. 성능 자체가 기능이며 사용자는 즉각적 반응과 부드러운 동작을 즉시 인지함.

실천 포인트

브라우저 이벤트 처리 최적화가 필요한 도구에서 click 대신 mousedown 이벤트를 사용하고 불필요한 DOM 연산을 제거하면 입력 지연을 제거할 수 있음. 외부 리소스 접근 시 스크래핑보다 CDN 직접 호출이 속도와 안정성 측면에서 유리함.

태그