[GUI] 앱 디자인 시 필수로 알아야 하는 디스플레이 단위(PX, DP,SP,PT)에 대해

노하우/기타노하우

🐟 물고기 2022. 11. 18. 16:07

앱 디자인을 하려고 하면 각 기기별 환경에 따라 그에 맞는 해상도의 리소스가 필요하다. 즉, 디자인을 디바이스 해상도에 알맞게 추출해야 하는데 이를 위해서는 아래 디스플레이 개념을 알아야하는 것이 필수적.

- 픽셀은 이미지를 구성하는 가장 작은 단위다.

- 화면을 구성하는 최소 단위라고 할 수 있다.

- DP는 Device-Independent Pixel(혹은 Density라고도 하던데..)

- 영어 해석 그대로 DP는 기기와는 독립적으로 즉, 기기의 해상도와는 상관없이 일정한 비율로 엘리먼트를 노출시키는 단위임

- 안드로이드에서 만든 것임.

- 마찬가지로 안드로이드에서 사용하는 디스플레이 단위.

- Scale-Independent Pixel

- DP와의 차이는, SP는 앱의 시스템 설정에서 폰트 사이즈를 변경하면 같이 줄어드는 단위. 사용자가 폰트 사이즈 변경이 가능한 구조라면 SP를 사용.

- PT는 ios에서 사용하는 디스플레이 단위로 Point의 준말

- 안드로이드에는 DP가 있다면 ios는 PT를 사용. 같은 개념.

- 즉, 각기 다른 해상도의 기기에서도 내가 작업한 리소스가 동일 비율로 노출 될 수 있도록 해주는 단위임.

- 단, ios에서의 PT는 리소스가 비율로 늘어나는게 아니라 리소스를 고정시키고 늘어나게하는 것에 따라 대응을 하는게 차이가 있음.

참고자료

디스플레이 단위(PX, DP, SP, PT) 알아보기

UI 디자인 시작하기 | PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드

brunch.co.kr