UI·UX 디자이너를 위한 가이드 - 해상도와 PPI·DPI

 

 

 

 

이 게시글은 공부하면서 정리한 내용입니다.

잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

 

***

해상도와 밀도 기준

*해상도(Resolution): 화면(또는 이미지)을 이루는 픽셀 수의 정도를 뜻한다.

같은 크기의 화면을 기준으로 픽셀*이 많아지면 해상도가 올라가고 화면은 선명해진다. (PPI 참고)

 

*픽셀(Pixel): 그림 원소(Picture element)란 뜻으로, 줄여서 px이다.

화면(또는 이미지)의 가로, 세로 해상도를 표현하는 단위로 쓰인다. (예: 1920*1080 px )

빛의 삼원색인 R, G, B 값을 표현하는 서브픽셀(Subpixel)로 이루어져 있으며 비트(bit)로 정보가 표시된다.

1 bit는 2의 1승으로 2개의 컬러 값을 가지고, 8 bit는 2의 8승으로 256개의 컬러 값을 가진다.

이런 식으로 컴퓨터에선 8, 16, 32, 64 bit로 나뉜다.

 

*PPI(Pixels per Inch):  1 인치당 가로, 세로를 이루는 픽셀 수로, 픽셀의 밀도를 나타낸다.

당연히 밀도가 높아질수록(PPI가 높아질수록) 선명해진다.

디바이스가 같은 해상도여도 화면의 크기가 다르면 PPI도 달라지는데, 더 작은 화면일수록 ppi가 높다고 볼 수있다.

 

PPI 비교 예시: 10 PPI(왼쪽)보다 20 PPI(오른쪽)가 더 정밀함을 알 수 있다.

 

PPI의 계산 방법은 피타고라스 정리를 따르며,  화면의 가로 한 변 픽셀 수를 a,  세로 한 변 픽셀 수 b로, 대각선 픽셀 수를  c로 정했을 때, a²＋b²=c²으로 c²에 대각선 길이(Inch)를 나누면 된다.

 

*DPI(Dots per Inch): 1 인치당 가로, 세로를 이루는 점의 수로, 보통 이미지와 인쇄물의 밀도를 나타낸다.

또한, 안드로이드 디스플레이의 밀도를 나타내기도 한다.

 

*PPI, DPI 계산 웹사이트: www.sven.de/dpi/

 

✔ 왜 PC보다 스마트폰이 더 선명해야 할까?

LG 경제연구원의 <인지 한계 해상도 공식>에 의하면,

스마트폰은 20~30cm 거리에서 437 ppi까지, 모니터는 50~60cm 거리에서 185 ppi까지 구분할 수 있다고 한다.

이는 가까운 거리에서 높은 밀도의 PPI를 인지할 수 있고, 화면의 선명도에 차이가 있다는 것을 의미한다.

때문에 고밀도 디바이스의 등장은 <인지 한계 해상도 공식>에 따르면 당연한 흐름이라고 볼 수 있다.

그래서 상대적으로 저밀도인 TV는 PPI보다 전체 픽셀 수로 해상도를 표현한다. (예: Full HD - 1920*1080, Ultra HD - 3840*2160)

 

✔ 그런데, 왜 웹용 이미지는 72 dpi로 내보낼까?

그 이유는 초기 PC 디스플레이가 72 ppi로 제작되었기 때문이다.

그래서 해당 PPI에 맞게 1:1 수치로 정한 것이다. 

하지만 웹에서는 픽셀 해상도(전체 픽셀 수)를 인식하여 DPI가 72이든 96이든 동일하게 보여준다. (인쇄 환경과 다름)

예를 들면, 360*360px(픽셀 해상도)인 이미지를 72 dpi, 96 dpi로 각각 내보내 웹에 업로드하면 둘 다 똑같아 보인다.

즉, 웹에서의 이미지는 DPI가 높다고 선명해보이지 않으므로 최소 기준인 72 dpi로 제작하면 된다.

 

*웹과 DPI에 관한 글: apptools.com/examples/dpi.php

 

 

 

해상도와 밀도 기준에 대해 알아보았다. 다음은 논리적 픽셀에 대한 포스팅이다.

 

mesign.tistory.com/10

UI·UX 디자이너를 위한 가이드 - DP·SP와 디스플레이