평소보다 사무실에 일찍 도착했다.
디자인 업무 들어가기 전, 뭘 할까 고민하다
**"구글 머테리얼 디자인" 페이지에 들어갔다.**

새로 업데이트 된 부분이 있는지,
디자인에 대한 고민이 커질때 면 나는 항상
구글 머테리얼 디자인 혹은 애플 디자인 가이드를 들어가곤 한다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F23%2F21c9e10b-ec1a-44f7-93fe-ab0c4e836e7a&w=inherit&q=80)
[](https://image.wanted.co.kr/optimize?src=https%3A%2F%

여러 기기의 해상도를 고려해 디자인하는 것은 정말 중요하죠! 구글 머테리얼 디자인 가이드와 같은 자료를 참고하는 습관, 멋집니다. 오늘도 유익한 정보를 공유해 주셔서 감사합니다. 🎨✨

원티드 회원들의 커리어 성장과 행복을 돕는 AI입니다.

원티드 에이전트

평소보다 사무실에 일찍 도착했다.
디자인 업무 들어가기 전, 뭘 할까 고민하다
"구글 머테리얼 디자인" 페이지에 들어갔다.

새로 업데이트 된 부분이 있는지,
디자인에 대한 고민이 커질때 면 나는 항상
구글 머테리얼 디자인 혹은 애플 디자인 가이드를 들어가곤 한다.

확인하다 40dp, 56dp 등
"dp"가 계속 눈에 띄었다.


부끄럽게도 난 이게 무슨뜻이지..?
몰라서 바로 인터넷에 검색해봤다.

dp는 화면 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위라고 한다.

px(픽셀) : 화면을 구성하는 최소 단위
dp : Device Independent Pixel>디바이스 크기에 의존하지 않는 픽셀

px(픽셀) = dp X (해상도/160)
dp = px X (160/해당기기 해상도)

계산이 헷갈린다면
px dp 변환 사이트를 활용하자.ㅎ


이 글을 적으며 나는 이 사이트를 인용했다.
https://blog.cracker9.io/2018/03/13/Android_DPI/


chatGPT에게 물어본 px과 dp의 차이

**px (pixels)**과 **dp (density-independent pixels)**는 주로 모바일 앱이나 웹 디자인에서 사용되는 두 가지 단위이며, 둘의 차이는 다음과 같습니다.

1. px (pixels):

픽셀은 화면 상의 실제 물리적인 점(도트)을 의미합니다.
픽셀은 기기마다 크기가 다를 수 있습니다. 예를 들어, 해상도가 낮은 기기에서는 픽셀이 크고, 해상도가 높은 기기에서는 픽셀이 더 작습니다.
고해상도 디스플레이(예: Retina 디스플레이)에서는 같은 크기의 UI 요소라도 더 많은 픽셀을 사용하여 더 선명한 이미지를 제공합니다.

2. dp (density-independent pixels):

dp는 기기 해상도와 관계없이 일관된 크기를 유지하는 단위입니다.
주로 안드로이드에서 사용되며, iOS에서는 **pt (points)**가 비슷한 역할을 합니다.
dp는 화면의 픽셀 밀도(DPI, Dots Per Inch)에 따라 조정됩니다. 이는 고해상도 기기에서 작은 텍스트나 버튼이 너무 작게 보이지 않도록 합니다.기본적으로 1dp는 160dpi에서 1px과 동일합니다.
즉, 160dpi 기기에서는 1dp = 1px이지만, 320dpi 기기에서는 1dp = 2px로 조정됩니다.

주요 차이점:

px는 기기의 물리적 픽셀에 직접적으로 대응하는 단위입니다.
dp는 화면의 픽셀 밀도에 무관하게 일관된 크기를 제공하는 단위로, 다양한 해상도에서 UI 요소의 크기를 동일하게 보이도록 합니다.
정리하자면, px는 해상도에 따라 변동되는 반면, dp는 해상도에 관계없이 일관된 사용자 경험을 제공하기 위한 단위입니다.

평소보다 사무실에 일찍 도착했다.
디자인 업무 들어가기 전, 뭘 할까 고민하다
**"구글 머테리얼 디자인" 페이지에 들어갔다.**

새로 업데이트 된 부분이 있는지,
디자인에 대한 고민이 커질때 면 나는 항상
구글 머테리얼 디자인 혹은 애플 디자인 가이드를 들어가곤 한다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F23%2F21c9e10b-ec1a-44f7-93fe-ab0c4e836e7a&w=inherit&q=80)![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F23%2Fb88be1fb-a10c-412e-9034-0fc3ae95938a&w=inherit&q=80)
**확인하다 40dp, 56dp 등**
**"dp"가 계속 눈에 띄었다.**

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F9%2F23%2F30b54db8-645c-4e2e-a768-6d60110adfc1&w=inherit&q=80)
부끄럽게도 난 이게 무슨뜻이지..?
몰라서 바로 인터넷에 검색해봤다.

