01. 해상도 개념 정리 : Px, Pt, Ppi, Dpi, Dp, 2X, 3X, 4K, 5K, 레티나 디스플레이

픽셀과 해상도

​픽셀(Pixel) : 이미지를 구성하는 최소단위

해상도 (Resolution) : 스크린에 픽셀이 몇 개 들어가 있느냐

​

해상도는 스크린이 몇 개의 픽셀로 이루어져 있느냐 하는 것이다.

픽셀의 개수가 많을수록 해상도가 좋은 스크린이다.

​

스크린 해상도가 1920 x 1080 px이다라는 말은 가로 1920개, 세로 1080개의 픽셀로 스크린이 채워져있다는 의미이다,

​

HD,FHD,QHD / 4K, 5K

​

많이 사용되어 규격으로 정해진 스크린 해상도 사이즈들이 있다.

HD : 1280 X 720 px

FHD : 1920 X 1080 px

QHD : 2560 X 1440 px

​

4K, 5K, 8K

해상도를 말할 때 자주쓰는 4K,5K라는 말은 가로 규격을 기준으로 한다.

4K는 가로 규격이 4000Px 정도 된다는 뜻이고, 5K는 가로 규격이 5000Px 정도 된다는 뜻이다.

​

PPI vs DPI

픽셀 밀도(Pixel Density)를 나타내는 단위에는와 ppi와 dpi가 있다.

​

PPI (Pixel per inch) : 1인치당 몇 개의 픽셀이 있는가

DPI(Dots per inch) : 1인치당 몇 개의 Dot이 있는가

​

Pixel과 Dot의 차이

Pixel : 스크린 이미지 최소 구성단위

Dot : 프린트 이미지 최소 구성단위

​

웹 등 디지털 프로덕트 디자인에서 쓰는 개념이 픽셀과 ppi이고

편집 디자인, 프린트 디자인에서 쓰는 개념이 Dot과 dpi이다.

​

둘은 색상을 표현하는 방식에서 큰 차이가 난다.

​

하지만 이미지 구성단위로써의 ppi = dpi 같은 말이라고 봐도 무관하다,

* 엄밀히 말하면 다른 개념이지만, 이리저리 섞어서 사용되는 걸 볼 수 있다.

​

레티나 디스플레이

레티나 디스플레이란 일반 디스플레이에서 ppi를 2배 늘린 것이다. (2X)

Ppi가 2배가 되었다는 것은 해상도가 4배 올라간 것이다.

아이폰 4에서 부터 Retina Display가 적용되었다.

​

수퍼 레티나 디스플레이란 일반 디스플레이에서 ppi를 3배 늘린 것이다. (3X)

Ppi가 3배가 되었다는 것은 해상도가 9배 올라간 것이다.

아이폰 11 pro에서부터는 Super Retina Display가 적용되었다.

​

픽셀과 포인트

픽셀(Px)은 이미지의 구성 단위이다.

반면 포인트(Pt)란 스크린의 피지컬 한 사이즈 단위로, mm, cm처럼 길이 측정 단위이다.

​

포인트가 필요한 이유

일반 디스플레이 해상도에 맞춰 디자인한 이미지를 400*300 Px 로 전달했다고 가정하자.

레티나 디스플레이에서 이 이미지는 크기가 작아질 것이다.

해상도가 높은 스크린은 더 촘촘한 픽셀을 가지고 있기 때문이다.

​

포인트 값의 문제점

일반 디스플레이 해상도에 맞춰 디자인한 이미지를 400*300 Pt 전달했다고 가정하자.

레티나 디스플레이에서 이 이미지는 채워야 할 픽셀값이 비게 되서 높은 화질을 표현할 수 없게 된다.

같은 Pt값을 같는 이미지가 레티나 디스플레이에서는 4배의 픽셀, 수퍼레티나 디스플레이에서는 9배의 픽셀 값을 차지하기 때문이다.

​

해결방법

Pt 값은 일정하게 유지하면서 이미지를 구성하는 픽셀의 수를

레티나 디스플레이에서는 4배, 수퍼레티나 디스플레이에서는 9배 시켜주면 된다.

​

2X, 3X

