Pixel Ruler

Pixel Ruler로 어떤 웹페이지에서든 픽셀을 측정하세요. 요소 크기와 여백, 간격을 바로 확인하는 화면 위 자입니다.

Pixel Ruler는 화면 위에 자를 올려 브라우저 안의 무엇이든 잴 수 있게 해줍니다. 툴바 아이콘을 클릭하고 레이아웃 위로 마우스를 드래그하면 정확한 거리가 CSS 픽셀로 표시됩니다. 요소에 커서를 올리면 너비, 높이, padding, 그리고 주변 블록까지의 간격이 함께 나옵니다. 브라우저가 페이지를 그릴 때 쓰는 것과 똑같은 CSS 픽셀을 읽기 때문에 수치는 DevTools와 정확히 일치합니다. 열어야 할 패널도, 내보낼 스크린샷도, 암산도 없습니다. 지금 보고 있는 사이트 위에 화면 눈금자가 그대로 얹힐 뿐입니다. 오버레이는 하나, 오갈 창이 없습니다: 📏 누른 채 드래그해 페이지 위 두 지점 사이의 거리를 잽니다. 📏 요소를 가리키면 크기와 padding, 이웃 요소와의 간격이 보입니다. 📏 세로·가로 가이드를 놓고 블록을 그 선에 맞춥니다. 기준이 되는 자가 화면에 항상 떠 있고, 키 하나면 커서 아래 요소의 CSS 선택자까지 결과와 함께 클립보드로 복사됩니다. 시작하는 방법, 세 단계: 1. 확장 프로그램을 설치하고 툴바에 고정합니다. 2. 작업 중인 페이지를 열고 아이콘을 클릭합니다. 3. 드래그하고, 올려보고, 재고 — 끝나면 Esc를 두 번 누릅니다. 프런트엔드 개발자는 시안과 레이아웃을 대조할 때 씁니다. 디자이너는 전달받은 디자인 파일이 이미 옛 버전일 때 페이지 자로 씁니다. QA 엔지니어는 "버튼이 좀 내려간 것 같아요" 대신 실제 수치로 버그를 올립니다. 운영 중인 사이트에서 픽셀을 빠르게 재야 하는 사람이라면 누구나 두 번의 클릭으로 끝냅니다. 이 웹용 자가 알려주는 것: - 두 지점 사이의 거리(픽셀) - 페이지 위 모든 요소의 너비와 높이 - padding, margin, 이웃 요소 사이의 간격 - 한 요소에서 주변 블록까지의 거리 - 창 위쪽과 왼쪽 가장자리의 눈금 - 방금 잰 요소의 태그, 클래스, CSS 선택자 - 정렬 확인에 다시 쓸 수 있는 가이드 키보드로 커서가 흔들리지 않습니다: → Shift는 측정을 가로 또는 세로축에 고정합니다 → 방향키는 현재 지점을 정확히 1 px씩 옮깁니다 → Esc는 현재 측정을 지우고, 한 번 더 누르면 페이지가 원래대로 돌아옵니다 → 단축키 하나로 결과를 클립보드에 복사합니다 한 번 설치하면 Windows, Linux, ChromeOS 사용자가 쓰는 것과 같은 픽셀 눈금자를, Mac 사용자가 쓰는 것과 같은 픽셀 눈금자를 그대로 쓰게 됩니다. 도구가 운영체제가 아니라 브라우저 안에 있기 때문입니다. 찾아 헤맬 픽셀 눈금자 다운로드도, 설치 파일도, 관리자 권한도 필요 없습니다. Chrome Web Store에서 클릭 한 번이면 됩니다. 출시 시점에는 무료 픽셀 눈금자이며 모든 기능이 모두에게 열려 있습니다. 별도 창으로 열리는 화면 눈금자 앱은 페이지를 스크롤하는 순간 엉뚱한 곳을 재기 시작합니다. 이 픽셀 눈금자 앱은 탭 안쪽에 그려져 콘텐츠와 함께 스크롤됩니다. 온라인에서 바로 쓰는 픽셀 눈금자입니다. 운영 중인 페이지에서도, 스테이징 서버에서도, 클라이언트 사이트에서도, 로그인 뒤에서도 동작합니다. 창을 찍은 정지 화면을 재는 데스크톱 픽셀 눈금자로는 할 수 없는 일입니다. 일러스트나 로고를 확인해야 한다면 이미지용 픽셀 눈금자로 쓰세요. 그림에 커서를 올리면 실제로 렌더링된 크기가 나오는데, 원본 파일의 크기와 다른 경우가 많습니다. 자주 묻는 질문 Q: DevTools를 열지 않고 화면의 픽셀을 재려면? A: 아이콘을 클릭하고 드래그하세요. 오버레이가 페이지 위에 얹히므로 눈에 보이는 그대로를 잽니다. 패널이 포커스를 가져가면 사라지는 호버 상태까지 잴 수 있습니다. Q: 화면 픽셀 자, 화면 눈금자, 픽셀 측정 도구, screen ruler, px ruler, pixelruler — 어느 쪽인가요? A: 전부 같습니다. 검색어만 다를 뿐 도구는 하나입니다. Q: 센티미터나 인치로 잴 수 있나요? A: 아니요. 픽셀 눈금자 도구라서 CSS 픽셀만 표시합니다. 스타일시트에 적는 바로 그 단위입니다. Q: 어디서나 동작하나요? A: 일반 웹사이트에서는 동작합니다. Chrome 시스템 페이지, 내장 PDF 뷰어, 교차 출처 iframe 내부는 모든 확장 프로그램에 닫혀 있고 이 확장도 예외가 아닙니다. Q: 어떤 데이터를 수집하나요? A: 전혀 없습니다. 네트워크 요청 0건, 계정도 가입도 없습니다. 설치할 때 불안한 권한을 요구하지 않고, 아이콘을 클릭한 뒤에야 페이지에 손을 댑니다. 예전 방식은 느리고 정확하지도 않습니다. 플라스틱 자를 모니터 유리에 대보거나 스크린샷에서 픽셀을 세는 식이죠. 컴퓨터 화면을 재는 자라면 브라우저 안에 있어야 하고, 레이아웃이 다시 흐를 때 같이 다시 그려져야 하며, 코드와 같은 단위로 말해야 합니다. 이 화면 오버레이 자가 하는 일이 정확히 그것이고, 그래서 웹사이트에서 쓰는 픽셀 눈금자가 그래픽 편집기에 붙여 넣은 화면 이미지 위에서 재는 자보다 낫습니다. 이 설명은 52개 언어로 제공되니, 웹 픽셀 눈금자는 여러분의 언어로도 검색 한 번이면 찾을 수 있습니다. 설치하고, 다음에 여는 페이지에서 픽셀을 재보세요. 화면 위의 자를 하루 종일 클릭 한 번 거리에 두시면 됩니다.