[잡솔] 아이폰6, 아이폰6+의 해상도

 

2015.11.17 수정. 2편 [잡솔] 아이폰6, 아이폰6+의 해상도 2편 (디자이너의 작업) 을 새로 등록했습니다. 아래의 글이 어려우시면 2편을 참고하시기 바랍니다.

 

커뮤니티들에서 기획자와 디자이너들을 포함하여 개발자들이 해상도 때문에 괴로워하는 모습을 보게 되었습니다. 물론 기본적인 문제는 기기와 해상도가 늘어남에 따른 검수 작업 증가지만 그보다는 어떻게 작업해야 하는지를 몰라서 멘붕에 빠진 모습이 더 자주 보였습니다. 그래서 관련 포스팅을 한 번 해보려 합니다.

한줄 정리 : 알고 보면 간단하다.

기존보다 맞춰야 할 해상도는 많아졌지만 어차피 제일 큰 사이즈로 작업 후 리사이즈로 이미지를 맞추는건 동일합니다. 여전히 안드로이브보다 훨씬 수월하고요. 단지 아이폰 6+의 DPI에 맞추어 아이폰 6와 다른 화면 구성을 할 것인가라는 고민이 추가된 것 뿐입니다. DPI를 외국 아이폰 포럼들에서는 Physical Pixel Per Inch 라고 하는 듯 하니 참고하시면 될 듯 합니다.

물론, 이 알고 보면 간단하다는 것에 대한 설명은 꽤 깁니다.

우선은 기존의 레티나와 아이폰 6, 그리고 아이폰 6+의 차이점을 알아야 합니다. 첫 아이폰부터 아이폰5s까지는 폰의 해상도만 업그레이드 되었습니다. 아이폰 5에서 폰의 세로가 커졌지만 딱 그만큼만 해상도가 높아졌기 때문에 아이폰5 역시 동일 선상에 있습니다. 그러니 좌표는 한 가지였고 이미지도 크게 만들어서 절반으로 줄이면 끝났습니다.

하지만 이번에는 폰이 커졌습니다. 그렇다면 해상도는 둘째 이야기가 됩니다. 왜냐면 폰 크기가 달라지면 해상도가 동일하든 정수배로 커지든 말든 화면에 보이는 정보량을 다르게 가져가는 것이 바람직하기 때문입니다. 따라서 이제는 크기가 다른 폰이 세 가지이므로, 세 가지의 DPI를 가지고 있다라고 생각해야 합니다.

현재 아이폰 6와 아이폰 6+의 해상도가 서로 다르고 아이폰 6는 변태 해상도, 아이폰 6+는 좌표값과 실 해상도가 맞지 않는 이슈가 있습니다. 사람들이 이해 할 수 없어 하는 건 첫 번째로는 동시에 두 기기를 내는건데 굳이 일부러 이렇게 어렵게 가느냐, 왜 아이폰 6는 HD도 아니고 750×1334냐  라는 것이고, 두 번째로는 아이폰 6+의 경우 해상도는 FHD인 1080×1920인데 실 작업을 왜 1242×2208로 해야 하는가 입니다. 개발툴을 보면 좌표값을 1242×2208의 1/3인 414×736로 사용하게 되어 있고, 스크린샷등도 모두 1242×2208 사이즈로 업로드하게 되어 있거든요.

그런데 사실 간단합니다.  오히려 두 번째의 의문이 없었다면 더 어려웠겠지만요.

먼저 아이폰 6가 변태 해상도인 이유는 5와의 연계성입니다. 

먼저, 만약 아이폰 6+의 FHD 해상도를 단순하게 1/3으로 나누어서 좌표값을 360×640으로 작업을 하고 아이폰 6가 HD로 나왔다면 작업이 편했을 겁니다. 아이폰 6는 두배 이미지, 6+는 3배 이미지를 쓰면 되니까요. 하지만 그러기에는 6+ 의 화면이 너무 큽니다. 물리적인 화면의 사이즈가 너무 크기 때문에 이미지나 텍스트들이 너무 크게 보일 것입니다.

애플은 아이폰6와 아이폰6+에서 아이폰 시리즈로는 처음으로 DPI를 조정해야 할 일이 생겼습니다. 처음으로 폰의 화면 크기가 커졌으니까요. 기존처럼 밀집도만 올려서 더 선명하게 보이는 개념이 아니라, 실제적으로 물리적인 화면 크기에 따른 정보량을 달리 해야 할 필요가 생긴겁니다. 구현 방법에는 여러 가지가 있겟지만 애플은 좌표값을 변경하여 작업하는 방향을 사용하고 있습니다. 물론 이것이 처음은 아닙니다. 아이패드가 이미 선례지요. 다만 여기에 추가 된건 아이폰6+의 경우 이미지 사이즈를 실제보다 크게 잡는다는 부분입니다.

아이폰6+는 해상도가 1080×1920 이지만 좌표를 413×736 을 사용하고 실제 이미지는 x3인 1242×2208을 사용합니다. 그리고 폰은 그것을 자동으로 1080×1920의 해상도에서 보여지도록 합니다.

