안드로이드 단말기 dpi와 디자인 가이드 적용방법

안드로이드 단말기 dpi 단위와 디자인 가이드 적용방법

[ 1인치당 픽셀수 표 ]

ldpi : 120dpi   mdpi : 160dpi (기본)   *. 1dp 가 1px 로, 1:1 매칭이 됩니다. hdpi : 240dpi    xhdpi : 320dpi (h + 80) xxhdpi : 480dpi (h + 240, x + 160)  xxxhdpi : 640dpi (h + 400, xx + 160)  *. px 값 얻기 = dp * 단말 DPI / 160 *. dp 값 얻기 = px * 160 / 단말 DPI

보통 안드로이드 개발을 진행하면, 디자이너로 부터 "어떻게 가이드 잡아드릴까요?" 라는 질문을 받습니다.

안드로이드는 단말기의 파편화가 심각해서 (종류만 4천개가 훌쩍 넘습니다..)

디자인을 깔끔하게, 그리고 디자이너 분들의 요구사항에 맞게 단말기에 딱 맞게 그려내는 것이

개발의 시작이자 끝이란 말이 나올 정도로 디자인 잡는 것은 개발자들에게 굉장한 스트레스로 작용합니다.

(아이폰은 그나마 덜합니다...)

잠깐!

만약 이미지 아이콘 등이 하나도 안들어가는 안드로이드 기본 제공 디자인으로만 작업한다면

정말 간편한 개발이 될 것 입니다.

이때의 "가이드"라는 것은 화면의 각각의 버튼, 글자 같은 요소들의 크기와 간격 등을 숫자들로 어떻게 표시하겠느냐인데,

가장 간편한 방식은 "기본 dpi인 160dpi (360x640px)" 를 기준으로 디자인 가이드를 달라"고 하거나, 

디자이너 분들이 사용하는 프로그램에 px을 dp로 변환해서 알려주는 툴인 제플린(http://zeplin.io), 스케치 등

(포토샵에도 비슷한 기능이 있습니다)을 사용해서 XX단말기 크기를 기준으로(보통 앱이 주력으로 타겟팅할 그 시대의 판매왕(?) 

단말기) 해당 가이드를 달라고 하면 됩니다. 

*. 제플린을 사용하면 좋은 것은, 색깔이나 사이즈를 바로바로 확인하면서 개발자가 질문도 할 수 있고 답변도 달고 하는 커뮤니케이션도 가능한 최강의 툴이 됩니다.

보통 그렇다면 디자이너분들로부터 아래와 같은 이미지를 전달받게 됩니다. (아래는 구글 머터리얼 샘플이라 간결합니다)

1. 기본 dpi인 160dpi 기준으로 가이드를 전달받았을 경우에는 위의 숫자를 그래도 dp로만 작성해서 xml를 그려나갑니다.

2. 특정 사이즈 px을 dp로 변환하여 나온 숫자들을 기준(위에 있는 공식을 프로그램이 자동으로 반영..)으로 작성된 가이드를 받은 경

우 해당 사이즈에 맞게 가상 단말기를 셋팅(아래 스크린샷)하여 위 가이드를 xml에 적용하여 올려봅니다.

xml 작성시에도 아래 프리뷰 화면에서 해당 사이즈를 가진 단말기로 변경하여 일단은 배치를 맞춰보며 작업해야 합니다. 

(물론 실제 단말기에 올리면 틀어짐..)

+ 이미지 아이콘과 같은 것들은 되도록이면 최근 트렌드에 맞게 svg 파일 (보통 크기를 줄이고 늘여도 깨지지 않고 깔끔함을 유지하는 벡터형 이미지) 로 달라고 하여 xml 파일로 이미지를 만드는 것이 좋습니다.

[ path 값을 가지는 벡터 아이콘 ]