원문 : http://theeye.pe.kr/entry/few-tips-for-android-programmer-and-ui-designer

본인은 안드로이드 디자인 작업을 하게 되는데 디자인을 어떻게 해줘야 개발자가 편하게 작업을 할까?

어떤 식으로 만들어줘야 옳게 만들어주는 것인가 정보를 찾다가 아이님의 블로그에 저와는 반대의 입장으로

디자이너에게 개발자가 요청하는 방법에 대해서 포스팅해 놓으신 것을 발견하였다.

디자이너인 나에게 더 개발자의 의견을 들을수도 있고 어떻게 해야하는 지 알수 있는 좋은 글이였다.

안드로이드 개발자이든 디자이너든 글을 읽어보는 편이 좋을 것 같다.

아래는 아이님의 허락을 받고 퍼온 글입니다.

위 원문 링크 가셔서 더 많은 정보를 보심을 추천해드립니다.

(이미지가 깨져 보일 때는 말씀해주세요.)

안드로이드 개발을 하다 보면 새로운 골치거리중에 하나가 바로 디자이너에게 어떻게 디자인을 요청해야 할지 애로사항이 꽃피어 오른다는 점입니다. 저도 매번 어떻게 해달라고 요청은 하지만 저도 명확한 기준이 없이 닥치는대로 요청해 보는 식이었네요.

그래서 이번에 한번 알아봤습니다. 아이콘등의 크기에 대한 언급이나 버튼의 4가지 상태에 대한 이미지에 대한 언급은 검색하면 많이 나와있습니다만 이미지들의 사이즈를 어떻게 정의해야 할까요.

위는 가장 최근의 해상도(정확히는 픽셀 밀집도)에 따른 실제 사용률입니다. 전세계 기준의 데이터지만 우리나라도 마찬가지라고 생각합니다. 그 이유는 물론 갤럭시S님 때문이죠.

위의 데이터를 읽어보자면 Low Density는 실제로 거의 사용되지 않습니다. 실제로 사용자가 사용하는 Density는 Medium과 High 두종류 뿐입니다. 그리고 밑에 거기에 따른 해상도를 좀 더 보자면 Medium Density의 경우에는 사실상 국내에서 접할수 있는 모델은 안드로원, 옵티머스원, 디자이어팝등의 320x480뿐입니다. 그리고 High Density의 경우에는 갤럭시S, 넥서스원, 디자이어등의 대부분의 하이엔드급 안드로이드폰이 480x800을 사용하고 모토롤라의 스마트폰들이 480x854를 사용하고 있습니다.

실제로 안드로이드 관련 컨퍼런스를 가봐도 Resource Identifier를 적절히 이용하여 이 수많은 해상도를 모두 잘 지원해 주길 바라고 있습니다. 하지만 상식적으로 대한민국의 업무 진행 심리에 의거해 그럴수는 없겠네요.

제가 결론을 내린 디자인 협업을 위한 타겟은 두가지로 압축을 합니다.

실제로 이리저리 해본 결과 480x854의 경우 좀 무시하는 수준에서 개발을 하다가 런칭 직전에 조금 검토만 해보는 정도면 될꺼 같습니다. 480x800에 맞춰 개발해 놓으면 늘어나거나 조금 안맞거나 하는 수준으로 사용에는 지장이 없게 잘 동작하더군요.

2가지로 작업의 타겟층을 압축하였습니다. 하지만 디자이너에게 저 두가지버젼의 디자인을 해달라고 요청하기에 역시나 좀 무리가 있어 보입니다. 그래서 어떻게 하면 한가지 버전으로 압축할 수 있을까 고민해 보았습니다.

위의 저런 수많은 이상한 고민을 해야 하는 이유는 바로 PIXEL이라는 일반적으로 디자이너가 이해할 수 있는 단위입니다. 안드로이드에서는 dp 혹은 sp와 같은 해상도에 비의존적인 단위를 사용합니다. 어찌보면 답답하군요;

