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

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

리소스 분할을 통한 디자인

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

액션바와 키보드

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

플렛 색상과 이미지 리소스

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

결론

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

“실질적인 안드로이드 디자인”에 대한 5개의 생각

  1. 안드로이드 폰 UI 디자인 할때 해상도를 어떻게 할지 고민되서 검색하던 중에 여기까지 찾아 들어왔네요.ㅎㅎ
    기존에는 640*960으로 작업했는데 안드로이드에서 약간씩 깨져 보여서 이번에 작업할때는 해상도를 높여서 작업하고 싶은데요
    최적화 시키기에는 너무 시간이 많이 걸릴꺼 같아서요
    800*1280 정도로 작업하면 어떨까요?
    모든 폰에서 잘 보이게 하려면 어느정도 해상도로 작업을 해야 될까요?
    다른 사이즈로 몇개씩 만드는건 너무 힘든 작업 같아서요

  2. 안녕하세요.

    기본이 되는 해상도 사이즈는 많이 쓰는 단말을 기준으로 하시면 될것 같습니다. 요즘은 말씀하신것 처럼 1280×800(xhdpi)기준으로 많이들 작업 하시는것 같습니다. 이렇게 작업하신다고 해도 좀 더 큰 해상도를 가진 단말의 경우에는 이미지를 늘리게 된니 깨져보이는것은 어쩔 수 없는 부분이고, 이이미지리소스를 한벌 더 만드셔야 선명하게 보이실 것입니다.
    하지만 1280×800넘어 가면서 사용자가 인지 못할 정도의 pixel이기 때문에 직접눈으로 보고 깨짐이 심한 부분만 작업하시면 될 듯 합니다.

    감사합니다.

  3. 네 감사합니다. 답변이 많이 도움이 되었어요..
    아이폰만 디자인 하다가 안드로이드쪽 하려니 모르는 부분이 많네요^^
    답변 감사합니다.

  4. 안녕하세요. 저도 앱디자인 프로젝트를 앞두고 자료를 찾다가 좋은 블로그를 알게 되었어요. 즐겨찾기 해두고 공부할 예정이에요. 좋은 자료, 정리 감사드려요.

    위에 댓글을 보니 800×1280 으로 작업하신다고 하셨는데. 부족한 지식으론 xxhdpi 는 720×1280 으로 알고 있었거든요. 요즘 800을 많이 쓰신다고 하셨는데.. 800을 기준으로 해야 하는건지 질문드릴게요.. 곧 프로젝트 시작해야 하는데 모르는게 너무 많네요 ~^^

  5. 현재 앱을 만들고 있는 개발자 입니다.

    1600 * 2560 기반의 디자인을 해서,
    이미지를 앱에 적용해 보았는 데, 폰과 7인치 타블렛에서는 이미지 아이콘들이 깨지지 않고 보이는 데,
    Galaxy Note2 Tab 10.1 에서 이미지들이 많이 흐릿합니다.

    위의 내용에서 스크린 사이즈와 DPI 를 보면 drawable-xxhdpi-sw600dp 와 drawable-xxhdpi-sw720dp 와 같은 탭용 이미지들을 따로 저장해 두어야 하는 데, 저희는 그러지 않았습니다.

    drawable-xxhdpi 에 저장한 이미지들에 비해서
    해상도가 1.5배 2배 더 커진 베이스에서 이미지를 만들어서 drawable-xxhdpi-sw600dp 와 drawable-xxhdpi-sw720dp 폴더에 저장을 하는 것인지,
    아니면, 이미지 크기는 1600*2560 이나 포토샵에서 PPI ( Pixel Per Inch, 현재 72ppi 로 되어 있습니다. ) 값을 변경해서 저장해야 하는 것인지 잘 모르겠습니다.

    조언 부탁드립니다. gikimiad@gmail.com

댓글 남기기