직접 제작한 DevTool(P!npoint)을 소개합니다!

직접 만든 프론트엔드 UI 소스 추적 툴 P!npoint를 소개합니다.

P!npoint는 프론트엔드 프로젝트를 로컬에서 열고, 프리뷰 화면에서 UI 요소를 클릭하면 해당 요소와 관련된 코드 위치와 근거를 보여주는 개발 보조 툴입니다.

기본적인 기능은 다음과 같습니다.

• 프론트엔드 프로젝트를 로컬에서 열기

• 앱 내부에서 UI 프리뷰 확인

• 렌더링된 UI 요소 클릭

• 해당 요소의 소스 근거 확인

  • 파일

  • 라인

  • selector

  • DOM path

  • 매칭 이유

• VS Code 또는 Cursor에서 해당 소스 바로 열기

• 프로젝트 변경 감시

• 스냅샷을 통한 수정 전/후 비교

• 기본적인 Diff 확인

• 필요 시 변경사항 복구

이 툴을 만든 이유는, 익숙하지 않은 프론트엔드 프로젝트를 열었을 때 특정 버튼, 카드, 레이아웃, 스타일이 실제로 어느 파일에서 오는지 찾는 시간이 너무 오래 걸렸기 때문입니다.

P!npoint는 브라우저 DevTools나 에디터를 대체하려는 툴은 아닙니다.
대신 프리뷰 → 소스 근거 확인 → 에디터 이동 → 스냅샷/Diff 확인 흐름을 한곳에서 빠르게 이어주는 것을 목표로 하고 있습니다.

아직 부족한 점이 많지만, 이런 흐름이 실제 작업에 도움이 될지 피드백을 받아보고 싶습니다.

관심 있으신 분들은 아래에서 확인해 주세요.

https://snowtie.github.io/Pinpoint/