Page Ruler는 웹 페이지에 Photoshop 스타일의 눈금자와 드래그 가능한 가이드 라인을 추가합니다. 뷰포트 상단과 왼쪽 가장자리에 픽셀 단위의 정확한 눈금자가 표시되고, 눈금자에서 가이드 라인을 드래그하여 거리를 측정하고, 정렬을 확인하며, 간격을 검증할 수 있습니다. 모든 작업이 라이브 페이지에서 직접 가능합니다.
디자이너들은 Figma나 Photoshop에서 눈금자와 가이드를 사용하여 간격과 정렬을 확인합니다. 하지만 HTML/CSS로 구현된 디자인에서는 DevTools를 열고 요소를 하나씩 호버하며 계산된 값을 목업과 비교해야 합니다. Page Ruler는 익숙한 눈금자-가이드 작업 흐름을 브라우저에 그대로 가져옵니다. 뷰포트 상단에 가로 눈금자가, 왼쪽 가장자리에 세로 눈금자가 픽셀 위치를 표시합니다. 눈금자에서 클릭하고 드래그하면 페이지에 가이드 라인을 끌어올 수 있습니다. 가이드는 색상으로 구분(가로는 파랑, 세로는 빨강)되며 픽셀 위치를 보여줍니다. 평행한 두 가이드 사이의 거리는 자동으로 계산되어 표시됩니다. 가이드를 드래그하여 위치를 조정하거나 더블 클릭으로 제거할 수 있습니다. 전체 오버레이는 방해가 적으며 페이지 레이아웃이나 상호작용에 영향을 주지 않습니다.
뷰포트 상단과 왼쪽 가장자리에 50픽셀마다 눈금이 있는 정확한 눈금자가 표시됩니다. 눈금자는 페이지와 함께 스크롤되며 페이지 원점(0,0)을 기준으로 정확한 픽셀 위치를 보여줍니다. 10px 간격으로 눈금이 있고 50px마다 라벨이 표시됩니다.
가로 눈금자에서 드래그하면 가로 가이드 라인이, 세로 눈금자에서 드래그하면 세로 가이드 라인이 생성됩니다. 가이드는 커서 위치에 따라 움직이며 정확한 픽셀 좌표(예: y: 200px)를 표시합니다. 드래그로 위치를 조정하고 더블 클릭으로 제거할 수 있습니다.
평행한 두 가이드를 배치하면 두 가이드 사이의 픽셀 거리가 자동으로 계산되어 연결 브라켓과 라벨로 표시됩니다. 가로 가이드 두 개를 120px 간격으로 배치하면 사이에 "120px" 라벨이 나타납니다.
가로 가이드는 파랑, 세로 가이드는 빨강으로 색상 구분되어 여러 가이드가 있을 때도 쉽게 구분할 수 있습니다. 각 가이드에는 위치를 표시하는 작은 라벨 배지가 붙습니다.
눈금자와 가이드는 투명한 오버레이로 렌더링되어 페이지의 DOM, 레이아웃, JavaScript에 영향을 주지 않습니다. 페이지 요소를 클릭하여 상호작용할 수 있으며, 오버레이는 눈금자와 가이드 핸들에서만 클릭을 처리합니다.
필요한 만큼 가이드를 배치할 수 있습니다. 페이지의 중요한 정렬 지점마다 가로와 세로 가이드를 만들어 완전한 측정 그리드를 만들 수 있습니다.
목업에서 헤더 높이가 80px이고 콘텐츠가 상단에서 120px 떨어져 있다고 되어 있습니다. 가로 가이드를 해당 위치에 배치하면 구현된 페이지가 디자인 스펙과 일치하는지 즉시 확인할 수 있습니다.
반복되는 요소(카드, 리스트 항목, 섹션)의 상단과 하단에 가이드를 배치하여 모든 요소가 동일한 간격을 가지고 있는지 검증하세요. 항목 사이의 불일치한 간격이 바로 드러납니다.
제목의 왼쪽 가장자리에 세로 가이드를 배치한 후 아래 문단 텍스트, 버튼, 이미지가 같은 선에 정렬되어 있는지 확인하세요. 몇 픽셀이라도 어긋난 정렬이 가이드에 대비되어 명확하게 보입니다.
요소의 왼쪽과 오른쪽 가장자리에 두 개의 세로 가이드를 배치하여 너비를 측정하세요. 가로 가이드를 두 개 배치하면 높이를 측정할 수 있습니다. 자동 계산된 거리가 정확한 픽셀 크기를 제공합니다.
일반적인 브레이크포인트 너비(768px, 1024px, 1280px)에 세로 가이드를 배치하고 브라우저 창 크기를 조정하며 각 브레이크포인트에서 요소가 올바르게 리플로우되는지 확인하세요. 가이드는 시각적 기준점으로 고정되어 유지됩니다.
DevSuite Pro 플로팅 독을 열고 Page Ruler 아이콘을 클릭하세요. 뷰포트 상단과 왼쪽 가장자리에 픽셀 정확한 눈금자가 나타납니다.
상단 눈금자에서 클릭하고 드래그하면 가로 가이드 라인이, 왼쪽 눈금자에서 드래그하면 세로 가이드 라인이 생성됩니다. 가이드는 커서를 따라 움직이다가 놓은 위치에 픽셀 단위로 고정됩니다.
각 가이드에 픽셀 위치(예: y: 200px)가 표시됩니다. 평행한 두 가이드가 배치되면 거리가 연결 브라켓과 라벨로 자동 표시됩니다.
가이드를 드래그하면 새 위치로 이동하고 거리 라벨이 실시간으로 업데이트됩니다. 가이드를 더블 클릭하면 페이지에서 제거됩니다.
Page Ruler 아이콘을 다시 클릭하면 모든 눈금자와 가이드가 숨겨집니다. 같은 세션에서 다시 활성화하면 이전 가이드 위치가 유지됩니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
