#피그마 강의(1) 디스플레이와 배수 이해하기

디스플레이는 디지털 화면을 의미함.

이 디스플레이는 픽셀이라는 작은 칸들로 이루어져 있는데, 해상도(Resolution)는 이 픽셀이 디스플레이 안에 들어가 있는 픽셀의 개수를 의미한다. 

픽셀의 갯수는 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수로 나타낸다.

 

해상도가 같다면, 화면 크기가 클 수록 픽셀 한 칸의 크기도 커진다. 

화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다.

가로와 세로의 길이가 각각 2배씩 증가하면 총 픽셀 수는 4배 증가한다.

면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능하다. 

픽셀 수 자체를 줄이는 것은 어렵기 때문에 일반적으로는 화면 크기가 클 수록 픽셀 갯수도 많아지기 때문에 해상도가 높아진다. 

 

1배수 디자인 

같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일하다.

디바이스마다 맞는 디자인을 일일이 만들지 않는데 어떻게 가능한 것일까?

- 기준이 되는 사이즈를 하나 정해서 디자인을 한다. 

- 이 기준이 되는 사이즈를 1배수 라고 한다. 

 

원래 아이폰과 안드로이드의 1배수 사이즈는 기존보다 작았지만, 스마트폰의 발전으로 1배수 사이즈가 커지게 되었다.

현재 아이폰의 경우 375 * 812, 안드로이드의 경우 360 * 800을 권장한다.

 

1배수 디자인 사이즈는 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적이나, 내가 만들 앱을 쓸 사람들이 기준이 되어야 한다. *아이폰 1배수와 안드로이드 1배수가 다름을 확인하자! 

 

배수는 픽셀 배율이라고 부르는데, 이 픽셀 배율은 기기를 만들고 출시할 때 정해져서 나온다. 

https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

해당 웹사이트의 표에서 확인하고 싶은 기기를 찾은 뒤, Pixel Ratio를 보면 된다. 

2.0이라고 써져 있다면 ‘이 기기는 2배수 사이즈’라는 뜻이다.

 

해당 웹사이트의 Device Resolution은 기기 해상도를 의미한다. 

그런데 잘 보면 1배수에 픽셀 배율을 곱한 숫자와 Device Resolution 값이 똑같지는 않는데, 그렇다면 어떻게 배율에 맞춰서 조정이 될까?

 

우선 1배수 사이즈에 맞춰 디자인하고 개발을 완료하면, 기기는 해당 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 혹은 축소한다.  아이폰 15프로 기기의 경우 375*812의 디자인을 3배 확대해서 1125*2436으로 만들 것이다. (이를 렌더링이라 부른다)

 

다만 실제 아이폰 15프로 기기는 해당 사이즈보다는 더 큰데, 이러한 경우 각 해상도에 맞춰 키우기도 하고 줄이기도 하며 사이즈를 미세조정한다. (줄이는 건 다운스케일, 키우는 건 업스케일이라고 한다)