안드로이드 OS 관련 디자인을 할 때 디자이너가 꼭 고려해야하는 점들에 대해 정리했습니다. 안드로이드 OS란?안드로이드(Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다. 안드로이드는 개발자들이 자바 언어로 응용 프로그램을 작성할 수 있게 하였으며, 컴파일된 바이트코드를 구동할 수 있는 런타임 라이브러리를 제공한다. 또한 안드로이드 소프트웨어 개발 키트(SDK: Software Development Kit)를 통해 응용 프로그램을 개발하기 위해 필요한 각종 도구들과 응용 프로그램 프로그래밍 인터페이스(API)를 제공한다.
안드로이드는 리눅스 커널 위에서 동작하며, 다양한 안드로이드 시스템 구성 요소에서 사용되는 C/C++ 라이브러리들을 포함하고 있다. 안드로이드는 기존의 자바 가상 머신과는 다른 가상 머신인 달빅(dalvik) 가상 머신을 통해 자바로 작성된 응용 프로그램을 별도의 프로세스에서 실행하는 구조로 되어 있다. <* 안드로이드 L 4.5 롤리팝(가칭)에서는 아트(ART)라는 가상머신으로 바뀔 예정.>
2005년에 안드로이드 사를 구글에서 인수한 후 2007년 11월에 안드로이드 플랫폼을 휴대용 장치 운영 체제로서 무료 공개한다고 발표한 후 48개의 하드웨어, 소프트웨어, 통신 회사가 모여 만든 오픈 핸드셋 얼라이언스(Open Handset Aliance,OHA)에서 공개 표준을 위해 개발하고 있다. 구글은 안드로이드의 모든 소스 코드를 오픈 소스 라이선스인 아파치 v2 라이선스로 배포하고 있어 기업이나 사용자는 각자 안드로이드 프로그램을 독자적으로 개발을 해서 탑재할 수 있다. 또한 응용 프로그램을 사고 팔 수 있는 구글 플레이를 제공하고 있으며, 이와 동시에 각 제조사 혹은 통신사별 응용 프로그램 마켓이 함께 운영되고 있다.
위키백과 : 안드로이드 운영체제
안드로이드 OS 의 특징 중 하나로써, OS의 프로젝트명에 디저트 이름을 붙여 놓은 것이 특징입니다.
1.0 베타 애플 파이 (Apple Pie) 를 시작으로, 1.1 바나나브레드 (Bananabread) , 1,5 컵케잌 (Cupcake), 1.6 도넛 (Donut)
, 2.1 에클레어 (Eclair ; 디저트의 일종인데, 긴 빵에 크림을 채운 빵 정도로 생각해 주시면 됩니다) , 2.2 프로요 (Froyo ; Frozen Yogurt, 요구르트 아이스크림 정도 됩니다), 2.3 진저브레드 (Gingerbread)
, 3.0 태블릿 전용 OS 인 허니콤 (Honeycomb), 휴대폰 OS 와 태블릿 OS 를 통합한 4.0 ICS (Icecread Sandwich ; 빵또아 정도 됩니다)
, 4.1 젤리빈 (Jelly Bean), 그리고 가장 최신 OS 인 4.4 킷캣(Kitkat)까지 도착했습니다.
혹시 눈치채신 분들도 계실려나 모르겠는데, 이 디저트 이름 나열의 특징 또 한 가지, 알파벳 순서로 정해졌다는 것도 보이시나요?
안드로이드 OS용 디자인 시 유의해야 할 점
1. DIP (Density Independent Pixel) 란 무었일까요?
dp (dip, density independent pixel) 은 안드로이드에서 여러 화면 크기를 서포트 해주기 위해서 만든 유닛입니다.
Apple iPhone과 같이 한 제조사에서 OS와 단말기를 제조하여 출시하는것과 달리 Android OS는 구글이 OS만 개발 배포하고 각각의 제조사에서
이를 다양한 크기의 단말기에 커스텀해서 출시하기 때문에 여러가지 화면의 크기와 해상도가 달라지게 됩니다.
만약 여러 종류의 화면과 해상도에서 내가 만든 APP 디자인이 제대로 보이길 원한다면 dp를 고려해서 디자인을 만드는 것이 좋습니다.
우선 주의할 것은 안드로이드는 160dpi(mdpi)를 기본으로 생각한다는 것입니다.
다시 말하면, mdpi의 스크린(일반적으로 320×480 해상도에 2.8~4.3인치 스크린)에서의 픽셀 수를 dp으로 정의한 것입니다.
그래서 만약 320px x 480px 이면서 160dpi(mdpi) LCD가 있다면 dp로 320dp x 480dp가 됩니다.
그리고 스크린 밀도가 커지거나(도트가 작아지거나) 밀도가 작아지면(도트가 커지면)자동으로 dip에 일정 비율을 곱해서 GUI를 출력하고,
물리적으로 보이는 크기를 동일하게 유지시키는 것입니다.
- 1px = 1dp(mdpi)
- 1.5px = 1dp(hdpi)
- 2px = 1dp(xhdpi)
- 3px = 1dp(xxhdpi)
- 4px = 1dp(xxxhdpi)
그러면 그 dip값은 어떻게 측정을 해서 GUI 가이드 문서에 적용을 해야 할까요?
여기서 측정된 픽셀수를 그대로 적용하면 안되고, dp값으로 바꿔줘야 하는데, dp값으로 바꿔주는 방법은 간단합니다. dp = px * (160 / density)입니다. 그렇다면 코드상에서 dp를 pixel로 바꾸려면 어떻게 해야할까요? pixel = dp * (density / 160)이 같은 식을 이용하면 됩니다.
주요 해상도별 대표 디바이스 화면 크기 - ldpi(120dpi /기타 소형단말기) : 240 x 320
- mdpi(160dpi / 기타 단말기) : 320 x 480
- hdpi(240dpi / 갤럭시 S/S2) : 480 x 800
- xhdpi(320dpi / 갤럭시 S3 ) : 720 x 1280
- xxhdpi(480dpi / 갤럭시 S4 & 옵티머스G프로) : 1080×1920
- xxxhdpi(640dpi / LG G3) : 1440×2560
타블렛의 경우에는 1280x800px 정도 해상도에 10인치 또는 7인치 정도 되는 타블렛이 가장 많습니다. 대부분이 mdpi입니다.
타블렛은 대부분 큰 인치에 비해 도트가 조밀하지 않다는 뜻도 되죠. mdpi가 적용되므로 px값이 그대로 dp값이 됩니다. 이미지는 깔끔한 결과물을 위해서 각 dpi 크기에 맞는 이미지 리소스를 모두 제작해 주어야 합니다.
처음에 mdpi로 제작을 했다면, ldpi는 75%, hdpi는 150% , xhdpi는 200%, xxhdpi는 300%의 이미지를 만들어야 합니다.
처음에 hdpi로 제작을 했다면, ldpi는 50%, mdpi는 66.7%, xhdpi는 133%, xxhdpi는 200%의 이미지를 만들어야 합니다. 처음에 xhdpi로 제작을 했다면, ldpi는 37.5%, mdpi는 50%, hdpi는 75%, xxhdpi는 150%의 이미지를 만들어야 합니다. 처음에 xxhdpi로 제작을 했다면, ldpi는 25%, mdpi는 33%, hdpi는 50%, xhdpi는 66.7%의 이미지를 만들어야 합니다.
2. 안드로이드 Densities 디자인 순서
일단 디자인 레이아웃이 준비되었다면 각 요소를 디자인해야 할 것입니다. 이 단계에서 density에 대한 고려가 필요합니다.
앞에서 잠깐 설명했지만 쉽게 말하면 화면의 density는 ‘화면상의 물리적인 공간에 놓인 픽셀의 양’이라 할 수 있습니다.
이는 대개 dpi(dots per inch)로 불립니다. 안드로이드는 이를 대략 5가지 범위로 나누고 있습니다.
density와 관련하여 디자인하는데 힘든 부분은 각 density에 맞게 각 요소(디자인 리소스)를 준비해야 한다는 것입니다.
3. 여러분이 잊어서는 안되는 최고의 방법
- 전체 디자인은 xxhdpi 기준에서 한다, 그리고,
- 각 부분을 잘라내고 xhdpi, hdpi, mdpi에 맞게 크기를 줄인다.
- 요즘 대부분의 단말기는 hdpi 이상이 대부분이므로 ldpi, mdpi는 만들지 않아도 무관.
각 density들은 3(ldpi):4(mdpi):6(hdpi):8(xhdpi):12(xxhdpi):16(xxxhdpi)의 비율을 가지고 있습니다.
당신이 xhdpi 기반으로 디자인 한다면 아래와 같이 각 density별로 크기를 변환할 수 있습니다.
4. Densities 디자인 할 때 주의해야 할 점
여러분은 당신이 사용하는 ‘크기’와 ‘거리’를 신중히 고려해야 합니다.
예로 xhdpi 상의 58 × 58px 아이콘을 생각해 봅시다. (여기서 ‘거리’는 요소와 요소 사이의 간격을 의미합니다.)
- 21.75px on ldpi (!)
- 29px on mdpi
- 43.5px on hdpi (!)
(!) 표시를 해둔 것은 ldpi, hdpi가 소수점을 가지고 있다는 것을 의미합니다.
PNG에서 43.5px의 넓이를 갖는 이미지를 만들 수 없고 심지어 반올림할 수도 없습니다.
만약 43.5 × 43.5px 크기를 가진 5개의 아이콘을 나란히 놓는다고 하면 합이 최대 217.5px가 되어야 하는데,
44px로 반올림 할 경우 220px까지 커지기 때문에 이 또한 문제가 될 수 있습니다.
그렇다면 이 문제를 어떻게 해결해야 할까요?
방법은 …
xhdpi 기준으로 디자인 할 때 반드시 각 크기, 거리는 8의 배수여야 합니다.
가장 쉬운 방법은 항상 8×8 크기(또는 다른 8의 배수)의 grid를 사용하는 것입니다.
만약 xhdpi가 아닌 hdpi 기준으로 디자인하고 싶을 경우 그냥 6의 배수를 사용하면 됩니다.
정리하자면: - 4개의 density 각각에 맞는 리소스(이미지)를 준비합니다.
- xxhdpi 상에서 실제 디자인을 그리고 난 후, 이를 부분별로 자르고 각 density에 맞게 구분하여 사이즈를 줄입니다.
- 사용하는 크기, 거리를 신중하게 생각해야 합니다. xhdpi 기준으로 그릴 경우 항상 8×8 크기(또는 다른 8의 배수)의 Grid를 사용합니다.
안드로이드 단말기 별 화면크기(해상도)| Android Device Screen Resolutions | | Low density (~120), ldpi | Medium density (~160), mdpi | High density (~240), hdpi | Extra high density (~320)
, xhdpi | | Small screen | QVGA (240×320) | | 480×640 | | | Normal screen | WQVGA400 (240×400) | HVGA (320×480)
G1, 옵티머스원
(320dp x 480dp) | WVGA800 (480×800)
넥서스원, 갤럭시S1 & S2
(320dp x 533dp) | 640×960 | | WQVGA432 (240×432) | | WVGA854 (480×854)
모토로라 드로이드, XPERIA X10
(320dp x 569dp) | | | | qHD
(540×960)
Atrix, HTC Evo 4g
(360dp x 640dp) | | | | 600×1024 | | | Large screen | WVGA800** (480×800) | WVGA800* (480×800)
Dell Streak | | WXGA720 (720×1280)
갤럭시 S III, 노트II
360dp x 640dp | | WVGA854** (480×854) | WVGA854* (480×854) | | WXGA720* (720×1194 or 1280)
삼성 갤럭시 넥서스(화면 속에 내장된 소프트키로 인해 실제 해상도는 720 x 1,194임. 단, 동영상 재생시 1280으로 변경됨) | | WSVGA
(600×1024)
7인치 태블릿
( 갤럭시 탭 7.0, 킨들 파이이, 누크 태블릿) | | WXGA (800×1280)
삼성 갤럭시 노트I (5.29인치)(768×1280)
LG 옵티머스G, 넥서스4 (4.7인치) | | Extra Large screen | 1024×600 | WXGA (1280×800)†
모토롤라 Xoom 10
갤럭시탭 7.7 & 10.1 | 1536×1152 | 2048×1536 | | 1024×768 | 1920×1152 | 2560×1536 | | 1280×768 | 1920×1200 | 2560×1600 |
* To emulate this configuration, specify a custom density of 160 when creating an AVD that uses a WVGA800 or WVGA854 skin. ** To emulate this configuration, specify a custom density of 120 when creating an AVD that uses a WVGA800 or WVGA854 skin. † This skin is available with the Android 3.0 platform
크게 4가지로 나눠지네요. - 320dp 스마트폰, 360dp 스마트폰
- 400dp 태블릿폰 (2011 현재 삼성에서만 출시, 갤탭(2010)은 7인치지만 dp 분류상 갤노트와 같이 분류.)
- 600dp 7인치 태블릿
- 720dp(800dp) 10인치 태블릿.
* 주의사항 *
- 킨들파이어(2011) : 스크린 사이즈가 실제 디바이스에서는 Large인데 에뮬레이터에서는 XLarge로 잡힐 수 있습니다.
안드로이드 3.0 이하에서는 스크린 사이즈 잡는 부분이 문서와 같이 동작하지 않습니다.
- 갤럭시탭(2010) : 400dp라는 흔치 않은 넓이를 가지고 있으며 문서와 다르게 Normal이 아니라 Large로 잡습니다.
문서대로라면 ICS로 업그레이드시에 달라질수 있을것으로 보이니 유의해야 할 것 같습니다.
기타 다른 디바이스의 해상도를 알고싶다면 Wiki에 잘 정리된 자료가 있습니다.
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
참고바랍니다.
일반적인 안드로이드 상태바 (STATUS_BAR) 높이안드로이드 APP 디자인시 실제 이미지의 최대 크기는 상태바(Staus Bar)가 있는 상황과 없는 상황에 따라 달라집니다.
혹은 특정 단말기의 경우 하드웨어 메뉴키가 없이 소프트웨어 메뉴키로 존재 할 수도 있습니다.
삼성 갤럭시 넥서스의 경우가 그러한데 메뉴키가 하드웨어 디바이스에 포함되지 않고 소프트웨어로 구현되어 있어
단말기 화면 크기는 1280 x 720px 인데 여기에서 92px 만큼 빼준 (1280-96) 1184px 입니다.
단, 동영상 재생시 1280px으로 변경됩니다.
일반적인 안드로이드 상태바 (STATUS_BAR) 높이는 다음과 같습니다.
- 18px for LDPI
- 24px for MDPI
- 36px for HDPI
- 48px for XHDPI
- 72px for XXHDPI
런처 아이콘(Launcher icons) 사이즈
※ 구글 플레이(Google play)를 위한 512 x 512 px 고해상도용 런처 아이콘 제작도 권장합니다.
안드로이드 폰의 바탕화면에 아이콘을 흔히 런처 아이콘(Launcher icons)이라 합니다.
런처 아이콘는 반드시 투명 알파채널이 포함된 PNG(32-bit) 이미지여야 합니다. 그리고 런처 아이콘은 인접한 다른 런처 아이콘과의 시각적인 무게의 일관성을 위해 몇 픽셀정도의 패딩을 포함하고 있어야 합니다. 예를 들어 96 x 96px의 xhdpi 용 런처 아이콘은 88 x 88px의 기본 형태에 각각의 모서리에 4px 씩 패딩을 줄 수 있습니다. 또한 런처 아이콘이 바탕화면에서 잘 보이도록 미세한 그림자 영역을 이 패딩 영역에 포함할 수도 있습니다.
참고) 아이콘 디자인시 개발자를 위한 일반적인 파일 네임 사용 규칙
안드로이드 용 여러가지 아이콘 이미지을 디자인할 때 개발자를 위한 파일 네임을 정하는 규칙이라 할 수 있겠습니다.
그 밖의 아이콘 사이즈 안드로이드 폰에 대표적으로 쓰이는 아이콘들의 사이즈는 기본 mdpi(160dpi)를 기준으로 아래와 같습니다. (Android 3.0 ICS 이상 기준)
- 런처 아이콘 : 48 x 48dp (mdpi)
- 액션 바 아이콘 : 32 x 32dp (mdpi)
– 패딩을 제외하면 실제 아이콘 사이즈는 24 x 24dp
– 픽토그램 스타일로 디자인하고 최소 줄의 두께와 공간은 2dp 유지
– 포지티브 액션 바 : Colors: #333333,Enabled: 60% opacity, Disabled: 30% opacity
– 네거티브 액션 바 : Colors: #FFFFFF, Enabled: 80% opacity, Disabled: 30% opacity
- 상황에 따라 컨텐츠에 쓰이는 작은 아이콘들 : 16 x 16dp (mdpi)
– 패딩을 제외하면 실제 아이콘 사이즈는 12 x 12dp
– 편평하게( Flat), 단순한 스타일로 디자인
– 얇은 선으로 디자인 하는것보다 면으로 채워진 형태가 알아보기 쉽다.
– 쉽게 알아볼 수 있게 목적에 맞는 단일한 시각적 메타포(Metaphor)로 디자인 함.
- 알림 아이콘(Notification Icons) : 24 x 24dp
– 패딩을 제외하면 실제 아이콘 사이즈는 22 x 22dp
– 런처 아이콘와 같은 동일한 시각적 메타포를 이용해서 편평하고, 단순하게 제작
– 런처 아이콘은 완전히 흰색(White) 디자인 해야함 (시스템에서 자동으로 축소하거나 어둡게 만듭니다.)
위젯 (Widget) 디자인안드로이드OS용은 아이폰과는 다르게 메인 화면에 나오는 위젯 이라는 것이 있습니다.
이 또한 가이드가 정해져 있으며 이 사이즈는 지켜서 디자인을 해야 합니다. 위젯은 안드로이드 1.5에서 등장한 후 안드로이드 3.0과 3.1에서 대폭 개선되었습니다.
일반적으로 위젯은 Bounding Box (셀의 경계), 프레임 그리고 위젯의 컨트롤 요소(텍스트 레이블, 버튼, 이미지) 등의
3가지 주요 구성요소가 있습니다. 잘 디자인 된 위젯은 Bounding Box의 가장자리와 프레임
, 그리고 내부 프레임의 가장자리와 위젯의 컨트롤 사이의 사이 여백(padding)을 둡니다.
위젯의 크기는 사용자가 안드로이드 홈 화면에 위젯을 배치하는 그리드(Grid)에 따라 사이즈가 달라 질 수 있습니다.
이 그리드는 장치에 따라 다를 수 있습니다. 예를 들어, 많은 휴대 전화는 4×4 그리드를 제공하고
, 태블릿 더 큰, 8×7 그리드를 제공 할 수 있습니다. 그리드 안에 최소 단위를 Cell이라 하고 최소 Cell 가로/세로 사이즈는 40dp입니다.
예를 들어 음악 플레이어 위젯인 경우 사이즈를 보면
최소 세로 높이는 Song Artist와 Song Title을 보여줄 2줄의 텍스트와 더해서 약간의 텍스트 마진 영역입니다.
최소 가로 사이즈는 플레이 버튼과 넥스트 버튼, 그리고 최소 텍스트영역(10글자 정도)에 더해서 텍스트 가로 마진 영역이 됩니다.
예를 들어 계산은 다음과 같습니다 :
- minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
- minHeight = 48dp + (2 × 4dp) = 56dp
이러한 위젯은 가로크기와 세로 크기를 조정할 수 있습니다. 만약 위의 최소 가로/세로 크기에 맞지 않게 디자인되면 나타나지 않거나
, 사용할 수 없는 위젯이 될 수 있습니다. 9patch 이미지를 사용해서 디자인하면 위젯의 최소 가로/세로 사이즈를 별도로 추가해야합니다.
안드로이드 4.0 이상에서는 자동으로 위젯의 가장자리에 마진을 추가하게 됩니다.
그래서 위젯을 디자인할 때 주의할 점은 위젯 가장자리에 여분의 여백을 두지 않는 것이 좋습니다.
예를들어 음악 위젯은 80dp x 100dp grid 와 함께 시스템에 의해 자동으로 8dp 마진이 추가로 더해지게 됩니다.
위젯을 새로 디자인 할때 안드로이드 개발자 사이트에서 제공하는 디자인 템플릿을 사용해서 디자인하는것이 좋습니다 안드로이드 4.0의 응용 프로그램 도구 템플릿 팩을 다운로드
원문 출처 : HS다비드 STROY, 위키백과, Looh.com by nilpoint, posko, Mono Dream UI Design Blog, 디자이머, Developer Android.com | 
