160_img.png

[Android] 디자이너와의 협업을 위한 몇가지 팁

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

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

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

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

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

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


1. 160 Density의 320×480
2. 240 Density의 480×800

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

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

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


dp : Density-independent Pixels
sp : Scale-independent Pixels

안드로이드 컨퍼런스에 가서 알게 된 사실인데 일반적으로 단위는 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값을 알 수 있습니다.


dp = px / 3 * 2
dp = px * 0.66

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

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

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

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

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

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


1. 우리는 240 Density의 480×800 해상도를 가지고 있는 갤럭시S를 대상으로 개발/디자인 한다.
2. 모든 개발에서 사용하는 단위는 dp와 sp로만 이루어진다. (단, 이미지는 px사용)
3. 디자이너는 모든 px사이즈의 표기에 대하여 나누기 3 곱하기 2를 한 후 dp라는 단위를 사용한다.
4. 디자이너는 사용 폰트 크기에 대하여 위에 나와있는 sp 테이블 이미지를 참고하여 사용한다.
5. 디자이너는 모든 제작된 이미지들의 크기를 480×800 대상으로 제작하되 특별한 계산은 하지 않는다.
6. 개발자는 Resource Identifier중 drawable-hdpi만을 사용한다. (개인적으로 아이콘은 mdpi도 만들길 추천함)

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

  • 커미

    잘 읽었습니다.
    재미있는 내용이고, 도움이 많이 되었습니다.

  • jan

    찾던 자료입니다 !! 감사해요

  • BUM

    잘읽었습니다.

  • BUM

    퍼가도 될런지요???

    비공개로 등록하겠습니다.

    • http://theeye.pe.kr 아이

      네 알겠습니다^^

  • 우리

    좋은 내용 감사합니다.

  • 꽃게장세트

    전 이제 시작인데, 잘 보고 갑니다.!!

  • 오현애

    제가 정말 좋은 정보 가져가는데요. 말도 안되게 제가 초보 디자인인데 첨 들어온 회사에서 어플 디자인을 맡게 되었어요. psd로 제작할때 480*800사이즈로 그냥 디자인하고 개발자에게 넘길때에는 240density 480*800로 dp와 sp로 계산해서 자료를 넘겨주는건가요?

    • http://theeye.pe.kr 아이

      네 맞습니다. 그냥 이글을 개발자분에게 보여주시고 같이 이야기 해보시면 좀더 이해가 빠를꺼 같네요~

  • 러브캣

    글 퍼갈게요.
    정리 참 잘 해 놓으셨네요
    감사합니다.

    http://cafe.naver.com/mgui
    에 게시하였습니다.

  • http://blog.naver.com/miad 아미캉

    유익한 정보 감사합니다.

  • 강영진

    아이님 너무나 도움 되는 글 읽었습니다. 저는 디자이너입니다. 질문이 있습니다. 일단 dp=px관계를 이해해 엑셀로 dp와px단위 표를 만들었습니다. 헌데 high density기준으로 표를 만들다보니 0.5픽셀단위가 많이 나오더군요. 그런건 반올림해서 재량껏 dp기준으로 디자인을 하면 되나요? 저희 디자이너 입장에서는 1픽셀 단위의 선도 많이 사용하는데 1dp = 1.5픽셀이 되는데 그건 개발자 분들은 어떻게 처리 하시는지 궁금합니다.
    다음질문은 sp질문인데요. 이글을 보고 저도 안드로이드 툴킷을 깔고 애뮬을 돌려보았습니다. 아이님 처럼 애뮬에 글을써서 제가 쓰는 폰트 비교표를 만들어 보려고요. 헌데 애뮬을 돌리면 아이님처럼 480*800사이즈가 안나와요 ㅠㅠ 혹시 lce desity 240해주고 사이즈 480*800해줬고, 런쳐 옵션에서 스크린사이즈와 스크린 DPI문제인것 같은데 설정 법을 알려주실 수 있을까요?
    댓글 어려우시면 메일로라도 부탁드리겠습니다.
    nega80@naver.com 감사합니다.

    • http://theeye.pe.kr 아이

      안녕하세요. 방문해 주셔서 감사합니다.
      글에 적어놨지만 안드로이드는 디자이너에게는 조금 불친절한 플랫폼입니다. 1픽셀 단위의 욕심은 저희회사 디자이너도 엄청 중요하게 생각하는 부분이지만 안드로이드에서는 욕심 그 자체입니다.

      단위에서의 소수점은 반올림 처리합니다. 실제로 보시면 아시겠지만 0.x픽셀 차이는 별로 티는 나지 않아요. 최대한 480해상도에 맞춰서 개발자에게 넘겨주면 개발자가 자기 임의대로 반올림 해가며 개발을 할겁니다.

      그리고 1차 완성본을 가지고 보시면서 “이거 조금만 왼쪽으로 옮겨주세요”라며 조정 시간을 가지시면 됩니다. 안드로이드는 지금까지의 컨베이어벨트 방식의 개발 방식을 고수하기에 어렵습니다.

      에뮬레이터부분은 고민하면서 할 부분이 아니기 때문에 그냥 책을 찾아보심이 좋을듯합니다. 어떻게 하면 되는지 정도가 아니라 그냥 되는건데 뭔가 놓치시고 계신듯하네요.

  • 디자이너..

    저도 안드로이드 디자이너인데, sp 폰트때문에
    고민하던중 이글 보게 되어 도움이 되었네요^^
    감사합니다.

  • 서동규

    좋은 정보 감사합니다.

    제 블로그에 올려서 자주 참고하겠습니다.

    http://blog.naver.com/0677haha

  • 김하진

    저도 현업으로 디자인을 하고 있습니다
    480×800으로 1280×720 960×540 형태로 통합가이드를 제작해야합니다. 이해가 가지 않는것은 480×800 list 간격 수치나 좌우 높이 수치같은 영역은 dp로 계산해서 가이드에 적용하고 나인 패치가 적용 안되는 아이콘이 나 이미지는 480×800에 실제 px 수치를 가이드에 입력 하는 건가요? 텍스트 sp 샘플은 화면 비율이 480×800 실 사이즈에서 해당 크기에 맞는 sp를 찾아 가이드에 sp를 적용하는 건가요? 감사합니다

    • http://theeye.pe.kr 아이

      쉽게 설명 드리자면 안드로이드에서는 불가피한 상황이 아닌이상 무조건 dp를 쓰신다고 보시면 됩니다. 다만 디자인을 할때는 dp를 기준으로 디자인할수가 없죠?

      그래서 px로 작업을 하게 되는데 이것을 dp로 변환하여 사용하도록 하는 작업을 디자이너가 맡던지 개발자가 맡던지 둘중 하나가 해야 한다는 것입니다.

      sp이야기는 이해하신 부분이 맞습니다. 나인패치 이야기도 똑같은 이야기이기 때문에 패스하겠습니다.

  • http://spacechild.kr 루나리안

    좋은 글 잘 읽고 갑니다! ^^*

    layout의 Background 이미지를

    그럼, 480×800(px), 240 density로 해서

    제작하고, 적용하면 될까요?

    어플 제일 첫 화면 배경에 들어갈 그림을

    작업을 해야 하는데, 어떤 규격이 알맞은가 해서

    검색하고 있었습니다~ ^^

  • 김현주

    쏙쏙 뽑아서 잘 정리해 주셨네요
    감사합니다. ^^

  • http://werty.co.kr 나인

    알찬 내용 그리고 제게 필요한 내용 잘 보았습니다.
    제 블로그에 내용 복사해서 넣고 원문 링크는 적어서 포스팅 하고 싶습니다. 허락해주실수 있으신가요?
    블로그는 아래 주소입니다.
    werty.co.kr/blog/

    • http://theeye.pe.kr 아이

      출처만 명확히 해주시면 괜찮습니다.

  • Pingback: Werty Blog

  • Pingback: Werty Blog

  • Pingback: Werty Blog

  • 할랑이

    글 내용 너무 잘보고있습니다.^^
    디자이너는 모든 px사이즈의 표기에 대하여 나누기 3 곱하기 2를 한 후 dp라는 단위를 사용한다. 라고 하셨는데요~~

    제가 디자인 초보자라 이해도가 많이 떨어지네요~ㅠ
    예를 들어 정사각형 박스를 100*50px로 디자인했을때,
    dp로 계산하면 66.6..*33.33 인데
    그걸 gui가이드 작업할때 계산해서 별도로
    66.6..*33.33dp라고 표기해주는건지요~??

    앗 그리고 무조건 짝수값으로 디자인을 해야하나요??ㅜ