[코드라이언] 레티나 디스플레이 대응하기! -Day18-

CSS Sprite 기법을 배우면서 또 하나 같이 배운 것은 '레티나 디스플레이' 대응법이다.

레티나 디스플레이는 애플에서 제조하는 아이패드나 아이폰, 맥에서 쓰는 LCD 디스플레이인데 이 디스플레이들은 좀 특별(?)해서, 화면에 이미지를 보여줄 때 약간의 노력이 필요하다.

 

왜냐하면 같은 이미지 파일이 레티나 디스플레이에선 아래와 같이 흐릿하게 나올 수도 있기 때문이다.

별 차이 없어보여도 자세히 보면 레티나 디스플레이 화면이 살짝 blurry하다.

 

이렇게 레티나 디스플레이에서는 이미지가 다르게 보이는 이유는 바로 "논리픽셀"(우리가 알고 있는 CSS에서 자주쓰는 그 px)과 "물리픽셀"(디바이스에서의 px)이 다르기 때문이다. 즉, 브라우저는 CSS나 html 태그에 표기한 우리가 알고있는 그 px대로 렌더링을 하지만, 브라우저를 보고 있는 디바이스에서의 px값은 우리가 표기한 px값과 다르기 때문에 이미지의 크기가 의도한 바와 다르게 렌더링 되는 것이다.

 

그럼 대체 우리에게 익숙한 논리픽셀과 레티나 디스플레이의 물리픽셀은 어떻게 다르길래 이미지가 다르게 렌더링 되는 것일까?

 

일단, 픽셀은 화면에 표현되는 이미지를 구성하는 작은 네모들이다. 같은 이미지여도 이 조그만한 네모들이 많으면(고밀도) 고해상도, 적으면 저해상도라 할 수 있다.

 

적은 픽셀의 이미지는 이렇다... 옛날 감성

 

 

위에서 말했듯이, 레티나 디스플레이는 고해상도라고 하였는데, 아래 사진을 보면 이해하기가 쉽다.

출처 - medium.com

레티나 디스플레이가 아닌 디스플레이에서 44px의 크기 그대로를 레티나 디스플레이에 표현하면 44px가 88px가 되어야 한다.

즉, px 값이 두배가 되는 것이다. 그 이유는 사진을 보면 알겠지만 일반 디스플레이의 1px(네모 한칸)과 레티나 디스플레이의 1px(네모 한칸) 크기가 다르기 때문이다. 레티나 디스플레이의 1px이 더 작기 때문에 고밀도로 표현할 수 있다.

 

(이렇게 되면 이제 px는 절대적인 값이 아닌 상대적인 값이 되버린다....)

 

 

이렇다보니, 레티나 디스플레이에서 화질이 저하 되는 현상을 해결해주는 대부분의 방법의 핵심은 이미지 크기를 원본의 두배로 키우는 것이다. 아래의 해결방법들을 보면 알 수 있다.

 

① <img>태그의 srcset 속성 사용

이전에 <img> 태그의 srcset에 대해 포스팅한 글이 있다.  (바로 여기) https://doridori-samsam.tistory.com/9

srcset에 대해 간단하게 말하자면 화면 조건에 따라 보여줄 이미지들을 옵션으로 주고 조건에 맞는 이미지를 하나만 골라서 보여줄 수 있게 하는 기능이다. (IE 지원 X)

 

<img src="photo.png" srcset="photo1.png 1x, photo2.png 2x"/>

위 코드는 픽셀비율이 1배일 때 (일반 디스플레이) "photo1.png"을 보여주고 2배일 때(레티나 디스플레이) "photo2.png"를 보여줘. 두 조건다 아니면 그냥 "photo.png" 보여줘.  라는 뜻이다.

이전에는 srcset에서 사용된 단위가 w(이미지의 실제크기)였는데, 픽셀 비율을 나타날 때는 x로 표기한다.

 

참고로 개발자 도구에서 콘솔창에 window.devicePixelRatio를 입력하면 기기의 픽셀비율을 알 수 있다.

신기하게도 나는 노트북 한대에 모니터를 한대 더 연결해서 쓰고 있는데, 모니터마다 비율이 다르게 나온다.

 

내 Lenovo 노트북 화면에서의 비율

같이 쓰고 있는 삼성 스마트 모니터에서 비율

 

 

 

② JS를 이용하여 2배 이미지 가져오기

https://imulus.github.io/retinajs/

Retina.js | Retina graphics for your website

retina js를 이용하여 2배 크기의 이미지를 동적으로 불러올 수 있다. 사용방법은 위 사이트에 들어가자마자 나와있다.

사용자에게 불필요한 이미지를 네트워크로 받아오지 않는다는 점이 장점이다.

 

 

 

③ media query - resolution 사용하기

media query resolution 속성은 CSS 속성으로 고밀도 디스플레이를 위한 속성이다.

safari빼고 대부분의 브라우저를 지원한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

resolution - CSS: Cascading Style Sheets | MDN

위 사이트는 media query resolution 속성 설명이 나와있는 MDN 문서이다.

.img-basic{
	display: none;
}

@media (resolution: 150dpi) {
  .img-retina {
   	display: initial;
  }
}

이런식으로 사용 가능한데.. 단점은 사용자에게 필요하지 않은 즉, 레티나 대응이 필요 없는 사용자에게도 레티나용 이미지가 다운받아진다는 것이다.

 

 

이 외에도 여러 방법이 있겠지만, 가장 궁극적인 공통점은 이미지의 2배 크기를 불러온다는 것이다.

 

아래는 픽셀과 레티나 디스플레이 및 픽셀에 관련되어서 자세한 설명이 나와있는 문서이다.

 

 

 

https://brunch.co.kr/@blackindigo-red/18

픽셀 밀도(Pixel Density)에 대한 설명

https://blog.hanlee.io/2018/high-density-display-and-images

고밀도 디스플레이를 위한 이미지 다루기