안드로이드 디자인 가이드

안드로이드 디자인 가이드

안드로이드 디자인 방법에 대해 설명해 달라던 디자이너에게 보냈던 메일입니다.

안드로이드 개발자라면 다들 아는 사항이지만 의외로 모르는 디자이너들이 많더군요 ..-_-

모바일앱 디자인 하는 디자이너라면 좀 공부해도 괜찮을텐데..라고 푸념해 봅니다..;;

여튼 참고하셔서 디자이너와 커뮤니케이션 할 때 이용하시면 좋겠네요;;

안드로이드 디자인 가이드

1. 디자인은 480*800 해상도를 기준으로 해주세요.

: 현재 일반적으로 사용되는 안드로이드 폰의 화면 사이즈는

두가지 입니다.

480 * 800 과 720 * 1280

원칙대로라면 동일한 하나의 디자인을 각 화면 사이즈에 맞게

두벌 제작해 적용을 하는 것이 가장 아름답겠지만

용량이 커지고 로딩속도가 느려지고 메모리에 부하를 줄 수 있기 때문에

(안드로이드 기기에선 치명적인 이슈입니다.)

일반적으로 두벌 모두 제작하지 않습니다.

그래서 일반적으로 480.. 사이즈에 맞게 제작된 이미지를 사용하게 됩니다.

(용량과 이미지 사이즈가 작기 때문에 시스템 자원을 덜 먹겠지요.)

2. 이미지의 사이즈 (px) 는 3의 배수로!

: 중요한 사항입니다.

1번 내용과 같이 안드로이드는 하나의 이미지로 여러 해상도를 지원할 수 있도록 도와줍니다.

그러기 위해선 일반적으로 사용되는 px 이 아닌  dip 라는 단위를 사용하게 되는데요

사이즈의 단위로 dip가 들어오는 경우 안드로이드에서 화면 비율에 맞게 축소/확대를 해서

하나의 이미지가 어느 기기에서든 비슷한 비율로 보이게끔 조정을 해주게 됩니다.

dip 라는 단위는 다음 공식에 의해 정의됩니다.

“00 px / 1.5 = ?? dip” (ex: 21px / 1.5 = 14dip)

여기서 3의 배수로 만들어야 하는 이유를 알 수 있습니다.

예를 들었던 21이라는 숫자를 1.5로 나누면 14dp 로 나누어 떨어집니다.

그런데 만약 22를 1.5로 나누면 어떻게 될까요? 14.666666… 이라는 값이 나옵니다.

즉 개발자는 디자이너가 넘겨준 이미지를 화면에 넣고

사이즈를 dip를 써서 입력해야 되는데

이미지의 사이즈가 22이면 14.666666 dip 라고 입력해야 되는 이상한 일이 생기는 거지요…

그렇다고 반올림이나 버림을 해서 14.7 dip 같은 값을 넣는 경우 기기 해상도에 따라 픽셀이 깨져보일 수 있습니다.

그렇기 때문에 이미지를 3의 배수로 만들어야 한다는 얘기입니다.

이 부분은 아래 링크에 첨부된 PDF파일을 읽어보시면 이해하시는데 좀 더 도움이 될 겁니다.

 

다양한 스크린 사이즈에서의 UI 처리 (안드로이드 펍 회색님)

 

3. 720*1280 사이즈에서도 선명하게

보여야 하는 이미지만 720.. 사이즈 기준으로 만든다.

: 480.. 기준으로 제작된 이미지는 720.. 해상도에서 보아도 크게 무리는 없습니다.

그러나 선명함이 중요한 문양이나 로고 같은 이미지는 480.. 기준,  720.. 사이즈 기준으로 각각 하나씩

만들어서 주시면 됩니다.

이때 주의 할 점은

1. 같은 위치에 사용될 이미지는 파일명이 같아야 합니다. 

2. 파일명은 같게 하되 구분은 폴더를 나누어 구분합니다.

480.. 사이즈 이미지는 hdpi 라는 폴더안에,

720.. 사이즈는 xhdpi 라는 폴더안에 넣어서 개발자에게 던져주시면 됩니다.

그리고 파일명 정하실 때 다음 사항도 꼭 지켜주시기 바랍니다.

 파일명 : 대문자 불가,   _ 를 제외한 다른 특수문자 불가,  숫자로 시작 불가 

4. 좌표를 주실 때도 ‘px / 1.5′ 값으로 주시면 좋습니다. 

이유는 2번과 같습니다.

이 내용 대로만 디자인 해주시면 개발자입장에서는 화면을 구성하는데 큰 어려움이 없습니다.

그리고 http://klutzy.github.com/android-design-ko/index.html  이 링크는 안드로이드 디자인 가이드를 한글로 번역해 놓은 곳이니

한번 읽어 보시고요…

기획자 분도 기획 하실때 위 링크를 참고하셔서 안드로이드의 UI 적 특성을 이해하시면

멋진 안드로이드용 앱을 만드는데 도움이 되실 겁니다.

출처 :

http://www.tedhome.net/2013/01/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B0%80%EC%9D%B4%EB%93%9C/