이번엔 아이폰 해상도에 대한 얘기를 해보려고 한다. 먼저, Point에 관한 것이다. Point는 좌표계에 대한 추상적 단위이다. 이는 아이폰의 다양한 모델 해상도를 모두 지원하기 위해 사용하는 좌표계이다. Point 좌표계는 각 디스플레이의 스크린이 가지는 Scale factor (화면 배수) 에 따라 Rendered pixel로 옮겨진다. 각 Scale factor는 non-retina (e.g. 아이폰 3Gs 이전 모델) 의 경우에 1x이며, 일반적인 레티나 디스플레이 (e.g. 아이폰 4~7 모델)는 2x의 Scale factor를 가지고 대화면 기기 (e.g. 아이폰 6/7 플러스 모델)들은 3x의 Scale factor를 가진다. 각 Point 값에 Scale factor를 곱하면 Rendered pixel이 나온다. 일반적으로 앱을 개발할 때, 디자이너가 고려하는 픽셀 해상도가 Rendered pixel이다. Pt-Px 변환과정은 아래의 이미지에서 파란 화살표로 나타낸 과정애 해당한다.
이제 물리 해상도에 대해 얘기하려 한다. 물리 해상도는 디자이너나 개발자와는 다소 상관없는 이야기로, 기기 해상도를 만드는 과정에 대한 얘기이다. 실제 기기조립 과정에서 각 기기별 Rendered pixel에 맞게 제품을 공수하는 데에 한계가 있다. 그래서 Rendered pixel과 물리적 해상도를 맞추기 위해서 샘플링이라는 과정을 거친다. 디스플레이 해상도가 Rendered pixel보다 커질 경우에는 Up-샘플링, 작아질 경우에는 Down-샘플링을 진행한다. 이에 대해서는 아래 이미지에서 빨간 화살표로 나타나는 부분에 해당한다.
소스코드 상 좌표나 xib/storyboard 모두 pt를 기준으로 좌표를 설정한다. 그래서 px 값을 정확히 주기 위해서 추가 개발이 필요하다. 그리고 기기에 따른 레티나 배율 (@2x, @3x)에 따라 Scale factor가 다르다.
Bottom line : 1px을 그리기 위해 2x레티나는 0.5pt, 3x레티나는 0.3pt를 그려야한다. 이를 코드상으로 표현하려면 아래와 같이 한다.
#define pxToPt(x) x/[UIScreen mainScreen].scale
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
그럼 우리는 왜 위와 같은 번거로운 과정을 통하여 개발을 위한 추상적 단위인 Point를 추상적 해상도로, 또 이를 물리적 해상도로 다시 샘플링을 해야만 하게 됬는지 의문을 가지기 쉽다. 이 과정을 이해하고자 하면 처음으로 Scale factor라는 것을 적용해야했던 아이폰4 시절로 돌아간다. 아이폰4는 사람의 망막(통칭 'retina')이란 명칭을 부여하면서 개발한 화면을 적용하여, 해상도의 조밀함을 대대적으로 홍보한 첫 아이폰이다. 하지만 여기엔 큰 난관이 있었다. 기기의 업그레이드 이면에 기존 해상도를 위해 개발된 앱의 호환성이다. 레티나 디스플레이가 아닌 아이폰3g/3gs를 위해 개발된 앱들이 2배 해상도를 가진 아이폰4에서 화면이 깨지는 일은 당연지사였기 때문이다. 호환성을 위해 애플은 처음으로 Scale factor를 사용하여 Point와 Rendered pixel을 이원화 하면서 기존 앱들의 호환성을 꾀했다. 하지만 이미지 파일들은 2배로 직접된 화면에 표시할 때, Blur 현상이 나타날 수 밖에 없었다. 이를 해결하기 위해 아이폰 개발자에게 익숙한 @2x 이미지들이 나오게 된다.
이후 2013년 스마트폰 시장에 Full-HD 바람이 분다. 대부분의 스마트폰은 '1920x1080'이란 물리학 법칙과 같은 해상도를 장착한 스마트폰을 내놓기 시작했다. 애플은 Full-HD를 지원하는 화면에 레티나를 지원하면서 기존 앱과의 호환성을 고민하게 된다. 그 결과로 4.7' 화면은 새로운 Point 수치를 가진 화면을 적용하게 된다. 5.5' 대화면의 경우는 2x의 Scale factor로 레티나 지원에 한계가 생기자, 3x라는 Scale factor를 사용하게 된다. 단, 3x를 적용한 Pixel 좌표계가 Full-HD 해상도인 '1920x1080'보다 더 큰 해상도를 가지게 되자, 이를 물리적 해상도와 맞추기 위해 샘플링이란 과정을 추가한다.
앞서 말한 것들은 Point 기반의 추상적 좌표계가 화면을 통해 우리 눈에 비춰지는 물리적 해상도로 계산되는 과정과 이런 과정이 탄생한 배경에 관한 이야기이다. 이를 간과하면서 넘어갈수도 있지만, 실제 물리적으로 표현되는 좌표계를 이해하고 앱을 개발하면 좀더 유기적이고 아름다운 레이아웃을 가진 UI/UX를 최종 사용자에게 제공할 수 있는 역량을 갖출 것이라고 생각한다. 이 글은 이쯤에서 마무리하려고 한다. 좀더 자세한 설명과 이해를 위해 아래의 링크를 남긴다.
http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/