안드로이드 앱 개발자가 제안하는 디자인 방법론 – 1. 나인패치(Nine-patch) 개념

디자이너들이 웹에서 모바일(안드로이드 플렛폼) 환경으로 넘어 오면서 꼭 알아 두었으면 하는 내용을 정리하는 목적으로 연제글을 올리게 되었다.

그 첫번째 시간으로 안드로이드에서 가장 중요한 나인패치(?)에 대해 설명 하겠다. 나인패치 하나만 잘 알아도 안드로이드 앱 개발자에게 무한 신뢰와 최고의 감각을 가진 디자이너로 인정받을 수 있으니 필히 정독 하자!

나인패치에 대해 간단하게 설명 하자면, png 이미지로 되어 있는 Stretchable(늘어나는) 영역을 정의 할 수 있다. Stretchable영역 외에도 Padding영역을 선택 할 수 있다.

그렇다면 안드로이드에서는 왜 이런 나인패치라는 개념을 도입 했을까? 안드로이드는 제조사 마다 모두 다른 해상도의 device를 출시 한다. iOS iPhone의 경우 가로 해상도가 고정이기때문에 고정된 길이의 이미지를 사용해도 문제가 없을 것이다. 하지만 안드로이드의 경우 해상도는 다양하기 때문에 static한 이미지를 사용하게 된다면 늘어 날경우 아래와 같이 뭉게지게 된다.

반면 나인패치를 적용 한경우 아무리 늘어나도 원본과 같은 이미지를 얻을 수 있다.

48x48px

160x96px

늘린이미지

 

그러면 “해상도에 따른 이미지를 각각 가지고 있으면 되지 않을까?” 라는 의문이 들수도 있다.

물론된다. 하지만 해상도에 맞는 적어도 10개가 되는 이미지를 만든다고 생각 해보라. 같은 이미지를 크기에 따라 10개를 만들어야 된다면 누가 디자인을 하려 하겠는가. 또한 앱 용량이 10배이상 늘어나게 되며 리소스를 관리도 무척이나 힘들다. 스마트폰의 어플리케이션의 특성상 한번의 개발로 끝이 아니라 지속 적인 유지 보수가 필요 한데 이러한 환경에서는 더더욱 힘들다.

이런 저런 생각으로 구글 안드로이드 플렛폼 개발자들은 “나인패치라”는 개념을 만들었다.

하나의 이미지를 다양한 해상도를 가진 device에서 dynamic하게 보여 준다. 구글 개발자들은 매일 자전거타고 수영하고 놀고 있지않다는 증거이다.

그럼 어떻게 Stretchable영역이 늘어나는지 원리에 대해 자세히 설명 해보자.

 윗 부분에 검은색선으로 가이드 라인을 잡았다. 그 검은색 선을 기준으로 이미지는 위와 같이 분해 된다.

검은색으로 선택했던 부분은 반복하는 패턴으로 인식 되어 늘어 나거나 줄어 들게되어 뭉게 지지 않는다. 늘어 나는게 아니라 패턴으로 반복되는 구조이다.

흑백으로 된 부분의 이미지는 늘어날 부분의 영역에 대해 아무런 영향을 미치지 않는다. 즉, 통이미지를 유지 한다.

그래서 나인패치된 이미지를 늘릴 경우 뭉게지는게 아니라 사용자가 선택했던 부분만 패턴으로 인식 되어 자연스럽게 늘어 나는것을 확인 할 수 있다.

초록색의 가이드라인사이에 

늘린다음 왼쪽과 상단 부분에  잡는다.

단순히 원본 이미지에 1px만큼의 테두리에 검은색(#000000)으로 늘어 나는 역영을 정의하면 된다. Nine-patch이미지는 .9.png 라는 확장자로 되어 있어야 안드로이드에서 Nine-patch이미지로 인식 하며, 이런 확장자를 붙여 주게 된다면 개발자들이 좋아 한다.

첫 부분에 Stretchable영역 외에도 Padding영역을 잡을 수 있다고 언급 했다. Padding영역잡는 것도 Stretchable영역 잡는 것과 비슷한 원리니 한번 알아 보자.

  • Stretchable영역: 왼쪽, 상단
  • Padding영역: 오른쪽, 하단

Padding영역은 텍스트 또는 아이콘을 표시하는 등 컨텐츠에 사용되는 패딩을 지정 할 수 있다. 위 이미지 처럼(노랑색 테두리) 페딩역역이 잡히게 된다.

Nine-patch의 불편한 진실

반복적인 패턴이 아닌 위 처럼 질감을 가진 이미지라면 Nine-patch를 피하라. 필요한 정적이미지 즉, 통이미지를 써야 한다.

이런 부분만 뺀다면 Nine-patch는 그럭저럭 쓸만 할것이다.

이상 나인패치에 대해 알아 보았다. 다음 시간에는 좀 더 다양한 예제들을 가지고 실제 상황에서 어떤식으로 나타는지, 영역을 잡는지에 대해 알아 보겠다.

 

그리고 Nine-patch Tool에 대해서도 간단히 언급 하겠다.

아래 실제 사용중인 Nine-patch 예제를 몇개 모아 두었으니, 늘어나는 영역과 패딩영역이 늘어날때 어떻게 될지 미리 한번 생각 해보길 바란다.

           

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – 1. 나인패치(Nine-patch) 개념”에 대한 14개의 생각

  1. 스타트업 디자이너입니다. 앱 작업과 관련해서 어디서든 개발적인 지식 공유 이외에 디자이너들을 위한 설명을 찾기가 정말 어려운데, 딱 여기 있네요. 다른 곳에서는 기껏해야 안드로이드 디자인 가이드라인 문서를 축약한 혹은 한글로 번역만 해놓은 포스팅들만 있는데, 너무 좋은 예들로 설명해주셨어요. 아이폰에서만 서비스를 하다가 이제 안드로이드로 확장을 하려고 하는 입장에서 너무 필요한, 훌륭한 글입니다!

  2. 좋은글 잘보았습니다^^
    padding영역이라고 하신부분 설명을 조금 해주셨으면하는데요
    제가 알기로는 Content영역으로 알고있거든요
    예를들어 text가 들어간다든가 그런거요~^^

  3. 정말 좋은 글 감사합니다. 다른 이야기인데, 왼쪽에 SNS 바로가기 위젯들이 본문을 읽는데 방해를 좀 많이 하네요~~ㅠ

  4. 너무 감사합니다! 제가 무작정 배워보려고 이것저것 찾던 와중에 이렇게 친절하게 설명해주신 글에 무한감동 받고갑니다 ㅠ_ㅠ 감사합니다!!

  5. 안녕하세요. 좋은글 감사합니다 ^^ 궁금한게있는데요. 그럼 xxhdpi xhdpi hdpi등 해상도별로 이미지를 만들었다면 따로 나인패치는 안만들어도되나요? 물론 채팅 말풍선은 만들어야 겠지만 … 그리고 페이스북처럼 글 길이에 따라 길어지는 글박스는나인패치 처리해야하나요 ? 궁금ㅎ한게너무많네요ㅜㅜ

  6. 안녕하세요. 좋은글 감사합니다 ^^ 궁금한게있는데요. 그럼 xxhdpi xhdpi hdpi등 해상도별로 이미지를 만들었다면 따로 나인패치는 안만들어도되나요? 물론 채팅 말풍선은 만들어야 겠지만 … 그리고 페이스북처럼 글 길이에 따라 길어지는 글박스는나인패치 처리해야하나요 ? 궁금ㅎ한게너무많네요ㅜㅜ

댓글 남기기