안녕하세요!

예전에 HTML, CSS를 처음 배울 때 유용하게 사용했던 Chrome 확장 프로그램 중에 Page Ruler Redux라는 도구가 있었습니다.

웹페이지에서 마우스로 영역을 드래그하면 가로, 세로 크기와 위치를 픽셀 단위로 확인할 수 있는 간단한 도구인데요. CSS 작업이나 웹페이지 레이아웃을 확인할 때 생각보다 자주 사용했습니다.

그런데 기존 프로젝트가 오래전에 Archive됐고, Chrome의 Manifest V3 전환 이후로는 예전처럼 사용할 수 없게 됐더라고요.

요즘 AI로 정말 많은 것을 만들 수 있게 됐는데, 이걸 사용할까? 했는데, 그래도 가볍게 만들어 봤습니다.

그래서 기존 오픈소스인 Page Ruler Redux를 기반으로 Claude Code와 Codex를 활용해 Manifest V3 버전으로 수정해 봤습니다.

처음부터 직접 개발한 프로젝트는 아닙니다. 기존 소스를 가져와 현재 Chrome 환경에 맞게 수정하고, 필요한 기능들을 개선한 포크 프로젝트입니다.

현재 지원하는 기능은 다음과 같습니다.

별도의 서버나 외부 API 연결 없이 브라우저에서 로컬로 작동합니다.

원작자인 Esteban Rocha와 초기 Page Ruler 개발자인 Peter Newnham의 기여를 명확하게 남기기 위해 별도의 Acknowledgements.md 문서도 작성했습니다. 라이선스 이력에서 확인되지 않은 부분 역시 함께 기록했습니다.

현재는 Chrome Web Store에 등록한 버전이 아니어서 GitHub에서 소스를 내려받아 Load unpacked 방식으로 설치해야 합니다.

직접 테스트한 Windows 11 / Chrome 환경에서는 잘 작동하고 있습니다.

Page Measure (Page Ruler MV3)

소개