Browser Bits
Page Ruler - 웹페이지 픽셀 측정 icon

Page Ruler - 웹페이지 픽셀 측정

웹페이지의 모든 요소를 픽셀 단위로 측정합니다. 드래그로 영역 측정, 호버로 요소 크기 확인. 디자이너와 개발자를 위한 무료 도구.

지원 브라우저
Edge
버전
3.0.2
Edge에 추가

간격이 어긋난 건 눈에 보이는데, 확인하려면 스크린샷을 찍어 디자인 툴에 붙이게 됩니다. 실제 화면 위에 십자선과 픽셀 값을 바로 띄워 주는 확장 프로그램입니다.

Page Ruler는 웹페이지의 모든 요소나 영역을 픽셀 단위로 측정할 수 있는 확장 프로그램입니다. 드래그하여 영역을 측정하고, 요소 크기를 검사하고, 가이드라인을 추가하고, 측정값을 복사하세요 — 픽셀 퍼펙트 웹 디자인과 개발에 필요한 모든 도구를 제공합니다.

스크린샷

주요 기능

  • 드래그 측정

    페이지 어디에서든 클릭하고 드래그하여 측정 박스를 그리고 너비, 높이, 위치를 픽셀 단위로 확인합니다.

  • 요소 검사 모드

    HTML 요소 위에 마우스를 올리면 정확한 크기와 바운딩 박스를 즉시 확인할 수 있습니다.

  • 가이드라인

    수평 및 수직 가이드라인을 추가하여 페이지 전체에서 요소를 정렬하고 비교할 수 있습니다.

  • 색상 커스터마이징

    눈금자와 가이드라인 색상을 변경하여 어떤 배경에서도 잘 보이도록 설정할 수 있습니다.

  • 치수 복사

    측정된 너비, 높이, 위치 값을 클릭 한 번으로 클립보드에 복사합니다.

  • 픽셀 퍼펙트 정확도

    모든 측정값은 페이지의 렌더링된 레이아웃에서 직접 계산되어 정확한 결과를 제공합니다.

이럴 때 씁니다

  • 시안과 구현 화면 대조

    Element 모드는 커서 아래 요소의 테두리를 잡아 주고 너비와 높이를 커서 옆에 표시합니다. Show CSS info를 켜면 padding, margin, font-size까지 함께 나와 개발자 도구를 열지 않고도 시안과 비교할 수 있습니다. 클릭하면 그 값이 CSS 형태로 복사됩니다.

  • 두 요소 사이 간격 재기

    Distance 모드는 박스 하나로는 알 수 없는 값을 위한 것입니다. 버튼 하나를 클릭하고 제목을 클릭하면 두 요소 중심을 잇는 점선과 함께 직선 거리, 가로·세로 차이가 표시됩니다. 요소 단위로 집기 때문에 드래그를 정확히 맞출 필요가 없습니다.

  • 화면에서 크기와 색상 값 확인

    Show colors를 켜면 요소에 마우스를 올렸을 때 배경색과 글자색이 hex 값으로 같이 표시됩니다. 스테이징 사이트든 남이 만든 레이아웃이든 열리는 페이지라면 그대로 잽니다. 눈금 색상도 바꿀 수 있어 어두운 배경에서도 선이 묻히지 않습니다.

사용 방법

  1. 01Chrome 툴바에서 Page Ruler 아이콘을 클릭하여 측정 모드를 활성화합니다.
  2. 02페이지에서 클릭하고 드래그하여 사각형 영역을 측정합니다.
  3. 03요소 검사 모드로 전환하여 마우스 호버로 요소 경계를 자동 감지합니다.
  4. 04눈금자 가장자리를 클릭하여 가이드라인을 추가합니다.
  5. 05치수를 클릭하여 클립보드에 값을 복사합니다.

권한과 개인정보

단일 목적

Page Ruler has a single purpose: to provide on-page measurement tools that allow users to measure pixel dimensions of any area or element on a webpage by dragging a ruler or inspecting elements, and to copy those measurements for use in design and development.

activeTabPage Ruler requires the activeTab permission to overlay measurement tools (ruler, guidelines, dimension labels) on the current webpage and to read element bounding boxes when in Element Inspector mode. The extension injects a measurement overlay onto the active tab so users can visually measure areas and elements. This permission is only activated when the user explicitly clicks the extension icon.
storagePage Ruler uses the storage permission to save user preferences such as ruler color, guideline color, and default measurement mode. This ensures a consistent experience across browser sessions. All data is stored locally using chrome.storage.local and is never transmitted externally.

Page Ruler는 모든 처리를 브라우저 내에서 로컬로 수행합니다. 페이지 콘텐츠, 측정값, 브라우징 데이터를 외부 서버에 수집, 저장, 전송하지 않으며, 브라우징 활동을 추적하지 않습니다. 확장에 포함된 코드만 실행하며 원격 코드를 내려받지 않습니다.

자주 묻는 질문

웹페이지에서 픽셀 크기를 재려면 어떻게 하나요?

툴바 아이콘을 눌러 모드를 고르고 Start Measuring을 누르면 됩니다. 커서를 따라 가로·세로 보조선이 있는 십자선 오버레이가 표시되고, 측정값은 정수 픽셀로 커서 옆에 나타납니다. 오버레이가 페이지 안에서 동작하는 방식이라 chrome:// 설정 화면이나 확장 스토어 페이지에서는 표시되지 않습니다.

Drag, Element, Distance 모드는 무엇이 다른가요?

Drag는 원하는 영역을 사각형으로 끌어서 너비와 높이를 재는 방식으로, 요소 하나로 잡히지 않는 구간에 씁니다. Element는 커서 아래 요소에 맞춰 실제 크기를 읽습니다. Distance는 요소 두 개를 클릭해 중심 사이 직선 거리와 가로·세로 차이를 보여 줍니다.

측정한 값을 복사할 수 있나요?

두 가지 방법이 있습니다. 팝업에 마지막 측정값이 남아 있고 Copy Dimensions 버튼으로 너비×높이를 클립보드에 복사할 수 있습니다. Element 모드에서 Show CSS info를 켜 두면 요소를 클릭하는 순간 width, height, padding, margin, font-size가 CSS 형태로 복사되고, Show colors까지 켜면 배경색과 글자색도 함께 들어갑니다.

측정 모드를 끄려면 어떻게 하나요? 켜 두면 페이지 클릭이 안 되던데요.

Esc 키를 누르거나 팝업에서 Stop Measuring을 누르면 종료됩니다. 측정 중에는 투명한 레이어가 페이지를 덮어 클릭을 가로챕니다. 링크 위 요소를 재다가 페이지가 이동하는 것을 막기 위한 동작입니다. Distance 모드에서는 Esc를 한 번 누르면 먼저 찍은 요소만 취소되고, 다시 누르면 측정이 종료됩니다.

권한은 무엇을 쓰고 어떤 값이 저장되나요?

매니페스트에 선언된 권한은 activeTab과 storage이며, 측정할 페이지에 오버레이를 그리기 위해 모든 사이트용 콘텐츠 스크립트가 등록되어 있습니다. 어떤 사이트를 재게 될지 미리 알 수 없다는 것이 넓은 호스트 범위에 대한 등록 정보상 설명입니다. activeTab은 확장 아이콘을 눌렀을 때 적용되는 권한이고, Start Measuring을 누르기 전에는 아무것도 그려지지 않습니다. storage에는 선택한 눈금 색상, 마지막으로 쓴 모드, 두 개의 토글, 마지막 측정값이 남습니다.

관련 확장 프로그램

같은 카테고리: 개발자 도구