웹디자인 - 디스플레이 해상도에 대해 제대로 알기

해상도는 웹 디자인에서 항상 고려되어야 하는 대상 입니다.

그 이유는 바로 디스플레이에 이용되는 단위가 정해져있기 때문입니다. 

 

해상도란?

이는 디스플레이 표현력의 세밀함 정도를 나타내고 화면이 표현하는 가로, 세로의 픽셀(Pixel)개수를 기준으로 1920x1080(Full HD), 3840x2160(4K UHD) 과 같이 표현합니다.

 

 

결국 픽셀 수가 많아질 수록 이미지가 더 선명해진다고 할 수 있고, 이는 디스플레이로 표현되는 것 모두에 해당되는 규격이기 때문에 웹디자인에서도 당연히 이 Pixel을 기준으로 모든 것을 표현하게 된다는 점을 알아두셔야 합니다.

해상도 단위 보통 1인치(25.4mm) 안에 표현되는 화소(Pixel)나 점(Dot)의 수로 해상도를 표현합니다. 널리 쓰이는 단위로는 DPI와 PPI가 있습니다. DPI(dots per inch)는 주로 인쇄 출력물에, PPI(pixels per inch)는 화상 출력물에 각각 쓰입니다.

 

 

 

해상도의 단위

 

DPI(dots per inch)

주로 인쇄 출력물에 쓰이며, 1인치 안에 1/DPI 크기의 점이 그 수만큼 들어간다는 뜻입니다. 예를 들어 72 DPI라고 하면 1인치 안에 1/72 크기의 점이 72개 들어간다는 뜻입니다. 또한 최근 모바일 디자인에서 사용되는 단위이기도 합니다.

 

PPI(pixels per inch)

화상 출력물에 쓰이며, 1인치 당 픽셀 수를 나타내는 단위로 픽셀의 1차원적인 밀도를 표기합니다. 해상도와 함께 상승하기 때문에 해상도와 많이 혼동되기도 하지만, 엄연히 차이점이 존재합니다. PPI는 픽셀의 밀도 단위이고, 해상도는 픽셀의 총량 단위입니다. 즉, 해상도는 높은데 PPI가 낮으면, 이미지의 크기가 매우 커집니다

10PPI와 20PPI의 차이

 

Pixels Per Square Inch

사각형 면적당 픽셀 수를 나타내는 단위로 픽셀의 2차원 밀도를 표기합니다.

 

 

 

 

모바일 디스플레이 규격

디스플레이 표준

 

위 처럼 다양한 표준 규격이 존재하기 때문에 이 것들을 모두 맞춰 화면을 개발한다는 것은 불가능합니다.

 

.dpi차이에 따른 크기 비교

점점 커지고 높아지는 해상도로 인해 스마트폰의 화면에서 특정 요소들은 아래와 같이 크기가 천차만별로 변하게 되었고

이 문제를 해결하기 위해 dp라는 단위 개념이 등장 하게 됩니다.

 

 

dp 단위

안드로이드에서 주로 쓰이는 단위이며 디스플레이의 좌표값이라고 생각하면 됩니다.

따라서 화면비에도 변동없이 동일한 비율로 노출되게 할 수 있습니다.