개발자가 DevTools 없이 웹페이지 요소의 CSS를 원클릭으로 확인하는 Chrome 확장 프로그램 SnapCSS를 개발했다

Context

DevTools는 강력한 도구이지만 버튼 하나만 확인하고 싶을 때 과도한 기능이 필요한 상황이 반복된다. 프론트엔드 개발자가 하루에 수십 번 다른 사이트의 컴포넌트 스타일을 확인하고 스페이싱 문제를 디버깅하는 반복 작업이 존재한다.

Technical Solution

• SnapCSS Chrome 확장 프로그램 설치 후 툴바 아이콘 클릭 시 inspect mode 활성화
• 요소 호버 시 해당 요소에 즉각 하이라이트 적용
• 요소 클릭 시 계산된 CSS를 정제된 형태로 플로팅 패널에 표시
• 패널 내 원클릭 클립보드 복사 기능 제공
• 전체 확장 프로그램 크기 61.4 KB로 경량화

Impact

상속된 모든 스타일 규칙을 확인하던 번거로운 DevTools 패널 대신 단순 클릭 操作으로 필요한 CSS만 즉시 획득 가능

Key Takeaway

복잡한 도구가 항상 정답이 아니다. 핵심 기능만 남기고 복잡도를 제거한 경량 도구가 특정 작업에서 더 높은 효율을 제공한다.