웹 페이지의 디자인 요소를 빠르고 효율적으로 분석할 수 있는 새로운 CSS 검사 도구 'PeekCSS'가 파이어폭스(Firefox)용으로 출시되었습니다. 크롬(Chrome)이나 엣지(Edge)에서도 사용할 수 있지만, 파이어폭스에 최적화된 네이티브(native) 방식으로 개발되어 더욱 매끄러운 사용자 경험을 제공합니다. 이 도구는 개발자들이 웹사이트의 디자인 시스템을 파악하고 재구축하는 데 드는 시간과 노력을 획기적으로 줄여줄 것으로 보입니다.
PeekCSS는 기존 브라우저 개발자 도구(DevTools)가 개별 요소 디버깅에 초점을 맞춘 것과 달리, 웹 페이지 전체의 디자인 구성 요소를 한눈에 파악하는 데 특화되어 있습니다. 예를 들어, 페이지의 모든 색상 팔레트(최대 120개 중복 제거된 색상), 사용된 모든 폰트(가중치, 크기, 역할별), 그리고 모든 이미지(ZIP 파일로 일괄 다운로드 가능)를 단 한 번의 스캔으로 추출합니다. 또한, 텍스트 대비(contrast)를 자동으로 검사하여 AA/AAA 등급 통과 여부를 알려주며, 추출된 디자인 정보는 CSS 변수, SCSS, JSON 또는 테일윈드(Tailwind) 설정으로 즉시 내보낼 수 있어 개발 워크플로우에 쉽게 통합됩니다.
이러한 기능들은 프론트엔드 개발자, 웹 디자이너, 프리랜서 등 웹사이트를 재구축하거나 감사(audit)하는 모든 이들에게 큰 가치를 제공합니다. 기존에는 개발자 도구에서 수십 번의 클릭과 수동 복사 작업을 거쳐야 했던 작업들을 PeekCSS는 단 한 번의 동작으로 해결해 주기 때문입니다. 이는 단순히 시간을 절약하는 것을 넘어, 디자인 시스템의 일관성을 유지하고 접근성(accessibility) 기준을 충족하는 데 필요한 반복적인 작업을 자동화하여 개발 및 디자인 프로세스의 전반적인 효율성과 품질을 향상시키는 데 기여할 것입니다.