CSS pixel 이란 무엇인가?

카테고리 없음

CSS pixel 이란 무엇인가?

소혼 2014. 7. 25. 09:37

일반적으로 픽셀(pixel)은 아래처럼 설명할 수 있습니다.[1][2]

"In digital imaging, a pixel, pel,or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen." (출처 : wikipedia)

흔히 TV/모니터는 얼마나 많은 픽셀을 표현하는지를 (display) resolution이라고 부르며 (물리적인) 픽셀로 처리합니다.[3]

( 해상도 관련 글 )

그래서 그동안 프로그래밍을 하는 과정에서 픽셀이라는 개념은 물리적인 스크린의 한 점과 같다고 생각해 왔습니다.

최근 모바일 (그리고 모바일 웹)에서 이러한 픽셀의 개념에 큰 혼란이 생겨 개인적으로 조사한 내용을 적으려고 합니다.

아이폰의 등장

2007년 초 아이폰과 이후 안드로이드의 등장으로 모바일 디바이스는 스마트폰(그전에도 존재했지만)의 세상이 되었습니다.

이들 스마트폰이 등장하면서 모바일 브라우저는 기존 웹 페이지를 '거의' 문제 없이 모바일에서 렌더링할 수 있게 되었습니다.

레티나 디스플레이의 등장

2010년 애플은 아이폰4에 레티나 디스플레이라는 화면 구성을 가져옵니다. 이는 기존의 아이폰 3에 비해 사실상 두배의 해상도를 갖는 디스플레이(640 x 960)입니다.

(사실 레티나 디스플레이에서 중요한 것은 DPI 로 특정 시야거리에서 기존의 160 ppi 의 두배인 326 ppi 를 만족한다는 의미로 레티나라고 불렀던 것으로 압니다.)

여기에서 한가지 문제점은 기존의 앱/웹페이지들이 320 x 480에 최적화 되어 있다는 것이었습니다.

이를 위해 애플은 웹의 경우 device pixel ratio 라는 요소를 가져왔습니다.

즉, device의 width는 320으로 놓고 대신 pixel ratio의 값을 2로 설정하도록 한 것입니다.

여기서 새로운 픽셀의 정의가 생겨나고 말았습니다.

웹페이지는 contents가 320픽셀이라고 생각하지만, 실제 물리적인 픽셀은 640픽셀인 것입니다.

다시 말해 우리가 width=100 px 의 DIV태그를 만들면 화면상에는 200px의 박스가 그려지게 됩니다.

안드로이드의 따라하기.

후발주자인 안드로이드는 어쩔수 없이 애플이 만들어놓은 컨텐츠를 잘 그리기 위해서 아이폰의 많은 부분을 그대로 차용하게 됩니다.

그래서 레티나급 디바이스에 대해 유사하게 2.0의 device pixel ratio를 사용하게 됩니다.

문제는 안드로이드는 정말 많은 디바이스가 존재하고 각 디바이스들이 전부 ppi가 달랐습니다.

target-density라는 개념을 통해 device 별로 테이블을 만들고 했지만, 문제는 간단하지 않았던 것 같습니다.

device pixel ratio는 아이폰의 의미와 약간 다르게 device의 ppi를 고려하여 1.5 2.0 3.0등 다양한 값을 갖게 되었습니다.

여기서, 이 값이 실제 1.0 일 때의 ppi에 정확히 비례하지 않을 뿐 아니라, 실제 단말의 픽셀과도 정확히 일치하지 않게 됩니다.

즉, 1.5 의 단말의 픽셀이 320 x 1.5 = 480 px 이 아닌 단말들도 많아지게 됩니다.

사실 w3c에서는...

사실 웹 표준인 w3c에서는픽셀에 대한 정의를 "Reference pixel"이라고 정의하고 있었습니다. [4]

Showing that pixels must become larger if the viewing distance increases

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

애초에 물리 픽셀 과 논리 픽셀을 구분해둔 셈입니다.

일반적으로 모니터는 팔길이 정도의 시야거리(viewing distance)를 갖고 있고 96 dpi 였습니다. 웹 표준을 만들 때 이미 시야거리의 변화와 dpi의 변화를 고려하여 가상의 픽셀인 reference pixel을 정의하고 있었고 웹은 이 값에 기반하여 cm, inch등으로 픽셀값을 변환할 수 있었습니다.

그러나 모바일 벤더들은 96dpi를 바꾸지 않았습니다.(여러가지 문제가 있었을 거라고 생각됩니다.)

따라서 160dpi나 326dpi인 아이폰에서도 1 픽셀을 인치로 변환하면 1/96이 나오게 된 것입니다.

아이폰과 같은 모바일의 시야거리는 대략 10 inch (25cm) 라고 생각할 수 있습니다.

대충 계산하면 동일한 시야각을 얻으려면 픽셀은 0.1 mm 여야 할듯 합니다.

0.26 : 71 = x : 25

다시 말해 모니터와 같은 reference pixel(같은 시야각을 같는 픽셀)을 얻으려면 대략 243 dpi가 나와야 합니다.

하지만 현재 모바일은 160 dpi를 de-factor처럼 사용하고 있는 셈입니다.

심지어, 그 값도 단말에 따라 약간씩 다릅니다.

결론적으로

1. 웹에서 현재 있는 cm , inch 등은 printer를 media type을 위해서 사용해야 합니다.

px과 cm간의 변환은 사실상 의미를 잃어버렸습니다.

2. px 정보(screen.width window.clientWidth) 를 이용하여 디바이스의 크기를 알아내는 것은 사실상 불가능해졌습니다.