CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
모든 웹페이지에서 픽셀 단위로 완벽한 거리와 격자를 측정합니다.
Image from store
Description from store
훌륭한 디자인의 숨은 영웅은 픽셀 정확도입니다. 단 하나의 픽셀이라도 정렬이 어긋나면 그리드의 리듬이 깨지고, 텍스트가 중앙에서 벗어나거나, 전체 구성 요소가 "거의"는 맞지만 완전히 일치하지는 않는 것처럼 보일 수 있습니다. Grid Ruler Lite는 프런트엔드 개발자, UI/UX 디자이너, QA 테스터, 그리고 시각적인 완성도에 관심 있는 모든 사람에게 브라우저에서 즉시 측정할 수 있는 툴킷을 제공합니다. 무거운 디자인 소프트웨어도, 복잡한 DevTools 패널도, 외부 앱에 스크린샷을 셔플링할 필요도 없습니다. 클릭 한 번으로 이 확장 프로그램을 사용하면 크기 조절이 가능한 눈금자, 그리드에 맞춤 가이드, 그리고 선택 가능한 기준선 그리드를 모든 웹페이지 위에 오버레이하여 간격을 확인하고, 8포인트 그리드를 검증하고, 레이아웃 버그의 증거를 몇 초 만에 포착할 수 있습니다.
Grid Ruler Lite의 장점은 무엇인가요?
원클릭 활성화, 원클릭 해제
도구 모음 아이콘을 클릭하거나 브라우저 키보드 설정에서 설정한 바로가기를 호출하면 확장 프로그램이 가벼운 파일을 주입합니다.<canvas> 오버레이는 자체 Shadow-DOM에 캡슐화되어 있습니다. 페이지의 CSS는 간섭할 수 없으며, 오버레이는 테스트 중인 DOM 트리를 변경하지 않습니다. 다시 클릭하면 모든 가이드, 그리드, 레이블이 사라집니다. 페이지가 새로고침되지 않고, 이벤트 리스너도 남지 않습니다.
툴킷에 꼭 필요한 이유
시간 절약: DevTools에서 패딩을 측정하려면 중첩된 상자를 파고들어 테두리와 여백 값을 머릿속으로 입력해야 합니다. Grid Ruler Lite는 한 번의 드래그로 거리를 시각적으로 표시합니다.
버그 감소: 스테이징이나 더 나쁜 경우 프로덕션 단계에 이르기 전에 작은 간격 회귀를 포착합니다. 특히 QA의 눈이 닿지 않는 반응형 중단점에서 더욱 그렇습니다.
협업 개선: 디자이너는 배포된 빌드에 8포인트 그리드를 직접 오버레이하고 스크린샷을 공유하여 Figma 주석 없이 개발자에게 정확한 픽셀 피드백을 제공할 수 있습니다.
집중력 유지: 버튼 크기를 측정하기 위해 포토샵을 열거나 스케치 파일을 열 필요가 없습니다. 모든 작업은 최종 사용자가 보는 그대로 라이브 페이지에서 진행됩니다.
교육 및 문서화: 제품 관리자와 기술 문서 작성자는 눈금자 스크린샷을 통해 레이아웃 동작을 보여주고 모든 이해 관계자에게 사양 문서를 더 명확하게 보여줄 수 있습니다.
대상 사용자 그룹
사용자 그룹
프런트엔드 개발자
CSS 간격, Flexbox 간격 및 중단점 간 구성 요소 정렬을 확인해야 합니다. 눈금자 드래그, 가장자리에 맞추기, 가이드 잠금, PR 검토를 위한 스크린샷 내보내기
UI/UX 디자이너
개발 빌드가 8포인트 또는 10포인트 디자인 시스템을 준수하는지 확인해야 합니다. 기준선 그리드 오버레이, 패딩 측정, 주석이 달린 PNG 공유
QA 테스터
명확한 증거와 함께 픽셀 단위까지 완벽한 버그를 보고하세요
빠른 측정 및 원키 스크린샷 캡처가 버그 추적기로 바로 전송됩니다.
콘텐츠 편집자 및 PM
CMS 기반 페이지에서 헤드라인 랩, 광고 슬롯 간격 및 카드 레이아웃 확인 비기술적 오버레이로 DevTools 복잡성 방지
교육자 및 학생
브라우저에서 디자인 원칙, 그리드 이론 및 반응형 레이아웃을 실시간으로 가르치고 외부 도구 없이 시각적으로 실시간으로 데모를 제공합니다.