[포스코x코딩온] 웹 개발자 입문 과정 2주차 회고 - 픽셀에 대한 고찰 feat. 모든 디스플레이의 픽셀 크기는 같을까?

padding값 10px 주다가 문득 생각이 났다. 내 모니터에서 말하는 1px과 다른 모니터의 1px은 시각적으로 같을까?

 

 

화질이 같은 사진을 크기가 다른 스마트폰 a,b에 전송했다.

 

내 한조각은 이만큼인데

 

난 요만큼이네

 

 

만약 줄자로 a,b 스마트폰에 보이는 사진을 1cm만큼만떼온다고 생각해보자.

아래 작은 화면을 가진 스마트폰에 더 많은 범위의 배경이 담겨있을 것이다.

 

두개의 스마트폰에 꽉채워진 동일한 배경 사진파일을 원본 크기로 변경한다면, 1cm를 떼왔을때 서로 같은 범위의 배경이 담겨있을까?

 

그렇다.

즉,

특정 해상도의 사진을 원본으로 돌려놓으면,

서로 다른 스마트 폰으로 동일한 사진을 볼때,

현실에서 아주 약간의 오차만 가지고 같은 크기로 측정된다.

여기서 말하는 아주 약간의 오차는 포토 다이오드 이다.

(포토 다이오드는 픽셀을 구성하는 점이다. )

출처 : https://treasure01.tistory.com/34

 

 

1px은 a스마트 폰과 b스마트폰에서 물리적으로 길이가 거의 같다.

왜 이게 가능할까?

사람들은 기준을 만들었다.

 

1픽셀의 mm 환산 수치

 

픽셀 37.79개가 모이면, 현실에서 1cm이다.

a,b 스마트폰의 디스플레이의 37.79 픽셀의 크기는 모두 1cm로 같다.

하지만 완벽히 같은건 아니다. 미세하게 다르다. 

어떤 디스플레이는 화면이 아주 촘촘해서 

37.79개의 픽셀을 구성하는 픽셀안의  '포토 다이오드'의 갯수가 1000개인 반면,

어떤 디스플레이는 500개일 수 있다.

디스플레이가 다르다면, 1px안에 포토 다이오드도 다르기 때문에 미세한 오차가 생기는 것이다.

 

갑자기 '포토 다이오드'가 무슨 말이냐고 묻고싶을 것이다. 아래 사진을 보자

 

 

중요한건 1px을 구성하는 포토다이오드의 크기다.

픽셀을 구성하는 녀석이 바로 포토다이오드이다..

다시 말하자면, 1픽셀의 크기는 모두 같지만,

안에도 요 녀석이 얼마나 촘촘히 박혀있는지는 모두 다르다는 것이다.

 

https://superuser.com/questions/1103934/does-1-pixel-have-a-standard-size

 

펙셀 37.79개가 1cm 이다.

1픽셀은 = 0.264 mm 이다.

 

 

1픽셀을 구성하는 또다른 녀석. 포토다이오드. 다른 말로는 픽셀 밀도를 구성하는 dot(도트)라고도 한다.

 

Pixcel density (픽셀 밀도). pixel의 촘촘한 정도.

1픽셀 밀도가 높다 = 같은 넓이에서 더 많은 도트(점)이 많다.

즉, 점의 밀도는 PPI를 말한다.

 

Pixel dencity를 알려주는 단위. ppi 

인치당 픽셀(PPI)은 디지털 이미지의 각 인치에 포함된 픽셀 수.

 

이 도트는 모니터마다 모두 다르다.

그래서 같은 1픽셀이라 하더라도, 1픽셀을 구성하는 dot 들이 빡빡하다.

훨씬 이미지가 선명하게 보이는 것이다.

 

바로 이것때문에.

내 1pixel은 이만큼인데

여기서 1px을 떼줘 라고 했을때, 1픽셀은 분명 요만큼인게 맞다.

그러나 1픽셀안에 얼마나 많은 점들이 찍혀있는지는 모두 다른것이다.

그리고 이 1px의 사이즈는 자신이 어떤 ppi를 가지고 있는지 상관없이  내 디스플레이에서 37.79픽셀은 1cm 이여야 하는 것이다.

 

이 과정에서 기기의 스펙에 따라 값을 환산해서 보정해주는건 '컴퓨터의 역할'이다.

 

 

사실 이렇게 생각하면 쉽다.

 

모든 사용자의 화면에서 1cm는  37.79픽셀이 될 수 있게 grid를 만듬.

이때 만들어지는 grid는 해상도와 상관없음.

해상도는 grid 의 한조각인 1px을 구성하는 dot의 갯수가 결정함.

1px을 구성하는 점의 밀도 = px desity = PPI 라고함.

 

다시 반대로 생각해보면.

PPI는 모든 기기마다 모두 다름.

화질이 낮은 A 모니터는 1CM ( 37.79 px)를 만들기위해 점(dot) 300개가 필요한 반면,

화질이 높은 B 모니터는 1CM를 만들기위해 점 1,000개가 필요함.

따라서 A,B 모니터에 1px을 구성하기 위한 dot는 달라짐.

우리 인간은 px만 알면되고, px을 얼마만큼의 dot을 써서 구성할지는 편의상 컴퓨터가 계산해줌.

 

우리 인간은 1cm만 알고 있으됨.

컴퓨터는 알아서 dot의 갯수를 1cm 만큼의 불빛을 켜줌.