Awesome Android Design


GDG Sydney에서 발표한 Awesome Android Design 주제에 대한 정리입니다.

브랜드와 정말 중요로 하는 컨텐츠에 대해서는 컬러를 통일감 있게 사용해라. 다양한 색상으로 사용자의 집중도를 떨어 뜨리지 말고 정말로 핵심적인 요소에만 컬러를 주어 강조하는게 좋을듯 하다.

Normal과 Pressed 버튼에 대해 너무 대조적인 색상은 표현을 피하라. 허니컴버전으로 오면서 이렇게 쓰라고 해놓고 이제와서는 쓰지 말란다. 너무 과도한 반전색상보다 어느정도 눌렸다는 것만 인지 할 수준으로 만들어도 괜찮을 듯 하다.

각각의 View들의 Hold 스타일에 맞는 리소스만들기가 디자이너입장에서는 좀 귀찮아 할 수 있는데, android-holo-colors.com에 접속해서 Color값을 입력하면 관련 리소스이미지는 물론 Style도 만들어 준다.

actionbarstylegenerator.com에 접속 하면 ActionBar의 Style도 만들어 준다. 액션바, 팝업컬러등 정보를 넣으면 자동으로 Style을 만들어 주기 때문에 유용하다.

Holo Style은 허니컴(안드로이드 3.0) API 11이상부터 지원한다. 그렇기 때문에 하위버전은 AppCompat를 이용해서 Style을 구성해야 하며, res/values를 통해 API버전별로 테마를 나누어 사용해야 한다.

안드로이드의 내부에 정의된 스타일 리소스를 사용 할 수도있다. ?adnroid:attr/로 접근 할 수 있다. 하지만 제조사마다 커스텀할 수 있기 때문에 모든 폰에서 100%똑같은 디자인이 나오지는 않는다. 만약 모든폰에서 똑같은 디자인과 색상을 원한다면 안드로이드 내부 리소스를 쓰기보다 커스텀해서 만들어 쓰길 권한다.

Header Section의 스타일도 정의 되어 있있다.

텍스트 Appearance도 정의 되어 있다. Medium같은 경우 18sp로 정의되어 있으며, ImageView를 쓸때 borderlessButtonStyle을 적용 해주면 Pressed이미지가 버튼처럼 된다. 이것은 Holo스타일에 맞지 않게 잘못 사용하고 있다.

좀 더 Holo스타일처럼 바꾸기위해 LinearLayout의 divider를 통해 dividerHorizontal스타일을 주어 사용해야한다.

버튼도 Holo Style에 맞는 DrawableState를 스타일로 제공하고 있다.

기본적으로 제공하는 스타일을 Holo 스타일에 맞게 잘 사용하면 좋겠다. 위의 이미지 처럼 어떤 레이아웃에 어떻게 배치하느냐에 따라 차이를 보이게 된다. 왼쪽보다 오른쪽이 깔끔하고, 보기도 좋다,

액션바에 로딩 인디케이터을 띄우기 위해서는 setProgressBarIndenerminateVisisility()를 사용하면된다.

style을 통해 커스텀 할 수도있다.

액션바가 오버레이 모드일 경우 맵의 아이콘이 액션바에 가려 질 수있다. 그래서 액션바의 높이를 알 필요가 있다.

이런식으로 액션바의 높이를 구해서 구글맵의 패딩을 줌으로써 버튼이 액션바에 가려지지 않게 된다.

다양한 기기들의 지원

폰전용으로 만든앱은 테블릿에서 사용하면 당연히 사용성은 떨어진다. 화면은 크지만 콘텐츠들의 배치가 폰전용 이기때문에 화면의 낭비가 많아진다.

폰에서는 화면을 새롭게 교체하는 방식을 사용하고, 테블릿에서는 여러개의 화면을 분할 해서 한쪽에서만 화면을 교체하는 방식으로 화면을 넓게 사용할 수 있다.

이렇게 폰과 테블릿의 레이아웃을 분기 해야 하는데, 리소스 layout을 통해 분기할 수 있다.

조각된 화면을 그대로 유지 하고, 전체적인 화면을 구성하는 레이아웃만 분기하면된다.

activity가 전체적인 화면이고 fragment가 조각된 화면들이다. 테블릿의 경우 sw720dp(small width 720dp)즉 최소 가로가 720dp이면 layout-sw720dp라는 디렉토리의 레아웃이 읽히고, 폰의 경우는 layout의 디렉토리의 레이아웃이 읽히게 된다.

폰의 경우에는 fragment를 하나씩 쌓는 방식이고, 테블릿의 경우는 2개의 화면을 펼쳐지게 레이아웃을 구성을 해두었다. 그렇기 때문에 위와 같이 화면들을 구성 할 수있다.