무슨 말이냐 하면, 디자이너는 1242×2208로 디자인을 합니다. 단 화면 구성은 아이폰 6를 기준으로 합니다. 즉 1242×2208 픽셀로 작업을 하지만 화면 크기는 4.7인치로 작업한다는 거지요. 4.7인치의 폰에서 클릭하기 쉬운 크기의 아이콘, 읽기 쉬운 크기의 글자를 사용한다는 의미입니다. 그렇게 작업한 결과물을 1242×2208 과 750×1334 두 가지로 저장합니다. 그러면 우선 아이폰6에서는 당연히 750×1334가 정상적으로 잘 보이겠고, 다만 5.5인치 크기의 아이폰6+에서는 약간 크게 보여야 하지 않을까 싶지만, 아이폰6+는 자동으로 1080×1920으로 크기를 줄여서 뿌리기 때문에 실제보다 모든게 작게 보입니다. 따라서 아이폰6와 아이폰6+는 클릭과 가독성에 있어 차이가 없어지게 됩니다.

아이폰 6+의 DPI를 이해하고 나면 아이폰 6의 번태 해상도를 이해하게 됩니다. 어차피 6+는 위에서 말한데로 전용 DPI를 쓰기 때문에 그와 동일한 좌표값을 아이폰 6에서 사용하는건 말이 안됩니다. 애초에 아이폰 6+ 자체가 다른 좌표값을 쓰겠다 라고 선언한 기기니까요. 그렇다면 아이폰 6의 좌표는 아이폰 5와 맞추느냐 아니냐를 선택해야 합니다. 아이폰 5의 해상도는 640×1136 이고 좌표는 320×568 입니다. 두 배 크기의 이미지를 사용하지요. 만약 세 배 크기를 하게 된다면 960×1804 가 됩니다. 960×1804 로 아이폰 6을 만들었다면 물론 작업은 편했을겁니다. 그러나 아이폰 6+와 동일한 이슈가 있지요. 폰은 큰데 정보량이 동일합니다. 물론 폰이 아주 큰 건 아니기 때문에 그러려니 할 수도 있겠습니다만, 아이패드 미니와 아이패드 에어 역시 아이폰과 크게 차이 나지 않는 크기의 아이콘과 텍스트를 사용하는 것을 보건데 애플은 전부터 DPI 기준을 가지고 있고 그것을 착실하게 유지하고 있다는 것을 알 수 있습니다.

* 내용을 수정/추가하였습니다: 아이폰5와 6의 관계를 보면, 5보다 6은 화면이 커졌습니다. 5보다 6은 해상도가 높아졌습니다. 어느만큼 커지고 어느만큼 높아졌냐면, 딱 커진만큼 높아졌습니다. 무슨 말이냐 하면, 3.5인치에서 4인치로 세로만 커진 아이폰5 처럼, 5에서 6은 세로/가로가 딱 해상도만큼 커진겁니다. 그래서 같은 @2x 이미지를 사용하죠. 같은 해상도의 icon을 사용하면 둘은 크기가 같게 나옵니다. 좌표만 다른거죠.

이제 실 작업을 살펴보면… 먼저 디자이너는 풀사이즈(1242×2208)로 작업을 합니다. 다만 화면의 아이콘이나 글자는 아이폰 6의 4.7인치 화면 크기를 기준으로 클릭과 가독이 쉬운 사이즈로 작업합니다. 즉 1242×2208에서는 다소 크게 보이는 형태로 작업하는거죠. 그 상태에서 필요하다면 아이폰 6+ 전용 UI를 추가해도 됩니다.그리고 작업 결과물을 각각의 이미지로 리사이즈해서 내보내면 됩니다. 즉 2208 하나, 1334 하나, 1136 하나입니다. (2015.03.08 글에 오류가 있어서 1500을 1334로 변경했습니다. 댓글 감사합니다.)

여기에서 1242×2208을 750×1334로 리사이즈시 정배율 문제를 떠나서 정확히 픽셀과 비율로 나눠지지 않는다는 부분은 있습니다. 하지만 결과적으로 보면 몇픽셀 차이가 안나서 무시하면 됩니다. 만약에 풀이미지라면 포토샵에서는 세로 기준(2208->1334)으로 리사이즈하면 맞습니다. 그리고 아이폰 5의 640×1136을 보면 가로 기준(2208->640)으로 리사이즈하면 세로가 1138이 되어 2픽셀이 남게 되고, 세로 기준(2208->1136)으로 리사이즈하면 가로가 1픽셀 부족하게 되는데요. 이 때에는 어느 쪽으로 리사이즈 했든간에 개발자가 원본이미지를 가운데 정렬로 사용하면 좌/우 또는 상/하가 아주 미세하게 비는 수준이기 때문에 티가 안납니다. 물론 풀이미지가 아니라면 1~2픽셀은 어딘가의 여백으로 쓰면 그만입니다. 개발자가 알아서 해도 아무런 티가 나지 않습니다. (물론 위의 여백 픽셀이 정확하지는 않을 수 있습니다. status bar 등의 기본 UI픽셀을 제거 후 리사이즈할 수도 있으니까요. 하지만 어쨌든 별 차이가 안 날 겁니다. 그리고 비트맵 이미지라 하더라도 아주 작은 텍스트들이 있는게 아니고 그냥 그림 같은 이미지라면 비율무시하고 사용해도 티가 안날겁니다.)

