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

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

리소스 분할을 통한 디자인

크게 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로 휴대폰에는 하나의 화면을 테블릿에는 여러개의 화면을 붙여 좀 더 많은 정보를 보여줄 수 있다.

액션바와 키보드

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

플렛 색상과 이미지 리소스

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

결론

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