허니컴 태블릿 디자인

네이버 블로그 :: 포스트 내용 Print http://blog.naver.com/PostPrint.nhn?blogId=monodream77&lo...

Designing For Android Tablets (안드로이드 허니컴 태블릿 앱 디자인) Method
2011/09/28 15:34

http://monodream77.blog.me/130119614741

Honeycomb용 application을 디자인하기 위해서 알아두면 좋을 사항들입니다. 특히 Honeycomb의 대표적인 UI특성이라고
할 수 있는 Action bar에 관한 규칙은 특별한 의도가 없는 한 그대로 지켜주는 것이 좋을 것 같네요. 그리고 넓은 화면에서
Fragment를 최대한 효과적으로 사용하는 것이 Honeycomb을 위한 레이아웃 디자인을 위해 가장 중요할 것 같습니다.
Honeycomb 디바이스의 스크린 사이즈와 해상도 역시 다양해서 각각의 상황에 맞는 레이아웃을 고려하는 것도 중요할 것
같네요.
그리고 Visual design에서는 OS에서 제공하는 UI element의 형태적 특성은 따르되, 스타일은 꼭 따를 필요는 없을 것 같습니
다. iOS의 GUI와 차별화하기 위해 Realistic하고 볼륨감있는 iOS의 graphic과는 반대되는 스타일로 Flat하고 simple한
Holographic UI의 그래픽 스타일을 만들었다고는 하지만, 너무 단순하고 단색위주라 세련되지 못하고 개성없이 투박해 보이
기가 쉬울 것 같습니다. Visual design은 컨셉에 따라 자유롭게 표현하는 것이 제품의 차별화를 위해 좋을 것 같다는 생각입
니다. 대신 OS에서 제공하는 contextual actions나 Search, Input box, copy & paste, popup 등의 GUI와 같이 나올 때 어떻
게 조화를 이룰지는 고민을 해봐야 할 것 같습니다.

디자이너들은 점점더 다양한 모바일 기기의 UX를 디자인하길 요구받는다. Tablet이 증가하고, post-PC의 세상으로 옮겨감
에 따라, 기업들은 사용자의 경험의 질에 집중하여 경쟁을 할 것이다. Android tablet의 app을 성공적으로 디자인하기 위해
서는 다운로드를 해서 사용하게 만드는 뛰어난 컨셉 외에도 Android 사용자에게 직관적이고 OS 사용환경과 유사한 경험
(native to the environment)을 제공하는 것이 중요하다.

다음은 iPad OS의 UI와 Android 3.x Honeycomb UI 규칙과 요소들 사이의 차이점을 설명함으로써 디자이너가 Android

21 중 1 2011-10-05 오전 11:29


tablet app에 친숙해질 수 있게 해줄 것이다. 또한 Honeycomb의 디자인 패턴과 레이아웃 전략에 대해 알아볼 것이며, 몇몇
Android tablet app도 리뷰해볼 것이다.

스마트폰의 Android 2.x app또한 태블릿에서 작옫되지만, Android 3.0 Honeycomb는 특별히 tablet을 위해 디자인된 것이
다. 앞으로의 업데이트는 Honeycomb의 특성을 스마트폰에도 옮겨와 다수의 스크린을 가진 타입의 앱도 디자인하기 쉽게
할 것이라고 한다.

대부분, tablet을 ipad를 통해 처음 접하게 되었을 것이다.그래서, 두 가지 UI를 비교해 보며 시작하는 것이 좋을 것 같다. 비
교를 통해, 우리는 tablet을 통해 배운 것을 정리해볼 수 있고, 두 가지 UI사이의 중요한 차이점에 촛점을 맞추며 Android 사
용자의 독특한 UI needs를 충족시킬 수 있을 것이다. 이러한 과정이 Android tablet에 익숙하게 해줄 뿐만 아니라, iPad에 있
는 앱을 Android tablet용으로 디자인할 때 고려해야 할 매우 중요한 요소들이 될 것이다.

Android tablet과 iPad 의 경험이 많은 부분을 공유하지만(touch gestures, app launch icons, modals, 등), 디자이너는 추측
하여 화면을 그리기 전에 많은 차이점에 대하여 알아두어야 한다.

두 가지 플랫폼의 가장 큰 차이는 형태에 있다. iPad의 레이아웃은 768x1024 pixel로 만들어져 있고, 사용자는 기본적으
로 portrait모드를 사용한다.