안드로이드와 아이폰을 동시에 만든다고 해도 이 역시 1242×2208 로 작업하면 됩니다. 4.7 ~ 5인치 정도의 화면 사이즈를 기준으로 잡아서 작업하면 됩니다.

물론 개발은 좌표에 맞게 레이아웃이 자동으로 짜지도록 작업하면 됩니다. 다만 글자가 포함된 비트맵 풀이미지의 경우 화면비율이 정확히 맞지 않는 걸 억지로 늘리기 보다는 어차피 1-2픽셀 티안나는거 여백을 두고 원본을 보여주는 것도 좋겠습니다만 로딩이미지에서 좌/우가 살짝 비었던게 로딩 후 다른 이미지로 채워진다면 어색할 수도 있습니다. 따라서 기본적으로는 풀로 채우고 퀄리티에 문제가 있다면 그 때 디자이너와 상의해서 이미지를 보정하든 화면사이즈를 보정하든 하면 될 것 같습니다. 어차피 풀 이미지일때의 이야기라 보정도 간단하겠지요.

알고보면 간단하다는 여기서 끝.

2016.12.29 내용추가: 6+에서 풀사이즈의 이미지는 2208보다 1920으로 넘기는 것이 용량과 퍼포먼스 측면에서 낫습니다. 굳이 2208을 넘겨서 1920으로 리사이징 해서 보는 것 보다 처음부터 1920으로 넘기는게 좋겠죠. 이것은 런치 이미지와 같이 가이드가 필요 없는 풀 이미지에 해당됩니다. 하단 댓글 내려서 보시면 12월29일자로 설명 달아 놓았습니다.

추가로 특별히 엄청난 퀄리티로 만들 것이 아니라면 QHD 해상도는 신경 쓰지 않아도 됩니다. 지금 5.5인치의 FHD 폰을 쓰면서 아 해상도가 낮아서 뿌옇게 보이네 라고 생각한다면 QHD를 신경써야 겠지만 그게 아니니까요. 물론 미세하게 좋기야 하겠지만 노력대비 결과가 티가 안나고 이미지 사이즈 때문에 오히려 퍼포먼스가 더 나빠질 수 있다는 점도 감안해야 합니다.

여담으로 정말 개인적인 생각입니다만 5.9인치 FHD폰을 쓰면서 5.3인치에서 FHD보다는 뭔가 아쉬움이 있습니다. 레티나 아이패드에서도 약간 느껴지는데요. 아마도 FHD는 5.5이하가 한계인 것 같습니다. 10인치에서는 QHD정도가 완벽한 것 같고요. 6~9인치는 그 중간이 되겠죠.  평소에 이리 생각해왔는데 5.5의 이미지 크기가 1242×2208여서 약간 놀랐습니다. 물론 해상도는 FHD이긴 하지만요. FHD와 QHD의 중간 해상도가 5.5~6에서 최상이라고 생각했거든요. 더 낮은건 약간 아쉽고 더 높은건 티가 안나니까요. 물론 1242×2208 같은 중간 해상도의 기기가 나올 일은 영원히 없겠지요.

