[해상도] Retina Display

해달·2022년 11월 8일

앞서,
이전에 레티나 디스플레이에 대해 공부했었다가 기록하지 않아 잊어버려서.. 이번에 다시 공부하면서 기록해놓고자 한다😞

이 사실을 다시 인지하게 된 것은 아이콘을 피그마에서 추출하는 png파일을 추출할때 3x 옵션을 주고 추출해야하는지를 잊고 무지성으로 파일을 뽑고있었다..!

~~해상도가 깨지는데 왜 png 파일을 _x 배의 파일로 추출해야 하는지에 대해 잊었었다.~~

왜 레티나 디스플레이를 알아야 하나 ?

라고 한다면 이미지 최적화 작업을 위해선 이 개념이 기본적으로 필요하다고 느꼈고, 애초에 Next.js에서 제공해주고 있는 이미지 컴포넌트가 이걸 고려해서 최적화 작업을 해주고 있기때문이다.

일반적으로 웹 페이지에서 사용되는 레티나 디스플레이에서는
1px 당 2개의 실제 픽셀을 사용한다고 한다.

이게 무슨말일까 ?

Retina Display 너 뭔데 ?

높은 픽셀 밀도와 선명한 화질을 갖춘 디스플레이를 일반적으로 지칭하는 용어

사실 레티나 디스플레이라는 단어는 애플이 만든 단어이고,
모든 제조업체들이 공통으로 사용하는 말은 아니라고한다.
통용적으로는 일정수준의 고밀도 디스플레이라고 이해하면 될 것 같다.

Chat GPT 한테 물어보니 아래와 같이 대답해주었다.

Chat GPT

아이폰에서는 고해상도 디스플레이를 지원하기 위해 Retina 디스플레이라는 기술을 사용합니다. 이 기술은 실제로 표시되는 화면의 픽셀 밀도를 높이는 것입니다. 이는 더 작은 픽셀 크기를 사용하여 이미지나 텍스트를 더 선명하고 부드럽게 보이도록 만듭니다.

따라서 아이폰의 픽셀 값은 물리적인 해상도보다 높은 값을 갖습니다. 이는 개발자가 디자인할 때 픽셀 값으로 작업할 때와 실제 디스플레이에서 표시될 때 차이가 발생할 수 있는 이유입니다.

예를 들어, iPhone X는 물리적 해상도가 1125x2436 픽셀이지만, Retina 디스플레이를 사용하여 375x812 픽셀에서 작업해야합니다. 이는 각 픽셀이 세 개의 물리적 픽셀에 해당하는 3x 스케일링 비율을 사용하여 실제로 표시됩니다.

이러한 스케일링은 고해상도 디스플레이에서 더 낮은 해상도의 이미지를 사용할 때 더 선명하고 부드러운 이미지를 제공할 수 있습니다. 따라서 개발자는 이러한 픽셀 값의 차이를 이해하고, 디자인을 작업할 때 Retina 디스플레이 기술을 고려해야합니다.

이 글을 읽고 바로 이해가 되지 않았기에..
위 답변에서 언급 된 3x 스케일링 비율 의 내용이
내가 레티나디스플레이를 다시 공부하게 된 내용이니
그 내용을 토대로 조금 더 찾아보았다.

Png 파일을 출력할 때 왜 `_x`의 배수로 파일을 저장해야 할까 ?

(이해를 돕기위해 유튜브영상 스티브잡스 발표에 있는 이미지를 캡쳐해왔습니다.)

일반적인 디스플레이에서는 1픽셀이 1개의 물리적인 픽셀을 낸다.
그러나 레티나 디스플레이에서는 1픽셀에 여러 개의 실제 픽셀을 사용하여 더 섬세한 이미지를 표현합니다. 예를 들어, 레티나 디스플레이에서는 1픽셀을 2x2 또는 3x3 개의 실제 픽셀로 구성할 수 있다.