Android 타블렛은 다양한 단말 제조사때문에 스크린 사이즈에 대한 문제가 좀 복잡하다. 일반적으로, 7인치와 10인치 사
이즈의 타블렛이 있다(화면의 좌측 상단 모서리부터 우측 하단 모서리까지 측정된 사이즈). 그러나 10인치 타블렛이 대부
분이다.

이것이 픽셀에 있어서는 무엇을 의미하는가? 기본적인 레이아웃을 위해 좋은 사이즈는 10인치 스크린 사이즈와 기본적으
로 가로모드를 사용하는 1280x752 px(시스템바 포함)이다. iPad에서처럼, Android 타블렛의 컨텐츠는 가로모드와 세로
모드에서 모두 보여질 수 있지만, 일반적으로는 가로모드가 사용된다.

10인치 Android 타블렛(좌)와 iPad(우)에서 세로모드 뷰

21 중 2 2011-10-05 오전 11:29


10인치 Android 타블렛(좌)와 iPad(우)에서 가로모드 뷰

그러나 Android에서 스크린 사이즈문제는 그리 어려운 문제가 아니다. 안드로이 타블렛은 서로 다른 "스크린 밀도
(screen densities)"를 가지고 있다. 스크린 밀도는 스크린의 일정한 면적에 들어있는 픽셀의 수를 의미한다. 너무 자세
하게 들어가지 않더라도, 디자이너는 원본 사이즈를 1.5배나 2배로 확대하여 세가지 스크린 밀도에 대한 비트맵 이미지를
준비해야 한다. 100x100으로 만든 비트맵 이미지가 150x150과 200x200사이즈의 이미지를 모두 가지고 있어야 한다
는 뜻이다. 이 세 가지 사이즈 이미지에 대한 일괄작업을 함으로써, 이미지 퀄리티를 유지하면서 medium, high 그리고
extra-high density 타블렛에 맞는 이미지를 만들 수 있을 것이다.

스크린 밀도와 Android 디바이스에 관한 더 많은 정보는 Android 디자인에 관한 기존 포스팅을 참조하라.

iOS가 시스템바를 최소한으로 사용한다면, Android Honeycomb는 notification과 네비게이션 버튼을 포함시켜 시스템
바를 확장하엿다. "Back"버튼, 홈 버튼 그리고 "Recent apps"버튼이 있다.

21 중 3 2011-10-05 오전 11:29


Android Honeycomb 시스템 바

Android Honeycomb의 시스템 바와 버튼은 어떤 앱이 실행되어도 항상 스크린의 하단에 노출되어 있다. 고정된 UI 버튼
과 같다. 예외적으로 비디오나 게임과 같은 전체화면을 보여줘야 하는 상황에서만 "Light out"모드로 시스템바를 숨기고
있다.

Honeycomb 시스템 바가 항상 영역을 차지하고 있는 것이 디자이너에게는 장애물로 여겨질 수도 있지만, 실제로는 iPad
app에서 "Back"버튼으로 차지하는 영역을 자유롭게 해 준것이기도 하다. Honeycomb 시스템 바에서의 "Back"버튼은
모든 앱에서 공통적으로 사용된다.

시스템 바의 "Back"버튼

21 중 4 2011-10-05 오전 11:29


두 플랫폼의 UI의 큰 차이점은 상단의 액션 바에서 있다. Android는 액션바에서 아이콘이나 로고의 위치, 네비게이션
(drop-down메뉴 또는 tab), 공통 액션 등의 요소들의 배열과 시각적인 형식을 정해놓고 있다. 이것은 Android
Honeycomb 앱에서 가장 통일된 디자인 패턴이니, 커스터마이징이나 iPad와 같은 UI를 만들기 전에 고려해 보는 것이
좋을 것이다.

액션 바

Android의 위젯은 iPad 사용자에게 새롭게 느껴질 것이다. 이름이 의미하듯, 위젯은 시작화면(launch screen)에 나타나도록
설정할 수 있는 작은 알림이나 숏컷이다. 위젯은 쌓인 형태(stack view)로 디자인할 수 있으며, Android 3.1에서는 사이즈를
조절할 수 있다.

21 중 5 2011-10-05 오전 11:29


시작화면의 많은 위젯들

