모바일 기기별 사이즈

 

기기명	phys. width	phys. height	CSS width	CSS height	pixel ratio	phys. ppi	OS	Launch Date
Apple iPhone 14 Pro Max	1290	2796	430	932	3	460	iOS 16.0	2022.09
Apple iPhone 14 Plus	1284	2778	428	926	3	458	iOS 16.0	2022.09
Apple iPhone 14 Pro	1179	2556	393	852	3	460	iOS 16.0	2022.09
Apple iPhone 14	1170	2532	390	844	3	460	iOS 16.0	2022.09
Apple iPhone 13 Pro Max	1284	2778	428	926	3	458	iOS 15.0	2021.09
Apple iPhone 13 mini	1080	2340	360	780	3	476	iOS 15.0	2021.09
Apple iPhone 13, 13 Pro	1170	2532	390	844	3	460	iOS 15.0	2021.09
Apple iPhone 12 Pro Max	1284	2778	428	926	3	458	iOS 14.1	2020.10
Apple iPhone 12 mini	1080	2340	360	780	3	476	iOS 14.1	2020.10
Apple iPhone 12,  12 Pro	1170	2532	390	844	3	460	iOS 14.1	2020.10
Apple iPhone SE (2세대)	750	1334	375	667	2	326	iOS 13.0	2020.04
Apple iPhone 11 Pro Max	1242	2688	414	896	3	458	iOS 13.0	2019.09
Apple iPhone 11 Pro	1125	2436	375	812	3	458	iOS 13.0	2019.09
Apple iPhone 11	828	1792	414	896	2	326	iOS 13.0	2019.09
Apple iPhone Xs Max	1242	2688	414	896	3	458	iOS 12.0	2018.09
Apple iPhone Xr	828	1792	414	896	2	326	iOS 12.0	2018.09
Apple iPhone X, Xs	1125	2436	375	812	3	458	X : iOS 11.1.1 Xs : iOS 12.0	X : 2017.09 Xs : 2018.09
Apple iPhone 6+, 6s+, 7+, 8+	1080	1920	414	736	3	401
Apple iPhone 7, iPhone 8	750	1334	375	667	2	326	7 : iOS 10.0.1 8 : iOS 11.0	7 : 2016.09 8 : 2017.09
Apple iPhone SE	640	1136	320	568	2	326	iOS 9.3.2	2016.03
Apple iPhone 6, 6s	750	1334	375	667	2	326	6 : iOS 8.0 6s : iOS 9.0	6 : 2014.09 6s : 2015.09
Apple iPhone 5	640	1136	320	568	2	326	iOS 6.0	2012.09
Apple iPhone 4	640	960	320	480	2	326	iOS 4.0	2010.06
Samsung Galaxy Z Fold2	1768	2208	884	1104	2	373	Android 10.0	2020.08
Samsung Galaxy Z Flip	1080	2636	412	1004	2.625	425	Android 10.0	2020.02
Samsung Galaxy S22 Ultra	1440	3088	360	772	4	500	Android 12.0	2022.02
Samsung Galaxy S22, S22+	1080	2340	360	780	3	S22 : 422 S22+ : 393	Android 12.0	2022.02
Samsung Galaxy S21 Ultra	1440	3200	384	854	3.75	515	Android 11.0	2021.01
Samsung Galaxy S21	1080	2400	360	800	3	421	Android 11.0	2021.01
Samsung Galaxy S20 Ultra	1440	3200	412	915	3.5	525	Android 10.0	2020.02
Samsung Galaxy S20+	1440	3200	384	854	3.75	525	Android 10.0	2020.02
Samsung Galaxy S20	1440	3200	360	800	4	563	Android 10.0	2020.02
Samsung Galaxy S10+	1440	3040	412	869	3.5	522	Android 9.0	2019.03
Samsung Galaxy S10	1440	3040	360	760	4	550	Android 9.0	2019.02
Samsung Galaxy S9+	1440	2960	360	740	4	529	Android 8.0	2018.03
Samsung Galaxy S9	1440	2960	360	740	4	570	Android 8.0	2018.03
Samsung Galaxy S8+	1440	2960	360	740	4	529	Android 7.0	2017.04
Samsung Galaxy S8	1440	2960	360	740	4	568	Android 7.0	2017.04
Samsung Galaxy S7, S7 edge	1440	2560	360	640	4	S7 : 577.4 S7 edge : 534	Android 6.0	2016.02
Samsung Galaxy S6	1440	2560	360	640	4	577	Android 5.0	2015.03
Samsung Galaxy S5	1080	1920	360	640	3	432	Android 4.4	2014.02
Samsung Galaxy S4	1080	1920	360	640	3	441	Android 4.2	2013.03
Samsung Galaxy S3	720	1280	360	640	2	306	Android 4.0	2012.05
Samsung Galaxy S2	480	800	320	533	1.5	217	Android 2.3	2011.02
Samsung Galaxy S	480	800	320	533	1.5	233	Android 2.1	2010.03
Samsung Galaxy Note 20 Ultra	1440	3088	412	883	3.5	496	Android 10.0	2020.08
Samsung Galaxy Note 20	1080	2400	412	915	2.625	393	Android 10.0	2020.08
Samsung Galaxy Note 10+	1440	3040	412	869	3.5	498	Android 9.0	2019.08
Samsung Galaxy Note 10	1080	2280	412	869	2.625	401	Android 9.0	2019.08
Samsung Galaxy Note 9	1440	2960	414	846	3.5	516	Android 8.1	2018.08
Samsung Galaxy Note 8	1440	2960	414	846	3.5	521	Android 7.1.1	2017.09
Samsung Galaxy Note 7	1440	2560	360	640	4	518	Android 6.0	2016.08
Samsung Galaxy Note 5	1440	2560	360	640	4	518	Android 5.1	2015.08
Samsung Galaxy Note 4	1440	2560	360	640	4	518	Android 4.4	2014.09
Samsung Galaxy Note 3	1080	1920	360	640	3	387	Android 4.3	2013.09
Samsung Galaxy Note 2	720	1280	360	640	2	267	Android 4.1	2012.08
Samsung Galaxy Note	800	1280	400	640	2	285	Android 2.3	2011.09

