홈페이지를 제작하거나 상세페이지를 디자인하다 보면 “이 버튼은 몇 픽셀일까?”, “이미지 크기는 얼마나 될까?”처럼 요소의 정확한 크기가 궁금한 순간이 자주 있습니다.
예전에는 화면을 캡처한 뒤 포토샵에서 직접 크기를 재거나 개발자 도구를 열어 하나씩 확인했었습니다.
하지만 이런 방법은 시간이 오래 걸리고, 빠르게 레퍼런스를 분석하기에는 번거로운 경우가 많았습니다.
그러다 사용하게 된 것이 Page Ruler였습니다.
Page Ruler는 웹페이지에서 원하는 영역을 드래그하기만 하면 가로와 세로 크기를 픽셀(PX) 단위로 바로 확인할 수 있는 크롬 확장 프로그램입니다.
홈페이지 제작, 상세페이지 디자인, UI 디자인처럼 정확한 크기를 참고해야 하는 작업에서 지금도 자주 사용하는 도구입니다.
이번 글에서는 Page Ruler 설치 방법부터 실제 사용법, 실무 활용 방법까지 자세히 소개해 보겠습니다.
Page Ruler란?
Page Ruler는 웹페이지에 표시되는 요소의 크기를 픽셀 단위로 측정할 수 있는 크롬 확장 프로그램입니다.
복잡한 설정 없이 원하는 부분을 드래그하면 가로와 세로 길이가 바로 표시됩니다.
다음과 같은 작업에서 특히 활용도가 높습니다.
- 홈페이지 레이아웃 분석
- 버튼 크기 확인
- 카드 UI 측정
- 배너 크기 확인
- 이미지 크기 분석
- 콘텐츠 폭 확인
디자이너뿐 아니라 퍼블리셔와 기획자도 많이 사용하는 도구입니다.
설치 방법
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 Page Ruler를 검색합니다.
공식 확장 프로그램을 선택한 뒤 설치를 진행합니다.
Chrome에 추가
Chrome에 추가 버튼을 클릭합니다.
권한을 확인하면 설치가 완료됩니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘을 클릭한 후 Page Ruler를 고정해 두면 필요할 때 바로 사용할 수 있습니다.
기본 사용 방법
사용 방법은 매우 간단합니다.
홈페이지 열기
크기를 측정하고 싶은 홈페이지를 엽니다.
페이지가 모두 로딩된 후 실행하는 것이 좋습니다.
Page Ruler 실행
브라우저 상단의 Page Ruler 아이콘을 클릭합니다.
화면에 측정 도구가 나타납니다.
드래그하여 측정하기
측정하고 싶은 영역을 마우스로 드래그합니다.
그러면 가로와 세로 길이가 픽셀 단위로 표시됩니다.
예를 들어
- 버튼 : 220 × 56px
- 카드 : 380 × 420px
- 배너 : 1920 × 600px
처럼 정확한 크기를 확인할 수 있습니다.
어떤 상황에서 활용하면 좋을까요?
버튼 크기 분석
CTA 버튼은 클릭률에 영향을 주는 요소 중 하나입니다.
레퍼런스 홈페이지에서 버튼의 크기를 측정하면 디자인를 기획할 때 좋은 참고 자료가 됩니다.
카드 UI 분석
요즘 홈페이지는 카드 형태의 레이아웃을 많이 사용합니다.
카드의 가로 폭과 높이, 내부 콘텐츠 비율을 확인하면 레이아웃을 설계하는 데 도움이 됩니다.
배너 디자인
메인 비주얼이나 이벤트 배너의 크기를 분석할 때도 유용합니다.
특히 다양한 홈페이지를 비교해 보면 업종마다 자주 사용하는 배너 크기가 조금씩 다르다는 점도 확인할 수 있습니다.
콘텐츠 폭 확인
본문 영역이
- 1200px인지
- 1400px인지
- 1600px인지
확인하면 홈페이지 레이아웃을 구성할 때 많은 도움이 됩니다.
모바일 디자인 참고
반응형 홈페이지에서는 모바일 화면의 콘텐츠 폭과 버튼 크기를 확인할 때도 활용할 수 있습니다.
Page Ruler의 장점
직접 사용하면서 가장 만족했던 점은 측정 속도가 매우 빠르다는 것이었습니다.
예전에는 포토샵을 열거나 개발자 도구를 이용해 하나씩 확인해야 했지만,
Page Ruler를 사용한 이후에는 필요한 부분만 드래그하면 바로 크기를 확인할 수 있었습니다.
특히 여러 홈페이지를 비교 분석할 때 작업 시간이 크게 줄었습니다.
사용할 때 주의할 점
확대 비율 확인하기
브라우저 확대 비율이 100%가 아닌 경우에는 측정 결과가 실제와 다르게 보일 수 있습니다.
측정 전에는 확대 비율을 확인하는 것이 좋습니다.
반응형 홈페이지
브라우저 크기에 따라 레이아웃이 달라질 수 있습니다.
PC와 모바일 화면을 각각 확인하는 것이 좋습니다.
참고 자료로 활용하기
같은 버튼 크기라고 해서 모두 좋은 디자인가 되는 것은 아닙니다.
콘텐츠와 사용자 환경에 맞게 적용하는 것이 중요합니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
폰트와 글자 크기를 함께 분석할 수 있습니다.
ColorZilla
브랜드 컬러를 추출할 수 있습니다.
CSS Peeper
버튼의 CSS 속성과 여백까지 함께 분석할 수 있습니다.
GoFullPage
전체 페이지를 저장하면서 레이아웃을 비교하기 좋습니다.
Wappalyzer
홈페이지 제작 기술까지 함께 분석할 수 있습니다.
실무 활용 예시
홈페이지를 분석할 때 저는 항상 기술 → 폰트 → 컬러 → UI → 크기 → 저장 순서로 작업했었습니다.
먼저 Wappalyzer로 어떤 플랫폼인지 확인합니다.
다음으로 WhatFont를 실행해 폰트를 분석하고, ColorZilla로 브랜드 컬러를 확인합니다.
그 후 CSS Peeper를 이용해 버튼과 카드 스타일을 살펴보고, Page Ruler로 버튼 크기와 콘텐츠 폭, 이미지 크기를 측정합니다.
마지막으로 GoFullPage를 실행해 전체 페이지를 저장하고 프로젝트 폴더에 정리합니다.
이렇게 작업하다 보니 단순히 예쁜 홈페이지를 모으는 것이 아니라, 실제 프로젝트에 적용할 수 있는 디자인 데이터를 꾸준히 쌓을 수 있었습니다.
경험 나눔
예전에는 홈페이지를 보면서 “버튼이 적당히 큰 것 같다.”, “여백이 넓어서 보기 좋다.” 정도로만 생각했었습니다.
하지만 프로젝트를 계속 진행하면서 디자인는 감각만으로 만드는 것이 아니라 수치와 기준도 중요하다는 것을 느끼게 되었었습니다.
특히 버튼 크기나 콘텐츠 폭처럼 반복적으로 사용하는 요소는 좋은 레퍼런스를 기준으로 삼는 것이 작업 시간을 줄이는 데 도움이 되었습니다.
Page Ruler를 사용한 이후에는 좋은 홈페이지를 발견하면 자연스럽게 버튼과 카드 크기를 측정하는 습관이 생겼습니다.
그렇게 하나씩 정리한 자료는 새로운 프로젝트를 진행할 때 디자인 기준을 잡는 데 많은 도움이 되었습니다.
마무리
Page Ruler는 단순히 픽셀을 측정하는 도구가 아닙니다.
좋은 디자인의 기준을 수치로 확인하고, 레이아웃을 분석하는 습관을 만들어 주는 실무 도구입니다.
홈페이지 제작이나 상세페이지 디자인처럼 레퍼런스를 자주 분석하는 작업이라면 생산성을 높이는 데 큰 도움이 될 것입니다.
다음 글에서는 html.to.design을 활용해 웹사이트를 Figma 디자인 파일로 가져오는 방법을 자세히 알아보겠습니다.
