본문 바로가기

포토샵 / 강좌 및 자료/이미지 편집/자료

나인패치(9patch) 이해하기



나인패치 이미지 개념 이해하기

테마관련 포스팅을 하다보니 이전에 포스팅한 데이타가 삭제가 되어있어 이어지지 않아서 9patch(나인패치) 이미지 개념에 대해 새롭게 포스팅 해보려고합니다. 1년전에 포스팅 할 때보다 더 많은 지식이 나름 생겼으니 조금더 체계적으로 알려드릴께요.



이 안드로이의 나인패치 이미지는 테마작업을 하는데 정말 고마운 존재이자 까다로운 존재입니다. 하지만 개념만 이해하시면 정말 유용하게 사용할 수 있습니다. 사실 안드로이드의 UI를 구성하는데 있어서 이 "9.png"로 표시되는 이미지 때문에 시스템 용량을 상당히 줄이고 또한 하나의 이미지로 다른부분에도 유용하게 사용할 수 있습니다.


안드로이드 계열 테마를 분석해보면 이미지 파일은 크게 PNG, 9.PNG, JGP로 나뉘게 됩니다. 스마트폰으로 사진을 찍게 되면 JPG로 저장이 되지만 테마파일은 배경화면을 제외한 이미지는 PNG입니다. 그럼 왜 하나로 통일하지 않고 나눠서 사용하고 있을까요? 그 이유중에 하는 PNG가 용량이 크지만 트루컬러 지원으로 선명도가 훨신 좋고 배경의 투명을 인식합니다. 그래서 선명한 이미지를 모바일에서 표현하기 위해 우리에게 익숙한 JPG보다는 PNG를 사용하게 되는겁니다.


그런데 여기에서 한가지 문제점이 발생합니다. 이미지 용량이 크다.. 이건 모바일 기기에서 너무나 취약한 부분입니다. 한정된 시스템 공간에 고화질의 이미지를 무한대로 넣을 수 없습니다. 그래서 등장한 놈이 나인패치라는 이미지 입니다. 이 나인패치 이미지는 작은 이미지라도 9patch 공간에 스케일을 조절할 수 있는 정보를 넣어줌으로써 외형의 이미지는 깨지지 않고 대형이미지 출력이 가능하게끔 가공된 것 입니다.

JPG라는 이미지는 픽셀에 의해 그 이미지 크기 정해집니다. 가로px * 세로px * (resolution)

그래서 이미지 사이즈 이상으로 키우게 되면 그 이미지는 깨지게 됩니다. 하지만 나인패치 이미지는 용량은 그대로 유지하면서 아무리 확대를 해도 깨지지 않게 이미지를 만들 수 있습니다. (모든 이미지를 나인패치로 만드는 건 아닙니다.)


현재 이 나인패치라 이미지는 대표적으로 안드로이드 계열 테마와 카카오홈, 아펙스런처 등 모든 안드로이드 실행화일에 존재합니다. 그리고 가장 대중화 되어있는 카카오톡 테마를 테마봇이나 테마에디터로 만들때도 나인패치가 존재하기 때문에 개념을 알고 계시면 더 좋은 퀄리티의 자료를 만들 수 있습니다. 



그럼 이런 무한대로 늘어나는 고무줄 같은 이미지들이 어떠한 특징을 갖고 이미지를 통한 정보를 전달하는지에 대해서 알아볼께요^^ 

(아래 안드로보이 윗쪽 보이지않는 영역에 구간을 설정해서 원하는 부분만 늘려줄 수 있습니다.)









나인패치 이미지 확인하기

그럼 이 나인패치라는 이미지는 어떻게 확인 할까요? 이미지는 7zip으로 압축을 해서도 확인할 수 있고 Apkmanager로 디컴하셔도 확인할 수 있습니다. 단지 7zip으로 압축을 풀면 편집은 불가능하고 이미지 이름에 xxx.9.png라는 파일 이름을 보고 나인패치 이미지 인지 확인을 할 수 있습니다. 하지만 디컴파일하게 되면 이미지를 파일명 뿐아니라 어떤정보가 들어가 이는지 정보까지도 확인이 가능하며 draw9patch 툴이나 포토샵같은 이미지 편집툴로 수정을 하실 수 있습니다. 그럼 7zip으로 압축해제한 파일과 디컴파일한 9패치 이미지들을 확인해 보세요^^


일반적으로 나인패치는 버튼쪽과 타이틀 부분에 많이 들어갑니다. 두이미지 특징이 배경에 이미지가 들어가고 그위에 글씨등이 채워지게 되는 구조인데 나인패치가 가장 많이 들어가 있는 파일중에 하나입니다. 



framework-res.apk를 7zip으로 압축해제해서 이미지 파일을 확인해봤습니다. 우리가 찾고 있는 이미지위에 정보선은 보이지 않고 파일명으로만 xxx.9.png파일을 확인할 수있습니다. 이상태에서는 나인패치 정보영역을 확인할 수 없습니다. 그럼 apk툴을 이용해서 디컴파일한 파일을 보실까요?







