코딩일기

웹/앱 디자인 시 알아야 할 단위 : px,dp,pt

jhy_2023 2024. 1. 17. 17:31
728x90
반응형


픽셀 (Pixel) :

픽셀은 이미지나 화면을 구성하는 가장 작은 단위입니다. 
화면 해상도를 나타낼 때 사용되기도 하고, 이미지의 해상도는 픽셀의 수에 의해 결정됩니다.



밀도 독립적 픽셀 (Density-independent Pixel, dp) :

안드로이드 개발에서 주로 사용되는 단위로, 화면의 물리적 크기와 독립적으로 픽셀을 나타냅니다.
안드로이드 기기는 다양한 크기와 해상도를 가지고 있기 때문에, dp를 사용하여 화면 요소의 크기를 일관되게 유지할 수 있습니다. 안드로이드에서는 dp를 사용하는 것이 권장됩니다.

예를 들면 안드로이드에서는 기본적으로 다음과 같은 세 가지 밀도 버전을 사용합니다.
mdpi (Medium Dots Per Inch): 기준 밀도. 1배 배율.
hdpi (High Dots Per Inch): 1.5배 배율.
xhdpi (Extra High Dots Per Inch): 2배 배율.
이러한 배율을 고려하여 디바이스의 화면에 따라 적절한 dp 값을 사용하면, 다양한 디바이스에서 앱이 일관되게 나타날 수 있습니다. 안드로이드는 자동으로 디바이스의 밀도를 감지하고 적절한 배율의 리소스를 사용하도록 지원하고 있습니다.

예를 들어, 10dp의 크기를 가진 UI 요소는 mdpi 기준에서는 10픽셀, hdpi에서는 15픽셀, xhdpi에서는 20픽셀로 표시됩니다. 이를 통해 화면 밀도에 따라 UI 요소의 크기를 조정하여 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다.



포인트 (Point, pt):

iOS 개발에서 사용되는 길이 단위로, 픽셀과 비슷하지만 해상도에 상대적으로 덜 의존적입니다.
iOS 디바이스는 다양한 해상도를 가지고 있지만, 포인트를 사용하면 화면 요소의 크기를 일관되게 유지할 수 있습니다. iOS에서는 포인트를 사용하는 것이 권장됩니다.



요약하자면,
픽셀은 이미지와 화면의 기본 단위이며, dp는 안드로이드에서, pt는 iOS에서 다양한 디바이스의 화면 크기를 고려하여 일관된 디자인을 유지하기 위한 상대적인 길이 단위입니다.
dp (Density-independent Pixel)와 pt (Point) 이러한 단위를 사용하는 이유는 다양한 디바이스의 화면 크기에 대응하여 일관된 사용자 경험을 제공하고, 상대적인 크기 조정을 통해 레이아웃의 유연성을 확보하기 위함입니다. 픽셀 독립성을 갖고, 디바이스 간 크기 일관성을 유지하며, 상대적인 크기 지정을 통해 다양한 화면 크기에 유연하게 대응할 수 있습니다.

 


참고 자료

https://brunch.co.kr/@zalhanilll/407#comment

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

https://remain.co.kr/page/designsystem/ratio-design.php

https://designbase.co.kr/sketch-3/

728x90
반응형