Screen Ruler

Screen Ruler란?

Screen Ruler는 웹 페이지를 검사하고 측정하는 Chrome 확장 프로그램입니다. 디자이너와 개발자가 브라우저에서 직접 요소 크기, 간격, 선택자, 계산된 CSS, 색상, 스크린샷, 접근성 대비 문제, SEO 관련 메타데이터를 확인할 수 있도록 돕습니다.

이 확장 프로그램은 툴바 아이콘, 우클릭 컨텍스트 메뉴, 또는 키보드 단축키로 실행할 수 있습니다. 활성화되면 페이지 위에 검사 도구를 오버레이해 사용자가 사이트를 벗어나지 않고도 요소에 마우스를 올리거나 클릭해 레이아웃과 페이지 메타데이터를 확인할 수 있습니다.

주요 기능

• 요소 크기와 간격 측정: 픽셀 크기, 마진, 패딩, 요소 간 거리를 확인합니다.
• 요소 식별 정보 확인: 마우스 오버 또는 선택 시 태그 이름, ID, 클래스 이름을 표시합니다.
• 계산된 CSS 확인 및 복사: 사이드 패널에서 현재 요소의 계산된 스타일을 확인하고 CSS를 클립보드로 복사합니다.
• 눈금자와 색상 피커 사용: 정밀 측정을 위해 가로·세로 가이드를 배치하고 페이지 어디서든 색상을 샘플링합니다.
• 선택한 콘텐츠 캡처: 키보드 단축키로 선택한 요소의 잘라낸 스크린샷을 찍습니다.
• 페이지 품질 신호 검토: WCAG 대비 문제, 일반적인 SEO 문제, 메타 태그, Facebook, X, LinkedIn용 소셜 미리보기 데이터를 감지합니다.

Screen Ruler 사용 방법

확장 프로그램을 설치한 뒤 툴바 아이콘, 컨텍스트 메뉴, 또는 단축키 Alt/Option + Shift + R로 켭니다. 요소 위에 마우스를 올려 크기와 메타데이터를 확인하거나, 요소를 클릭해 선택하고 주변 콘텐츠와 비교할 수 있습니다.

사이드 패널에서는 계산된 CSS를 확인하고 복사할 수 있으며, 부모/자식 선택 단축키를 사용할 수 있고, 눈금자와 색상을 검사하고, 스크린샷, 메타 태그, 페이지 분석 도구에 접근할 수 있습니다. 또한 Chrome의 확장 프로그램 설정을 통해 사용자 지정 단축키도 지원합니다.

사용 사례

• 작업을 엔지니어링에 넘기기 전에 랜딩 페이지나 인터페이스 목업의 간격과 정렬을 확인할 때
• 프런트엔드 디버깅 중 요소의 정확한 CSS 클래스, ID, 계산된 스타일을 파악할 때
• 디자인 레퍼런스나 라이브 페이지에서 색상을 샘플링해 시각 시스템에 맞출 때
• 문서화나 버그 리포트용으로 단일 컴포넌트의 잘라낸 스크린샷을 캡처할 때
• 게시 전에 SEO 메타데이터 누락, 여러 H1, 대비 문제를 페이지에서 검토할 때

FAQ

Screen Ruler는 모든 웹사이트에서 작동하나요? 리스트에 따르면 모든 웹 페이지에서 작동합니다.

확장 프로그램은 어떻게 실행하나요? 확장 프로그램 아이콘, 우클릭 컨텍스트 메뉴, 또는 키보드 단축키 Alt/Option + Shift + R로 열 수 있습니다.

요소에서 CSS를 복사할 수 있나요? 네. 사이드 패널에 계산된 CSS 보기와 “Copy CSS” 버튼이 있습니다.

검사 기능 외에 더 고급 도구도 포함되나요? 네. 리스트에는 스크린샷, 색상 선택, 접근성 검사, SEO 분석, 소셜 미리보기 검사도 포함되어 있습니다. 일부 추가 기능은 PRO 요금제에 포함됩니다.

대안

• 브라우저 개발자 도구: 특히 Chrome의 내장 패널에서 작업할 때 오버레이 확장 프로그램보다 직접 검사와 디버깅에 유용합니다.
• 기타 브라우저 검사 확장 프로그램: 비슷한 도구들이 측정, 눈금자, CSS 검사, 색상 선택에 더 좁게 초점을 맞출 수 있습니다.
• 디자인 핸드오프 및 QA 도구: 브라우저 내 요소 검사보다 더 넓은 시각적 검토 워크플로가 필요할 때 더 적합합니다.
• 접근성 및 SEO 감사 도구: 주된 목적이 라이브 페이지 검사보다 감사 워크플로라면 더 깊은 문제 보고를 제공할 수 있습니다.