안드로이드 앱 개발자가 제안하는 디자인 방법론 – 3. DPI, DIP(DP) 개념

안드로이드는 다양한 해상도와 화면의 크기를 지원한다고 이전 시간에 설명을 했다. 다양한 기기를 지원하기 위해 개발자뿐만 아니라 디자이너들까지 어려움을 겪는다 또, 제조사에서 구글의 가이드라인에 맞지 않게끔 기기를 만들기 때문에 두 번 어렵다.

기존에 웹디자이너가 안드로이드 디자인으로 넘어오면서 혼란을 초래할 수도 있다. 예를 들면 웹은 최소 사이즈를 지정하여 디자인하는데 반해, 안드로이드 앱의 경우 모바일 특성상 모든 화면에 콘텐츠들이 보여야 되기 때문에 어떠한 해상도에서든 꽉 찬 화면을 유지해야 되기 때문이다.

아래는 현재 출시된 대표적인 기기들의 해상도이다.

이런 다양한 해상도를 완벽하게 지원한다는 건 힘들고 손이 많이 가는 일이다. 어떤 식으로 안드로이드가 이미지를 처리하는지에 대해 알고 디자인을 한다면 디자인의 퀄리티는 좀 더 높아지지 않을까 생각해본다.

말로 풀어 설명하기가 참 힘든 부분이라 이해하기가 힘들 수도 있다. 하지만 어떻게 하면 좀 더 쉽게 설명할 수 있을까에 대한 고민을 많이 했으니 차근차근 하나씩 설명해보겠다.

PX

안드로이드는 px단위를 쓰지 않고 dip단위를 사용한다. 설명에 앞서 왜 px단위를 쓰면 안 되는지, 쓰면 어떤 문제가 발생되는지 간단한 예를 통해 알아보자.

Test Case> drawable-nodpi 폴더 r.png, p.png, g.png, r.png

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/p" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
    
</LinearLayout>

디자이너가 800×480을 기준으로 화면에 정확히 120px로 된 4개의 아이콘을 넣고 싶어 한다고 치자. 800×480에 맞추어서 디자인을 했으니 문제없이 잘 보이지만, 1280×720의 해상도에서 보니 오른쪽 부분이 휑하게 비는 것을 볼 수 있다.

px단위는 화면의 전체 화면 크기를 고려하여 표시되는 상대적 단위가 아닌 전체 화면 크기와는 관계없이 지정한 수치만큼 표시되는 절대적 표시 단위이기 때문이다.


< 800 x 480 >


< 1280 x 720 >

위의 앱은 실제로 본인이 개발했을 때 px단위를 쓴 단적인 예이다. 800×480에 기준으로 px단위를 써서 개발을 했다. 1280×720의 해상도의 경우 엉망이 되는 정말 좋은 예제이다.

또한 웹 브라우저에서 화면 크기를 작게 할 때 콘텐츠들이 잘리는 것을 보면 금방 이해가 될 것이다. 하지만 우리 안드로이드는 어떤 화면 크기가 와도 화면이 절때 잘려서는 안 된다.

그래서 안드로이드에서 도입된 것이 dip(dp) 단위이다.

DPI

Dots Per Inch – 1인치(2.54 센티미터)에 들어 있는 픽셀의 수(밀도)

안드로이드에서는 dpi별로 이미지, 레이아웃을 다르게 줄 수 있다. 하지만 기기별 dpi가 천차만별 이기 때문에 구글에서는 아래처럼 가이드를 제시해주고 있다.

Low density (120dpi) (0.75x) : ldpi
Medium density (160dpi) (baseline) : mdpi 옵티머스원
High density (240dpi) (1.5x) : hdpi : 갤럭시S, 갤럭시S2,
Extra High density (320dpi) (2.0x) : xhdpi 갤럭시S3
Extra Extra High density (480dpi) (3.0x) : xxhdpi 갤럭시S4(미정)

구글의 가이드라인에 의해 제조사는 dpi기준을 잡아 출시한다.

DIP(DP)

Device independent pixel

디자이너와 개발자의 혼란을 줄이기 위해 안드로이드에서는 dpi단위를 제공한다.

dpi단위는 독립적인 크기를 나타낼 수 있도록 하는 단위이다. 이론상 어떠한 해상도에서도 같은 크기를 보여 주는 것이 핵심 개념이다. 표준이 되는 화면 크기를 중심으로 보다 큰 화면에서는 지정된 배율로 크기를 늘려주고, 작은 화면에서는 지정된 배율로 크기를 줄여준다.

Test Case

drawable-hdpi 폴더 r.png, p.png, g.png, r.png

아까 전과 다르게 800×480에서의 1280×800의 해상도에서 비슷한 크기로 보인다. 다른 점이 하나 있다면 drawable-hdpi 디렉터리에 이미지를 넣었다. drawable-hdpi 디렉터리에 넣으면 이 이미지들은 hdpi용 이미지라는 것을 안드로이드에서 인식해서 더 크거나 작은 dpi가 들어오면 이미지를 크거나 작게 스케일링해준다.

