2013.05.17 13:59


안드로이드 앱 개발자가 제안하는 디자인 방법론 - ANDROID UI TIPS



1. 특정 해상도의 기준을 잡아 디자인을 하되, 보이는 것이 다가 아님을 주의하라.


안드로이드 기기는 다양한 해상도를 지원한다. 특정 해상도를 잡아서 작업을 하지만 실제 단말에서는 그 해상도를 사용 하는 사람은 많아야 20% 일것이다. 

항상 해상도보다 더 작거나 더 큰 경우가 있다는것을 생각 하고 디자인 하라.









2. 안드로이드 특성상 메뉴버튼과 백버튼은 하단에 위치 한다. 


하단에 하드웨어 방식뿐만 아니라 소프트웨어 방식의 버튼이 존재 한다는것을 기억하라. 소프트웨어 버튼일 경우 하단에 또다른 버튼을 배치 한다면 2단의 버튼이 생성되어 오작동을 불러 일으킬 수 있다.





3. 터치한 영역을 사용자에게 재확인 시켜라.


모바일 특성상 웹과는 다르게 화면이 작다. 사용자가 특정 콘텐츠를 눌렀으면 눌렀다는것을 확인 시켜줘야 한다. 터치한 버튼의 액션에 대한 Pressed이미지를 준비하라.







4. 이미지 파일 사이즈(용량)를 확인 하라.


안드로이드는 JAVA에 의해 구동된다. JAVA특성으로 인해 메모리 관리가 생각 보다는 힘들다. 예를 들어 4x4사이즈의 나인패치 이미지가 10KB씩 큰경우가 있다. 보통 1KB에 비해 10배나 커지게 된다. 이런 사이즈가 커질수록 메모리를 많이 잡아 먹게 되어 결국 성능저하, 누적되면 앱이 죽을 수도 있다.



 

 

 

 

 

5. UI 가이드의 dip단위 또는 이미지 크기는 짝수를 사용 하라.


dip단위는 px변환 과정에서 정수가 아닌 소수가 나올 수 있기때문에 화면에 디스플레이하는데 오차가 발생 하게 된다. 이런 오차를 최대한 줄이기 위해서는 특별한 경우가 아니라면 짝수 크기를 사용하라. 


 

 




6. UI 가이드 라인작성시 절대적인 수치보다, 상대적인 표현을 하라.


해상도 별로 DIP이 다르기 때문에 절대적인 수치는 화면이 짤리거나, 줄어들 수 있다. 유동적이라는 생각으로 상대적인 표현으로 가이드하라. 단, 마진이나 패딩은 제외. 









Posted by injunech
2013.05.17 13:59


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




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


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



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



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



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

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


Test Case

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


Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--
<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

1
2
3
4
5
6
7
<!--
    <style name="ActionBarTextView">
        <item name="android:layout_width">110dip</item>
        <item name="android:gravity">center</item>
    </style>
 
-->




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

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


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

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



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



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

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


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


Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--
<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으로 절대적인 수치가 아닌 상대적인 표현을 하는것이 가장 중요하다.



Posted by injunech
2013.05.17 13:58


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 3. DPI, DIP(DP) 개념




안드로이드는 다양한 해상도와 화면의 크기를 지원한다고 이전 시간에 설명을 했다. 


2013/02/28 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념

2013/03/04 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습


이런 다양한 기기를 지원하기 위해 개발자 뿐만아니라 디자이너들까지 어려움을 격는다.

또, 제조사에서 구글의 가이드라인에 맞지 않게끔 기기를 만들기 때문에 두번 어렵다.


기존에 웹디자이너가 안드로이드 디자인으로 넘어 오면서 혼란을 초래 할 수도 있다. 예를 들면 웹은 최소사이즈를 지정하여 디자인 하는데 반해, 안드로이드 앱의 경우 모바일 특성상 모든 화면에 컨텐츠 들이 보여야 되기 때문에 어떠한 해상도에서든 꽉찬 화면을 유지해야 되기 때문이다.




아래는 현재 출시된 대표적인 기기들의 해상도이다. 

이런 다양한 해상도를 완벽하게 지원한다는건 힘들고 손이 많이 가는일이다. 어떤식으로 안드로이드가 이미지를 처리하는지에 대해 알고 디자인을 한다면 디자인의 퀄리티는 좀더 높아 지지 않을까 생각 해본다. 

말로 풀어 설명하기가 참 힘든 부분이라 이해하기가 힘들 수도 있다. 하지만 어떻게 하면 좀더 쉽게 설명 할수 있을까에 대한 고민을 많이 했으니 차근차근 하나씩 설명 해보겠다.











* PX


