화면 자 - 화면에서 픽셀 측정

드래그로 사각형·선을 그어 픽셀 단위로 거리를 재보세요. 마우스 좌표랑 화면 해상도까지 표시됩니다.

화면 정보
-
화면 너비
-
화면 높이
-
디바이스 픽셀 비율
-
뷰포트 너비
-
뷰포트 높이
측정 영역
px
클릭하고 드래그하여 영역을 측정하세요.
마우스 위치가 실시간으로 표시됩니다.
현재 측정값
— px
너비
— px
높이
마우스 X
마우스 Y
측정 기록
아직 측정 결과가 없습니다. 위의 캔버스에서 드래그하세요.
혹시 원하시는 툴이 아니신가요? 챗봇 질문하기로 원하시는 툴을 찾아보세요

픽셀 단위로 거리 재기

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

쓰는 법

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

쓰면 편한 점

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

다른 화면 자 도구랑 비교

항목FreeToolboxPicPickMeasureIt 확장
설치필요 없음데스크톱 앱브라우저 확장
사각형·선둘 다둘 다사각형만
눈금 자없음
해상도 정보없음없음
측정 기록없음없음
다크 모드시스템 따라없음
비용무료무료·유료무료

자주 묻는 질문

이게 실제 모니터 물리 크기를 재는 거예요?

아뇨, 캔버스 영역 안의 CSS 픽셀 거리를 재요. 실제 물리 픽셀 수치를 원하시면 상단에 표시된 장치 픽셀 비율(DPR)을 곱해서 환산하시면 됩니다.

웹 페이지 요소를 직접 잴 수 있어요?

이 도구는 자체 캔버스 안에서만 측정돼요. 웹 요소를 직접 재려면 브라우저 개발자 도구(F12)를 쓰시거나, 페이지를 스크린샷 찍어서 여기 올려놓고 재는 방법도 있어요.

장치 픽셀 비율(DPR)이 뭐예요?

물리 픽셀 대 CSS 픽셀 비율이에요. DPR이 2면 CSS 픽셀 1개가 실제로는 2×2=4개 물리 픽셀로 렌더링된다는 뜻이고, 레티나 디스플레이에서 흔해요.

측정 기록 어디 저장돼요?

세션 중에만 메모리에 담겨 있어요. localStorage나 서버 저장 없이, 페이지 새로고침하면 싹 지워집니다.

사각형과 선 모드 자유롭게 바꿀 수 있어요?

네, 캔버스 위의 버튼으로 언제든 전환 가능해요. 이전에 그은 측정값들은 전환해도 캔버스에 그대로 남아 있습니다.