안드로이드 앱 개발자가 제안하는 디자인 방법론 – ANDROID UI TIPS

 

1. 특정 해상도의 기준을 잡아 디자인을 하되, 보이는 것이 다가 아님을 주의하라.

안드로이드 기기는 다양한 해상도를 지원한다. 특정 해상도를 잡아서 작업을 하지만 실제 단말에서는 그 해상도를 사용 하는 사람은 많아야 20% 일것이다.

항상 해상도보다 더 작거나 더 큰 경우가 있다는것을 생각 하고 디자인 하라.

 

2. 안드로이드 특성상 메뉴버튼과 백버튼은 하단에 위치 한다. 

하단에 하드웨어 방식뿐만 아니라 소프트웨어 방식의 버튼이 존재 한다는것을 기억하라. 소프트웨어 버튼일 경우 하단에 또다른 버튼을 배치 한다면 2단의 버튼이 생성되어 오작동을 불러 일으킬 수 있다.

 

3. 터치한 영역을 사용자에게 재확인 시켜라.

모바일 특성상 웹과는 다르게 화면이 작다. 사용자가 특정 콘텐츠를 눌렀으면 눌렀다는것을 확인 시켜줘야 한다. 터치한 버튼의 액션에 대한 Pressed이미지를 준비하라.

4. 이미지 파일 사이즈(용량)를 확인 하라.

안드로이드는 JAVA에 의해 구동된다. JAVA특성으로 인해 메모리 관리가 생각 보다는 힘들다. 예를 들어 4×4사이즈의 나인패치 이미지가 10KB씩 큰경우가 있다. 보통 1KB에 비해 10배나 커지게 된다. 이런 사이즈가 커질수록 메모리를 많이 잡아 먹게 되어 결국 성능저하, 누적되면 앱이 죽을 수도 있다.

 5. UI 가이드의 dip단위 또는 이미지 크기는 짝수를 사용 하라.

dip단위는 px변환 과정에서 정수가 아닌 소수가 나올 수 있기때문에 화면에 디스플레이하는데 오차가 발생 하게 된다. 이런 오차를 최대한 줄이기 위해서는 특별한 경우가 아니라면 짝수 크기를 사용하라.

6. UI 가이드 라인작성시 절대적인 수치보다, 상대적인 표현을 하라.

