기술 문서 · 디스플레이 광학 및 W3C CSS 단위 · 2026년 11월
추상적인 W3C 96-PPI 기준 픽셀과 실제 하드웨어 패널의 물리 밀리미터 간격을 연결하는 원리를 설명합니다.
Section 01 · 픽셀 피치 수학
물리 PPI는 패널 고유의 고정값(√(W² + H²) / 대각선인치)인 반면 CSS 픽셀은 W3C가 정한 논리 단위(1/96 CSS 인치 = 3.7795 px/mm)입니다. OS HiDPI 배율이 적용되면 devicePixelRatio가 달라지므로 본 도구는 pxPerMm 및 줌 불변 밀도 devicePxPerMm = pxPerMm × dpr를 저장합니다.
Section 02 · 물리 표준
전 세계 모든 표준 은행·신용카드는 85.60 × 53.98 mm 규격으로 정밀 재단됩니다. 화면 상자를 실물 카드에 맞추면 OS 가상 배율이나 EDID 오류를 건너뛰고 실제 pxPerMm = cardWidthPx / 85.60을 직접 측정합니다.
Section 04 · 보조 실물 검증 표준
미국 페니(19.05 mm), 1유로 동전(23.25 mm), 미국 쿼터(24.26 mm), AA 건전지(50.50 mm), ISO A4 짧은 변(210.0 mm) 등으로 언제든 검증할 수 있습니다.
Section 05 · 줌 및 다중 모니터 유지
devicePxPerMm을 디스플레이 해상도 서명과 함께 localStorage에 저장하여 동일 모니터 내 줌 변경은 자동 보정하고, 다른 모니터로 이동 시 확인 배너를 띄웁니다.
Section 06 · 계산 사례 및 HiDPI 매트릭스
100% 줌 상태에서 CSS 해상도에 피타고라스 공식을 쓰면 CSS px/mm이 나오며, 여기에 window.devicePixelRatio를 곱하면 줌에 무관한 devicePxPerMm을 얻습니다.
| 디스플레이 구성 | CSS 해상도 | 유효 CSS PPI | CSS px/mm | devicePxPerMm |
|---|---|---|---|---|
| 14.2" 노트북 (Mac Retina / 2× DPR) | 1512 × 982 CSS px (DPR 2.0) | 127.0 CSS PPI | 5.000 CSS px/mm | 10.000 device px/mm |
| 15.6" Windows 노트북 (125% 배율) | 1536 × 864 CSS px (DPR 1.25) | 113.0 CSS PPI | 4.448 CSS px/mm | 5.560 device px/mm |
| 24" 1080p 모니터 (100%) | 1920 × 1080 CSS px (DPR 1.0) | 91.8 CSS PPI | 3.614 CSS px/mm | 3.614 device px/mm |
| 27" 4K UHD 모니터 (150% 배율) | 2560 × 1440 CSS px (DPR 1.5) | 108.8 CSS PPI | 4.283 CSS px/mm | 6.425 device px/mm |
| 6.1" OLED 스마트폰 (3× DPR) | 390 × 844 CSS px (DPR 3.0) | 152.4 CSS PPI | 6.000 CSS px/mm | 18.000 device px/mm |
OS 배율 주의사항
Windows 125%/150% 배율이나 macOS '공간 더 넓게' 해상도는 가상 프레임버퍼를 거쳐 유효 CSS PPI가 달라집니다. 85.60 mm 실물 카드 교정은 최종 출력 픽셀 비율을 직접 재므로 오차가 없습니다.
스마트폰 제약 · 좁은 화면
세로 스마트폰 폭은 약 58–72 mm라 가로 카드(85.60 mm)가 화면 밖으로 넘칩니다. 세로 카드 모드는 짧은 변 53.98 mm 기준으로 정확히 1:1 교정합니다.
Windows 125%/150% 및 Android Chrome
125% 또는 150% 배율을 사용하는 Windows 10/11 노트북과 Android Chrome(~360–412 CSS px)에서는 브라우저 확대/축소를 100%로 유지하고 Android에서는 세로 카드 모드(53.98 mm)를 선택해 실물 카드와 맞추세요.
Section 07 · 디스플레이 물리 및 허용 오차
커버 유리 두께(0.5–1.5 mm)와 굴절률(n ≈ 1.5) 때문에 30° 옆에서 보면 약 0.3–0.5 mm의 시차 오차가 생깁니다.
눈금 바로 위 수직(90°)에서 읽으면 오차를 최소화할 수 있으며, ±0.25 mm 미만의 초정밀 가공 공차에는 교정된 실물 버니어 캘리퍼스를 사용하세요.
교정 저장 후 아래 규격품을 화면에 가볍게 대어 일치 여부를 확인할 수 있습니다:
| 기준 물품 | 미터법 (mm) | 인치 (in) | 적용 표준 |
|---|---|---|---|
| ISO/IEC 7810 ID-1 신용카드 (가로) | 85.60 mm | 3.370 in | ISO/IEC 7810:2019 ID-1 |
| ISO/IEC 7810 ID-1 카드 (세로) | 53.98 mm | 2.125 in | ISO/IEC 7810:2019 ID-1 |
| 미국 1센트 페니 (지름) | 19.05 mm | 0.750 in (3/4″) | 미국 조폐국 규격 |
| 미국 5센트 니켈 (지름) | 21.21 mm | 0.835 in | 미국 조폐국 규격 |
| 1유로 동전 (지름) | 23.25 mm | 0.915 in | 유럽중앙은행 |
| 미국 쿼터 달러 (지름) | 24.26 mm | 0.955 in | 미국 조폐국 규격 |
| 2유로 동전 (지름) | 25.75 mm | 1.014 in | 유럽중앙은행 |
| 표준 AA 건전지 (길이) | 50.50 mm | 1.988 in | IEC R6 / ANSI 15 |
| 미국 달러 지폐 (가로) | 155.96 mm | 6.140 in | 미국 조폐청 |
| ISO 216 A4 용지 (짧은 변) | 210.00 mm | 8.268 in | ISO 216 용지 규격 |
보정 설계도
96 PPI 기본값이 화면마다 달라지는 이유와 카드 한 장으로 1:1 비율을 맞추는 방법을 확인하세요.
인터랙티브 모션 가이드
ISO/IEC 7810 ID-1 실물 카드를 (0, 0) 기준점에 맞추고 오른쪽 핸들을 카드 끝에 맞춥니다.
85.60 × 53.98 mm센티미터 주 눈금이 5 mm 중간 눈금과 1 mm 미세 눈금으로 차례대로 세분화됩니다.
1 cm = 10 mm
