웹해상도 (물리픽셀, 논리픽셀, 고밀도 해상도, PPI)

모바일 UI개발을 하다보면

아이폰5 기준(320px)으로 작업을 하게되는 경우

보통 디자인 파일은 320px의 2배인 640px로 받아서 작업을 진행하게 된다.

 

단순히 2배 혹은 3배의 이미지를 받아오기 위해

원래의 화면 크기보다 큰 디자인으로 받아서 작업을 한다는 생각을 해보기 전

 

해상도에 대해 알아볼 필요가 있다.

 

1. 고밀도 해상도

모바일 뿐만 아니라 태블릿, 데스크탑까지 구분 없이 작은 크기의 영역(디바이스)에

높은 밀도의 해상도를 가진 화면을 말한다.

 

애플에서 사용한 레티나 디스플레이부터 보편화되기 시작하였다.

 

2. PPI란?

Pixel per inch의 약자로 1인치당 몇 개의 픽셀로 이뤄졌는지를 나타내는 밀도의 단위이다.

(ppi는 일반적인 디바이스나 화면에서, dpi는 인쇄물에서 주로 사용)

 

10PPI면 정사각형 한 면 (1inch, 2.54cm)에 10개의 픽셀이 있고

가로 세로 10px을 곱하게 되면 총 100px로 이루어져 있다는 뜻이 된다.

위의 이미지에서 살펴보면 10ppi 보다 20ppi가 훨씬 밀도가 높고

높은 해상도를 자랑하는 것을 볼 수 있다.

 

 

그리고 화면이 작은 기기일수록

더 높은 밀도의 해상도를 통해 선명한 화면을 구현한다.

 

3. 물리픽셀과 논리픽셀

고밀도 해상도의 간단한 예로 아이폰 4를 예시로 들자면

 

아이폰 4가 구현하는 해상도는 640*960 이고, (물리 픽셀)

CSS로 표현할 수 있는 값은 320*480이다. (논리 픽셀)

 

즉, CSS로 구현하는 화면은 320px이지만

실제 해상도는 640px로 2배의 밀도를 가지게 된다. (ratio 2)

 

만약 아이폰4에 디자인 작업을 할 때 320px의 디자인 파일을 받아서 작업을 하게 된다면,

640px의 해상도 화면에 320px의 디자인이 적용되기 때문에

이미지를 늘여 놓은 것과 같은 뿌연 화면이 나타나게 된다.

 

그렇기 때문에 우리가 모바일 작업을 할 때

물리 픽셀에 맞춘 디자인으로 작업을 하게 되는 것이다.

 

그리고 우리가 논리픽셀을 적용하기 위한 수단으로

우리는 meta태그의 viewport 속성을 이용한다.

<meta name=“viewport” content=“width=device-width”>