온라인 자 정확도 — 왜 대부분 틀리고, 어떻게 고칠 수 있을까?

"온라인 자"를 검색해서 첫 번째 결과를 열고, 신용카드를 화면에 대어 봤더니 카드가 20%나 작거나 크게 표시돼요. 자가 틀린 거예요 — 그것도 대부분이 그래요.

이건 신기한 일이 아니에요. 인터넷상의 거의 모든 온라인 자에 내포된 잘못된 가정 하나에서 비롯되는 예측 가능한 실패예요.

96 PPI라는 거짓말

CSS 규격은 1인치 = 96픽셀로 정의해요. 모든 브라우저가 이 규약을 따르죠. 그래서 웹사이트가 96픽셀짜리 선을 그리고 "1인치"라고 하면 브라우저도 별말이 없어요.

문제는: 96 PPI가 현실과 맞았던 건 CRT 모니터 시절이에요. 요즘 화면은 92 PPI(일반 24인치 데스크탑 모니터)부터 460 PPI 이상(iPhone 15 Pro)까지 다양해요. 460 PPI 화면에서 96픽셀을 그리면 겨우 5mm 정도의 선이 나와요 — 1인치와는 거리가 먼 수치죠.

대부분의 온라인 자가 바로 이런 식이에요. 픽셀을 그리고 센티미터나 인치로 이름 붙이면서, 그 픽셀이 여러분의 화면에서 실제로 물리적인 단위와 일치하는지는 확인하지 않아요.

인기 온라인 자 6종 직접 테스트

실제로 얼마나 심각한지 확인하기 위해, 세 가지 기기에서 인기 온라인 자 도구 6종을 테스트했어요: 24인치 1080p 모니터(92 PPI), 13인치 MacBook Air(227 PPI), iPhone 15(460 PPI).

표준 신용카드(85.6mm 너비, ISO 7810)를 각 도구의 화면 자에 대어서 측정했어요.

도구	24" 모니터	MacBook Air 13"	iPhone 15
도구 A (보정 없음)	-4%	+58%	+380%
도구 B (보정 없음)	-3%	+61%	+372%
도구 C (수동 DPI 입력)	설정 후 정상	설정 후 정상	모바일 미지원
도구 D (고정 96 PPI)	-4%	+58%	+380%
도구 E (자동 감지 주장)	-8%	+42%	+210%
Screen Ruler Online (보정됨)	< 1%	< 1%	< 1%

패턴이 명확해요: 보정을 건너뛰는 도구들은 96 PPI에 가까운 딱 한 종류의 화면에서만 우연히 맞아요. 노트북에서는 4060% 오차가 나고, 스마트폰에서는 200400% 오차가 생겨요.

"자동 감지"가 대부분 실패하는 이유

일부 도구는 window.screen.width, devicePixelRatio, 또는 사용자 에이전트 문자열을 사용해 화면 크기를 자동으로 감지한다고 주장해요. 솔깃해 보이지만 여러 이유로 실패해요:

브라우저 보고가 불안정해요. screen.width 속성은 물리 픽셀이 아닌 CSS 픽셀을 반환해요. 기기 픽셀 비율이 2인 MacBook은 브라우저에서 1440픽셀 너비로 표시되지만 — 화면은 실제로 2880픽셀이에요. DPR과 화면 물리적 크기를 모르면 계산이 성립하지 않아요.

디스플레이 스케일링이 가정을 깨뜨려요. Windows 사용자들은 125% 또는 150% 스케일링으로 쓰는 경우가 많아요. macOS도 디스플레이 설정에 따라 "실효 해상도"를 조정해요. 둘 다 보고된 픽셀과 실제 크기의 관계를 바꿔요.

확대/축소 수준은 감지되지 않아요. 브라우저를 110%로 확대해 두었다면(몇 달 전에 조정하고 잊었을 수도 있어요), 픽셀 기반 측정이 모두 10% 어긋나요. 대부분의 자동 감지 방법은 이 점을 고려하지 않아요.

외부 모니터가 상황을 복잡하게 만들어요. 노트북에 외부 디스플레이를 연결해서 쓰는 사람들이 많아요. 브라우저가 외부 모니터에 출력하면서 노트북 화면 정보를 보고하거나, 그 반대로 작동할 수도 있어요.

보정이 실제로 작동하는 방식

보정은 이 모든 문제를 우회해서 현실을 직접 측정해요.