해상도 별로 DIP이 다르기 때문에 절대적인 수치는 화면이 짤리거나, 줄어들 수 있다. 유동적이라는 생각으로 상대적인 표현으로 가이드하라. 단, 마진이나 패딩은 제외.

 

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – ANDROID UI TIPS”에 대한 14개의 생각

  1. 정말 많은 도움이 되는 시리즈였습니다 두번 감사드립니다.

  2. 안녕하세요~ 5부작 글 잘 읽었습니다. ㄳㄳ *^^* 저도 이번에 디자인을 하게 되었는데 풀리지 않는 문제가 있어 여쭤볼게요. 안드로이드 이미지를 만들면서 가령 xhdpi를 기준으로 먼저 화면 구성을 했습니다. 1280X720픽셀의 화면에서 동일한 크기의 사각형을 4개로 화면에 꽉차게 만들었는데요, 이걸 개발자가 준 리사이징 프로그램(9patch resizer)에서 돌려보니 hdpi는 xhdpi에 비해 0.75가 곱해진 사이즈로 변환되더라구요 그래서 개발자에게 xhdpi와 hdpi이미지를 각각 두벌 주었는데 xhdpi 기기에서는 모두 잘 나오더니 hdpi 기기에서는 오른쪽에 위치한 이미지들이 모두 가로가 찌그러져서 작게 나오는 현상이 발생했습니다. xhdpi, hdpi 폴더가 각각 잘 넣었다고 하는데 무엇을 잘못했는지 잘 모르겠습니다. 쓰신 글에서 나인패치를 설명해 주셨는데, 패턴이나 그림이 있는 이미지들이라서요. 혹시 제가 놓치는 부분을 아실까 해서 문의드립니다. 길고 면목없지만 꼭 답변 부탁드립니다. 댓글로 하셔도 좋고 메일로도 좋아요 ^^ dailyappslina@tistory.com

  3. 안녕하세요^^ 긴글 끝까지 읽어 주셔서 너무 감사합니다^^

    일단 제가 이해한 내용은 1280×720(xhdpi)사이즈에서 작업을 한후 hdpi용을 맞추기 위해 0.75배 사이즈를 만들어서 hdpi용 해상도를 관리 해주는 폴더에 넣으셨다는 거군요.
    그런데 hdpi의 이미지가 작게 찌그러져보인다는 내용인것 같네요.

    일단 이런 현상은 당연한 결과로 보여 집니다.
    왜냐면 가로 dip사이즈가 다르기 때문이죠.

    1280×720(xhdpi) 의 가로 360dip
    480×800(hdpi)의 가로 320dip

    즉 가로 dip의 사이즈가 다르다른 거죠
    360의 4등분이면 90dip이잖아요

    그런데 480×800(hdpi)에 90dpi를 4개 넣게 되면 40dip이 모자라기 때문에 마지막 이미지를 더이상 그리지 못해 찌그려지는 거에요..

    그래서 결론은 480×800(hdpi)이미지를 만들때 320/4인 80dpi(120px)로 만들어야 됩니다.
    하지만 또 가로dpi가 다른 단말기에 앱을 올릴 경우 찌그러져 보일 가능성이 높으므로, 통이미지가 아닌 나인패치 이미지를 만들길 권해 드립니다.

    잘 알아 들으셨는지 모르겠네요;;
    궁금 하시면 언제든지 댓글 남겨 주세요^^

  4. 긴 답변 너무 감사드립니다. 열시미 읽었습니다. 나인패치가 가능한 요소들은 그렇게 적용해서 하려고 합니다. 근데 그냥 통자 이미지에 대해서 제가 참고한 블로그를 한번 봐주시겠어요? (http://www.looah.com/article/view/1435) 여기서 말하는 내용은 xhdpi의 해상도로 이미지 작업을 하되 hdpi는 *0.75, mdpi는 *0.5 등으로 줄여서 각 폴더에 넣으라는 내용인데요, 9path resizer라는 프로그램에서도 xhdpi 이미지를 하나 넣으면 이 블로그의 비율로 축소된 이미지들을 내보내주거든요…이 블로그대로 하면 안되는걸까요? 제가 잘 몰라서 너무 귀찮게 해드리고 있는 것 같네요. ㅜㅜ 하지만 꼭 답변 부탁드립니다.

  5. 네. 블로그에도 4개의 dpi에 맞는 이미지를 준비 하면 된다고 언급이 되어 있습니다. 하지만 밑에 보시면

    (!) 표시를 해둔 것은 ldpi, hdpi가 소수점을 가지고 있다는 것을 의미한다. PNG에서 43.5px의 넓이를 갖는 이미지를 만들 수 없다. 심지어 반올림할 수도 없다: 만약 43.5×43.5px 크기를 가진 5개의 아이콘을 나란히 놓는다고 하면 합이 최대 217.5px가 되어야 하는데, 44px로 반올림 할 경우 220px까지 커지기 때문이다.

    이런 말이 있는데, 이런 오차와 가로 dpi이 다르기 때문에 완벽하게 맞출 수는 없습니다. 그래서 이렇게 완벽하게 4등분을 하길 원하신다면 나인패치를 하셔야 된다는 것이구요..

    http://www.kmshack.kr/283 글을 읽어보시면 이미지가 왜 줄어 드는지에 대해 설명 해두었으니 한번더 읽어 보시면 될것 같구요. 이런 작업은 디자이너가 직접알기보다는 개발자들이 레이아웃을 어떻게 배치 하느냐에 따라 또는 디자인에 따라 dpi별 추가 이미지들이 필요로 하게 됩니다. 개발자 분과 함께 상의를 해보시면 좋을듯 하네요^^

    글로써 쉽게 이해가 되실지는 모르겠지만, 그래도 궁금하시면 언제든지 댓글남겨 주시면 성심것 답변 해드리겠습니다. ^^

  6. 정리 너무 잘되있어서 디자인하는데 도움이 많이 되네요. 그런데 이미지단위를 짝수로 사용하는건 왜그런건가요. 픽셀기준으로 짝수인건가요..?

  7. 안녕하세요..
    안드로이드로 앱 개발하고 있는 학생입니다.
    한 가지 device 기준으로 앱 개발을 하다가 다양한 device에는 적용이 안된다는 사실을 깨닫고 멘붕이왔다가.. 님이 정리를 잘 해 주셔서 많은 도움이 되었습니다.
    근데 레이아웃 디자인을 하는데 레이아웃에 배경이미지를 넣거나, 레이아웃 안에 이미지뷰를 넣어서 이미지를 삽입할 경우.. 모든 레이아웃의 크기가 변경되어 버립니다..ㅜㅜ
    왜 그런지 알려주시면 감사하겠습니다.ㅠㅠㅠㅠ

  8. 우연히 방문하게 되었는데 정말 유익한 정보였습니다.
    다른 종목을 하다 최근 ui 디자인으로 급 선회를 했는데 개발자분과의 커뮤니케이션이 힘들었는데 이글을 통해서 많이 배우고 갑니다.
    모르는거 더욱더 질문해도 될까요? ^^;;

댓글 남기기