안드로이드 iOS 모바일 해상도 기준

모바일 UIUX 디자인을 하기 위해서는 해상도와 밀도에 대해 이해해야 합니다. 이를 통해 아트보드를 만드는 기준이나 리소스의 크기를 정하고, 적절한 크기로 에셋을 추출 할 수 있습니다.

 

아래와 같이 기본적으로 통용되는 해상도 단위와 안드로이드, iOS 각각의 해상도 단위에 대해 알아보겠습니다.

 

 

 

 

0. 해상도란?

 

해상도는 화면이나 인쇄물에서 이미지가 몇 개의 픽셀로 표현되는지를 나타내는 정밀도이며, 해상도가 높을수록 선명합니다.

 

위키피디아 그래픽 디스플레이 해상도 규격 페이지를 통해 디스플레이별 해상도 규격은 어떤 종류가 있는지 참고해볼 수 있습니다.

 

 

1. 기본 해상도 단위

 

ppi(pixel per inch)

 1인치당 몇 개의 픽셀이 있는지, 즉 화면의 1인치 면적당 표시되는 픽셀 수를 의미합니다.

 

픽셀은 화면의 크기에 상관없이 지정한 수치만큼 표시되기 때문에, 화면이 클수록 선명도가 떨어집니다. 실제 디자인을 할 때 픽셀로 요소의 변하지 않는 크기를 지정할 수 있습니다. 

 

 

dpi(dot per inch)

 

1인치당 몇 개의 점이 있는지를 의미합니다. 프린터에 넣을 수 있는 잉크 방울의 수를 나타내며, 따라서 인쇄할 때의 공간 밀도에 대한 측정값 단위입니다.

 

이러한 개념을 액정 화면에 적용한 것이 위에서 언급한 ppi입니다.

 

여러 가지의 dpi 중에서도 안드로이드 기기는 mdpi가 기준이 되는데, 160dpi의 경우에 1dp가 1px과 같게 됩니다.

px을 dp단위로 변환해야할 때는 Pixplicity라는 DP/PX 변환 사이트를 이용할 수 있습니다.

 

 

2. 안드로이드의 해상도 단위

 

안드로이드 스마트폰은 기기마다 종류, 크기, 비율, 화면 해상도가 다양합니다. 그래서 픽셀을 기준으로 작업하면, 같은 이미지도 해상도가 다른 스마트폰에서는 다르게 보일 수 있습니다.

 

 

dp(density independent pixel)

이러한 현상을 방지하기 위해, 해상도가 달라도 동일한 크기로 표시하는 방식이 밀도이며 밀도의 단위는 dp입니다.

해상도 별 그리드의 수를 다르게 해서, UI 요소의 크기를 동일하게 표시하는 방식입니다.

 

 

sp(scalable pixels)

 

sp는 안드로이드에서 텍스트의 크기를 지정하기 위한 단위입니다.

안드로이드 기기의 '설정'에서 시스템 텍스트 크기를 선택할 수 있는데, sp는 이 설정에 영향을 받습니다. 

따라서 문자의 크기를 일정하게 유지하고 싶다면 dp를 쓰고, 사용자 설정에 따라서 조절하려면 sp를 사용합니다.

 

 

3. iOS의 해상도 단위

 

pt(point)

 

아이폰은 레티나 디스플레이부터 픽셀을 두 배로 늘려서 선명한 화면으로 출력하게 되었습니다.

 

이러한 이유 때문에 새로운 개념으로 포인트라는 게 등장했습니다.

1 포인트라고 할 때

레티나 디스플레이 이전의 기기에서는 1픽셀을 의미하고,

레티나 디스플레이에서는 2픽셀을 의미한다고 생각하면 쉽습니다.

 

즉, 아이폰에 들어가는 리소스를 제작할 때는 픽셀 크기를 2배로 늘려서 디자인할 필요가 있습니다.

 

 

4. 아트보드 크기 설정에 대해

디자인 작업을 할 때 아트 보드 크기를 어떤 기준으로 설정해야 할지 고민될 수 있습니다.

 

먼저, 서비스를 이용하는 사용자들이 가장 많이 사용하는 기기를 '표준 디바이스'로 설정해 이를 기준으로 작업합니다.

 

만약 구형 안드로이드 기기를 이용하는 사용자가 많은 서비스라면 360x640을 기준으로 할 수 있습니다.

 

일반적으로 안드로이드는 360x740, iOS는 375x812을 기준으로 작업하면 다른 해상도에 대응하기가 수월합니다.

 

그러나 이는 1배수에 해당하는 수치이기 때문에, 에셋을 추출할 때는 환경에 맞게 n배수로 추출해야함을 주의해야합니다.

 

 

5. 리소스 크기 설정에 대해

 

리소스를 만들 때 포토샵이나 일러스트레이터, 피그마 등을 이용할 수 있습니다.

 

그러나 포토샵은 래스터 방식의 프로그램이라서 이미지가 깨질 수 있기 때문에 미리 가장 큰 크기로 작업하고, 축소를 해서 이미지 손상을 최소화하고는 합니다.

그러나 이렇게 하면 제작 시간도 많이 걸리고, 관리해야할 리소스도 많아집니다.

 

따라서 안드로이드 기준값인 mdpi (360px x 640px)을 두 배로 한 값인

xhdpi (720px x 1280px)로 하고 작업하면, 대부분 무난하게 대응이 가능합니다.

 

※ 벡터는 수학적으로 계산된 값을 가진 그래픽이라 깨지지 않기 때문에, 피그마와 같은 벡터 프로그램에서는 안드로이드 기준 크기인 mdpi 비율을 그대로 사용해도 무방합니다.

 

 

 

모바일 UIUX를 제작하신다면 해상도 외에도 운영체제별 디자인 패턴(탐색방식, UI요소 등)에 대해서도 알아보세요.

 

iOS 안드로이드 UI 디자인 패턴의 차이

 

 

개인적으로 UIUX 관련 글을 쓰면서 가장 어려웠던 내용이었습니다. 더 알아보면 좋겠지만 완성된 한번 글을 날려먹어서 더이상 보완할 기운이 나지 않네요.. 나중에 보완할 점이 있으면 하도록 하겠습니다. 

 

 

이상으로 기본적으로 통용되는 해상도 단위와 안드로이드, iOS 각각의 해상도 단위를 통해 아트보드나 리소스 크기를 설정하는 기준에 대해 알아보았습니다.

 

읽어주셔서 감사합니다.