온라인 자·눈금자 (화면 자)

픽셀 단위로 거리 재기

화면 자는 캔버스 위에서 드래그로 영역을 잡으면 그 크기를 픽셀 단위로 바로 알려줘요. 가로·세로 눈금자가 있고 마우스가 지나가는 위치의 좌표도 실시간으로 표시됩니다. 웹 디자이너가 UI 요소 크기 감 잡을 때, 스크린샷 위에 측정치 표시할 때, 디자인 시안에서 간격을 재볼 때 유용해요.

다른 화면 자 도구랑 비교

쓰는 법

1. 모드 선택 - 영역 재려면 '사각형', 두 점 거리면 '선'을 고르세요.
2. 드래그 - 캔버스 위에서 클릭한 채 마우스를 끌어 범위를 그립니다.
3. 실시간 값 확인 - 드래그하는 동안 가로·세로·마우스 좌표가 실시간 갱신돼요.
4. 기록 저장 - 완료한 측정은 자동으로 아래 목록에 저장됩니다.
5. 화면 정보 - 상단에 내 모니터 해상도, 뷰포트 크기, 픽셀 비율(DPR)이 같이 떠요.

쓰면 편한 점

• 브라우저에서 바로 실행되고 확장프로그램·데스크톱 앱 설치가 필요 없어요.
• 사각형 모드로 영역을, 선 모드로 두 점 사이 거리를 측정할 수 있어요.
• 가로·세로 자에 10px·50px·100px 눈금이 표시돼서 시각적으로도 크기 감이 잡힙니다.
• 마우스 좌표가 실시간으로 찍혀서 정확한 위치 파악이 쉬워요.
• 내 모니터 해상도·뷰포트 크기·DPR이 상단에 같이 나와서 환경 파악이 바로 됩니다.
• 측정 기록이 자동으로 쌓여서 여러 번 잰 결과를 한눈에 볼 수 있어요.
• 처리는 전부 브라우저 안. 서버로 뭔가 올라가지 않습니다.