Android - dp, 다양한 해상도 지원하기

안녕하세요 박스여우입니다. 최근들어 안드로이드 개발을 꾸준히 못하고 있어서 많이 잊어먹은게 많은것 같습니다. 얼마전에 후배가 dp와 px의 차이점이 뭐냐는 질문에 멘붕이 오고야 말았습니다.. 분명 1학년 전공프로젝트 발표때 전교생앞에서 발표했던 내용이었지만 기억이 나질 않았습니다.. 그래서 앞으로는 다시 공부를 열심히 해보도록 하겠습니다.

■ DP - Device Independence Pixel

안드로이드에서 px을 사용하게되면 말그대로 px단위로 레이아웃을 구성하게되어 다양한 크기의 스마트폰의 해상도에따라 UI가 천차 만별이 됩니다. 그래서 android에서 만들어낸 단위가 dp(dpi)입니다.

우선 dp를 다루기전에 dpi라는 단위부터 짚고 넘어가야 할것 같습니다. dpi는 dots per inch로 물리적인 화면공간안에 있는 픽셀의 개수이며 이러한 다양한 밀도는 각각 저밀도, 중간 밀도, 고밀도 등으로 나누어집니다.

• ldpi (저밀도) ~120dpi
• mdpi (중간 밀도) ~160dpi
• hdpi (고밀도) ~240dpi
• xhdpi (초고밀도) ~320dpi
• xxhdpi (초초고밀도) ~480dpi
• xxxhdpi (초초초고밀도) ~640dpi

위의 첫번째 사진은 다양한 밀도를 지원하지 않은 레이아웃이며, 아래의 사진은 다양한 밀도를 지원하는 레이아웃 입니다. dp는 아래 사진과 같이 다양한 dpi에서 일정한 비율로 레이아웃을 출력해 줄 수 있도록 만들어주는 단위 입니다.

따라서 dp를 밀도 독립적 픽셀이라고 부릅니다. dp는 보통픽셀단위인 160 dpi를 기준으로 px수를 계산하여 레이아웃을 그려주게 됩니다. 따라서 dp를 px로 계산하는 식은 다음과 같습니다. px = dp * (dpi / 160). 만약 240dpi에서 1dp는 1.5 픽셀과 같습니다.

■ Android 다양한 해상도 지원하기

안드로이드 OS를 사용하는 기기들은 태블릿, 스마트폰, 스마트워치등 다양합니다. 따라서 각각의 해상도를 지원하는 UI를 구성하고 서비스해야 합니다. 이번챕터에서는 이 방법에 대해서 알아보도록 하겠습니다.

1. 각각의 해상도에 맞는 리소스 사용하기

대표적인 리소스로는 drawable이 있습니다. drawable에 리소스를 저장할때는 위에서 언급한 밀도 단위마다 다른 크기의 이미지를 저장할 수 있습니다. 기본적인 아이콘들은 android studio에서 제공해주어서 icon 이미지를 만들때는 해당기능을 사용하면 편리합니다.

drawable 폴더를 우클릭하고 Image Asset을 선택해 줍시다.

그러면 위처럼 리소스를 만들 수 있는 창이 나오게 됩니다.

위처럼 각각의 화면 밀도 단위에 따라 다른 크기의 리소스들을 한번에 만들어 줍니다.

만약 직접 만든 리소스를 사용한다면 https://romannurik.github.io/AndroidAssetStudio/ 해당 사이트를 통해 리소스를 자동으로 만들 수 있습니다!

2. 각각의 해상도에 맞는 레이아웃 개발하기

말 그대로 화면 밀도 단위마다 레이아웃을 개발하여 모든 해상도에서 원활하게 작동할 수 있는 애플리케이션을 개발하는것 입니다. small, normal, large 및 xlarge 단위로 레이아웃 디렉토리를 구성하고 각각의 해상도에 맞는 레이아웃을 개발하여 적용합니다. 이에대한 자세한 내용은 https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts 해당 사이트를 참조하시면 됩니다.

그리고 이렇게 개발돤 레이아웃을 manifest에 설정하여 해당 애플리케이션이 어떤 해상도를 지원할 수 있는지를 설정하여 지원하지 않는 해상도의 기기에는 앱이 아예 설치가 되지 않도록 설정할 수 있습니다. https://developer.android.com/guide/topics/manifest/supports-screens-element.html

3. 라이브러리 사용하기

위의 2번과정이 굉장히 불편하고 복잡하다고 느껴지신다면 라이브러리를 사용하는 방법이 있습니다! 저 역시도 위와같은 방법이 복잡해서 라이브러리를 찾게 되었습니다. 노래방 어플리케이션으로 유명한 애브리싱의 개발자가 만든 ScaleableLayout이라는 라이브러리 입니다. https://github.com/ssomai/ScalableLayout

위의 사진은 ScaleableLayout을 활용하여 구성한 레이아웃입니다. 태블릿과 다른 두 종류의 스마트폰 모두에서 일관성 있는 레이아웃이 출력되는것을 확인할 수 있습니다. ScaleableLayout을 사용하면 한번의 코딩으로 태블릿을 포함한 모든 화면에서 일관성있는 레이아웃을 구성할 수 있다는 큰 장점이 있습니다.