화면 자

앱이 하는 일

화면의 무언가를 3단계로 측정하는 방법

1. 자를 재려는 시작 지점에 0 눈금 가장자리를 맞춥니다.
2. 마커를 반대쪽 끝으로 드래그합니다 — 또는 방향키(Shift로 ×10)로 픽셀 단위까지 다듬습니다.
3. 값을 읽습니다: 큰 수치와 캔버스 위 칩이 현재 픽셀 거리를 함께 보여 줍니다.

Windows에는 화면 자가 없습니다

실물을 재는 것은 쉽지만 픽셀을 재는 것은 이상하리만큼 어렵습니다. Windows에는 화면 위 거리를 보여 주는 것이 없습니다: DevTools는 브라우저 안에서, 이미지 편집기는 자기 캔버스 안에서만 재고, 나머지는 사람이 모눈선을 세어야 합니다. 화면 자는 그 빠진 도구입니다: 100 px마다 눈금과 라벨이 있는 얇은 창, 마우스를 따라오는 드래그 가능한 마커 선(B), 실시간으로 갱신되는 수치 — ≈ 482 px. 너비에는 가로, 높이에는 세로, 클릭 한 번으로 전환.

유령 모드와 픽셀 정밀도

화면 측정을 실제로 쓸 수 있게 만드는 두 가지 디테일: 투명도와 미세 조정. 불투명도 슬라이더(40–100 %)는 창을 유령으로 만들어 측정 중인 인터페이스 위에 올려놓을 수 있게 합니다 — Alt+Tab도, 스크린샷도 필요 없습니다. 마커는 거친 작업에는 드래그로, 정밀 작업에는 방향키로 움직입니다: 누를 때마다 1픽셀, Shift로 10픽셀. «마커 초기화» 버튼은 마커를 0으로 되돌리고, 캔버스 위 값 칩은 지금 보는 바로 그 자리에 거리를 표시하므로 시선이 이동할 필요가 없습니다. 자는 실제 화면 픽셀을 읽습니다. 디스플레이 배율이 100 %라면 그것은 CSS와 디자인 도구가 말하는 px 그대로입니다. Windows 배율이 더 높으면 시스템은 배율이 적용된 단위로 동작합니다 — 화면의 모든 것처럼.

작은 도구, 매일의 사용

디자이너는 살아 있는 브라우저에서 간격과 브레이크포인트 너비를 검증합니다. 개발자는 수정을 쓰기 전에 그 수수께끼의 패딩이 8 px인지 12 px인지 확인합니다. QA 엔지니어는 터치 영역이 최소 44 px인지 확인합니다. 프레젠테이션을 만드는 사람은 프로젝터 해상도에서 이미지에 남는 영역을 측정합니다. 그리고 누구나 가끔은 그 창이 실제로 얼마나 넓은지 알고 싶어 합니다. 화면 자는 마커 위치를 기억하는 작은 오프라인 창 하나 — 계정도, 텔레메트리도, 설정할 것도 없습니다.

기능

• 드래그 가능한 마커 선과 실시간 픽셀 수치
• 클릭 한 번으로 가로·세로 모드
• 10 px마다 눈금, 100 px마다 라벨
• 방향키 정밀도: 1 px, Shift로 10 px
• 초기화 버튼이 마커를 0으로 되돌림
• 불투명도 40 %부터 — 측정 중인 인터페이스 위의 유령
• «항상 위에 표시»가 브라우저와 편집기 위에 유지
• 캔버스 위 값 칩 — 보는 곳에 숫자
• 디스플레이 배율 100 %에서 보정 불필요
• 마커 위치가 실행 간에 기억됨
• 다크·라이트 테마, 오프라인 동작
• 16개 인터페이스 언어, 광고·텔레메트리 없음

스크린샷