OS의 notification 시스템은 시작화면에서 간단한 알림을 제공한다. Honeycomb는 우측 하단영역에서 팝업("toast"라
고 부르던 것)처럼 나타나며, Mac OS X의 Growl과 매우 유사하다. notification은 아이콘에서부터 동작하는 버튼이 있는
ticker 텍스트까지 어떤 형태로든 적용이 가능하다.

Android의 notification

21 중 6 2011-10-05 오전 11:29


iPad 앱의의 settings에 접근하는 것은 보통 "i"버튼을 눌러 pop-over로 나타난다. 그리고 settings의 카테고리는 시각적
으로 구분이 쉽게 되게 하기 위해 테이블로 나뉘어 진다. Honeycomb는 다른 형식을 가지고 있다. 사용자가 좌측에서 카
테고리를 네비게이션하고 우측에서 상세내용을 확인할 수 있는 iOS의 "General settings"와 비슷하다. 이 방식은
honeycomb에서 다수의 settings를 보여주는데 좋은 방법이다.

Calendar 앱에서의 Settings 디자인

알다시피, Android는 그의 경쟁자와 모든 것을 반대로하기 위해 매우 많은 노력을 한다('차별화'라고 하기도 한다).
Honeycomb는 자신만의 UI형식이 있으며, 시간/날짜 설정, 옵션 선택, 볼륨 조절 등의 일련의 액션을 하기 위한 시각언
어(visual language)인 "holographic UI"를 만들었다. 화면 흐름을 정의하고 레이아웃을 디자인하기 위해서는 이 UI 언
어를 이해하는 것이 중요하다.

21 중 7 2011-10-05 오전 11:29


Google I/O 2011 프레젠테이션의 슬라이드에서 가져온 UI 요소 샘플

iPad 4.3에서는 얼마나 많은 폰트를 지원할까? 정답은 55개이다.
Android에서는 몇개를 지원할까? 3개만 지원한다.

지원하는 3개의 폰트는 Droid Sans, Droid Serif, Droid Sans Mono이다. 반면 좋은 점도 있다. 플랫폼에서는 세가지밖
에 지원하지 않지만, 개발자가 앱에 어떤 폰트던지 포함시킬 수 있게 되어있다.

21 중 8 2011-10-05 오전 11:29


iPad에 이미 익숙한 디자이너에게는 다행히도 두 개 플랫폼에서 비슷한 점이 몇가지 있다.

Tap, Double-tab, flick, drag, pinch, rotate, scroll을 마음대로 할 수 있다.

분할화면은 타블렛에서 가장 많이 사용되는 레이아웃이다. 두개의 화면(pane)이 나란히 있는 구조이다. 물론 더 복잡한
레이아웃을 위해 화면(pane)을 더 추가할 수도 있다.

21 중 9 2011-10-05 오전 11:29


Ustream의 분할화면 레이아웃. 카테고리는 왼쪽에, 카테고리의 내용은 오른쪽에 위치한다.

두 플랫폼 모두 audio, video, map을 화면에 포함(embedded)시킬 수 있다.

Video player가 포함된 Youtube 앱

어플리케이션 안에서, 또는 밖으로 데이터를 카피하고 붙여넣는 작업

21 중 10 2011-10-05 오전 11:29


두 플렛폼 모두 drag-and-drop을 지원한다.

Gmail 앱에서의 drag-and-drop기능

Honeycomb는 Android 2.0에서 소개된 디자인 패턴을 대부분 계승하면서 그것을 확장시키고 있다. 디자인 패턴에 익숙
하지 않더라도, Android에 정의된 것 처럼, 그것은 '흔히 반복되는 문제를 해결하는 일반적인 해결책'일 뿐이다. 디자인 패
턴은 사용자 경험을 통일하고, 디자이너와 개발자에게 작업에 필요한 템플릿을 제공하기 위해 Android에서 디자인한 UI
형식이다. 물론 커스터마이징해도 상관없으니 긴장하지는 마라!

21 중 11 2011-10-05 오전 11:29


언급한것 처럼, 액션바는 Android UI 요소중에 가장 중요한 것이고, 여기서 다루어 보겠다.

Calendar 앱의 액션바이다.

액션바는 가장 왼쪽에서 아이콘이나 로고로부터 시작한다. 이것은 동작하는 버튼이다. 누르면 사용자는 앱의 홈스크린으
로 바로 이동한다.

