화면 픽셀 측정기
🔢 계산/생성화면 위 영역을 드래그하여 픽셀 크기를 측정합니다. mm 변환·여러 측정값 저장을 지원.
• 측정 시작 버튼을 누르고 영역을 드래그하세요
• mm 단위는 DPI 설정에 따라 달라집니다 (기본 96)
• 정확한 mm 측정을 위해 모니터 DPI를 확인하세요
📏 화면 자란?
화면 자는 모니터에서 영역을 드래그하여 픽셀 단위로 크기를 측정하는 도구입니다. DPI(인치당 픽셀 수) 설정을 기준으로 mm·인치 단위로도 환산합니다.UI/UX 디자인, 웹 개발, 이미지 크기 확인 등에 필수적인 도구입니다.여러 영역을 동시에 측정하고 기록으로 남길 수 있습니다.
💡 핵심 포인트
설치형 자 앱 없이 브라우저에서 바로 측정. 디자인 검수나 마진 확인이 즉시 가능합니다.
📊 주요 해상도별 DPI
| 디스플레이 | 일반 DPI | 특징 |
|---|---|---|
| 일반 모니터 | 96 DPI | Windows 기본값 |
| MacBook Pro | 110-220 DPI | Retina 디스플레이 |
| 4K 27인치 | 163 DPI | 고해상도 |
| 스마트폰 | 300-500+ DPI | 초고밀도 |
| 인쇄물 | 300+ DPI | 출력 품질 기준 |
🔍 CSS 픽셀과 실제 픽셀
측정값이 예상과 다를 때는 대부분 픽셀의 정의가 두 가지라는 점이 원인입니다. 웹에서 말하는 픽셀(CSS 픽셀)과 화면의 물리적 점(디바이스 픽셀)은 다를 수 있습니다.
| 환경 | 배율(DPR) | CSS 100px의 실제 픽셀 |
|---|---|---|
| 일반 모니터 | 1x | 100px |
| 윈도우 배율 125% | 1.25x | 125px |
| 맥 레티나 | 2x | 200px |
| 최신 스마트폰 | 3x | 300px |
디자인 시안이 @2x로 제작된 경우, 시안의 200px 요소가 실제 화면에서는 CSS 100px입니다. 시안 수치와 측정값이 정확히 두 배 차이 난다면 이 경우일 가능성이 높습니다. 측정 전에 브라우저 확대/축소를 100%로 되돌리는 것도 중요합니다.
📐 디자인 검수에 자주 쓰이는 기준
측정한 값이 적절한지 판단할 때 참고할 만한 일반적인 기준입니다.
| 항목 | 권장 크기 | 이유 |
|---|---|---|
| 터치 영역 | 44~48px 이상 | 손가락으로 정확히 누를 수 있는 최소 크기 |
| 본문 글자 | 16px 이상 | 모바일에서 확대 없이 읽히는 기준 |
| 여백 단위 | 4 또는 8의 배수 | 일관된 간격 체계 유지 |
| 본문 한 줄 길이 | 45~75자 | 시선 이동이 편한 범위 |
여백이 13px, 17px처럼 어중간한 값으로 측정된다면 간격 체계가 무너졌다는 신호일 수 있습니다. 8px 단위로 정리하면 화면 전체의 리듬이 눈에 띄게 정돈됩니다.
💡 화면 측정 팁
- DPI 확인: 정확한 mm 측정을 위해 모니터 사양에서 DPI 확인
- 배율 주의: Windows/Mac 화면 배율이 100%가 아니면 픽셀 계산이 달라짐
- 디자인 검수: 시안의 여백, 버튼 크기가 디자인 스펙과 일치하는지 확인
- 반응형 테스트: 다양한 해상도에서 요소 크기 변화 측정
자주 묻는 질문
DPI를 어떻게 확인하나요?▼
모니터 사양서에서 확인하거나, 해상도(가로 픽셀)를 화면 가로 크기(인치)로 나눕니다. 예: 1920px / 23.8인치 ≈ 81 DPI. 기본값 96 DPI는 대략적인 참고용입니다.
브라우저 확대/축소 시에도 정확한가요?▼
아닙니다. 브라우저 확대/축소(Ctrl+휠)는 픽셀 계산에 영향을 줍니다. 정확한 측정을 위해 100% 배율에서 사용하세요.
다른 앱의 요소도 측정할 수 있나요?▼
이 도구는 웹 브라우저 내 측정 영역에서만 작동합니다. 전체 화면을 측정하려면 OS의 스크린 캡처 도구나 전용 화면 측정 앱을 사용하세요.
디자인 시안 수치와 측정값이 두 배 차이 나요.▼
시안이 @2x로 제작된 경우입니다. 시안의 200px 요소는 실제 화면에서 CSS 100px에 해당합니다. 레티나 디스플레이나 화면 배율 설정도 같은 원인이 될 수 있습니다.
mm 값이 실제 자로 잰 것과 달라요.▼
DPI 설정이 실제 모니터와 다르기 때문입니다. 해상도(가로 픽셀)를 화면 가로 길이(인치)로 나눈 값을 DPI에 입력하면 정확해집니다.
버튼 크기는 몇 px이 적당한가요?▼
터치로 누르는 요소는 44~48px 이상을 권장합니다. 손가락으로 정확히 누를 수 있는 최소 크기로 널리 쓰이는 기준입니다.