2012/09/18

안드로이드 개발자 간담회 - Definitive Android Design

9월 17일 저녁 안드로이드 개발자 간담회가 구글코리아에서 있었습니다. 이 간담회에는 아시아지역의 안드로이드 Developer Advocate들이 국내의 안드로이드 개발자들을 대상으로 여러 주제에 관해 세션을 진행했습니다.

그 중 Definitive Android Design 세션의 내용을 좀 자세히 정리해봅니다.

Definitive Android Design


이 세션은 안드로이드의 다양한 화면 구성에 대응하는 방법에 대한 전반적인 기술정보를 공유하는 자리였습니다. 이미 많은 내용들이 안드로이드 디자인가이드 문서에 공개되어 있고 커뮤니티에 의해 한글화된 문서 도 있어 많은 분들이 알고 계신 내용이지만 총정리를 해주더군요!

안드로이드 개발자들은 꼭 공부하고 기억해야할 내용입니다.

Devices and Displays

안드로이드는 이제 많은 기기에서 사용됩니다. 그 기기들은 매우 다양한 화면 크기와 형태를 가지고 있습니다. 각각의 단말에 일일히 대응하는것은 매우 어려운 일이 되겠지만 안드로이드 프래임웍에서는 이를 쉽게 만들어주는 많은 기능을 이미 가지고 있습니다. 


DIP(device independent pixel)를 사용하자.

초기에 안드로이드 개발되는 앱들이 dp단위 대산 px단위를 사용해 다양한 단말화면에서 화면이 엉망으로 표시되는 경우가 종종 있었습니다. dp단위를 사용하면 다양한 단말에서 동일한 크기의 버튼, 이미지를 기대할 수 있습니다. 아래 그림은 각각의 dpi 에서 Baseline안에 표시되기에 필요한 이미지의 크기를 나타내 주고 있습니다. 


안드로이드 프래임웍에서는 특정 dpi의 이미지가 다른 dpi 단말에서 보여지게 되는 경우 이미지를 자동으로 Scale up하거나 Scale down하여 화면에 보여줍니다. Scale up이되는 경우에는 아이콘이 좀 뭉개지는 현상이 발생하기도 하고 또 매번 사용시마다 단말상에서 Scaling 작업이 이루어지게되므로 이를 방지하기 위해 각각의 dpi 이미지를 넣어주는 것도 좋은 방법이라고 권고하였습니다. 성능이 낮은 단말에서 이미지 스캐일링 까지 해야 한다면 성능이 더 안좋겠죠~

Metrics

폰과 타블랫의 구분은 어떻게 할까요? 아래 그림을 한번 보세요.

안드로이드 3.2 이상에서는 Smallest width 600dp(sw600dp) 가 타블랫의 기준이 되고 Android 3.2 미만에서는 largexlarge가 타블랫의 기준이 됩니다.

터치가 가능한 UI요소를 화면상에 배치할때는 48dp 정도, 즉 실제 기기에서 ~9mm 정도의 영역을 사용하는것이 좋습니다.
또한 각각 요소들의 각격은 8dp정도가 적절합니다. (위 버튼에서는 상하에 4dp씩의 여백을 사용합니다.)

폰의 경우 한손으로 쥐는 경우가 있는데 이런 경우에 터치 오동장을 방지하기 위해 사이드에 16dp 정도의 빈 영역을 넣어주는것이 좋을 것이라고 합니다.


Action Bar

액션바는 안드로이드 3.0(허니콤) 이상에서 추가되 기존의 하드웨어 메뉴버튼을 대체하고 사용자에서 편리함을 주기위한 화면 구성요소입니다.


위 그림처럼 액션바는 크게 4가지로 구성됩니다.
  1. App icon
  2. View control
  3. Action buttons
  4. Action overflow
App icon은 앱의 특성을 아이콘을 통해 보여주는 공간이고 액션바에서는 Up동작을 위한 공간으로도 활용됩니다. Up버튼에 대한 설명은 탐색 패턴을 보시길 바랍니다.

View control은 앱이 가진 여러가지 뷰를 전환할 수 있는 컨트롤을 포함합니다. 드롭다운 메뉴나 탭 컨트롤등을 사용할 수 있습니다.

Action Buttons은 앱이 수행할 수 있는 중요한 액션들을 포함합니다. 공간이 없는 경우 자동으로 Action overflow쪽에 포함됩니다. 
Action overflow 는 자주 사용되지 않는 액션들이 표시됩니다. 위의 그림처럼 가로모드시에 공간이 충분할 때는 많은 Action item들이 나타나고 설정을 통해서 표시 유무를 지정할 수 있습니다.

Back button compatibility

하드웨어 메뉴버튼이 존재하는 경우(갤s3) Action overflow메뉴는 나타나지 않고 예전 Android단말을 대상으로한(targetsdk로 지정)앱에서는 가상의  메뉴버튼이 하단 시스템메뉴의 오른쪽 부분에 나타나게됩니다.

Expanded layout

JB에 들어오면서 Notification이 확장되어 다양한 레이아웃을 지원할 수 있게 되었습니다. 


이 알림을 이용할때는 지켜야하는 가이드라인도 설명해주었지만 너무 길어서 생략! 
하지만 꼭 읽어보세요~

Navigation

앞서 Action Bar에서 App icon이 Up 동작으로 사용할 수 있다고 했는데 Up동작은 다음과 같이 서로 다른 레벨로 탐색이 이용됩니다.
 Conversation 3 detail화면에서 Back버튼을 누르면 2 화면으로 가지만 Up버튼이 눌려진 경우 상위 리스트 화면으로 이동해야합니다.  또한 Back버튼은 앱을 벗어 날 수 있지만 Up버튼으로는 앱을 벗어날 수 없다는 것도 꼭 기억해두어야 할 특징입니다.

Fragment

Fragment는 재사용가능한 화면 구성요소로 각 영역별로 layout을 관리할 수 있는 장점이 있습니다. Support library를 통해 API 4 레벨부터 사용이 가능합니다. (자세한 정보는 제 블로그인 요기를 참고하시면 좋습니다. :)

Pure Android

안드로이드에서 제공하는 아이콘이나 버튼들을 아이폰이나 윈도우폰의 리소스를 사용하는 경우가 있습니다. 이렇게 되면 사용자들은 앱 사용시에 혼란이 오게됩니다. 익숙한 화면을 보여주는것이 앱을 쉽게 사용하게 하는 방법이 됩니다. 이와 더불어 하면 안좋은 것과 좋은 것에 대해서 다음과 같이 꼭집어서 설명해주었습니다.

하면 안되는 것들!
  • 다른 플래폼(아이폰, 윈도폰)의 UI를 차용한다.
  • 플래폼의 특성을 타는 아이콘을 사용한다.
  • 하단 탭바를 사용한다. (터치시 백버튼이 눌려질수 있다!!) 
  • 아이폰처럼 Labled 백버튼을 사용한다.
  • 아이폰처럼 설정에서 > 를 사용해 상세설정으로 들어가도록 한다.
해야 되는 것들!
  • 액션바를 쓴다.
  • Build intelligent context-aware app
  • 적절한 시점에 미리 데이터를 로딩해 놓는다.
  • Offline 모드를 지원한다.

여러 주제가 있었지만 개발자입장에서 가장 알찬 주제가 아니었을까 생각이 듭니다.
이런 기회가 자주 있었으면 참~ 좋겠습니다.

Post a Comment