출처: https://circumeo.tistory.com/51 [℃:티스토리]

 

 

디테일하게 나온곳.

https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

 

''

---

논리적 픽셀

고밀도 디스플레이 기술로 디바이스마다 해상도가 높아졌고, 픽셀 밀도도 다양해졌다.

픽셀 밀도가 다양해지니 개별 픽셀의 크기도 천차만별이었다.

디바이스별 개별 픽셀의 크기에 따라 같은 이미지가 다른 위치, 크기로 보이는 문제가 발생했다.

 

 

그래서 어떤 디바이스에서든 같은 이미지가 동일하게 보이도록 논리적 픽셀을 도입했다. 

 

 

*논리적 픽셀: css에서 표현하는 픽셀로, 물리적 픽셀의 토대 역할을 한다.

즉, 디스플레이 픽셀이 몇 개든 css 픽셀 컨텐츠가 구현된다.

보통 논리적 픽셀을 기준으로 디자인한 것을 디바이스 밀도에 맞게 몇 배로 곱한다.

 

논리적 픽셀 단위는

• 안드로이드 OS에서 DP와 SP
• 아이폰 OS에서 PT

 

*물리적 픽셀(px): 최종적으로 디바이스 화면에 출력되는 픽셀이다.

우리가 보는 디바이스의 실제 해상도를 이루는 픽셀이라 할 수 있다. 

 

*DP: 안드로이드 OS의 논리적 픽셀 = 밀도 독립적 픽셀(Density Independent Pixel)이란 뜻 

*SP:  안드로이드 환경의 폰트 단위  = 크기 독립적 픽셀(Scale Independent Pixel)이란 뜻

기본적으로 DP와 같은 크기지만, DP와 달리 SP는 시스템 폰트 설정 값에 영향을 받는다.

 

즉, 사용자가 안드로이드 시스템 설정에서 폰트 크기를 조절하면 SP 단위가 적용된 폰트도 조절되어 

 사용자들은 시스템 폰트를 크게 설정하기때문에 그러한 사용자를 고려한다면 sp를 사용하기도 한다.

ex) 높은 연령대,장애인, 근시,난시 등

 

*PT(Point): 아이폰 OS의 논리적 픽셀로, DP와 같은 역할을 한다.

 

---

AOS와 IOS 밀도

안드로이드 기반 디바이스는 고도로 발전하여 현재 점유율이 가장 높고 디스플레이 밀도도 매우 다양하다.

그래서 안드로이드 OS(AOS)에선 DPI를 6단계로 나누고 DP라는 논리적 픽셀을 공통의 측정 단위로 정했다.

기준 밀도(mdpi)인 160 dpi가 초기 시장에서는 가장 보편적이었으나, 이제는 초고밀도(xhdpi)인 320 dpi가 가장 보편적이다. 

 

 

안드로이드 밀도 단계와 점유율

 

 

*안드로이드 배포 대시보드: developer.android.com/about/dashboards?hl=ko

*안드로이드 밀도 지원: developer.android.com/training/multiscreen/screendensities

 

한편 아이폰 OS(IOS)에서는 밀도를 3단계로 나누고 PT라는 논리적 픽셀을 공통의 측정 단위로 정했다.

 

아이폰 밀도 단계

mdpi: 1@x *base(기준 밀도)이며 1pt가 1px이다.

xhdpi: 2@x *1pt=2px

xxhdpi: 3@x *1pt=3px

 

안드로이드, 아이폰 OS의 밀도 단계에 대해 알아보았다.

디바이스 밀도에 따라 어떻게 디자인해야 하는지 알고 싶다면 다음의 포스팅을 참고하자.

 

mesign.tistory.com/12

UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지)

 

출처: https://mesign.tistory.com/11 [UI·UX Design Study:티스토리]

 

---

1 dp는 mdpi(160 dpi) 디스플레이에서 1px이며,

DPI에 따라 2px이나 3px, 또는 4px이 되기도 한다.

 

 

*보통 디자인 툴에서 1dp는 1px로 설정, 디자이너는 1dp로 디자인한 후 렌더링한다.

 

 

dp를 px로 변환식  = px = dp * (dpi / 160)

 

 

*래스터화 과정: 논리적 픽셀 → (n배수로 렌더링) → 렌더링 된 픽셀 → (다운/업샘플링) → 물리적 픽셀 →물리적 디바이스

 

*다운샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 높으면 크기를 낮춘다.

*업샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 낮으면 크기를 높인다.

 

샘플링 과정에서 해상도를 강제로 키우거나 줄이므로 픽셀이 열화될 수 있다.

 

*아이폰 해상도 변환 가이드: www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

*모든 단위 변환 웹사이트: https://pixplicity.com/dp-px-converter/

 

출처:  https://mesign.tistory.com/m/10

 

 

---