DPI 디자이너 안내서 – 실제 크기로 변환

폭로: 귀하의 지원은 사이트 운영을 유지하는 데 도움이됩니다! 이 페이지에서 권장하는 일부 서비스에 대한 추천 수수료가 발생합니다.


웹에서 DPI는 인치당 밀도 픽셀을 나타냅니다. PPI는 단순히 인치당 픽셀 수를 나타냅니다. DPI는 인쇄 산업에서 시작되었지만, 현대화 된 정의로 인해 웹에서 PPI 대신 사용되는 경우가 많습니다.

어떤 초기 설정을 선호하든 웹 사이트 또는 앱을 디자인 할 때 DPI 설정이 그래픽이 화면에 표시되는 방식에 어떤 영향을 미치는지 이해해야합니다..

웹 그래픽 디자인의 비공식 표준은 72 DPI입니다. 최초의 Mac 컴퓨터 인 128K 시대에는 Photoshop의 표준 DPI 설정이었습니다. (128K의 픽셀 밀도와 iPad의 비교는 훌륭합니다.)

72 DPI를 사용하면 인쇄 안정성이 향상되었습니다. 그리고 72 DPI는 우리에게 옳고 그름을 고수했습니다.

실제로 우리가 사용하는 많은 장치는 72보다 DPI가 상당히 높기 때문에 많은 문제가 발생합니다. 다행히도 디자인을 개발할 때 도움이되는 알려진 규칙이 있습니다..

화면 해상도가 중요한 이유

물리적 크기가 동일한 두 개의 장치가 있다고 가정하십시오. 장치 1의 화면 디스플레이는 72 DPI입니다. 장치 2의 디스플레이는 144 DPI입니다.

72 DPI로 이미지를 디자인하면 이미지가 72 DPI 화면에서 의도 한 크기로 정확하게 표시됩니다. 그러나 144 PPI 화면에서는 디스플레이의 픽셀 수가 두 배이기 때문에 의도 한 크기의 절반이됩니다..

기억하십시오 : 작은 크기의 화면은 생산 비용이 저렴하다는 점을 제외하면 실제 크기는 DPI와 전혀 관련이 없으므로 큰 화면보다 DPI가 더 높은 경향이 있습니다. 오늘날의 기기에서는 비슷한 크기의 기기에 대해서도 DPI에 큰 차이가 있습니다.

  • 애플 시네마 디스플레이 : 99
  • 마이크로 소프트 표면 : ​​148
  • 아마존 킨들 파이어 7 ″ : 170
  • Apple 12 ″ MacBook : 226
  • 블랙 베리 패스포트 : 453
  • 삼성 Galaxy S7 : 576
  • 소니 Xperia Z5 프리미엄 : 801.

화면의 DPI를 즉시 확인하여 비교 방법을 확인할 수 있습니다.

디자인에서이 문제를 해결하지 않으면 Sony Xperia Z5 Premium의 72 DPI 그래픽이 작아집니다. 이것이 픽셀 해상도의 큰 차이를 다루는 방법을 알아야하는 이유입니다..

디스플레이 해상도를 일관된 방식으로 설명하기 위해 브랜딩 또는 마케팅에 의존하지 마십시오. 예를 들어 Apple의 Retina 브랜딩은보고있는 장치에 따라 다양한 디스플레이 밀도를 설명합니다. 가장 낮은 Retina 디스플레이는 218 DPI이고 가장 높은 디스플레이는 400 이상입니다..

일관된 디자인을 개발하려면 다른 접근법이 필요합니다.

간단한 스케일링을 위해 Dp 및 포인트 사용

iOS 및 Android의 측정 단위를 이해하면 디자인의 픽셀 측정을 완전히 무시할 수 있습니다.

대신 가상 픽셀 또는 CSS 픽셀의 개념을 사용할 수 있습니다.

이것은 Android와 iOS에서 약간 다릅니다.

  • dp는 장치 독립적 픽셀 또는 밀도 독립적 픽셀을 나타냅니다. Android에서 사용됩니다. 1dp는 1/160 인치를 측정합니다.
  • 포인트는 iOS와 동일합니다. 1 점은 1 인치의 1/163를 측정.

