미리보기

프로젝트 개요

SySpy는 System + Spy 의 합성어로, 현재 보고 있는 웹사이트의 컬러 및 타이포그래피 등의 디자인 시스템을 추출해서 보여주는 크롬 익스텐션입니다. Product Hunts에 공개하는 것을 목표로 작업 중입니다.

프로젝트 기능

• 페이지 내 모든 DOM Element의 컬러 속성을 추출해 Hex 값을 기준으로 색상 목록을 정렬하여 보여줌
• 페이지 내 모든 DOM Element의 타이포그래피 속성(font-family, font-weight, font-size, line-height, word-spacing)을 모아 태그명과 font-size를 기준으로 정렬하여 보여줌
• 그 외 기능은 순차적으로 추가 예정

기술 스택

언어: JavaScript

설치 및 실행 방법

해당 폴더를 다운로드 받은 후, Chorme Extension 목록 창에서 Load unpacked 버튼을 클릭, 해당 폴더를 업로드하면 SpSpy를 실행해볼 수 있습니다.

개인적인 경험 및 느낀점

나에게 도움이 되는 서비스를 개발하는 것에 대한 즐거움

저는 이 프로젝트를 하며 나의 생산성 향상에 도움이 될 수 있는 될 수 있는 서비스를 개발하는 것에 대한 즐거움을 느끼게 되었습니다. 이 서비스를 만들게 된 동기는 다음과 같은데요. UI 디자인을 하면서 다른 서비스들은 어떤 식으로 디자인 시스템을 구성했을지 궁금할 때면 매번 크롬 디버깅 툴을 이용해 Element를 하나하나 분석해야 한다는 것이 너무 귀찮았습니다. 그러다가 디자인 시스템을 분석해 한번에 보여주는 크롬 익스텐션이 있으면 어떨까? 생각하게 되었습니다. 아직은 개발하는 단계이지만 완성이 되면 프로덕트 헌트에 업로드, 주변 디자이너에게 공유하는 등의 방법을 통해 유저들을 모아볼 계획입니다.

HTML DOM 구조를 활용한 로직 개발

이 서비스의 기본적인 로직은 DOM에 있는 스타일 요소를 분해하여 보여준다는 것입니다. 코드스쿼드 과정을 통해 DOM 을 파싱해보며 DOM에 대한 공부를 해보았기에 떠올릴 수 있었던 로직이었습니다. 배운 CS 개념을 적용하여 제품을 만들 수 있어 즐거운 경험이었습니다.

Chrome API 에 대한 이해

Chrome에서 제공해주는 다양한 API가 있다는 사실을 깨달았습니다. 크롬 익스텐션에서는 팝업 영역과, 실제 보여지는 페이지의 환경이 완전히 분리되어 있는데 이를 연결해주는 매개체로 chrome.storage.local 이라는 Chrome API를 사용했습니다. 이외에도 더 재미있는 API들이 있어 만들 수 있는 크롬 익스텐션은 무궁무진하겠구나, 하는 생각이 들어 크롬 익스텐션 개발에 대한 재미를 느끼게 되었습니다.