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

2013.07.24 08:30





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

테마관련 포스팅을 하다보니 이전에 포스팅한 데이타가 삭제가 되어있어 이어지지 않아서 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차배포는 금지합니다. -

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

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



저작자 표시 비영리 변경 금지
신고


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



  1. Blog Icon
    한별

    디자인님, 안녕하세요 ^^
    안그래도 궁금한 내용이었는데 감사합니다.

  2. 다음강좌에서 나인패치 수정법 소개해드릴께요^^

  3. Blog Icon
    투진97

    캬.. 이건 정말 흔치않은 포스팅이네요.
    점심 식사 맛나게 하셨나요?
    간만에 서울에도 햇살나니 좋네요^^
    즐거운 목요일 보내세요 디자인님~

  4. 흔한 포스팅이예요~~ 라고 말하고 싶지는 않습니다. ㅎㅎ
    가죽테마할때 나인패치 정말 수정많이 했었는데. 가죽테마는 순정나인패치를 거의 무시한 테마라.. ㅎㅎ

  5. Blog Icon
    투진97

    가죽테마에 반해서 루팅을 선택한 유저가
    정말 몇 십만명은 될거에요.. 진정 명품이죠..^^

  6. 그정도까지는 아닐꺼예요^^ 가죽테마 천천히 작업들어가고 있습니다.^^

  7. Blog Icon
    머피2

    우측과 밑의 역활이 애매했는데
    또하나 배우고가네요^^
    강좌 잘봐습니다 ㅎㅎ

  8. 도움이되었다니 다행이네요^^

  9. Blog Icon
    손님

    안드로이드에 이런게 있었다는걸 처음 알았네요. 앱 디자인을 어떻게 할까 고민중이었는데 나인패치 적극 활용해보고 싶어졌습니다 ㅎㅎ 다음 포스팅이 기대되네요~ +_+

  10. 이렇게 댓글달아주셔서 감사합니다. ㅎㅎ 나인패치 강좌 시간되는대로 진행할께요^^ 어렵지 않아요^^

  11. Blog Icon
    한미혜

    정말 너무 도움되었습니다. 감사합니다^^

  12. Blog Icon
    한미혜

    정말 너무 도움되었습니다. 감사합니다^^

  13. 도움이 되었다니 다행입니다^^

  14. Blog Icon
    슈슝이

    구글링하다가 우연히 발견했는데 정말 많은 도움 되었습니다! 감사합니다 !!!ㅋㅋㅋ다른 나인패치관련 포스트보다 이해하기가 훨씬 쉽네요! 페북에공유합니당

  15. 감사합니다.^^ 자주 방문해 주세요

  16. 드디어 알겠네요 ㅎㅎ많은 도움 되었습니다 자세하고 친절한 포스팅 감사합니다

  17. Blog Icon
    ㅇㄹㅁ

    잘보았습니당! 유익한 포스팅이네여.. 페이스북으로 공유할게요~

  18. 덕분에 개념이해가 좀 됐습니다. 감사합니다. ^^

  19. Blog Icon
    보라순이

    아.....나인패치에 대한 조금의 개념도 없이 무턱대고 덤벼들었다가 지금 멘붕상태인데,
    이렇게 쉽게 설명해주시다니.. 크헉;; 너무 감사합니다!
    왼쪽과 상단은 늘어나는 영역, 오른쪽과 하단은 내용이 들어가는 영역!! 이란걸 알고 나니 이해가 팍팍되네요.
    헌데, 간혹 카톡 테마보면 상단바에 땡땡이 무늬라던지 패턴이 적용된게 있던데, 나인패치를 어떻게 적용해야 가능한걸까요?

  20. Blog Icon
    이은정

    앱을 첨으로 하는데 개념을 알려주셔서 넘넘 감사합니다.

  21. Blog Icon
    동글동글

    안녕하세요~
    나인패치 관련하여 궁금한 점이 많아서 방문했습니다.
    유용한 정보 알려주셔서 고맙습니다~

  22. 감사합니다.^^

  23. 좋은 정보 감사합니다. :)

  24. 감사합니다.
    이해 잘했습니다.

  25. 다행이니다.^^

  26. Blog Icon
    로렐라이

    자세한 설명과 이미지 감사합니다~
    scale과 fill 동시에 들어가는 부분이 정말 이해가 안됐었는데
    조금 이해가 된것 같아요^^
    좀 더 연습을 해봐야 되겠네요~
    잘 보고 갑니다!^^

  27. 감사합니다.^^

  28. Blog Icon
    룰루

    영역 개념이 이해가 안됐는데 정말 쉽게 설명해주셨어요
    감사합니다.^^

  29. 감사합니다.^^ 조금이라도 도움이 되었음 좋겠습니다.

  30. 자세한 설명 감사합니다. 쏙쏙 이해가 잘됐어요
    함께 작업하는 친구에게도 알려줘야겠어요.^^

  31. Blog Icon
    ㅇㅇ

    책으로 공부하는 중이었는데 설명이 빈약해서 검색해보는 중에 이 포스팅을 찾게 되었습니다.
    검색해서 내용을 찾을때마다 최소 3-4개의 포스팅을 섞어서 보는 편인데
    나인패치 만큼은 이 글로 완벽하게 이해가 되었어요.
    감사합니다.

티스토리 툴바