안드로이드 Zeplin Resolution 팁 알아보기

안녕하세요. 삐질삐질 개발하는 개발자 삐질입니다.

오늘은 최근 몇년 전 부터 핫한 디자인 Tool ~  Zeplin의 기초적인 팁을 알아보려고 합니다.

안드로이드 개발자로써 개발을 할때 디자이너와 협업하기 위해 기본적인 팁을 알아 놓는다면 더 협업이 원활하게 이루어지겠죠? 

제플린을 보기 앞서 안드로이드 개발자라면, Dp, Px의 개념을 알 필요가 있습니다. 

- DPI( Dot Per Inch ) : 안드로이드 디바이스상의 1인치 당 찍을 수 있는 점(Dot)을 나타내는 용어입니다. 즉 화면의 밀도 (density ) 단위라 할수 있음

- Px ( Pixel )  : 주소화될 수 있는 화면의 가장 작은 단위. 작은 점의 행과 열로 이루어져 있는 화면의 작은 점 각각을 이르는 말임.

안드로이드에는 복잡하게도 여러가지 DPI (density)가 있죠? 예를들면

1. mdpi = (160) = x1 ( Default )

2. hdpi =  (240) = x1.5

3. xdpi = (320) = x2

4. xxdpi = (480)  = x3 

5. xxxdpi = (640) =x4

보통 우리 안드로이드 개발자를 괴롭히는 녀석들 입니다. ( ㅠㅠ...해상도 대응 환장한다 ) 기본을 mdpi로 시작해서 1,5 2, 3, 4배 씩 커지는 단위입니다. 

요즘엔 대부분 xxdpi나 xxxdpi의 디바이스들이 주를 이루지만 이하의  디바이스들이 남아있습니다.

지금부터 본격적으로 대화 예시를 통해 알아보도록 하겠습니다.

------------------------------------------------------------------------------------------

안드로이드 개발자: 디자이너님 넘겨주신 제플린 디자인 스펙이 어떻게 되나요?

디자이너: xdpi 기준이고 360 x 640 기준이에요.

안드로이드 개발자: 알겠습니다. 그렇게 작업 하겠습니다.

잠시후

.

.

.

.

안드로이드 개발자: 아..왜 디자이너가 준 대로 작업 했는데 이상해 이거 ㅡㅡ.... 왜 안되지?

안드로이드 개발자: 디자이너님  xdpi 기준 360 x 640 이라고 하시는데.. 안드로이드 스튜디오 에뮬레이터에 보니까 요즘엔 1440 ~ 이런 크기고 주신대로 해도 ..동일하지가 않아요.

------------------------------------------------------------------------------------------

이런 경우가 바로 !! 제일 난감한 경우이죠. 서로 의미전달이 제대로 되지 않은 경우인데요.

위 대화에서 디자이너 분의 말씀을 찬찬히 풀어 써 보겠습니다.

1. "xdpi기준이고" -> 320 dpi기준으로 작업했습니다. 

2. "360 * 640 기준이에요" ->  px로 환산했을 때 크기가 1440 x 2560인 디바이스  해상도 기준이에요.

자 이해되셨나요? 그래도 이해가 되지 않는다면 조금 더 자세히 설명드려보도록 하겠습니다. 

안드로이드 개발자가 받아들여야 할 의미는 

1440 * 2560 xdpi인 s7와 디바이스와 비율이 같은 것에서는 제플린에서와 동일한 디자인이 나오지만,  화면비가 다른, dpi가 다른, 디바이스에서는 제플린과 동일한 화면을 만들 수 없습니다.

-- 추가 20.04.22--

아래의 예시는 동일한 150dp * 150dp로 이미지뷰 3개를 배열한 스크린샷입니다.

각 스펙은 

 좌 ( 1080 * 2160 / 440 dpi )  우 ( 1080 * 1920  / 420 dpi ) 입니다.

- 보시는 바와 같이 왼쪽의 디바이스는 화면비가 더 넓은 만큼 여백도 많이 생기게 됩니다.

- 또한 20dpi 차이가 나므로 ,  동일한 150dp의 가로 세로 이더라도 거의 유사하지만 20dpi만큼의 크기 차이가 나게 됩니다.

(제플린 기준에서 화면비와 dpi 차이가 클 수록 더 제플린과 유사하지 못한 화면이 구성되겠죠? )

그렇기에 항상 유의해야 할 부분은 얼마만큼 동일한 느낌으로 보일 수 있게 하는 가 입니다.

그렇기에 대부분의 경우에 절대값으로 dp를 지정하기 보다, 비율 또는 마진으로써 조절하게 됩니다.

--

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/asyncBtn"
        android:layout_width="150dp"
        android:text="걍 비동기"
        android:layout_height="150dp"></Button>

    <Button
        android:id="@+id/rxasync"
        android:layout_width="150dp"
        android:text="알엑스 비동기"
        android:layout_height="150dp"></Button>

    <Button
        android:id="@+id/rxsync"
        android:layout_width="150dp"
        android:text="알엑스 동기"
        android:layout_height="150dp"></Button>

</LinearLayout>

매우 주의) dpi도 중요하지만 실제론 디바이스 화면비 또한 중요하다.

보통 모든 디바이스에 대응하는 디자인이란 매우 어렵지만, 이렇게 기준과 다른 디바이스의 Resolution Issue가 발생할 때는 디자이너분께 이런 특정 폰에서는 어떻게 작업하면 되겠습니까~? 하고 다시 여쭤보는 것이 가장 좋은 방법입니다.

* 비율 또는 해상도가 달라도 일괄적으로 처리할 수 있게 기준을 먼저 잡아주는 디자이너 분과 협업하는 것이 가장 좋고

* 다음으로는 이슈를 전달했을 때 이해하고 차선책을 줄수 있는 디자이너 분과 협업 하는 것이 좋습니다.

결론적으로 안드로이드 개발자가, Zeplin을 통해 디자인을 넘겨 받았을 때 확인해야할 부분은 

1. dpi가 어떻게 되는지 (제플린)

2.  xml preview를 어떤 디바이스를 놓고 할지(안드로이드 스튜디오 )

이렇게 되겠습니다.

마지막으로 강조하고 싶은 필자의 말은 "UI를 작성하는데 있어서 디자인 파트와 이슈가 생겼을 때, 내가 그 개념을 모르면 디자이너에게도 정확히 전달되지 않는다." 입니다. 클라이언트 개발자는 알고리즘 외, 디자인의 개념도 충분히 숙지하고 있을 때 비로소 훌륭한 클라이언트 개발자가 될수 있습니다.

그럼 모두 굳 개발! 

안드로이드 초보 개발자를 위해 아래와 같은 카카오 오픈톡을 운영 중입니다. 

https://open.kakao.com/o/gn4xqQ6