화면 자 - 화면에서 픽셀 측정
드래그로 사각형·선을 그어 픽셀 단위로 거리를 재보세요. 마우스 좌표랑 화면 해상도까지 표시됩니다.
화면 정보
-
화면 너비
-
화면 높이
-
디바이스 픽셀 비율
-
뷰포트 너비
-
뷰포트 높이
측정 영역
px
클릭하고 드래그하여 영역을 측정하세요.
마우스 위치가 실시간으로 표시됩니다.
마우스 위치가 실시간으로 표시됩니다.
현재 측정값
— px
너비
— px
높이
—
마우스 X
—
마우스 Y
측정 기록
아직 측정 결과가 없습니다. 위의 캔버스에서 드래그하세요.
픽셀 단위로 거리 재기
화면 자는 캔버스 위에서 드래그로 영역을 잡으면 그 크기를 픽셀 단위로 바로 알려줘요. 가로·세로 눈금자가 있고 마우스가 지나가는 위치의 좌표도 실시간으로 표시됩니다. 웹 디자이너가 UI 요소 크기 감 잡을 때, 스크린샷 위에 측정치 표시할 때, 디자인 시안에서 간격을 재볼 때 유용해요.
쓰는 법
- 모드 선택 - 영역 재려면 '사각형', 두 점 거리면 '선'을 고르세요.
- 드래그 - 캔버스 위에서 클릭한 채 마우스를 끌어 범위를 그립니다.
- 실시간 값 확인 - 드래그하는 동안 가로·세로·마우스 좌표가 실시간 갱신돼요.
- 기록 저장 - 완료한 측정은 자동으로 아래 목록에 저장됩니다.
- 화면 정보 - 상단에 내 모니터 해상도, 뷰포트 크기, 픽셀 비율(DPR)이 같이 떠요.
쓰면 편한 점
- 브라우저에서 바로 실행되고 확장프로그램·데스크톱 앱 설치가 필요 없어요.
- 사각형 모드로 영역을, 선 모드로 두 점 사이 거리를 측정할 수 있어요.
- 가로·세로 자에 10px·50px·100px 눈금이 표시돼서 시각적으로도 크기 감이 잡힙니다.
- 마우스 좌표가 실시간으로 찍혀서 정확한 위치 파악이 쉬워요.
- 내 모니터 해상도·뷰포트 크기·DPR이 상단에 같이 나와서 환경 파악이 바로 됩니다.
- 측정 기록이 자동으로 쌓여서 여러 번 잰 결과를 한눈에 볼 수 있어요.
- 처리는 전부 브라우저 안. 서버로 뭔가 올라가지 않습니다.
다른 화면 자 도구랑 비교
| 항목 | FreeToolbox | PicPick | MeasureIt 확장 |
|---|---|---|---|
| 설치 | 필요 없음 | 데스크톱 앱 | 브라우저 확장 |
| 사각형·선 | 둘 다 | 둘 다 | 사각형만 |
| 눈금 자 | 예 | 예 | 없음 |
| 해상도 정보 | 예 | 없음 | 없음 |
| 측정 기록 | 예 | 없음 | 없음 |
| 다크 모드 | 예 | 시스템 따라 | 없음 |
| 비용 | 무료 | 무료·유료 | 무료 |
자주 묻는 질문
이게 실제 모니터 물리 크기를 재는 거예요?
아뇨, 캔버스 영역 안의 CSS 픽셀 거리를 재요. 실제 물리 픽셀 수치를 원하시면 상단에 표시된 장치 픽셀 비율(DPR)을 곱해서 환산하시면 됩니다.
웹 페이지 요소를 직접 잴 수 있어요?
이 도구는 자체 캔버스 안에서만 측정돼요. 웹 요소를 직접 재려면 브라우저 개발자 도구(F12)를 쓰시거나, 페이지를 스크린샷 찍어서 여기 올려놓고 재는 방법도 있어요.
장치 픽셀 비율(DPR)이 뭐예요?
물리 픽셀 대 CSS 픽셀 비율이에요. DPR이 2면 CSS 픽셀 1개가 실제로는 2×2=4개 물리 픽셀로 렌더링된다는 뜻이고, 레티나 디스플레이에서 흔해요.
측정 기록 어디 저장돼요?
세션 중에만 메모리에 담겨 있어요. localStorage나 서버 저장 없이, 페이지 새로고침하면 싹 지워집니다.
사각형과 선 모드 자유롭게 바꿀 수 있어요?
네, 캔버스 위의 버튼으로 언제든 전환 가능해요. 이전에 그은 측정값들은 전환해도 캔버스에 그대로 남아 있습니다.