24 thoughts on “[잡솔] 아이폰6, 아이폰6+의 해상도

  1. Pingback: iOS의 멀티 해상도 디자인 가이드 | Angel King

  2. 안녕하세요 블로그 보고  질문이 있어서 글 남깁니다.

    지금 간단한 아이폰 어플리케이션 개발을 하고있는데 

    이미지 때문에 계속 진행이 안되고 있습니다.

    아이패드 용은 만들 계획이 아니며, 아이폰4,5,6,6+ 용 만 만들고 있습니다.

    1242×2208 로 이미지를 하나 만들어서 다 적용 시키면 되는건가요?  images.xcassets 에 보면 1x 2x 3x 로 나뉘어져있는데

    각 아이폰 크기에 맞추려면 어떻게 해야하는지 잘 이해가 가질 않습니다. 

    도와주실수 있으시면 알려주실수 있나요?

    부탁드립니다.

    제 이메일은  thdansgur@gamil.com 입니다.

     

    • 사실 글에서는 1242×2208 로 작업해야 한다라고 했지만 실제로는 꽤나 어려운 일일거라는 생각을 합니다. 픽셀이 너무 크니까요.

      국내 안드로이드 프로젝트들을 보면 720p이미지를 사용할 때가 많습니다.720×1280으로 작업해도 6인치 FHD 폰에서? QHD 5.5인치 폰에서? 쨍쨍하게 보입니다. 물론 1080×1920 의 이미지가 더 선명하게야 보이겠지만 아주 세밀한 (예를들면 작은 글자들이 빼곡한) 이미지가 아닌 이상 티가 안나죠. 퀄리티에 목숨을 거는게 아니라면 오히려 720×1280 쪽이 퍼포먼스도 좋고 데이터 사용량도 적습니다. 어느정도냐면 10인치 패드에서 보면 조금 아쉽지만 이것도 패드 전용 UI 를 짠다면 일반인들에게는 티가 나지 않는 정도입니다. 단순 확대했다면 티가 나겠지만 크기에 맞추어서 UI가 변형되는 스타일이라면 버튼 크기 등이 그대로니까요.

      다시 아이폰으로 돌아와보면, 첫번째로 정말로 원본 사이즈를 2208로 디자인을 할 것인가를 고려 하셔야 할 것이고, 두번째로 2208로 디자인 하던 말던 x2 는 750×1334 이미지를 의미하고 x1 은 640×1136 을 의미합니다. (수정: x2는 750×1334와 640×1136을 모두 의미하네요. imageasset을 보니 @2x, retina @2x가 따로 있습니다. x1은 여전히 320×640 입니다.) 기존과 같이 @1하고 @2가 정배율로 나뉘던 시대는 끝났습니다. 각기 전혀 다른 사이즈라고 생각하시면 됩니다. 즉 원본이 2208이라면 그걸 1334로 리사이즈 후 @2로 저장하는 겁니다.

      마지막으로 가장 간소화 하는 방법은 750×1334 하나만 가져가는 겁니다. @1과 @3은 무시하는거죠. 아이폰5s에서는 약간 큰 이미지를 자체적으로 리사이즈해서 사용할거고 (예를들면 100×100 의 이미지를 브라우저가 HTML태그로 인하여 80×80으로 리사이즈해서 보는것과 비슷합니다.) 아이폰6+에서는 작은 이미지를 확대해서 사용하는 꼴이겠죠. (100×100 이미지를 120×120으로 사용하는거죠.) 5s에서는 퍼포먼스가 약간 부족할거고 6+에서는 퀄리티보다는(해상도는 위의 안드로이드 폰을 예로 들었듯이 사실 충분하므로) 좌표만 맞춰놓으면 별 문제 없을겁니다. (추가: 어차피 현재는 @2x가 애매하게 되어 있지만 나중에는 6용으로 정확한 사이즈나 배율을 요구할 수도 있습니다.)

      각각 테스트 해 보세요. 글자들이 어느정도 있는 풀 이미지와 작은 이미지가 웹뷰 등에 녹아 있는 화면을 @1 @2 @3 으로 이미지를 이런 저런 크기로 해 보시면 차이를 느끼실 수 있습니다. 즉 1334 하나를 @1 @2 @3으로 저장해서 보시고, 제대로 제작해서 보신 후 차이를 보시면 되는거죠. 1334 하나만 만드셔도 별 차이를 못 느끼실거예요~

  3. 안녕하세요~ 좋은 글 잘 보았습니다. ^^ 

    저희는 이전에 1x, 2x 두벌을 모두 앱에 넣어놓았었습니다. (가로 320px, 640px) 

    그래서 아무래도 6플러스에서 불러오는 이미지가 너무 흐릿하게 보여서 다시 작업을 하려고 하다 글을 읽고 

    대충 어떻게 해야할지 알게 되었습니다. 궁금한 점이 몇가지 있는데 답변해주시면 너무너무 고마울 것 같습니다. ^^

    1. 3x 기준으로 디자인을 다시 하고 2x, 1x로 리사이징 해서 결국 3벌을 다시 만드는 방법을 말씀하신 것 같습니다. 그런데 제가 생각할 때 세로px 기준으로 2208(3x)를 만들고 이걸 2x는 1334로, 1x는 480으로 사이징을 줄이면서 한벌씩 총 세벌의 이미지를 만드는게 아닌가 해서요. 위의 글에서는 2208, 1500, 1366이라고 하셔서 약간 혼동스럽습니다. 제가 잘 이해를 못하는 것일 수 있어서 다시 리플로 질문드려요~

    "먼저 디자이너는 풀사이즈(1242×2208)로 작업을 합니다. 다만 화면의 아이콘이나 글자는 아이폰 6의 4.7인치 화면 크기를 기준으로 클릭과 가독이 쉬운 사이즈로 작업합니다. 즉 1242×2208에서는 다소 크게 보이는 형태로 작업하는거죠. 그 상태에서 필요하다면 아이폰 6+ 전용 UI를 추가해도 됩니다.그리고 작업 결과물을 각각의 이미지로 리사이즈해서 내보내면 됩니다. 즉 2208 하나, 1500 하나, 1136 하나입니다."

    – 위 블로그 내용 중

    2. 세벌의 이미지를 모두 앱에 넣으면 용량이 정말 매우 커집니다. 이럴 때 2x나 3x 한벌만 작업해서 모두를 커버하거나 선별적으로만 3x를 적용하고 싶기도 한데 이럴 때 해당 해상도에 없는 이미지를 하위나 상위에서 자동으로 불러오는지도 궁금합니다. 저희가 넣어봤을 때 3x만 넣으면 1, 2x를 쓰는 폰에서는 못불러오는 것 같아서요 그럼 큰 이미지를 1x에 넣어야 하나 궁금하기도 합니다. ^^

     

    질문이 많아 죄송스럽지만 ^^ 좋은 답변 부탁드립니다. 좋은 글 감사합니다. ^^

    • 안녕하세요 . 먼저 죄송하실 건 없고요^^; 제 글에 오타인지 오류인지가 있었네요. 짚어주셔서 감사합니다. 제가 댓글 확인이 늦었습니다. 거의 댓글이 없는 블로그다보니…

      말씀하신데로 가로 640px을 큰 화면에서 보기에는 아쉬운 감이 있습니다. 

      1. 제 글에서 뜬금없이 1500이 나왔는데, 그 부분을 정정해두었습니다. 2208 하나, 1334 하나, 1136 하나입니다. 수정: 640 하나입니다. 가로로 말하면 1242, 750, 320 입니다. 가로 기준으로  

      2. 말씀하신데로 하나의 이미지로 퉁친다면 x1 하나만 두면 됩니다. 3GS용으로 제작된 낮은 해상도의 어플도 5이상에서 뿌옇지만 잘 보이니까요. 제가 그 부분들까지는 신경쓰지 않았고 어쩌다보니 오히려 약간 반대로 이해가 되도록 쓴 부분도 있는데 개발자분이 5분만 테스트해도 알 수 있는거라 생각했거든요. (글 내용이 쓸데없이 어려워지고 길어지던 터이기도 했고;;) 그런데 지금 보니 음 모든 폰을 다 구비해놓고 테스트하는 개인 개발자분은 없겠네요.^^;

      도움이 되셨기를 바랍니다.

  4. 안녕하세요. 정말 도움되는 글입니다 !!

    조금의 도움을 더 요청하고자 글을 남깁니다ㅠㅠ

    작년 앱디자인을 처음하게 되었는데요, 안드로이드는 개발업체에서 많이 도와주셔서 여차저차 만들었습니다.

    그런데 ios의 경우 6+와 6가 나오면서 디바이스별 이미지가 필요하시다 하더라구요.

    6+ 1242×2208 사이즈로 작업된 이미지들을 png파일로 저장하여 개발업체로 보내드렸는데,

     

    6와5의 이미지도 별도로 작업해서 드려야 하는 것인 가요 ?

    리사이즈 하는 방법은 일일이 하나씩 줄여나가야 하는 방법 밖에 없나요 ?

     

    앱을 마냥 사용만 하다가 디자인하면서 공부하고, 책을 읽고 정보를 찾아 보아도 개발부분 단어나 내용을 이해하기에 한계가 있네요.

     

    답변부탁드립니다 !

    • 안녕하세요. 고생이 많으십니다.

      1. 개별 이미지 저장은 개발업체에게 문의하시는게 정확할 것 같습니다.

      내부 정책 결정에 따르는 사항일테니까요. 가장 좋은 건 모든 사이즈의 이미지를 다 만드는 것이지만 디자이너의 작업량을 떠나서 이미지 수정 시, 그리고 앞으로 유지보수 시 번거로운 면이 있으니까요. 예를들어 큰 이미지(전체 화면을 덮는 이미지)는 @1,@2,@3을 만들되 그 외에는 @1, @3만 만들것인지. 이 때 @1은 6에 맞춰서 하면 5는 자동적으로 리사이즈해서 볼 테니 그정도면 좋을 것인지 등은 정책 결정에 따라 다를 수 있습니다. 정책이 없다면 서로 합의를 해야겠죠. 개발자 쪽이라고 해서 다 알고 있지는 않는 경우도 많습니다. 잘 아는 사람이 나서지 않는다면 서로 어영부영 진행하는 부분도 생기긴 하겠습니다만 그래도 최대한 이야기를 해서 결론을 내리는 게 최선 같습니다. 

      여담으로 2208 하나만 보내기로 하고 가이드까지 전달했다면 화면상의 이미지 크기야 개발자분들이 잘 맞추겠지만, 최종적으로는 퍼포먼스 때문에 5나 6용 이미지를 요청할 수도 있습니다. 

       

      2. 리사이즈 하는 방법은 어플이나 사이트가 있기는 있습니다.

      http://cafe.naver.com/mcbugi/ 맥부기 게시판에 가보시면 osx 용 어플로 @3을 만들어놓으면 자동으로 @1,@2도 저장해주는 어플이 있네요. (직접 써보지는 않았습니다.) 포토샵에서는 배치를 이용하셔야 할거고요. 사이트는 저도 지금은 찾을 수가 없네요. 죄송합니다.

      쓰고보니 큰 도움은 안된 것 같네요(…) 그래도 조금이나마 참고가 되셨기를 바라는 마음으로 올려봅니다.

      • 아닙니다 !! 도움이 되었습니다ㅠㅠ

        어떻게 할지 갈피를 못잡고 있었는데, 역시 업체와의 소통이 필요한 것 같네요 !!

        감사합니다 : )

  5. 댓글 내용 중

     

    이미지 assets에서

    1x: 레티나

    2x: 6

    3x: 6 plus

    라는 내용이 있는데

     

    확인 해보니 iphone 4~5s에서 모두 @2x를 로드하던데요 ..

    • 보니까 이사람 뭐 제대로 모르는거같은데요 -_-;;

      다시 아이폰으로 돌아와보면, 첫번째로 정말로 원본 사이즈를 2208로 디자인을 할 것인가를 고려 하셔야 할 것이고, 두번째로 2208로 디자인 하던 말던 x2 는 750×1334 이미지를 의미하고 x1 은 640×1136 을 의미합니다

      x1 이 엑스페리아 x1 모델을 의미하거나, '의미'라는 단어의 의미를 모르는거같네요.

    • 아 내용 감사합니다. 제가 댓글을 달면서 잠깐 착각을 했습니다. 4~6이 모두 @2x를 쓰고 있습니다. 관련된 댓글 내용들을 약간씩 수정하였습니다. 

      그리고… 제가 제대로 뭐 모를 수도 있습니다. 의미라는 단어의 의미도 말이죠.^^ 짚어주셔서 황송하네요~

  6. 이번에 아이폰 디자인을 처음 맡게 되었습니다.

    해상도와 관련해 서치중 이곳에서 귀중한 자료를 읽어보네요/

    그리고 쉽게 잘 설명을 해놓이신 것 같아요/ 

    • 뒤늦게 댓글 답니다. 제 글을 제가 읽어보니 너무 어지럽게 써 놓았네요^^; 길게 설명하지 말고 요점만 간략히 쓸 걸 하는 생각을 뒤늦게 하고 있습니다만(ㅠㅠ) 도움이 되셨다니 다행입니다~

       

  7. Pingback: iOS: 멀티 해상도 디자인 가이드 | GTyga

  8. 좋은 글 감사합니다. 이번에 처음으로 앱 디자인을 하게 되었는데 걱정이 많았는데 도움이 됩니다.

    어떤 곳에서는 아이폰 3Gs 크기인 320*480 크기로 작업하고 나중에 각 해상도별로 크기를 늘려서 작업해야 한다는 곳도 있고, 안드로이드 역시 가장 기본 해상도에서 작업해서 늘려야 한다는 말이 있는데, 말씀하시는 바로는 오히려 반대로 가야겠네요.

    만약 아이패드까지 작업을 해야한다면 상당히 손이 많이 가는 작업이 되고, 기간도 길어져야 할 것 같은데, 현재 말씀하시는 것은 아이폰을 중심으로 말씀하시는 거라, 아이패드까지 맞춘다면 이건 따로 진행이 되어야 할 부분인지도 궁금합니다.

    좋은 글 감사합니다.

    • 안녕하세요. 댓글이 늦었습니다.

      작게 디자인 후에 해상도별로 어떻게 늘리죠?^^;; 작은 사이즈로 작업을 먼저 한다는 전혀 말이 안 되는 것 같습니다. 게다가 320×480 의 해상도는 이제 쓰는 폰도 거의 없고요.

      아마도 좌표 이야기와 혼동하신 게 아닐가 싶습니다. 640×960의 이미지는 320×480의 x2고 실제로 좌표는 320×480을 따라 가죠.

      뭐 어쨌든, 간단한 방법이 있습니다. 어느 폰을 지원하느냐 입니다.

      아이폰5부터 지원한다. 갤럭시S4부터 지원한다면 해당하는 단말기들에 맞는 해상도만 지원하면 됩니다.

      다만 아이폰6+ 의 2208해상도는 보통 지원을 잘 안합니다. 그냥 실제 기기에 맞는 FHD 해상도만 지원을 하죠. 왜냐면… 아마도 귀찮으니까(…) 아이폰 개발자가 아니면 2208 해상도와 DPI 에 대해서는 아예 모르는 경우도 많거든요. FHD로 해도 어차피 다 잘 보이고요. (물론 모든 UI가 좀 큼지막하게 보이겠죠.)

      그리고 안드로이드는 요새는 FHD 한 벌만 디자인을 하기도 합니다. 어차피 2560해상도인 QHD까지 맞추는건 다들 오버라고 생각하거든요. HD 구형 폰에 맞추는 작업도 귀찮고 하니 FHD하나만 합니다. 뭐 그래도 다들 잘 보입니다.

      그래서 결론은 FHD 하나만 디자인 후 리사이징하여 안드로이드/아이폰에 모두 적용하는 시대죠. 대상 단말기들을 확인 하신 후에 어찌 되었든 크게 작업 후에 리사이징하면 됩니다. 물론 조금은 범용적인 케이스로 말씀드리는 거예요. 프로젝트마다 고객이나 PM의 생각이 다를 수 있죠.

      그리고 아이패드 말씀을 해주셨는데요. 아무래도 태블릿은 PC와 모바일의 중간 정도의 성격이라, 기능은 모바일을 따라가고 화면은 PC를 따라가다 보니 기획/디자인을 새로 해야 하는 경우가 많죠. 하지만 물론 따로 해야 하는 거라고 정해져 있는 건 아닙니다.

      먼저 설계를 어느 정도 새로 하느냐에 따라 새로 하는 작업(기획/디자인/개발)의 볼륨이 정해지겠죠. 결국 그에 따라 일정을 짜보고 따로 할지 말지를 정하거나 하겠지요. 아니면 메뉴나 몇 가지만 수정해서 그럭저럭 구색 맞춰서 런칭하는 방법도 있을거고요. 그러니 이 부분은 죄송하지만 제가 따로 해야 합니다 혹은 같이 하셔야 합니다 라고 답변을 드릴 수는 없습니다. 새로 해야 할 작업의 량이 어느 정도 될 것이다 라고 예측 후에 그에 맞추어서… 가야겠죠?

      도움이 되셨기를 바래요~!

      • 댓글 감사합니다. 결국 큰 사이즈를 만들고 그 사이즈를 줄여서 자르는 게 낫겠네요. 이미지를 그렇게 잘라서 @2x @3x 형식으로 붙이고요. 처음이라 얼떨떨하지만 약간 감이 옵니다. 감사합니다.

        • 네 그렇게 작업하시면 됩니다. 

          다만 두 가지 추가 말씀 드리면

          1. 정책은 PM하고 얘기한다 하더라도 실무를 개발자하고 한 번 더 이야기 해 보시는 게 좋을 겁니다.

          2. 네이티브 영역에는 가이드를 해줘야 합니다. (네이티브 앱이라면 전체에, 하이브리드 앱이라면 메뉴단 정도에) 몇픽셀 서로 떨어져 있고 커질 경우 늘어나는지 위치가 이동하는지 등등을 기술 하는 것이 앱 디자인 가이드 입니다. 그리고 좌표를 어떻게 찍어줘야 할지 등등.

          단적인 이야기로 @2x 이미지가 아이폰4~아이폰6를 어우릅니다. 3가지 해상도가 존재 하는 데 어느 사이즈로 제작해서 어떻게 작업해야 할까요…?

           

  9. Pingback: [잡솔] 아이폰6, 아이폰6+의 해상도 2편 (디자이너의 작업) | 이것저것 내돈주고 산 것들 간단 리뷰 블로그입니다.

  10. Pingback: iOS: 멀티 해상도 디자인 가이드 – Trust me, I'm an engineer.

  11. 개발자가 스플래시 화면을 2208로 작업해서 드렸더니 디바이스마다 모든 해상도가 달라서 사용할 수가 없다고 하네요ㅠㅠ

    애플홈페이지를 가보니까 

    Static Launch Screen Images

    It’s best to use an Xcode storyboard for your launch screen, but you can provide a set of static images if necessary. Create static images in different sizes for different devices, and be sure to include the status bar region.

    Device

    Portrait size

    Landscape size

    iPhone 6s Plus, iPhone 6 Plus

    1080px by 1920px

    1920px by 1080px

     

    이렇게 되어있는데  본문의

    아이폰6+는 해상도가 1080×1920 이지만 좌표를 413×736 을 사용하고 실제 이미지는 x3인 1242×2208을 사용합니다. 그리고 폰은 그것을 자동으로 1080×1920의 해상도에서 보여지도록 합니다.

    랑 이해가 잘 가지 않습니다 ㅠㅠ

    그렇다면 어쨋든 x3인 2208로 작업을 하면 이것이 즉 6+이미라고 하고 바로 드리면 되는건가요?

    이렇게 해석을 해야하는건지 잘 모르겠습니다.

    • 맞습니다. 2208을 6+이미지로 사용합니다. 6+에 이용하라고 주면 되죠. 하지만 1920으로 주는게 더 좋을 수 있습니다. 또한 기기별로 여러사이즈를 저장해서 줘야 할 것도 같습니다.

      개발자가 디바이스마다 다 달라서 사용할 수 없다고 말한게 정확히 어떤 의미지인지 모르겠습니다만, 아마도 이미지를 여러 개 줘야 한다는 의미라면 6+은 2208로 주고 6하고 4용은 따로 줘야 합니다. 6에서 쓰기에 6+용은 너무 크고, 4는 화면 비율이 다르니까요. (3:2) 그리고 6하고 5는 하나로 써도 되지만 5에서도 완벽한 퍼포먼스를 바란다면 5용도 따로 저장해야겠죠. 이 경우 4,5,6 이 모두 x2를 사용하므로 (x1은 3gs) 파일네임을 어찌 하면 좋을지 개발자에게 물어보면 될겁니다. 예를들어 x2x4 x2x5 x2x6 으로 한다던가 말이죠.

      그리고 Static Launch Screen Images 는 꽉차게 보이는 첫 화면 이미지를 말하는 것 같습니다. 1920으로 가이드되고 있네요. 본문에서는 2208에 워낙 초점을 맞춰서 그 이야기를 미처 못 했는데요. 애플의 런치 이미지 가이드(1920) 및 기본 6+ 가이드2208->1920에 대해서는 두 가지를 종합적으로 설명드려야 할 것 같네요.

      먼저 제 본문 글에서 인용하신 내용은 6+의 경우 이미지를 1242×2208로 작업해서 넘겨야 하며, 좌표 가이드를 해야 한다면 413×736픽셀로 가이드를 주면 된다는 이야기입니다. 즉 2208 디자인 파일을 봤을때 특정 이미지가 좌측으로부터 210px 떨어져 있다면 그 1/3인 70px 떨어져있다고 가이드를 주면 된다는 내용입니다. 

      그리고 폰이 2208을 1920으로 리사이즈해서 이용한다는 건 말 그대로의 이야기입니다. 6+은 2208로 디자인 한 것을 1920으로 리사이즈해서 보여주도록 가이드가 되어 있습니다. 물론 더 큰 이미지를 사용할 수도 있습니다. 어차피 리사이즈하면 땡이니까요. 당연히 정사이즈인 1920의 이미지도 받을 수 있고 더 작은 이미지도 받아 업스케일해서 화면에 꽉차게 보여줄 수 있죠. 어떻게 해도 풀 이미지를 보여줄 수 있으므로 하나의 이미지를 보여주는 것만 생각하면 사실 이미지 사이즈는 눈으로 봤을 때 퀄리티가 떨어지지만 않는다면 아무 사이즈나 상관 없습니다. 다만 좌표를 사용하는 디자인에 있어 가이드가 그리 되어 있고, 왜 2208인지에 대해서는 밑에 내용을 끝까지 보시면 될 듯 합니다.

      이미지 하나를 1920으로 작업해서 폰에서 보나 2208으로 받은 후 리사이즈 해서 보나 6+에서는 동일하게 보여집니다. 2208은 그저 리사이즈했을 뿐이니까요. 물론 픽셀1:1매칭면에서 이미지의 퀄리티는 서로 다르고 당연하게도 1:1 매칭인 1920이 더 좋습니다. 굳이 리사이즈를 안해도 되니 성능도 더 좋습니다. 따라서 단순 풀이미지를 쓸거라면 1920을 6+용이라고 작업해서 주시면 됩니다. 게임은 성능 때문에 대부분 1920을 사용할 겁니다. 그리고 이것이 런치 이미지에 적합하겠죠.

      하지만 가이드가 필요한 화면들에서 – 즉 디자인 후 이미지를 쪼개서 배치하거나 개발자/퍼블리셔가 직접 입히는 폰트 등이 섞여 있는 경우 – 굳이 cpu를 더 사용해서 리사이징을 하면서까지 2208로 하는 이유는 좌표 때문입니다. 6+와 6, 서로 다른 물리적인 화면 크기를 가진 기기들에서 동일한 크기의 이미지를 보여주기 위해서, 한쪽은 2208대비 1/3으로 좌표를 쓰고, 한 쪽은 1334 대비 1/2으로 좌표를 사용합니다. 그러고 나면 사람이 기기를 손에 쥐고 보았을 때 두 폰에서 동일한 간격, 동일한 크기의 글자와 이미지들이 보여지게 됩니다. 실제 이미지의 픽셀과 좌표는 모두 다른데도 말이죠. (이것에 대한 자세한 설명은 글 상단에 링크된 2편을 보시면 도움이 되실 것 같습니다.)

      이어 설명하면 만약 2208 대신에 1920으로 작업했다면 좌표를 딱 떨어지게 사용할 수가 없습니다. 2208로 해야 좌표를 1/3으로 사용할 수 있습니다. 좌표가 1/3, 1/2 이런식으로 딱 떨어지게 하기 위해서 2208을 사용하는 거지요. 이것은 이미지에만 국한되는 것이 아닙니다. 폰트 크기나 간격 등이 모두 포함됩니다. 텍스트로만 이루어진 디자인이다 하더라도 디자인은 포토샵으로 할거고 그 후 가이드를 넘겨줘야 디자이너가 원한 폰트 크기를 개발자가 입힐 수 있겠죠. (이 경우는 처음부터 2208의 1/3으로 디자인해서 좌표를 넘겨주면 더 작업이 쉬울 수 있을거고요.)

      결론

      1. 어느 기기까지 맞추어서 디자인 파일을 던져줘야 할지 확인 필요. 구체적으로 풀 이미지일 경우에만 기기별 저장을 할지, 혹은 그 외의 이미지들도 작업을 해야 할지 등도 확인 필요하며. x2인 아이폰4,5,6 을 각각 작업해야 한다면 어떤 규칙의 파일명을 이용할지 확인 필요. (아이폰 4,5,6의 가이드 작업에 대해서는 2편 참고)

      2. 가이드 작업이 필요 없는 풀 사이즈의 이미지는 1920을 6+용으로 넘겨주는게 2208로 사용하는 것 보다 용량 축소 및 퍼포먼스 측면에서 나을 것.

      도움 되셨기를 바랍니다.

  12. Pingback: [잡솔] 아이폰6, 아이폰6+의 해상도 2편 (디자이너의 작업) | 리뷰 블로그: 내돈주고샀다

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.