방식은 이래요: 크기를 알고 있는 물리적 물체를 화면에 올려놓고, 화면의 자가 실물과 일치할 때까지 조정해요. 이러면 CSS 픽셀과 물리적 밀리미터 사이의 정확한 비율을 얻을 수 있어요 — 여러분의 특정 화면, 현재 확대/축소 수준, 현재 디스플레이 설정에서.

Screen Ruler Online은 여러 보정 물체를 지원해요:

• 신용카드/직불카드 (85.6×54.0mm) — 거의 모든 사람이 가지고 있어서 가장 많이 쓰이는 선택지
• 미국 25센트 (24.26mm 직경)
• 유로 1유로 동전 (23.25mm)
• 영국 1파운드 동전 (23.43mm)
• 인도 5루피 동전 (23.0mm)
• A4 용지 (297×210mm)

신용카드를 권장하는 이유:

1. 전 세계적으로 크기가 표준화되어 있어요 (ISO 7810)
2. 정밀한 정렬이 가능할 만큼 크기가 충분해요
3. 딱딱하고 평평해서 휘거나 변형되지 않아요
4. 거의 모든 사람 손 닿는 곳에 있어요

보정 후에는 설정이 브라우저 로컬 스토리지에 저장돼요. 기기를 바꾸거나 디스플레이 스케일링을 변경하지 않는 한 다시 보정할 필요가 없어요.

실제로 기대할 수 있는 정확도는?

올바르게 보정했을 때 현실적으로 얻을 수 있는 정확도예요:

화면 유형	예상 정확도	이유
스마트폰 (300+ PPI)	±0.3mm	높은 픽셀 밀도 = 세밀한 해상도
태블릿 (200~300 PPI)	±0.5mm	좋은 밀도, 넓은 보정 면적
노트북 (150~250 PPI)	±0.5mm	모델마다 다름
데스크탑 모니터 (90~160 PPI)	±1.0mm	낮은 밀도, 더 거친 계단

이 수치는 신중하게 보정했을 때의 값이에요 — "대충 맞는" 정도가 아니라 기준 물체를 정밀하게 정렬했을 때의 이야기예요. PPI가 낮은 화면에서는 소프트웨어가 아닌 픽셀의 물리적 크기가 한계를 결정해요. 92 PPI 모니터에서 픽셀 하나는 약 0.28mm 너비예요. 그보다 작은 건 측정할 수 없어요.

더 정확하게 측정하기 위한 팁

1. 100% 확대에서 보정하세요. 보정 전에 브라우저 확대를 100%로 초기화하세요 (Ctrl+0 / Cmd+0). 다른 확대 수준에서 보정하면 측정도 그 확대 수준에서만 정확해요.

2. 동전보다 신용카드를 사용하세요. 더 큰 기준 물체가 더 정밀한 정렬을 가능하게 해요. 85.6mm 카드에서 1mm 오차는 1.2% 오차예요. 같은 1mm 오차가 24mm 동전에서는 4.2% 오차가 돼요.

3. 물체를 평평하게 놓으세요. 카드를 화면에 단단히 붙이세요. 물체와 화면 사이에 각도나 틈이 생기면 오차가 생겨요.

4. 변경이 생기면 다시 보정하세요. 노트북에서 외부 모니터로 바꿨나요? 다시 보정하세요. 디스플레이 스케일링을 변경했나요? 다시 보정하세요. 태블릿을 세로에서 가로로 돌렸나요? 보정이 유지되어야 하지만 가능하면 확인해 보세요.

5. 화면 중앙에서 측정하세요. 일부 곡면 모니터나 백라이트가 균일하지 않은 화면은 가장자리에서 약간 치수 차이가 있을 수 있어요. 최상의 결과를 위해 중앙 부분을 사용하세요.

결론

온라인 자가 본질적으로 부정확한 건 아니에요 — 그냥 잘못된 가정에 기반해서 만들어진 거예요. CSS "인치"는 요즘 대부분의 화면에서 실제 물리 인치와 무관해요.

보정은 10초면 되고 추측을 완전히 없애 줘요. 신용카드를 화면에 올려놓고 슬라이더를 조정하면 — 화면이 진짜 측정 도구가 돼요. 대부분의 기기에서 0.5mm 이내의 정확도예요.

직접 해보세요 — 다운로드도, 계정도 필요 없고, 어떤 기기에서든 작동해요.