안드로이드는 px단위를 쓰지 않고 dip단위를 사용한다. 설명에 앞서 왜 px단위를 쓰면 안되는지, 쓰면 어떤 문제가 발생 되는지 간단한 예를 통해 알아 보자.




Test Case

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
<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:src="@drawable/b" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/p" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
     
</LinearLayout>
-->


디자이너가 800x480을 기준으로 화면에 정확히 120px로 된 4개의 아이콘을 넣고 싶어 한다고 치자. 800x480에 마춰서 디자인을 했으니 문제 없이 잘 보이지만, 1280x720의 해상도에서 보니 오른쪽 부분이 횡하게 비는 것을 볼 수 있다.

px단위는 화면의 전체화면 크기를 고려 하여 표시되는 상대적 단위가 아닌 전체화면 크기와는 관계 없이 지정한 수치만큼 표시되는 절대적 표시 단위이기 때문이다.


      

                         < 800 x 480 >                                   < 1280 x 720 >


위의 앱은 실제로 본인이 개발했을때 px단위를 쓴 단적인 예이다. 800x480에 기준으로 px단위를 써서 개발을 했다. 1280x720의 해상도의 경우 엉망이 되는 정말 좋은 예제이다.

또한 웹 브라우저에서 화면 크기를 작게 할때 콘텐츠 들이 짤리는것을 보면 금방 이해가 될 것이다. 하지만 우리 안드로이드는 어떤 화면크기가 와도 화면이 절때 짤려서는 안된다.


그래서 안드로이드에서 도입된 것이 dip(dp)단위 이다.










* DPI 

Dots Per Inch

1인치(2.54 센티미터)에 들어 있는 픽셀의 수(밀도)


안드로이드에서는 dpi별로 이미지, 레이아웃을 다르게 줄 수있다. 

하지만 기기별 dpi가 전차 만별 이기때문에 구글에서는 아래처럼 가이드를 제시해주고 있다.

 

Low density (120dpi) (0.75x) : ldpi 

Medium density (160dpi) (baseline) : mdpi 옵티머스원

High density (240dpi) (1.5x) : hdpi : 갤럭시S, 갤럭시S2, 

Extra High density (320dpi) (2.0x) : xhdpi 갤럭시S3

Extra Extra High density (480dpi) (3.0x) : xxhdpi 갤럭시S4(미정)




구글의 가이드라인에 의해 제조사는 dpi기준을 잡아 출시 한다.










* DIP(DP)

Device independent pixel


디자이너와 개발자의 혼란을 줄이기 위해 안드로이드에서는 dpi단위를 제공한다. 

dpi단위는 독립적인 크기를 나타낼 수 있도록 하는 단위이다. 이론상 어떠한 해상도에서도 같은 크기를 보여 주는것이 핵심 개념이다.


표준이 되는 화면크기를 중심으로 보다 큰 화면에서는 지정된 배율로 크기를 늘려주고, 작은 화면에서는 지정된 배율로 크기를 줄여준다.




Test Case

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




아까전과 다르게 800x480에서의 1280x800의 해상도에서 비슷한 크기로 보인다. 다른 점이 하나 있다면 drawable-hdpi 디렉토리에 이미지를 넣었다.

drawable-hdpi 디렉토리에 넣으면 이 이미지들은 hdpi용 이미지라는것을 안드로이드에서 인식 해서 더크거나 작은 dpi가 들어 오면 이미지를 크거나 작게 스케일링 해준다.


DPI 계산법: 원본px * (변환 할 DPI / 원본px의 DPI)


ex) HDPI의 120px을 XHDPI로 변환한다.

120*(320/240) = 160px



DPI 이론상 눈에 보이는 실제 이미지의 크기는 둘다 같아야 되나 오차가 발생 되어 좀 더 크거나 작게 그려질 수있다.


320/240 = 1.3333333.... 이기 때문에


120 * 1.33333... = 159.9xxxx 가 나온다. 

px단위는 최저 1px이 기준이기 때문에 159.9xxx를 표현을 못해 160px로 그린다. 그렇기 때문에 오차가 발생 하는 것이다.


나눠서 정확하게 정수형으로 떨어 진다면 오차는 발생 하지 않게 된다. 또한 해상도와 인치의 규격에 맞지 않게 기기를 만든경우에도 오차가 발생 될수 있다.(대 표적으로 갤럭시탭7)



하지만 이렇게 스케일링이 된다고 믿어서는 안된다. 폰마다 가로 dpi가 모두 다르기 때문이다.


그래서 레이아웃 구성시 동적으로 구성 해야되며, 이런 동적인 구성을 하기 위한 가이드라인을 작성 하는법에 대해서 다음에 알아 보겠다.





Posted by injunech