모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점

안녕하세요 찐망고 입니다.

오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다.

 

1. 해상도란 무엇인가?

해상도는 화면에 표시되는 픽셀의 총 개수를 이야기합니다.

최신 스마트폰들의 해상도를 살펴보면 다음과 같습니다.

• 갤럭시 Z 플립5: 2640 x 1080
• 갤럭시 S23+: 2340 x 1080
• 아이폰 14: 2532 x 1170
• 아이폰 14 Pro: 2556 x 1179
• 아이폰 14 Pro Max: 2796 x 1290

 

 

2. 픽셀 밀도(pixels per inch, ppi)와 중요성

픽셀 밀도는 화면의 선명도를 결정하는 중요한 요소로, 1인치 안에 들어가는 픽셀의 수를 나타냅니다. 

예를 들어, 아이폰 14 Pro Max는 1인치 안에 460 x 460개의 픽셀이 들어있다는 의미입니다.

 

 

 

3. 뷰포트와 디바이스 픽셀 비율(Device Pixel Ratio, DPR)

실제 화면에 표시되는 픽셀과 실제 픽셀의 비율을 디바이스 픽셀 비율이라고 합니다.

 

Divice pixel ratio

• 뷰포트: 430 x 932
• 실제 스크린 사이즈: 1284 x 2778
• DPR: 3 (이는 디자인 작업 시 이미지를 3배 크기로 작업해야 함을 의미)

공유된 사이트로 직접 확인해볼까요?

Run Mobile Test or Cross-Device Test | Blisk

 

 

 

 

4. 안드로이드와 iOS의 단위 시스템

안드로이드와 iOS는 각각 다른 단위 시스템을 사용하여 디바이스의 다양한 화면 밀도에 맞추어 

요소들이 동일한 크기로 보이게 합니다.

• 안드로이드: DP (dots per inch)
  • 예: 30dp x 30dp의 박스는 다양한 해상도에서 동일하게 보입니다.
• iOS: PT (points)
  • 다양한 DPR(1x, 2x, 3x)에 따라 요소가 조정됩니다.

 

 

5. 디바이스별 픽셀 밀도 분류

안드로이드 디바이스는 다음과 같은 픽셀 밀도 카테고리를 가집니다:

ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi가 있습니다.

크기	dpi	픽셀	배율
ldpi	~120dpi	240 x 320	0.75x
mdpi	~160dpi	360 x 480	1x
hdpi	~240dpi	480 x 800	1.5x
xhdpi	~320dpi	720 x 1280	2.0x
xxhdpi	~480dpi	1080 x 1920	3.0x
xxxhdpi	~640dpi	1440 x 2560	4.0x

 

 

 

6. 단위 변환

디자인 및 개발 시 필요에 따라 dp를 px로 쉽게 변환할 수 있어야 합니다. 

예를 들어 xxhdpi에서는 5dp가 15px에 해당합니다.

단위변환 사이트를 참고하세요.

http://labs.rampinteractive.co.uk/android_dp_px_calculator/

 

 

 

결론

안드로이드와 iOS는 각기 다른 화면 해상도와 밀도를 가지고 있음에도 불구하고,

개발자와 디자이너는 dp와 pt 단위를 사용하여 모든 디바이스에서 요소들이 일관된 크기로 보이게 할 수 있습니다.

따라서, 디자인과 개발 단계에서는 이러한 단위들과 디바이스 픽셀 비율을 고려하여 작업하는 것이 중요합니다.

 

안드로이드 유입율과 iOS유입율에 따라 시안을 1배 비율에 맞춰 작업하면 되는데요.

우리나라 모바일 기준 최신 1년간 현재 안드로이드 점유율이 가장 높구요

근데 왜 다들 작업은 iOS유입율 기준으로 많이 할까요? (그게 나임)

우리나라에서 사용하는 모바일 os 점유율

 

• 시안은 1배율(px과 dp혹은 pt가 서로 같은)에 맞는 화면으로 작업한다. 
  안드로이드 360 x 640, iOS 375 x 812
• dp와 pt단위 모두 각 os환경에서 화면의 해상도가 달라도
  각각의 요소들이 디바이스 마다 동일한 크기로 보이기위해 사용하는 단위이다.
• 개발할땐 px를 사용해야 하므로 각 단위를  Divice pixel ratio(배수)를 체크해서 변환할 수 있어야 한다.