안드로이드 4.4(KitKat) 디자인 UI/UX 변경사항

안드로이드 4.4 KitKat는 새로운 기능 뿐만 아니라 새로운 디자인 가이드라인을 발표했다. 변경된점은 아주 크게 바뀌지는 않았지만 모바일 사용성에 최적화 및 사용성을 개선을 위해 노력했다. 변경된점을 하나하나씩 살펴 보자.

블루→화이트로 대체

안드로이드 킷캣은 홈화면에서 시스템바 영역을 투명 그라데이션을 적용 함으로써 아이콘을 강조하기위해 기존 블루색대신 흰색을 사용한다. 소프트웨어키와 앱 아이콘의 텍스트와 조화를 위해 화이트를 선택한것으로 보인다. 

새로운 제스처

화면이 큰 대형 스크린 스마트폰은 한손조작이 어려운데, 이를 좀더 보안하기위한 새로운 제스터를 발표했다. 현재 구글 지도에서 적용되어 있는기능으로 더블터치후 아래위 드래그를 하면 확대 축소가 되는 제스처기능과 크롬앱에 적용된 더블터치 하면 확대 한번더 하면 복귀되는 제스처기능이다. 


브랜딩

개발자는 자신의 브랜드의 정체성을 강화 하기위해 여러가지 UI요소(탭, 체크박스, 프로그래스바, 라디오버튼 등)에 브랜드 색상을 사용하면 좋을듯 하다. 브랜딩 뿐만 아니라 화면 별로 다양한 색상을 쓰는것 보다 한가지색을 씀으로 앱이 복잡해 보이지 않는 등의 장점이 있을 수 있다. 

투명한 네비게이션/시스템바

네이게이션바(소프트웨어 버튼)와 시스템바는 투명색으로 개발자가 변경 가능하다. 시각적으로 화면 공간이 넓어지며, 앱의 UI적으로 좀 더 좋은 디자인이 가능 할 것으로 보인다. 

새로운 전체화면 모드지원

기존 전체 화면 모드시 네비게이션바는 그대로 보였지만 킷캣에서는 모두 숨길 수 있다. 숨긴후 다시 보이게 하기위해서 두가지 종류가 있는데 “Lean Back”, “Immersive” 가 있다. 

Lean Back: 화면을 터치 하면 네비게이션바가 보이며, 책, 동영상시 쓰는것이 효과적이다.

Immersive: 상단 시스템바를 보이기위해서는 상단에서 드래그, 하단 네이게이션바를 보이기위해 하단에서 드래그하면 되며, 게임에 적합하다. 

XXXHDPI 지원

이번에 킷캣 출시와 더블어 넥서스5가 출시 되었는데, 이는 XXHDPI를 가지고 있다. 한단계 더 높은 XXXHDPI를 지원한다. 

화면 녹화기능

홍보성 앱을 만들때 화면녹화에 문제점이 있었는데, 4.4부터는 기본적으로 지원된다. 녹화된 셈플화면을 봤는데, 프레임도 괜찮아 아주 쓸모가 많을듯 하다. 

  

안드로이드 앱 개발자가 제안하는 디자인 방법론 – 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으로 절대적인 수치가 아닌 상대적인 표현을 하는것이 가장 중요하다.