SlidingPaneLayout을 사용해서 테블릿의 activity레이아웃을 구성하면 된다.  가로/세로 모드를 쉽게 관리 할 수있다. 가로일때는 펼쳐져 보이겠고, 세로모드일때는 왼쪽 슬라이드를 통해 화면이 보이는 구조가 된다.

세로모드일 경우 left pane은 뒤로 숨겨지게되고 right pane은 화면이 꽉차게 된다. 그래서 left pane은 보이지 않게 되지만, 슬라이드를 통해 위로 나타나게 된다.

레이아웃변형과 조각되는 화면들로 구성하기 힘들다면 이렇게 리스트뷰와 그리드뷰로 화면을 구성하는 방법도 있다. 폰일때는 가로로 1개씩 아이템을 배치한다면 테블릿일때는 가로로 2개씩 아이템을 배치함으로써 큰화면에 많은 콘텐츠를 보여 줄 수있다.

ListView의 Adapter의 getView()에서 화면의 크기때 따른 레이아웃을 배치 할 수 있다. 예를 들어 폰에서는 가로로 최적화되게 레이아웃을 구성했다면 테블릿일경우 이미지도 좀 더 크고 텍스트위치 세로로 배치하는등 작업을 해서 테블릿에 맞도록 레이아웃을 최적화 시키면된다.

핀터레스트에서 처음으로 들고나온 리스트뷰이다. 기기에 최적화된 아이템의 가로 갯수로 화면을 구성하고 세로간의 아이템 간격이 비대칭이다. E-Trending이라는 앱을 만든 회사에서 AndroidStaggerGrid 뷰를 오픈소스로 공개했다.

기기마다 다른 아이템의 레이아웃

테블릿에 맞도록 레이아웃뿐만 아니라 폰트의 크기등 다양한 단위를 dimens를 통해 정의 할 수 있다.

MaxWidthLinerLayout을 이용하면 child의 크기에 따라 레이아웃 크기가 변경된다. 이 레이아웃을 통해서 나머지 공간에 대한 처리를 쉽게 할 수 있다.

이미지가 많은 앱의경우 모든크기를 다 보여 주기가 힘든경우가 많다. 이럴 경우 특정영역만 보여이기위해 자를수 밖에 없는데, scaleType를 통해서 쉽게 잘려질지와 잘려진다면 영역은 어떻게 할지에 대해 지정 할 수 있다.

다양한 기기지원을 위해서 레이아웃 분할을 통해 구현할 수 있으며, 레이아웃 뿐만아니라 drawable, color, dimensions등 다양하게 분할이 가능하다.




실질적인 안드로이드 디자인


안드로이드 어플리케이션은 개발 설계 과정뿐만 아니라 디자인이 굉장히 중요하다. 디자인으로 인해 앱의 품질이 좌우 되기때문이다. 이렇게 디자인적인 요소로 고객 이탈을 최소화 하는데 도움이 되는 몇가지 구체적인 단계를 적어 보겠다.

리소스 분할을 통한 디자인

크게 4가지의 스크린으로 리소스 분할을 할 수 있다.

  • 일반적인 폰
  • 5인치 이상의 폰
  • 7인치 이상의 테블릿
  • 10인치 이상의 테블릿

4가지의 그룹을 나누고 각각의 스크린에 따라 디자인하게되면 최적의 결과를 제공한다.

네이밍 규칙

안드로이드 리소스 네이밍 규칙에 대해 알고 있다면 디자인시 많은 도움이 된다.

  • drawable-hdpi
  • drawable-xhdpi
이미지 리소스를 만들때, 각 폴더에 적절한 이미지를 넣으면된다. 예를 들어 어플리케이션 아이콘을 만든다면 해상도에 따른 이미지들이 필요로 한다. 그렇기 때문에 hdpi단말에는 72×72픽셀의 이미지를, xhdpi단말에는 96×96필셀의 이미지를 만들어야 한다. 이렇게 리소스를 디렉토리별로 구분해놓게 되면 안드로이드는 자신의 디바이스에 위치한 폴더의 이미지를 사용하게 된다.
  • drawable-hdpi/icon.png
  • drawable-xhdpi/icon.png

리소스 이름 규칙은 소문자, 숫자, 밑줄(_) 만 사용할 수있다.

좋은 예:
icon_main_search.png

잘못된 예:
Icon-Search.png

화면크기

보통 안드로이드 단말의 물리적인 스크린 사이즈를 통해 디자인을 시작하는데, 시스템 내부에서 차지하고 있는 영역을 제외한 영역으로 디자인해야 한다.

액션바

네비게이션바

상태표시줄