DPI 계산법: 원본px * (변환 할 DPI / 원본px의 DPI)
ex) HDPI의 120px을 XHDPI로 변환한다.

120*(320/240) = 160px

DPI 이론상 눈에 보이는 실제 이미지의 크기는 둘 다 같아야 되나 오차가 발생되어 좀 더 크거나 작게 그려질 수 있다.

320/240 = 1.3333333…. 이기 때문에 120 * 1.33333… = 159.9 xxxx 가 나온다.

px단위는 최저 1px이 기준이기 때문에 159.9 xxx를 표현을 못해 160px로 그린다. 그렇기 때문에 오차가 발생하는 것이다. 나눠서 정확하게 정수형으로 떨어진다면 오차는 발생하지 않게 된다. 또한 해상도와 인치의 규격에 맞지 않게 기기를 만든 경우에도 오차가 발생될 수 있다.(대 표적으로 갤럭시탭 7)

이렇게 스케일링이 된다고 믿어서는 안 된다. 폰마다 가로 dpi가 모두 다르기 때문이다. 레이아웃 구성시 동적으로 구성해야 되며, 이런 동적인 구성을 하기 위한 가이드라인을 작성하는 법에 대해서 다음에 알아보겠다.

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – 3. DPI, DIP(DP) 개념”에 대한 26개의 생각

  1. 정말 일하는데 많은 도움이 되었습니다!!
    공유 안되게! 블로그에 항시 볼수있게 포스팅만 하겠습니다!
    정말정말 감사합니다

  2. 항상 좋은 정보 잘 보고 있습니다. 근데 내용중간에 nexus 10의 경우 2560 x 1600 해상도인데 잘못 나와있네요^^;;

  3. 정리된 글들을 보니 도움이 되네여~
    그런데 폰트는 sp라고 들었습니다.
    디자인을 할때 포토샵은 px로 나오는데…
    이것을 sp로 변화하는 계산법이 인터넷상에 있더군여…
    폰트*2/3을 하라고 하더군여…
    그런데… 이렇게 계산해서 실제 넣으면
    디자인된 이미지보다 폰트가 작다는 느낌이 드는데
    이부분은 어떻게 하시는지 궁금합니다.

  4. DPI 계산법: 원본px * (변환 할 DPI / 원본px의 DPI)
    이것인데 그럼 480해상도에 포토샵에서 폰트를 24px로 했다면 sp값이 어떻게 되는건가여?
    이것을 720으로 할경우도 같이 부탁합니다.

    저는 처음에 포토샵에서 사용된 폰트를 480이던 720이던 변환하는것 자체도 헷갈려서요^^;

    그리고 안드로이드에서는 자간을 줄이는 개발 법은 없나여?

  5. 안녕하세요^^ 디자이너 이준임이라고 합니다.
    안드로이드 디자인 가이드에 대해서 공부하다가 구글검색으로 이 블로그에 들어오게 되었어요.
    오아시스같은 좋은 정보들 너무 감사드립니다.
    제가 너무 부족해서^^;;
    안드로이드(스마트폰용) 앱을 디자인 할 때, 한 화면에 총 몇벌의 디자인이 필요한지, 그리고 어떤 사이즈로 디자인을 해야하는지가 아직도 정리가 되질 않네요..ㅜㅜ
    너무 답답합니다. 흑흑
    죄송하지만 조금만 더 설명을 해주실 수 있으신가요?
    혹시 추천해 주실만한 책이나 사이트가 있으시다면..알려주시면 정말 감사하겠습니다..♡

  6. 안녕하세요.

    일단 구글 안드로이드 디자인 가이드라인이 있긴 하지만,
    개발자에게 공유될 디자인 가이드라인을 어떻게하라는 것은 없으며 내부에서 개발자간의 커뮤니케이션을 통해 이루어져야 할 부분이라고 생각됩니다. 이런 부분이 디자이너로써 좀 힘들것이라 생각되구요..

    저의 경험을 말씀 드린다면,
    가장 많이 사용되는 폰을 기준으로 디자인을 합니다. 가이드라인 작성시 기준된폰이라고 생각 하지 말고 다양한 해상도일 경우를 생각 하여 가이드라인을 작성 해주시면 됩니다. (예를 들어, 텍스트 위치를 특정 단위만큼 띄워달라가아닌 가운데 정렬을 해달라는 식으로 절대적인 수치가 아니라 어떤 기준에 의해 가변될 수 있도록)

    보통 한 화면에 한 벌의 디자인이면 충분히 다양한 사이즈로 커버 가능하며, 경험 했구요.

    관련된 책은 아직 국내에서는 보지 못해서 추천해드릴만한게 없네요. 그것보다 이것저것 시행착오를 격으면서 경험하는게 가장 좋을 것이라고 생각 됩니다.

  7. nexus 10이 320 dpi가 나올수 없습니다. s3가 320dpi 선이구요. 주신 해상도로 보면 160 dpi에서 더 왔다 갔다 할듯 합니다. 학생들이 이것때문에 저에게 질문을 많이해서 곤혹스러웠습니다

  8. 안녕하세요. 넥서스10 해상도 사이즈에문제가 있었네요. 넥서스 10은 10.055” 2560 x 1600인데 잘못 표기 된 것 같습니다. 320dpi는 맞는 수치입니다. 감사합니다.

  9. 안녕하세요, 좋은 글 잘 보고 갑니다. 한가지 궁금한점이 있어서 질문 드려볼게요. 본문에 있는 예제중에서 http://cfile8.uf.tistory.com/image/1658584F513D936C2DBA21 이 화면같은 경우는 어떻게 구현하신건지 궁금합니다. iOS 같은 느낌이 나는데요, 안드로이드에서 제공하는 ListView 같은것에 테마를 덧씌우신것인지, 아니면 일일이 새로 클래스를 만드시거나 뷰에 렌더링을 하신것인지 저는 모르겠네요 ㅠㅠ

    제가 안드로이드에 입문한지 얼마 안되어서 워낙 초보적인 질문을 드렸더라도, 양해부탁드립니다. 감사합니다.

  10. 안녕하세요:)
    말씀하신 화면의 앱은 벌써 만든지 4년이 다되가네요;;;

    일단 구현 방법은 리스트뷰를 사용하지 않고 스크롤뷰에 LinerLayout을 이용해서 아이템을 하나씩 일일이 만든것입니다. 리스트뷰를 써도 되지만, 고정된 갯수이기때문에 이렇게 작업 했습니다.

    도움이 되셨는지 모르겠네요. 더 궁금하신 부분은 댓글 남기시면 언제든지 답변 해드리겠습니다.

    감사합니다.

  11. 너무 친절하게 말씀해주셔서 어찌 감사의 말씀을 드려야할지 모르겠네요….
    더 질문해도 좋다고 하셔서, 아직 궁금한것이 다 풀린것이 아니어서 몇가지만 더 질문드려볼게요 ㅠ

    스크롤뷰 + 리니어레이아웃 하신것은 알겠는데, 저 화면에서처럼 둥근 흰색 사각형 배경에 각 리스트마다 살짝씩 경계가 져져있는것은 어떻게 할수 있는건가요? 리스트 숫자가 정해져있기 때문에 비트맵으로 이미지를 만들어서 미리 넣어놓는 건가요?

    제가 너무도 기본적인 것을 질문을 드리는것같아서 죄송합니다 ㅠ

  12. 네. 아래위 부분은 이미지로 미리 만들어 놓은 것입니다.
    그냥 이미지가 아닌 나인패치된 이미지를 사용하시면 됩니다. (해상도에 따라 늘었다 줄었다 해야되기때문)

    그래서 아래/위/중간부분 이렇게 3가지의 이미지를 아이템 하나하나에 배경으로 지정하시면 됩니다.

  13. 아하 그렇군요. 만약에 리스트 아이템이 정해진 것이 아니라면, 위와 아래 아이템만 특수한 비트맵으로 처리를 하고, 가운데 아이템들은 하나의 이미지로 처리하면 되겠군요. 정말 감사합니다. 많은 도움이 되었습니다.

    제가 굉장히 어렵게 생각을 했었는데, 이미지를 넣음으로서 간단히 해결이 되네요.

  14. 좋은 정보 감사합니다~
    제 블로그에 스크랩해서 보고싶은데~ 괜찮을지요~
    출처는 밝히도록 하겠습니다!

  15. 앱을 개발하려고 공부중인데 많은 도움이 되네요 ^^
    제 블로그에 출처 남기고 퍼가도록 할게요
    감사합니다.

  16. 저는 디자이너 입니다.

    저는 1080*950px/ 72dpi로하거나 640*950/25dpi로 디자인 했는데요

    핸드폰 해상도가 사람들이 가장많이쓰는 삼성갤럭시 3사양이 720*1280/320dpi이네요.

    여태 잘못하고있던거군요 ㅠㅡㅠ

    맞나요??

  17. 안녕하세요. 저는 디자이너 입니다. 궁금한게 있어서 댓글 남겨요. xxxhdpi에서 divider를 1dp 보다 얇게 요청하고 싶은데 이때 어떻게 하면 될까요? 1px은 사용 못하고 사용하더라도 제대로 출력이 되질 않는다고 들어서 어떻게 해야할 지 고민입니다. 나인패치를 사용해야 할지 아니면 개발로 해결할 수 있는 부분인지 .. 알려주시면 감사하겠습니다.

댓글 남기기