[ React-Native ] Pixel Density

@ 궁금한 이유 

 

> 리액트 네이티브를 하면서 디바이스별로 다른 사이즈와 pixel 때문에

 

---

@ 공부

 

1. pixel

pixel 에 대한 개념은 모두 동일 하지만 기기에 따라서 갖고 있는 픽셀의 개수와 크기가 다르기 때문에 dp 를 이용해서 맞춰줘야 한다.

 

개념 정리

1. 화소

> 영어로 pixel 이다.

1000만 화소, 1600만 등의 용어에 사용한다. pixel ( picutre Element ) 의 준말이다.  1화소 = 1픽셀 하나는 Red,Green,Blue 투명도 등의 색정보를 갖는다. 픽셀을 사용하는 대표적인 포맷이 BMP,GIF,JEPG,PNG 등 우리가 흔히 잘 알고 있는 사진 파일들이 되겠다. 이를 비트맵 이미지라고 부른다. 

 

2. 해상도

> 영어로 resolution 이다. 

가로와 세로에 얼마나 많은 화소를 배치 했느냐를 말한다. 따라서 높은 해상도의 디스플레이 기기는 화면에 픽셀이 더 많이 들어가 있다는 의미가 된다. 예컨데 가로에 1920개 세로에 1080개의 화소가 배치되어 있다면 해상도는 총 2,073,600이 된다. 총 2,073,600개의 화소( 픽셀 ) 로 구성되어있다고 할 수 있다.

하지만 컴퓨터 모니터 해상도는 1920 * 1080 을 갖고 스마트폰 역시 1920 * 1080 이상의 해상도를 갖는다. 여기서 픽셀 밀도, 즉 PPI ( Pixels Per Inch ) 이라는 용어가 나온다. PPI는 1인치 안에 몇 개의 픽셀이 들어가는가를 의미한다. 주의할 점은 화소와 달리 가로세로 1인치의 사각형 안에 몇개의 픽셀이 들어가는지가 아니라, 가로나 세로 1인치 길이에 몇개의 픽셀이 들어가는가로 따진다.

 

길이로 들어가나 사각형으로 들어가나 그것보다 중요한 것은 PPI가 높을 수록 폰트나 그리픽 표현이 훨씬 세밀해진다는 것이다.

 

https://blog.prototypr.io/making-sense-of-device-resolution-pixel-density-40922aeb8a6