해상도, DPI, PPI, PX, DP, PT 개념! 완벽 정리

 

UI디자인을 하면서 필수로 이해해야 할 개념들이 있다면, 바로 DPI, PPI, PX ,DP, PT의 개념입니다. 

디자인에 엄청 중요한 요소는 아니지만, 기본개념을 알고 디자인하는 것과 그냥 하는 것은 또 다른 문제입니다. 

개발자랑 충분하게 소통하기 위해서도 해당 개념은 잘 알고 있는 것이 좋아요. 

 

DPI vs PPI

- DPI : Dot per inch, 1인치 안에 들어간 점의 수, 높을수록 선명

- PPI : Pixel per inch, 1인치 안에 들어간 픽셀의 수, 높을수록 선명

• 점이냐 픽셀이냐 차이이며, 근본적으로 의미하는 것은 동일합니다.
• 온라인에서 ppi를, 오프라인 제작물 디자인에서 dpi를 쓰는 것이 일반적입니다. (인쇄시에 dot을 기준으로 인쇄가 되기 때문이죠) 

 

해상도

• 우리가 보고 있는 화면이 몇 개의 px(픽셀)로 구성되어있는지 표현한 것
• 예를들어 1920(가로) * 1080(세로) 식으로 표현하고, 이는 가로에 1920개의 픽셀이, 세로에 1080개의 픽셀이 있다는 뜻.
• 픽셀은 한 칸의 작은 네모라고 봐도 무방합니다. 

 

해상도와 PPI : 온라인 기준에서 사용하는 PPI와 해상도의 상관관계

• 똑같은 ppi를 가진 경우, 해상도가 늘어나면 전반적인 화면 기준으로 더 작아보이게 됩니다. 
• 아래 사진과 같이 해상도 20X20인 화면에서 1인치의 크기는 해상도 10X10일때랑 "상대적으로" 다른 크기를 갖습니다. 
  • 아무래도 해상도가 낮을수록 더 커보이고, 선명하지 않겠죠. 

 

 

• 반대로 해상도가 동일한테 ppi가 달라지는 경우, 1인치의 크기는 정해져있기 때문에 더 촘촘하게 보인다고 할 수 있어요. 

 

 

여기서 DP / PT의 개념이 나옵니다. 

폼팩터(=디바이스)의 크기와 해상도가 다양하기 때문에, PPI 즉 픽셀에 기반한 단위를 사용하면, 해상도마다 보여지는 값이 달라지게 됩니다. 이에 해상도에 구애 받지 않고, 똑같은 크기야! 하고 사용할 수 있는 단위를 쓰게 되는데 그것이 바로 dp, pt의 개념입니다. 

 

 

 

DP, PT

• DP : Device Independent Pixel 의 줄임말로 기기에게 독립적인 픽셀. 안드로이드에서 쓰는 단위
• PT : DP랑 동일한 개념이지만, 애플에서는 이를 pt라고 부름.

 

dp,와 PT를 사용하는 경우 위에서 본 것처럼 해상도가 어떻게 되든, 항상 동일한 크기를 갖는다는 의미를 내포합니다. UI디자인시에 흔히쓰는 툴인 피그마나 스케치에는 단위가 별도로 정해져있지 않은데, 이 단위는 사실상 dp 또는 pt의 개념이라고 볼 수 있어요. 

 

 

디자인시에는, 어떤 화면에서도 동일하게 보일 수 있는 값으로 디자인을 하되, 추후 개발자에게 디자인을 넘겨줄 때에는 화면의 밀도에(픽셀에) 따라 px계산을 다시해줘야 하는데 UI디자이너라면 한 번쯤 봤을 그 공식이 바로 자주 보는 아래표입니다. 아래 표의 DP는 가장 처음에 말한 DP와 다른개념입니다. 여기서의 디피는 바로 위에 설명한 Device Independent Pixel의 DP입니다. 160dpi (=mdpi) 환경에서의 1dp가 1px과 가장 유사한 값을 가지므로 아래와 같이 공식이 세워집니다.  따라서 공식은 이렇게 됩니다. 

px = dp * (dpi/ 160)

출처: google material design

 

 

 

이미 여러 UI디자인 툴에서는, 별도로 계산하지 않게끔, 피그마나 스케치로 디자인 후에, 이미지 추출(=export시) 할때 보면 아래 이미지 처럼 여러가지 배수를 추출할 수 있도록 바로 셋팅이 되어있어요. 512w 와 512h 가 있는 이유는, 이것이 범용적으로 쓰이는 고해상도와 저해상도의 중간값이기 때문입니다. 결국 다양한 해상도에서 동일한 품질을 내기 위해, 이미지를 배수 추출한다고 이해하면 되겠습니다. 

 

 

 

 

여기까직 DPI, PPI, PT, DP, 해상도의 개념을 알아보았습니다. 글을 작성하는데 아래 글들을 참고했습니다.

혹시 틀린 내용이 있다면 댓글로 알려 주세요! 

 

https://design3damso.tistory.com/entry/%EB%94%94%EC%9E%90%EC%9D%B8-%EB%8B%A8%EC%9C%84

디자인 시 알아야 할 단위(px, dp, sp, pt)

 

 

https://developer.android.com/training/multiscreen/screendensities?_gl=1*1gc0wbs*_ga*MTEzMzEwMDQwMi4xNzA5MjU4NjM0*_ga_QPQ2NRV856*MTcxMDc2NjU2Ny40LjEuMTcxMDc2NjU5Mi4wLjAuMA..&hl=ko#pre-scaled-values&hl=ko

다양한 픽셀 밀도 지원  |  Compatibility  |  Android Developers

 

 

다양한 픽셀 밀도 지원  |  Compatibility  |  Android Developers