dp는 화면 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위라고 한다.

- px(픽셀) : 화면을 구성하는 최소 단위
- dp : Device Independent Pixel>디바이스 크기에 의존하지 않는 픽셀

px(픽셀) = dp X (해상도/160)
dp = px X (160/해당기기 해상도)

계산이 헷갈린다면
px dp 변환 사이트를 활용하자.ㅎ

---------------

이 글을 적으며 나는 이 사이트를 인용했다.
[https://blog.cracker9.io/2018/03/13/Android_DPI/](https://blog.cracker9.io/2018/03/13/Android_DPI/)

---------------

**chatGPT에게 물어본 px과 dp의 차이**

**px (pixels)**과 **dp (density-independent pixels)**는 주로 모바일 앱이나 웹 디자인에서 사용되는 두 가지 단위이며, 둘의 차이는 다음과 같습니다.
### 1. **px (pixels)**:
- **픽셀**은 화면 상의 실제 물리적인 점(도트)을 의미합니다.
- 픽셀은 기기마다 크기가 다를 수 있습니다. 예를 들어, 해상도가 낮은 기기에서는 픽셀이 크고, 해상도가 높은 기기에서는 픽셀이 더 작습니다.
- 고해상도 디스플레이(예: Retina 디스플레이)에서는 같은 크기의 UI 요소라도 더 많은 픽셀을 사용하여 더 선명한 이미지를 제공합니다.
### 2. **dp (density-independent pixels)**:
- **dp**는 기기 해상도와 관계없이 일관된 크기를 유지하는 단위입니다.
- 주로 **안드로이드**에서 사용되며, **iOS**에서는 **pt (points)**가 비슷한 역할을 합니다.
- **dp**는 화면의 **픽셀 밀도**(DPI, Dots Per Inch)에 따라 조정됩니다. 이는 고해상도 기기에서 작은 텍스트나 버튼이 너무 작게 보이지 않도록 합니다.
    - **기본적으로 1dp는 160dpi에서 1px**과 동일합니다.
    - 즉, 160dpi 기기에서는 1dp = 1px이지만, 320dpi 기기에서는 1dp = 2px로 조정됩니다.
### 주요 차이점:
- **px**는 기기의 물리적 픽셀에 직접적으로 대응하는 단위입니다.
- **dp**는 화면의 픽셀 밀도에 무관하게 일관된 크기를 제공하는 단위로, 다양한 해상도에서 UI 요소의 크기를 동일하게 보이도록 합니다.
정리하자면, px는 해상도에 따라 변동되는 반면, dp는 해상도에 관계없이 일관된 사용자 경험을 제공하기 위한 단위입니다.




DP와 PX의 차이

홍보대행사 3년 > 핀테크기업 2년 > XR 관련 회사재직중인 UI 디자이너 전대리입니다. Have a nice day