안드로이드 컨퍼런스에 가서 알게 된 사실인데 일반적으로 단위는 dp를 쓰되 글자는 sp를 사용해 달라고 하더군요. 물론 pt를 쓰시는 분들도 많이 계신것으로 알고 있습니다만 프로젝트를 몇개 진행하면서 느낀것인데 pt는 기기에 따라 다르게 보이는 현상이 심하더군요. pt의 사용을 자제하시는 것이 좋을 것 같습니다. 저의 경우에는 dp와 sp만으로 프로젝트를 수행하시기를 권장합니다.

우선 폰트에 대해 예제를 보여드리겠습니다. 클릭을 하여 확대후 보세요.

왼쪽이 160 Density고 오른쪽이 240 Density의 화면입니다. 제가 사이즈별로 폰트를 쭉 찍어보았습니다. 같이 일하시는 디자이너에게 이 이미지를 보내주십시오. 그리고 사용하는 단위와 이 글자의 크기를 비교하여 단위를 표기해 달라고 하십시오.

대부분의 모바일 어플리케이션이 5개 이하의 폰트 사이즈를 사용할 것입니다. 그 사이즈와 이 sp단위를 맞추어 개발자에게 알려줄 수 있을 것이라 생각합니다.

다음은 좀 더 중요한 px단위를 어떻게 표기할 수 있을까에 대한 고민에 대한 예제 입니다.

마찬가지로 왼쪽은 160 Density이고 오른쪽은 240 Density입니다. 실제의 px사이즈를 빨간색으로 표시해 보았습니다. 보시면 아시겠지만 160 Density에서의 dp는 px과 똑같습니다.

안드로이드 컨퍼런스에 갔을때도 언급하기를 160 Density에 맞추어 개발후에 240 Density를 추가개발하라고 언급하였었습니다. 하지만 그럴 여유가 한국의 개발자/디자이너들에게 있을까요.

240 Density 기준으로 디자인을 할때 다음과 같이 간단히 dp값을 알 수 있습니다.

밑에는 위의 식을 좀더 간단히 해보자고 쓴거긴 한데 아무래도 3으로 나누다 보니 값이 엉망이 됩니다. 그냥 나누기 3하시고 곱하기2를 하시는것이 좀더 정확한 값을 얻을 수 있을것 같습니다.

다음은 실제로 디자이너에게 이미지를 전달받았다고 가정하고 어떻게 적용되는지 테스트 해보겠습니다. 이미지의 크기는 256x256px입니다.

나중에 결론에서 정리 하겠지만 저의 작업 방식은 갤럭시S, 즉 240 Density의 480x800 해상도만을 고려하여 개발하는것을 골자로 하고 있습니다. 그리고 이미지는 Resource Identifier중에 drawable-hdpi 폴더안에만 넣어 mdpi를 사용하지 않고 있습니다.

왼쪽부터 160 Density, 240 Density, 마지막은 240 Density화면을 160 Density의 크기로 줄여 겹쳐본 화면입니다. hdpi 폴더안에 이미지를 넣었기 때문에 240 Density의 화면에서는 px크기가 정확하게 유지가 됩니다. 하지만 160 Density의 화면에서는 2/3 크기로 변합니다.

그리고 화면을 줄여본 화면을 보면 1px정도의 오차가 있지만 거의 정확하게 비율이 맞는것을 확인할 수 있습니다. 저정도의 오차는 디자이너가 포기해야 하는 부분이 아닐까 싶네요. 다양한 디스플레이를 가지고 있는 안드로이드의 한계랄까요.

저의 위의 실험 내용을 쭉 일어보셨더라도 무슨 말인지 이해가 안되실 수 있겠네요. 정리를 해보겠습니다.

위의 방법은 비록 좋은 방법은 아닙니다만, 인적/시간적으로 여유가 없는 회사라면 가장 최대의 효과를 낼 수 있는 방법이라고 생각합니다. 개발자도 한가지만 바라보고 개발하고 디자이너도 한번만 작업하면 되니깐요. 혹시 더 좋은 아이디어가 있으시면 알려주시면 감사하겠습니다^^