CSS Selector 추출부터 코드 생성까지, Userscript 개발 생산성 극대화 도구

Context

Userscript 작성 시 DevTools와 코드 에디터를 반복 이동하는 번거로운 작업 흐름. CSS Selector 복사 및 단순 반복 패턴 구현에 과도한 디버깅 시간 소요. 페이지 리로드와 콘솔 확인 중심의 비효율적인 개발 루프.

Technical Solution

• 브라우저 사이드 패널 기반 GUI 설계를 통해 DevTools와 유사한 사용자 경험 제공 및 컨텍스트 스위칭 비용 최소화
• Svelte와 WXT 프레임워크를 결합하여 크롬 및 파이어폭스 교차 브라우저 호환성 확보 및 매니페스트 설정 단순화
• 빈번하게 사용되는 이벤트 리스너와 키보드 이벤트 처리 로직을 추상화한 전용 API 제공으로 코드 작성량 감소
• CodeMirror 기반 JS 에디터를 내장하여 구문 강조 및 자동 완성 기능을 통한 개발 편의성 증대
• Bun 패키지 매니저와 Tailwind CSS를 활용하여 빌드 속도 향상 및 일관된 UI 컴포넌트 체계 구축
• GitHub Actions와 Renovate를 통한 자동 빌드 및 종속성 업데이트 파이프라인 구축으로 프로젝트 유지보수 자동화

Key Takeaway

도구의 독창성보다 사용자 작업 흐름(Workflow)의 최적화가 제품의 실질적 가치를 결정함. 복잡한 기능을 제공하기보다 핵심 페인 포인트를 해결하는 단순하고 직관적인 UI/UX 설계가 우선되어야 함.