[Android] 해상도별 레이아웃 대응에 대한 고찰

이번에는 여러가지 해상도를 가진 기기에 어떻게 하면 손쉽고 편하게 대응이 가능할 지에 대한 개인적인 고찰을 해보려 합니다.

혹시 더 좋은 방법을 아시는 분이나 아이디어가 있으신 분은 댓글로 알려주신다면 정말 감사하겠습니다.

---

안드로이드 기기들을 보면 정말 다양한 화면 사이즈를 가지고 있습니다. 개발을 진행하시게 되면 항상 고려해야 하는 부분 중의 하나가 이런 여러가지 기기들에 대해 어떻게 대응을 할 것인가? 일텐데요. 오늘은 이렇게 여러 화면에 대해 어떻게 대응하면 좋을지, 어떻게 하면 좀 더 손쉽게 관리가 가능할 지에 대해 개인적인 생각을 늘어볼 생각입니다.

레이아웃의 세분화

첫 번째로 각 기기에 대한 레이아웃 파일을 세분화하여 관리하는 방법입니다.

기기마다 레이아웃을 만들어야 한다면 화면 하나에 수백개의 레이아웃을 만들어야겠죠? 물론 그렇게 하면 엄청나게 비효율적이고, 관리 또한 엄청나게 어려워지겠죠. 그래서 안드로이드에서는 크기, 해상도, 방향 등으로 일반화하여 대응이 가능하도록 지원하고 있습니다.

• 화면 밀도

- 화면 공간 안의 픽셀 개수, dpi(dots per inch)에 따라 분류합니다.

	ldpi	저밀도(120dpi) 화면에 해당합니다.
	mdpi	중밀도(160dpi) 화면에 해당합니다.
	hdpi	고밀도(240dpi) 화면에 해당합니다.
	xhdpi	초고밀도(320dpi) 화면에 해당합니다.
	xxhdpi	초초고밀도(480dpi) 화면에 해당합니다.
	xxxhdpi	초초초고밀도(640dpi) 화면에 해당합니다.

   

-  기기의 dpi가 기준 되는 dpi와 정확하게 맞아야 하는 것은 아닙니다. 기기의 dpi와 가장 비슷한 레이아웃으로

   자동으로 찾아갑니다. 이때 고밀도에서 저밀도 순으로 우선순위가 정해집니다.

• 최소 너비

- 사용 가능한 화면 영역의 가장 짧은 치수를 기준으로 분류합니다.

sw<N>dp

사용 예 : sw320dp, sw600dp, sw720dp

- 예를 들어, sw600dp로 분류된 레이아웃은 화면의 사용 가능한 영역 중, 가로 또는 세로 중 짧은 치수를 기준으로

  600dp가 넘는 경우에만 접근이 가능하도록 합니다.

• 사용 가능한 화면 너비 또는 높이

- 사용 가능한 최소 너비 또는 높이를 기준으로 분류합니다.

	w<N>dp	최소 사용 가능 너비를 dp로 지정합니다.
		사용 예 : w720dp, w1024dp
	h<N>dp	최소 사용 가능 높이를 dp로 지정합니다.
		사용 예 : h720dp, h1024dp

- 이전에 사용하던 화면 크기에 따른 분류(small, normal, large, xlarge)를 대체하여 사용하도록 권장되고 있습니다.

  지정된 dp를 기준으로 가로 또는 높이가 기준 dp보다 높을 경우에만 접근이 가능하도록 합니다.

- 흔히 이 방법은 가로 모드와 세로 모드가 다른 레이아웃에 대응하기 위해 사용하기도 합니다.

• 화면 방향

- 화면 방향에 따라 분류합니다.

	port	세로 모드에 해당합니다.
	land	가로 모드에 해당합니다.

이외에도 몇 가지 분류 방법이 더 있지만, 많이 쓰이는 것들만 정리해보았습니다.

프로젝트에 적용하기 위해서는 res폴더 아래에 제한자를 포함하여 폴더를 생성하시면 되며, 여러개의 제한자를 사용하여 생성하셔도 무방합니다. 각 제한자의 구분은 - 기호를 사용하시면 됩니다.

 layout 폴더 생성 예

레이아웃 세분화의 장단점

위와 같이 레이아웃 세분화 시에 어떤 장단점이 있을까요? 

저는 가장 큰 장점이라면 역시 이번 포스팅 주제인 여러 기기에 대응이 가능하다는 점이라고 생각합니다. 여러 기기의 화면이 다름에도 같은 비율의 이미지들과 글자들을 사용하여 핸드폰, 태블릿 등을 같은 화면처럼 표현 할 수도 있고, 또는 핸드폰과 태블릿 등을 구분하여 다르게 구성할 수도 있겠죠. 

그럼 반대로 단점으로는 어떤 점이 있을까요?

사실 이 글을 쓰게 된 이유이기도 한 관리가 힘들다는 점이었습니다. 유지보수 또는 추가 기능 등으로 인해 레이아웃이 바뀌게 된다면 세분화되어있는 모든 레이아웃을 수정해야만 합니다. 생각만 해도 끔찍하시죠? 네 저도 그렇습니다...

해상도별 레이아웃 대응에 대한 고찰

여러기기에 대응하기 위해 레이아웃을 세분화하는 방법은 유지보수 및 관리적 측면에서 보았을 때, 너무 비효율적인 일이라고 생각됩니다. 하여, 레이아웃 작업을 최소화 할 수 있도록 하는 방법이 뭐가 있을까 생각하다가 찾은 것이 dimens.xml을 이용하는 방법인데요, 레이아웃은 하나로 통일시키고 dimens.xml을 세분화 하여 사용하는 방법입니다.

다음과 같이 레이아웃을 통일되게 꾸미고,

activity)main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical"

    tools:context="rebuild.com.layoutdimens.MainActivity">

    <ImageView

        android:layout_width="@dimen/imageWidth"

        android:layout_height="@dimen/imageHeight"

        android:background="@color/colorAccent" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="@dimen/topMargin"

        android:text="Dimens-!!"

        android:textSize="@dimen/textSize" />

</LinearLayout>

dimens.xml은 레이아웃 세분화 할 때와 마찬가지로 생성하시면 되는데 이번에는 values폴더 안에 생성해주시면 되겠습니다.

dimens.xml     <?xml version="1.0" encoding="utf-8"?>     <resources>         <dimen name="imageWidth">40dp</dimen>         <dimen name="imageHeight">20dp</dimen>         <dimen name="textSize">12dp</dimen>         <dimen name="topMargin">5dp</dimen>    </resources>

이미지 사이즈 또는 텍스트 크기 등 기기의 해상도에 따라 변해야 하는 수치들을 각 해상도에 해당하는 dimens.xml에 정의하고 불러와 사용하도록 하였습니다. 

이렇게 사용할 경우, 통합된 레이아웃을 사용하기 때문에 UI의 수정이 필요한 경우 레이아웃은 한번만 수정한 뒤, 각 해상도에 따라 dimens.xml에서 수치만 변경해주면 되기 때문에 유지보수 및 관리 측면에서 한결 간편하게 사용이 가능합니다.

---

제 개인적인 생각으로 정리해보았는데, 이게 꼭 정답이라는 말은 아닙니다.

좀 더 좋은 의견 있으시면 댓글 달아주시면 감사하겠습니다.!