Calendar 앱의 아이콘

다음으로는, navigation에서 가장 전형적인 형태를 살펴보겠다. Drop-down이나 tab 메뉴에서, honeycomb은 drop-
down을 나타내기 위해 삼각형 형태의 그래픽을 사용하고, Tab에는 밑줄 형식을 사용한다.

아이콘이나 로고, 또는 레이블의 좌측에 나타나는 좌측화살표는 back이나 이전 액션을 취소하는 동작을 한다.

21 중 12 2011-10-05 오전 11:29


액션바 네비게이션의 세가지 다른 형태

공통 액션은, 이름이 의미하듯이 사용자에게 search, share나 overflow menu(추가메뉴)를 제공한다. 그것들은 항상 액
션바의 우측에 위치하며, 탭과는 떨어져 있다.

Calendar 앱의 공통 액션

Overflow menu(추가 메뉴)는 공통 액션 그룹에 있는 항목이며, 세로 형식으로 다르게 나타난다. settings나 help,
feedback등 다양한 메뉴 아이템을 위한 공간이다.

21 중 13 2011-10-05 오전 11:29


추가메뉴

Search 역시 공통 액션 그룹 중 한가지이다. Search에서 특이한 점은, 확장과 닫기 동작이다. Search 아이콘을 누르면
search box가 확장되어 나와 검색어를 입력할 수 있게 해준다. 취소하기 위해 "x"를 누르면, 하나의 버튼 상태로 다시 닫
힌다. 이것은 많은 액션이나 탭이 보여져야할 때 공간을 절약할 수 있다.

닫힌 상태의 Search 기능(위)와 열린 상태(아래). 돋보기를 누르면 search box가 열리고, "x"를 누르면 다시 닫힌다.

Contextual action은 아이템이 선택되었을 때 액션바의 내용을 바꿔 해당 아이템에 맞는 옵션을 보여준다. 예를 들면, 포
토 앱이 썸네일을 보여주고 있을때, 이미지가 선택되면 특정 이미지를 편집할 수 있는 기능을 제공할 수 있또록 액션바의
내용이 바뀐다.

contextual action bar에서 나가려면, 바의 가장 왼쪽에 있는 "Cancel"이나 "Done"을 누르면 된다.

Gmail 앱에서 이메일을 누르고 있으면 나타나는 contextual action bar

21 중 14 2011-10-05 오전 11:29


Honeycomb 디자인을 만드는 벽돌들을 "Fragments"라고 할 수 있다. Fragment는 화면의 방향이나 크기에 따라 사이
즈나 위치를 변경할 수 있는 자체적으로 기능하는 레이아웃 요소라고 할 수 있다. 이것은 앱이 돌아가는 디바이스의 화면
의 제약에 따라 디자이너나 개발자가 스크린 레이아웃 요소를 탄력적이거나 쌓을 수 있게(stackable) 하여 여러가지 스크
린 형태에서 오는 디자인 문제를 해결할 수 있게 해준다. 스크린 요소들을 늘이거나(stretch), 쌓거나(stack), 확장하거나
(expand), 닫거나(collapse), 보이거나 숨길 수 있다.

Fragment 프레임웍은 디자이너와 개발자에게 스크린 사이즈나 화면 방향에 따라 레이아웃을 유지할 수 있는 여러가지 옵
션을 제공한다.

무엇이 Fragment를 특별하게 만드는가? 호환성 라이브러리를 사용하여 개발자는 이 기능을 이 기능을 version 1.6의
스마트폰까지 적용시킬 수 있다. 다시 말하면, 이것은 디자이너와 개발자가 하나의 앱을 모든 디바이스와 OS버전에 적용
시키는 것을 가능하게 해준다.

Fragment가 개발자가 많이 사용하는 용어일지라도, 디자이너도 컨텐츠의 캡슐이 어떻게 마음대로 늘어나고, 쌓이고, 확
장되고, 숨겨지는지 기본적으로 알아야 할 필요가 있다.

Fragment의 가장 흔항 용도는 분할화면(split view)이다. 이 레이아웃은 email 클라이언트에서와 같이 리스트가 좁은 화
면에서 보여지고, 리스트에 대한 자세한 내용이 넓은 화면에서 보여질 경우 주로 사용된다.

21 중 15 2011-10-05 오전 11:29


USA today에서 사용된 분할화면