밀도에 미묘한 차이가 있지만 시스템은 매우 유사합니다.

Android 앱 레이아웃에 dp 측정을 사용하여 디자인하는 경우 해당 레이아웃을 표시 할 모든 기기의 측정 값을 정확히 알 필요는 없습니다. 장치는 자체 승수를 알고 dp 값에 적용하므로 원하는 크기로 디자인을 자동으로 렌더링합니다. 이에 대한 자세한 내용은 Android 개발자 설명서에 있습니다..

iOS 용 포인트를 사용하여 디자인하는 경우 일부 Apple 기기는 포인트를 1 픽셀 정사각형으로 표시하고 일부는 4 픽셀 정사각형으로 표시하고 일부는 9 픽셀 정사각형으로 표시한다는 점만 알면됩니다. 다시 말해, 포인트 측정은 모든 iOS 장치에 필요한 화면 해상도에 맞게 1, 2 또는 3의 승수를 따릅니다..

Android 화면 밀도 한정자 사용

모든 Android 기기는 화면 밀도에 따라 카테고리 또는 버킷으로 분류됩니다. 수천 개의 서로 다른 장치가 있으므로이 개념은 디자이너가 이미지를 작성하는 데 필요한 장치를 좁혀 설계자의 준비 작업을 단순화하는 데 도움이.

앱 아이콘처럼 Android 용 이미지를 만들 때 알아야 할 한정자가 6 개 있습니다.

  • 낮음 (LDPI) : 최대 120 DPI의 모든 장치, 0.75의 배수
  • 중간 (MDPI) : 120 ~ 160 DPI, 승수 1 (기본 밀도)
  • 높음 (HDPI) : 160-240 DPI, 배수 1.5
  • 초 고화질 (XHDPI) : 240 ~ 320 DPI, 2의 승수
  • 초고속 (XXHDPI) : 320 ~ 480 DPI, 3의 승수
  • 엑스트라 엑스트라 초고 (XXXHDPI) : 480 ~ 640 DPI, 4의 배수.

앱 이미지 또는 아이콘을 만들 때 생성 한 버킷에 따라 폴더에 배치하면됩니다. 생성 한 레이아웃에 대한 dp 측정과 함께 Android는 작업에 가장 적합한 이미지를 자동으로 선택합니다.

터치를위한 디자인

DPI 퍼즐에는 마지막 부분이 하나 있는데, 터치 스크린과 일반 디스플레이의 차이점입니다. DPI와 직접 관련이 없지만 고려하는 것이 좋습니다..

터치 스크린 또는 비 터치 스크린에서 화면 해상도가 동일하다고 가정하면 그래픽은 분명히 동일하게 보입니다. 그러나 매우 중요한 차이점이 있습니다. 사람들은 같은 방식으로 탐색하지 않습니다. 손가락 탭은 마우스 포인터보다 정확도가 떨어집니다..

터치 대상은 iOS에서 44x44pt이고 Android의 경우 48x48pt 정사각형입니다. 실수 가능성을 피하기 위해 모든 내비게이션을 더 크게 만들고 주변 간격을 늘려야합니다..

자원

  • DP를 PPI로 변환 : Android 개발자 웹 사이트의 안내서
  • Pixplicity DP to PPI 변환기 : 우수한 계산기 및 변환기
  • 디자이너를위한 팁 : Android의 밀도 한정자 및 dp 계산에 대해 자세히 알아보기
  • 터치 대상 크기에 대한 BBC 모바일 액세스 가능성 가이드 라인 :이 기사는 HTML로 액세스 가능한 모바일 레이아웃 디자인에 대한 우수 사례 팁을 제공합니다.
  • iOS 디자인 지침 : 해상도, 다운 샘플링, 아이콘, 타이포그래피, 표준 레이아웃 구성 요소 및 자동 아이콘 효과에 대해 설명합니다..
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me