[TECH] Android Studio로 다양한 기기 화면에 대응하기

[티끌] 티끌 Android Studio로 다양한 기기 화면에 대응하기
 
안녕하세요 티플의 안드로이드 개발자 정채현입니다😆😆

저는 티끌에서 가장 이슈되고 있는 여러가지 해상도를 가진 기기에 대응하는 문제를 해결하기 위해

Android에 실제로 많이 사용되는 안드로이드 핸드폰의 기종을 생각하며 고민해볼 수 있는 시간을 가져보도록 하겠습니다🤗

---

👩‍💻 해상도란? 

해상도란 간단히 말하자면 화면의 픽셀(pixel)수를 의미합니다.

예를 들어, 1024*768인 경우 한 화면에 가로1024개의 점과 세로768개의 점이 모여서 화면을 구성해주고 있는 것입니다.

해상도가 높을 수록 많은 점들이 모여있다는 것을 의미합니다. 화면 비율과 연관이 있겠죠?

안드로이드 스튜디오 device manager

안드로이드 기기들은 정말 다양한 화면 사이즈를 가지고 있습니다. 같은 이미지나 텍스트를 활용해 개발을 하더라도 사용자의 해상도가 다양하기 때문에 이미지가 크게 보일 수 도 있고 작게 보일 수도 있으며 일관성을 잃게 되는 큰 문제점이 생기게 됩니다.

개발을 하시면서 가장 어렵고 고려하시는 부분이라고 생각합니다.

 

이런 여러가지 기기들에 대해 어떻게 적용하여 개발하여야 할까요?

오늘은 어떤 부분을 고려해서 개발해야 여러 기종에 알맞게 관리를 할 수 있을까?에 대한 고민을 같이 해보겠습니다!

---

👩‍💻 어떻게 해결할까? 

예상하셨겠지만 딱 정해진 정답은 없습니다..! 

하지만 다양한 방법을 소개해드리겠습니다. 각자 상황에 맞춰서 사용하시면 됩니다🫡

 

• 가장 먼저 해볼 수 있는 방법은 바로 픽셀(px)대신 dp를 활용하여 개발하는 것입니다.

dp는 dip라고도 하며, Density Independent Pixel('밀도 독립 픽셀')의 약자입니다. 픽셀의 경우 촘촘한 경우와 그렇지 않은 경우(밀도가 다른 경우) 다르게 표시되기 때문에 밀도에 독립적인 dp를 사용하는 것입니다.

dp를 활용하면 해상도에 관계없이 이미지를 같은 비율로 표시할 수 있습니다.

 

dp가 해상도에 관계 없이 동일한 비율로 표시될 수 있는 방법은 dp는 160dpi를 갖는 화면에서 하나의 픽셀과 대응하기 때문입니다.

즉 160dpi 해상도에서 1dp는 1pixel 입니다.

그리고 160dpi 해상도를 기준으로, 화면의 해상도에 따라 1dp이 나타내는 픽셀의 수는 달라집니다.

해상도에 따른 dp와 pixel 관계를 구하는 공식도 존재합니다.

dp = px * (160dpi / 단말dpi)

px = dp * (단말dpi / 160dpi)

 

*160 dpi는 3.6인치 스크린(보통 320x480)의 해상도를 가진 스크린을 말하며 1인치당 160개의 픽셀을 가지고 있다는 것을 의미합니다.

*dpi란 1인치에 들어가는 픽셀을 나타내는 단위 (dp,dip과 다른 개념입니다!)

 

• 두번째 방법은 dpi별로 레이아웃을 나누는 방법입니다.

기기마다 해상도별 밀도를 구해 대응하는 xml파일을 만들어 대응하는 방법입니다.

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

1번 dp의 개념을 보고도 어질어질 했는데 6개의 xml파일을 만들다니... 이건 정말 중노동이지 않을까😵‍💫싶었습니다.

해상도에 따른 res 파일을 만들어 관리

 

• 세번째 방법은 dpi별로 value(dimens)를 지정하는 방법입니다.

해상도에 따른 value값 설정

이것도 두번째 방법과 동일하지만 dimens를 활용해 각 요소의 크기만 조절하면 되겠죠?

아래는 dimen 사용 예시입니다.

<TextView
            android:id="@+id/my_filter1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/size_30"
            android:layout_marginStart="@dimen/size_30"
            android:text="@string/restaurant_recommendation_tv_mood1"
            android:textSize="20sp"
            android:textColor="@color/purple_main"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

 

이 밖에 다양한 GuildLine을 사용하는 방법 등이 있으나, 티끌은 현재 dp와 constraintLayout만을 활용해서 개발하고 있습니다.

추후에 여력이 된다면 dimen을 활용해 layout margin등을 조정할 예정에 있습니다!

---

👩‍💻 마치며

사실 이뒤에는 실제 삼성 핸드폰을 애뮬레이터로 원하는 만큼 가지고와서 활용하고 체크하는 방법을 적으려했으나

분량관계상🤐 다음편에 실제 삼성 핸드폰을 애뮬레이터를 활용해서 확인하고 적용하는 법에 대해 알려드리겠습니다:) 

 

다음 글 기대 부탁드리겠습니다:)🤗

감사합니다!!

📩 Contact : wjdcogus6@gmail.com
📲 SNS : https://www.instagram.com/chaeehyuny/