휴대폰과 태블릿의 디바이스 픽셀 비율(Device-Pixel-Ratio) 계산하기

스마트 디바이스에서 화면의 디바이스 픽셀 비율을 간단하고 빠르게 계산하는 방법을 알려드리려고 합니다.

특히 웹 개발자나 앱 디자이너 분들에게 매우 유용한 정보일 거예요. 

먼저, 해당 디바이스의 해상도와 ppi 값을 알아야 해요.

예시에서는 갤럭시 탭 S8을 사용해볼게요.

 

https://www.gsmarena.com/apple_iphone_12_pro-10508.php

Apple iPhone 12 Pro - Full phone specifications

 

 

제가 첨부한 링크에서 스펙을 확인해 보면, 이 태블릿의 해상도는 '1170 x 2532 픽셀'이며, ppi는 약 460이라고 나와있어요.

이 데이터를 바탕으로 계산을 시작해볼까요?

Device-Pixel-Ratio (DPR) 계산하기: DPR은 디바이스의 ppi 값을 기준 ppi(대체로 150을 사용합니다)로 나눈 값입니다. 

이 경우에는 460 / 150으로, 대략 3.07이 됩니다. 

실제 작업에서는 이 값을 반올림하여 사용하죠. 예를 들어, 여기서는 3으로 계산할 수 있습니다.
Width 계산하기: 화면의 실제 너비를 구하기 위해 해상도를 DPR로 나눕니다. 즉, 1170 / 3을 하면 390이 됩니다.
Height 계산하기: 마찬가지로, 화면의 실제 높이를 구하기 위해 해상도를 DPR로 나누면, 2532 / 3을 해서 844가 됩니다.
계산 결과, 이 디바이스의 '가상' width는 390, height는 844가 됩니다. 

이는 실제 개발 환경에서 웹페이지나 앱을 테스트할 때 사용하는 해상도와 일치해야 합니다.

 

제가 이 방법을 사용해서 실제 테스트 결과를 확인해보니, 개발자도구의 반응형, 모바일용 웹사이트 사이즈와 완벽하게 맞아떨어졌어요!

이렇게 계산을 통해 화면 크기를 미리 예측하고, 디자인을 조정할 수 있으니 참 편리하죠?

아래에 이 방법을 이용한 계산의 예시를 캡쳐한 사진과 함께 첨부했습니다. 참고하셔서 여러분의 작업에도 활용해 보세요!

마지막으로, 이 계산법은 대략적인 값이며, 실제 디바이스마다 약간의 오차가 있을 수 있음을 기억하세요.

하지만 대부분의 경우에 매우 유용한 참고 자료가 될 거라고 확신합니다.