Fragment가 하나의 디자인을 다양한 스크린 크기에 적용하는데 유용한 반면, 또한 화면 방향에 대한 전략(Orientation
strategy)에도 역시 유용하다. 당신의 화면 디자인이 가로화면에서 매우 뛰어나 보인다고 해도, 3 컬럼으로 된 좁은 세로
화면에서는 어떻게 할 것인가? 역시 늘이거나, 쌓거나 숨기는 방법이 있을 것이다. Fragment를 필요에 따라 움직이고,
늘이고, 형태를 만들고, 제거할 수 있는 퍼즐조각으로 생각하라.

Honeycomb 프레임웍은 디자이너와 개발자가 다양한 애니메이션 효과를 사용할 수 있도록 해준다. Android 3.0
Highlight 페이지에 따르면, "애니메이션은 두 가지 상태 사이에서 fade나 움직임 효과를 만들 수 있고, 에니메이션을 반
복시킬 수 있고, 컬러를 바꿀 수 있고, 그 밖의 다른 효과들도 많다."라고 명시되어 있다. Honeycomb는 역시 2D나 3D
그래픽을 보여주는데 매우 뛰어난 퍼포먼스를 가지고 있다. 이 동영상에서 Honeycomb가 할 수 있는 에니메이션에 대한
좋은 리뷰를 볼 수 있다.

Android 타블렛 앱은 여전히 새로운 영역이고, 몇몇 브랜드만 이제 맛을 보고 있다. 아래는 영감을 위한 몇가지 앱들이다.
Android Market이나 Amazon에서 다운로드 할 수 있다.

YouTube
Google Youtube의 honeycomb 버전 앱이 위에서 언급된 모든 디자인 패턴과 UI요소들을 보여주며 자연스럽게 모범을

21 중 16 2011-10-05 오전 11:29


보이고 있다. Honeycomb에 대한 감을 잡으려면, 이 앱을 다운받아서 간단히 사용해 보라.

CNN
CNN은 touch gesture(더 많은 컨텐츠를 보기 위한 flicking 포함), 분할화면과 font를 보기에 좋은 앱이다. 커스텀 폰트
(Rockwell)이 뉴스 헤드라인을 위해 사용되었다.

CNBC
애니메이션(stock ticker tape에서) 과 뛰어난 그래픽과 그라데이션이 사용된 또다른 뉴스 앱이다. CNBC는 시각적으로
가장 뛰어나 보이는 앱 중 하나이다.

21 중 17 2011-10-05 오전 11:29


Plume
3컬럽 레이아웃과 함께, Plume은 가로화면과 세로화면에 따라 레이아웃이 어떻게 바뀌어야 하는지 보여주는 좋은 앱이
다.

FlightTrack
많은 양의 데이터를 다뤄야 하는 앱이 세련되게 만들어져 있다. 멋진 지도와 함께, 미묘한 에니메이션과 Honeycomb의
기본 UI요소가 적용되어 있다.

21 중 18 2011-10-05 오전 11:29


Pulse
더이상 무엇을 말할까! Pulse의 Android 타블렛 버전이다! Android와 iPad버전을 비교했을 때 거의 모든 방법에서 일관
성을 보여주며 역시 재미있다.

WeatherBug
이것은 Android Market에 처음 나온 Honeycomb app 중 하나였다. 이것은 지도 사용과 날씨 카메라로터 그림을 보여주
기 위해 holographic UI를 사용한 좋은 예이다.

21 중 19 2011-10-05 오전 11:29


Kindle
Kindle은 디자인 패턴과 Honeycomb UI 요소를 사용함에 있어 책의 형태를 고수한다. 세련된 형태를 하고 있으며,
Android를 연습하기에 역시 좋다.

IMDb
News360
USA Today
AccuWeather
Ustream
Google Earth
Think Space

21 중 20 2011-10-05 오전 11:29


Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011

Android 3.0 Honeycomb animation demo

Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011 (PDF)

Tablet UI Patterns

Supporting Multiple Screens

Icon Design

Android 3.0 Platform Highlights

원문 출처 : Designing For Android Tablets

21 중 21 2011-10-05 오전 11:29

허니컴 태블릿 디자인

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (9)

Similaire à 허니컴 태블릿 디자인

Similaire à 허니컴 태블릿 디자인 (20)

허니컴 태블릿 디자인