[CSS] software pixel 과 hardware pixel에 대해

픽셀은 더이상 픽셀이 아니다.

 

요즘 휴대폰의 해상도가 FHD 모니터의 1920x1080 해상도 보다 더 좋다. 이제부터 웹 개발자들은 페이지가 얼마나 넓어야 하는지를 디바이스의 해상도 기준으로 얘기할 수 없게 되었다. 애플이 레티나 디스플레이를 내놓으면서, 전통적인 픽셀의 개념이 하드웨어 픽셀과 소프트웨어 픽셀 두가지로 분리 되었다. 하드웨어 픽셀은 기존에 우리가 알고 있던 그 픽셀(화면에서 점 하나)을 의미하고 CSS픽셀이라고도 불리는 소프트웨어 픽셀은 새롭게 생긴 하나의 단위이다.

 

모바일 디바이스 제조업자들은 하드웨어 픽셀과 소프트웨어 픽셀의 비율을 정한다.(이것이 디바이스 픽셀 비율 , device pixel ratio이다.)

(디바이스 픽셀 = 하드웨어 픽셀, 소프트웨어 픽셀 = 논리적 픽셀 인듯??)

다시말해서, 디바이스에서 하나의 하드웨어 픽셀이 몇개의 소프트웨어 픽셀과 대응하는지에 대한 비율이다.

레티나 디스플레이 에서는 하나의 소프트웨어 픽셀이 가로2개 세로2개해서 총 4개의 하드웨어 픽셀로 이루어져 있다. 이럴때 디바이스 픽셀 비율이 2라고 한다.(하드웨어 픽셀 : 소프트웨어 픽셀 = 2 : 1 )

 

삼성 갤럭시 S4는 디바이스 픽셀 비율 3이라고 한다. 즉 하나의 소프트웨어 픽셀에 9개의 디바이스픽셀(하드웨어픽셀)을 갖고 있다는것.

 

이렇게 디바이스별로 하드웨어 픽셀은 전부다 다른 반면에 CSS픽셀(소프트웨어픽셀)은 기기와 무관하게 독립적인 단위이다.

즉, 아이폰X과 아이폰6s, 갤럭시 s10등에서 css픽셀 기준으로 화면을 얘기하면 모두 같은 크기를 얘기할수 있다는 것이다.

 

만약에 가로 해상도가 1000인 a폰과 2000인 b폰에 같은 웹사이트를 띄웠다고 해보자. 그리고 a의 디바이스 픽셀 비율은 1이고 b의 디바이스 픽셀 비율은 2이라고 해보자. 그렇다면 이 웹사이트는 두개의 기기에서 어떤식으로 보여질까?

 

정답은, 거의 비슷한 사이즈로 보여진다 이다.

 

a의 경우 물리적인 픽셀이 천개가 들어가있는 대신에 디바이스 픽셀 비율이 1이기 때문에 하나의 css픽셀에 한개의 하드웨어 픽셀이 들어가고 b의 경우 4개의 하드웨어 픽셀이 들어간다.

 

결국 a든 b든 하나의 css 픽셀 크기는 같기때문에(대신에 그 안에 몇개의 하드웨어 픽셀이 들어가냐가 다른것) 웹사이트가 비슷한 사이즈로 보여지는것이다.

 

그럼 해상도가 좋은 폰으로 보면 무슨 이득이 있을까 궁금해진다.

 

Sharper text

텍스트가 고 해상도 기기에서 좀 더 선명하고 날카로워 보인다. 폰트사이즈가 14px이라고 css에서 지정해도 고 해상도 폰에서는 디바이스 픽셀 비율이 높을것이기 때문에 사실은 좀 더 많은 픽셀이 그 폰트를 렌더링 하기 위해서 사용 된다. 예를들어, 디바이스 픽셀 비율이 2라면 폰트는 가로로 28개의 픽셀에 의해서 렌더링 된다.)

 

Sharper icons

요즘에는 과거 이미지로 아이콘을 쓰던 시절이 아니다. fontawesome과 같은 icon fonts를 많이 사용하는데 위의 sharper text에서 말한 장점 때문에 아이콘도 좀 더 선명해져 보인다. 그리고 벡터 이미지를 사용하게 되면 고 해상도에서 픽셀이 많은 것의 장점을 잘 활용 할 수 있다. 아이콘 폰트는 css픽셀 기준으로 사이징 되지만 하드웨어 픽셀 기준으로 렌더링 된다.

 

High-resolution images

이것은 레티나 이미지라고도 불린다. 고해상도 디스플레이에서 고해상도 이미지를 가져온다. css픽셀이 아니라 하드웨어 픽셀을 이용해서 이미지를 렌더링한다. 고해상도 이미지를 사용하면 디바이스 픽셀 비율이 1인 해상도에서도 잘 보이지만 고해상도 기기에서 디바이스 픽셀 비율이 2일때는 좀 더 샤프하고 선명한 이미지를 볼 수 있다.

 

예를들어, 레티나 디스플레이에서 50x50짜리 div에 50x50 이미지를 넣으면 약간 흐릿하게 보이는 현상이 있다. 이것은 디바이스 픽셀 비율이 2이기 때문에 벌어지는 현상이다. 즉 화면상에서 div는 50x50이라는 css픽셀크기를 갖는다. 하지만 실제로는 그 안에 픽셀의 개수는 100x100 = 1만개 이기 때문에 이미지를 2배 큰것을 넣어줘야 선명하게 보인다.(100x100짜리 이미지를 50x50 div에 넣어야 안깨짐)

 

 

 

출처

https://juiceboxinteractive.com/blog/a-pixel-is-not-a-pixel-designing-for-a-new-generation-of-mobile-devices/