기본적인 영역에 대한 중요사항:

  • 액션바, 상태표시줄, 네이게이션바는 항상 모든장치에 표시되지 않으며, 가로/세로에따라 크기가 달라 질 수 있다. 필요에 따라 모두 제어가능하다.(네이게이션바는 킷켓부터)

  • 단말의 물리적인 크기로 디자인을 하는것은 나쁜 습관이며, 액션바, 상태표시줄, 네이게이션바의 상태를 확인해야한다.

DPI 분할

안드로이드는 해상도와 필셀 밀도에 따라 각 장치에 대한 DPI를 분할 할 수있다.

nodip, ldip, mdpi, tvdpi, hdpi, xhdpi, xxhdpi, xxxhdpi

이렇게 폴더별로 dpi를 구분하여 모든장치에서 동일한 물리적 크기를 가질 수 있도록 한다. 예를 들어 mdpi폴더에 3x3cm를 표시하는 이미지를 넣었다면 더 크거나 더 작은 기기에서 동일한 크기를 나타내도록 한다. 폴더의 dpi로 해당기기의 dpi와 비교해서 더 크거나 작게 픽셀화 시켜 화면에 나타낸다. 물리적인 크기를 보장하기위해 다음과 같은 비율을 가진다.

ldpi(0.75), mdpi(1.0), tvdpi(1.33), hdpi(1.5), xhdpi(2), xxhdpi(3), xxxhdpi(4)

단말의 dpi에 따른 dpi리소스를 가지는 것이 디자인을 최적화하는 방법이다.

스크린사이즈와 DPI

초반에 설명한 4가지의 스크린사이즈와 방금 설명한 DPI로 리소스를 분할하면 안드로이드의 모든단말을 최상의 UI로 지원가능하다.

Phone assets:

drawable-ldpi/
drawable-mdpi/
drawable-tvdpi/
drawable-hdpi/
drawable-xhdpi/
drawable-xxhdpi/

5″ device assets:

drawable-large-ldpi/
drawable-large-mdpi/
drawable-large-tvdpi/
drawable-large-hdpi/
drawable-large-xhdpi/
drawable-large-xxhdpi/

7″ device assets:

drawable-sw600dp-ldpi/
drawable-sw600dp-mdpi/
drawable-sw600dp-tvdpi/
drawable-sw600dp-hdpi/
drawable-sw600dp-xhdpi/
drawable-sw600dp-xxhdpi/

10″ device assets:

drawable-sw720dp-ldpi/
drawable-sw720dp-mdpi/
drawable-sw720dp-tvdpi/
drawable-sw720dp-hdpi/
drawable-sw720dp-xhdpi/
drawable-sw720dp-xxhdpi/

위와 같은 리소스 디렉토리 구조가 될 것이다. 이런 구조를 사용하는 것이 여러단말들에 대한 최적의 UI를 보여줄 수있다. 하지만 실질적으로 이렇게 많은 리소스를 만들고 관리하는 것은 힘들기때문에 필요한 상황일때만 사용하게된다.

Fragment

안드로이드 초기 하나의 화면을 지원하는 Activity만 있었다. 폰외에 테블릿에 안드로이드가 올라가면서 큰화면에 하나의 화면을 지원한다는 것은 여백의 낭비로 초래 되었으며, Fragment라는 하나의 Activity에 여러개의 화면을 그릴 수 있는 것이 추가되었다.

이 Fragment로 휴대폰에는 하나의 화면을 테블릿에는 여러개의 화면을 붙여 좀 더 많은 정보를 보여줄 수 있다.

액션바와 키보드

입력을 위해 키보드를 띄우게 되는 경우 액션바와 키보드의 높이는 제외한 영역을 항상 생각 해야한다. 특히 가로모드일때 액션바외 오버되는 화면들로인해 컨텐츠 영역이 보이지 않는 경우가 있다.

플렛 색상과 이미지 리소스

안드로이드에서는 단순한 색을 이미지로 표현하는 것은 비효율적이다. 플렛 색상이나 네모박스, 줄, 간단한 그라디언트는 개발 팀에서 훨씬 효율적이고 빠르게 그릴 수 있다.

결론

안드로이드 멀티디바이스 최적화는 아주 힘든점이다. 올바른 방법으로 접근하지 않으면 설계는 어려운 작업이 된다. 위의 글을 통해서도 완벽하게 설계는 불가능하지만 개발자와 디자이너간의 커뮤니케이션을 쉽게 도와 줄 것으로 바란다.

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

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

블루→화이트로 대체

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

새로운 제스처

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


브랜딩

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

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

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

새로운 전체화면 모드지원

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

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

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

XXXHDPI 지원

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

화면 녹화기능

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