"내 화면 해상도는?"에 더 나은 방법으로 답하기

대부분의 화면 해상도 확인 도구는 느리고, 광고로 가득하며, 숫자 하나만 알려줍니다. 저희는 그 반대를 원했습니다 — 즉시 로드되고, 프라이버시를 완전히 존중하며, 디스플레이의 전체적인 정보를 제공한 뒤, 그것을 활용할 수 있는 도구까지 제공하는 페이지입니다.

프라이버시 우선 설계

이 사이트의 모든 측정은 표준 웹 API를 사용해 브라우저 내에서 로컬로 계산됩니다. 화면, 기기, 브라우저에 관한 어떤 정보도 서버로 전송되거나 기록, 저장되지 않습니다. 광고나 제3자 추적기도 없습니다. 저희가 유일하게 저장하는 것은 밝은/어두운 테마 설정이며, 이마저도 사용자의 브라우저 안에 저장됩니다.

완전한 정보 제공

숫자 하나가 아니라, 논리적·물리적 해상도, 뷰포트 크기, 기기 픽셀 비율, 화면비, 색 농도와 색 영역, 방향, 측정된 주사율, 그리고 사용 중인 기기에 대한 최선의 추정까지 제공합니다 — 크기 조절, 확대/축소, 회전 시 모두 실시간으로 업데이트됩니다.

개발자를 위해서도

화면은 소비자뿐 아니라 개발자에게도 중요한 문제이기 때문에, Tailwind와 Bootstrap 브레이크포인트를 실시간으로 표시하는 기능, 현재 뷰포트에 맞춰 바로 복사할 수 있는 CSS 미디어 쿼리 생성기, 정확한 사양을 그대로 재현하는 공유 링크 기능을 추가했습니다 — 버그 리포트에 아주 유용합니다.

제작 방식

이 사이트는 Tailwind CSS로 스타일링된 정적 Astro 빌드이며, 그래서 이렇게 빠릅니다. 인터랙티브한 부분은 의존성이 없는 작은 스크립트로, 모두 사용자의 기기 안에서 실행됩니다.