렌더링 값

렌더링(Rendering) : 이미지를 받아 스크린에 표현해주는 과정이다.

​

400*300Pt 이미지를 레티나 디스플레이에 렌더링 하려면 이미지를 2X 시켜야 한다,

2X란 ppi를 2배 시켜준다 = 전체 픽셀값을 4배 시켜준다.

그러면 이미지는 똑같은 400*300 Pt의 크기에 800*600 Px를 가지게 된다.

​

400*300Pt 이미지를 수퍼 레티나 디스플레이에 렌더링 하려면 이미지를 3X 시켜야 한다.

3X란 ppi를 3배 시켜준다 = 전체 픽셀값을 9배 시켜준다.

그러면 이미지는 똑같은 400*300 Pt의 크기에 1200*900 Px를 가지게 된다.

1X 환경의 디자인 툴

::우리가 피그마에서 보는 Property unit은 픽셀일까 포인트일까?::

​

결론부터 얘기하면 피그마에서는 둘 다이다.

​

​피그마와 같은 모든 UI 디자인 툴은 1X로 세팅되어 있다.

1X 환경에서 1Px = 1Pt이다.

내가 이미지 크기를 400*300으로 설정했다면, 피그마에서는 400*300Px = 400*300Pt 이다.

렌더링 값 설정이 필요한 에셋과 필요없는 에셋

그렇다면 화면상의 모두 요소에 대해 렌더링 값을 따로 줘야할까?

아니다. 이미지만 따로 렌더링 값을 설정해주면 된다.

아이콘, 로고같은 벡터 요소와 스페이싱, 텍스트 등은 자동 scale up이 이루어지기 때문에 디자인 전달시 렌더링 값 설정이 따로 필요없다.

따라서 디자인 작업시 이미지 전달할 때만 유의해주면 된다.

안드로이드 스크린 사이즈 단위 dp

DP(Density-independent Pixel) : 안드로이드에서 만든 피지컬한 스크린사이즈 단위. 160dpi 스크린에서 1dp=1px

​

안드로이드에서는 Pt와 비슷한 개념으로 기준 해상도(160dpi)에서 1px처럼 쓸 수 있는 1dp를 만들었다.

Px = dp * (dpi / 160)

​

참고할 문서 :

Android 개발자 문서 가이드 도움이 되었나요? 다양한 픽셀 밀도 지원 이 페이지의 내용 밀도 독립형 픽셀 사용 dp 단위를 픽셀 단위로 변환 사전 크기 조정된 구성 값 사용 대체 비트맵 제공 mipmap 디렉터리에 앱 아이콘 지정 벡터 그래픽 사용 특수한 밀도 문제에 관한 조언 모든 픽셀 밀도에 관해 테스트 Android 기기는 다양한 화면 크기 (핸드셋, 태블릿, TV 등)로 제공될 뿐만 아니라 화면의 픽셀 크기도 다양합니다. 즉, 한 기기에서는 제곱인치당 160픽셀을 사용하지만 다른 기기에서는 같은 공간에 480픽셀을 사용...

developer.android.com

정리

​픽셀(Px) : 이미지를 구성하는 최소단위.

해상도 (Resolution) : 스크린에 픽셀이 몇 개 들어가 있느냐.

PPI (Pixel per inch) : 1인치당 몇 개의 픽셀이 있는가.

DPI(Dots per inch) : 1인치당 몇 개의 Dot이 있는가.

포인트(Pt) : 스크린의 피지컬 한 사이즈 단위.

레티나 디스플레이 : ppi를 2배 늘린 것(2X), 해상도가 4배 업그레이드.

수퍼 레티나 디스플레이 : ppi를 3배 늘린 것(3X), 해상도가 9배 업그레이드.

렌더링(Rendering) : 이미지를 받아 스크린에 표현해주는 과정.

1X : 1px = 1pt

2X : ppi를 2배 시켜준다 = 전체 픽셀값을 4배 시켜준다.

3X : ppi를 3배 시켜준다 = 전체 픽셀값을 9배 시켜준다.

DP(Density-independent Pixel) : 안드로이드용 스크린 사이즈 단위. 160dpi에서 1dp=1px