디컴파일하게 되면 이미지 밖에 숨겨저있던 9패치 영역이 공개가 됩니다. 위와는 다르게 이미지 사방으로 검은 선들이 들어가 있는 걸 확인하실 수 있는데요. 이 선의 의미만 알면 저흰 9.patch를 일반 이미지 다루듯이 수정하하실 수 있습니다. 그럼 저 1px의 검은 선의 의미를 알아볼까요?? 






나인패치 외곽 검은 실선의 의미

이부분을 예전에는 그려서 많이 설명했는데 해외에 좋은 자료가 있어서 개념정리할 수 있는 글을 첨언해서 설명해 드리겠습니다. 출처:  http://radleymarx.com/blog/simple-guide-to-9-patch




나인패치 이미지 구조 

기본적으로 나인패치 이미지는 두가지 영역으로 나눠지게 됩니다. 이미지의 늘어나는 부분을 정해주는 나인패치영역과, 이미지 안에 텍스트등의 내용을 어떤 레이아웃으로 표시해줄지 정의하는 영역입니다.

Scalable area 영역이 이미지를 늘려주는 구간을 설정해 주는 나인패치 영역이고

Fill area가 이미지 위에 어떠한 내용물을 어느 위치에 표시해줄지 정의 해주는 영역입니다.

이 1px의 검정색의 길이와 여백을 이용해서 자신의 늘려주고자 하는 이미지 영역과 표현하고자 하는 텍스트 영역을 지정할 수 있게 되는겁니다. 





이미지를 보시면 둥근모서리를 취하고 있지요? 이 이미지를 늘리거나 텍스트를 넣거나 할 때 모서리 끝까지 가게 되면 이미지를 벗어나고 저 둥근 모서리 부분까지 나인패치 영역으로 잡혀 있으면 모서리 굴림이 찌그러지게 늘어지겠지요? 그래서 일정여백을 줘서 이미지가늘어나더라도 저부분은 그대로 둬라라는 의미로 여백을 줍니다. 글씨또한 모서리 끝까지 가면 이미지가 짤리니 그부분을 여백으로 둔겁니다.








아래 이미지는 Scalable Area의 확대 예를 보여주는 부분입니다. 안드로이드 UI에서는 새로모드, 가로모드가 존재하고 또한 팝업이나 일반 화면에서의 버튼크기가 모두 다르게 됩니다. 그러한 이미지를 다 따로만든게 아니고 디자인되는 부분을 여백 처리하고 늘어나는 구간을 정의 함으로써 가로, 세로 어떤 크기로 늘어나도 형태가 깨지지 않는 예를 보여주고 있습니다. (형태가 변해도 둥근모서리 값은 변하지 않습니다.)









Fill Area 설명입니다. (좌측,아래측 라인)

들어가는 텍스트, 아이콘등의 여백과 레이아웃을 설정할 수 있습니다. 아래 샘플처럼 버튼크기가 변경되도 정보 표시영역을 나인패치로 잡아둬서 좌우,위아래 여백은 침범하지 않고 이미지 확대축소에 따른 텍스트가 정리되어서 출력되는 모습을 볼 수 있습니다.






나인패치 이미지의 Scale과 Fill 영역이 상호 어떻게 연관되어서 보여지는 예입니다.

아래 보시면 측면의 둥근 아이콘의 나인패치 지정으로 가로확대 시에도 측면 원이 깨지지 않고 가운대 영역만 늘어나는 이미지를 볼 수 있습니다. 또한 안에 들어가는 아이콘의 위치도 Fill영역에서 지정되어있어서 정돈되 모습을 아이콘이 정렬되는걸 보실 수 있습니다.





Fill영역없이 이미지에 글씨를 넣어서 Scale영역으로만 늘어나는 모습은 아래와 같습니다.






Fill 영역에 대해 보충설명 해드릴께요. 메세지 말풍선에서 나인패치는 정말 많이 활용됩니다.










나인패치(9.patch)이미지 구조에 대해 조금 이해가 되셨나요?

아직 이해가 안가셔도 괜찮습니다. 이미지 한두개 바꿔가면서 테스트하는 과정을 보여드리면

확실히 알 수 있을겁니다.




오늘은 간단하게 나인패치 이미지 구조에대해 설명해 드렸는데 다음시간에는

손쉬운 나인패치 수정방법과, draw9patch 다운과 사용버과 기타 다른 툴에 대한 소개로 이어갈께요.



그리고 나인패치 이미지가 어떻게 스마트폰에 적용되는지도^^








이상으로  나인패치(9patch) 이해하기 포스팅을 마치도록하겠습니다.





포스팅 내용이 유익하셨다면 아래 ViewOn버튼 꾹 눌러주시고 

응원의 댓글 부탁드립니다.^^


조금이나마 테마작업하는데 도움이 되어드리고자 포스팅 하고 있는  Azdesign™ 입니다.^^






* 필  독 *

- 블로그내 모든 포스팅 내용 도용 및 2차배포는 금지합니다. -

루팅관련 자료 사용으로 인한 소프트웨어,하드웨어 오류에 대한 책임은 전적으로 본인에게 있습니다.

(항상 자료 사용하시기 전에 백업을 필수로 해주시고 자신의 기종과펌웨어 버젼을 확인하세요)