안드로이드 앱 개발자가 제안하는 디자인 방법론 – 4. 가이드 작성법 1

이전시간에 안드로이드는 dp(or dip)단위를 쓰기 때문에 어떠한 해상도에서든 같은 크기를 보여준다고 이야기 했으며 스케일링이 된다고 설명했다. 하지만 폰마다 가로 dp가 모두 다르기때문에 스케일링 만으로 다양한 기기를 지원하기가 어렵다.

2013/03/11 – [개발관련/Android] – 안드로이드 앱 개발자가 제안하는 디자인 방법론 – 3. DPI, DIP(DP) 개념

그렇다면 어떤식으로 디자인 해야 되며, 가이드라인을 만들지에 대해 알아 보자.

왜 스케일링 만으로 모든폰을 지원 못하는지에 대해 간단한 예제를 통해 알아 보자.

디자이너가 좌우 2개의 이미지와 중간에 타이틀을 넣고 싶어 하는 액션바를 디자인 한다고 가정해보자. 1280×720사이즈를 기본으로 위와 같은 작업은 가이드작업을 할 것이다.

이 가이드를 바탕으로 개발자는 아래와 같은 레이아웃 작업을 할것이다.

 

Test Case

drawable-xhdpi 폴더 r.png, p.png, g.png, r.png

Layout

    
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:src="@drawable/b" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
    
    <TextView
        style="@style/ActionBarTextView"
        android:text="TITLE" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:src="@drawable/p" />
    
</LinearLayout>

Style

    

    <style name="ActionBarTextView">
        <item name="android:layout_width">110dip
        <item name="android:gravity">center
    </style>

 

 

레아웃을 작업 후 Xhdpi단말기에서는 가이드라인과 같은 레이아웃 구성이 된것을 볼수 있다. 하지만, Hdpi단말기를 보면 오른쪽 보라색 박스가 깨진것을 볼 수있다.

왜이렇게 이미지가 작아져 버릴까.

단순하다. xhdpi단말기의 가로는 360dp이고 hdpi단말기는 320dp이다. hdpi단말기의 가로가 40dp이 모자라기때문에 더이상 그리지 못하고 작아진것이다.

이처럼 레이아웃 구성에 따라 작아지거나, 짤리는 경우가 있다.

그럼 어떤식으로 가이드라인을 작성 하면 될지 개발자가 직접 그린 가이드라인을 보자.

단순하다. 타이틀 부분을 동적으로 꽉차게 기준을 주는것이다. 이것은 개발자와 디자이너와 약속을 정하고 특정문자로 대체 하면 좋을듯 한 방법이다.

결론은 특정 View에 동적인 기준을 준다는 것이다.

Padding이나 Margin 값 또는 특수한 경우를 제외한 나머지 이런식으로 가이드를 작성하면 된다.

 

Layout

    
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:src="@drawable/b" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TITLE" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:src="@drawable/p" />
    
</LinearLayout>

 

이런 가이드라인을 통해 개발자는 위와같은 레이아웃 배치를 할 것이다. 그럼 아래와 같이 모든 폰에서도 잘 보이게 된다.

<1024 x 768> xhdpi 옵티머스 뷰

<1280 x 720> xhdpi 갤럭시 S3

<800 x 480> hdpi 갤럭시 S1

 타이틀 부분이 동적으로 늘어나거나 줄어들어서 화면의 사이즈에 맞추는 것을 볼 수있다.

하지만, hdpi용 타이틀 부분이 너무 작아서 디자이너가 만족 하진 못할 수도 있다. 그럴땐 hdpi용으로 좀더 작은 사이즈의 아이콘을 한벌 더 만들어 넣으면 해결 된다.

이처럼 가이드시 dp으로 절대적인 수치가 아닌 상대적인 표현을 하는것이 가장 중요하다.

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – 4. 가이드 작성법 1”에 대한 9개의 생각

  1. 좋은 글 잘 봤습니다.

    마지막 그림 설명에 오기가 있네요.
    <800 x 480> hdpi 옵티머스 뷰 라고 쓰셨는데, 갤럭시 S1이나 동일 해상도의 다른 기기명으로 바꿔주심 될 것 같아요.

  2. dpi와 dip 스펠을 바꿔서 쓰인 곳이 종종 보이네요…
    디자이너다보니 알아서 오타려니 생각하기에는 좀 헷깔리는 부분이 있네요…
    수정 해주시면~~ 아주 보기 편할 것같습니다.

  3. 앱디자인 완전 초보로서, 도움이 많이 되었습니다. 감사합니다.
    질문이 있는데요, 안드로이드 앱 디자인은, 상태바 50px만 제외하고
    디자인 하면 되는 것인지요?
    iOS처럼 정해진 디자인 규격이 있나요?

  4. 안녕하세요. 안드로이드 앱 디자인을 처음하는 디자이너입니다. 포토샵에서 디자인을 하려고하는데 해상도에서부터 걸려서 찾다찾다가 이 글을 발견하게 됐어요~
    현재 겔에스4가 1080×1920으로써 가장커서…거기에 맞추려고 하는데요.

    예를들어 상단에 메뉴가 4개가 들어가고 s4에 딱 맞게 하려면 가로가 270px이 되잖아요~

    그럼 가로가 270px인 이미지를 그대로 잘라서 드리고 좌표만 dip수치로…여러 기기별 해상도에 맞춰서 찍어 드리면되는건가요?ㅠ

    아니면 s4에 맞춰 작업했으면 s4에 맞는 이미지와 좌표만 가이드라인 작성해서 드리면되는건가요…ㅠ

  5. 메뉴4개가 어떤 형태인지는 모르겠으나,
    아이콘은 이미지로 전달 해주고 개발자분께 s4(xxhdpi)를 기준으로 작업 한거라고 알려드리면 됩니다. 그리고 가이드를 메뉴4개가 해상도에 따라 크기가 균등하게 레이아웃 구성하도록 말씀 드리면 될것 같습니다.
    이런쪽에서는 수치는 단순히 패딩이나 마진정도만 의미가 있구요 메뉴 하나당 가로크기에 대한 수치는 무의미 합니다. 해상도에 따라 크기가 변화되게끔 레이아웃 구성을 요구하시면 됩니다.

  6. 안녕하세요. 웹디자이너로 일을 하고 있는데요. 가이드와 이미지를 개발자 전달시 기준해상도에 대한 한벌 만을 전달하는지 모든 dpi(mdpi, hdpi, xhdpi, xxhdpi)에 맞추어서 전달하는지 궁금합니다. 말씀하신 이론상으로 보면 한벌이 맞지만 이미지 최적화를 위해서는 늘거나 줄어드는 이미지에 대해서 별도 작업이 필요한 것이 아닌가 해서 여쭈어 봅니다. 한벌로 한다면 최고해상도 기준으로 해야하는지요…

댓글 남기기