본문 바로가기

Mobiles

나인패치(9 patch) 이미지파일 만들기.!




나인패치(9 patch) 이미지파일 만들기.!


나인패치(9 patch) 이미지파일 만들기.!


스마트폰에서 보이는 배경이나 버튼들은 이미지가 대부분이며 극히 일부가 색상 코드로 적용돼있는데 세로모드와 가로모드로 구분돼서 화면 크기가 바뀌는 스마트폰에서는 이미지로 적용된 부분도 똑같이 맞춰서 늘어나야 하는데 일반적인 이미지로는 그 효과를 표현할 수 없기 때문에 안드로이드에서는 나인패치라는 작업으로 늘어날 이미지면(상하좌우)을 지정해서 어떤 상황에서도 이미지가 깨지지 않고 딱 맞게 늘어났다 줄었다 할 수 있게 나인패치작업을 해줘야 합니다.



나인패치(9 patch) 이미지파일 만들기.!


위 스샷이미지를 보면 디바이스 옵션창 상단 배경이미지가 서로 다른 걸 볼 수 있는데 왼쪽이 나인패치 작업을 해서 적용한 상태고 오른쪽이 이미지만 만들고 나인패치 작업을 하지 않은 상태로 적용한 부분입니다. 이미지 하나로 다른 크기의 창에서도 적용될 수 있고 굳이 창 크기에 맞춰서 이미지를 만들지 않아도 나인패치 작업만 잘한다면 작은 이미지로도 다양한 이미지를 구현할 수 있는 게 나인패치의 큰 장점이 아닐까 생각됩니다.


그리고 나인패치는 모든 이미지 파일에서 다 되는 게 아니라 디컴파일 해보면 이미지파일에 숫자 9가 붙어있는 것들이 있는데 그 이미지들은 모두 나인패치가 적용됐고 나인패치를 적용해야 하는 이미지들입니다.



나인패치(9 patch) 이미지파일 만들기.!


나인패치 이미지들은 스마트폰의 특성상 화면 모드에 의해 크기를 바꿔줘야 하기 때문에 거의 모든 부분에서 사용된다고 보면 될 겁니다.


그럼 나인패치로 작업하려면 무엇이 필요한가.!? 아래 분할압축파일을 다운받아서 간단하게 압축을 풀어 줍니다.




나인패치(9 patch) 이미지파일 만들기.!


 - 사용할 파일/폴더 설명


Draw9Patch_Files : 나인패치를 적용하기 전 최초제작한 이미지파일을 넣어두는 곳 (폴더명 수정 금지.!)

Draw9Patch.bat : 나인패치 작업 파일

xUltimate-d9pc_x64.exe : 나인패치 오류 확인 파일(64비트 운영체제 전용)

xUltimate-d9pc_x86.exe : 나인패치 오류 확인 파일(32비트 운영체제 전용)


나인패치 오류 확인 파일은 컴퓨터 운영체제에 맞는 것만 놔두고 다른 건 삭제합니다.! 실수로 다른 걸 실행했을 때는 컴퓨터를 재부팅 해야 하는 번거로움이 생김.;;;


그리고 나인패치 오류 확인 파일이 하는 작업은 Draw9Patch_Files 폴더에 이미지를 넣고 xUltimate-d9pc_x86.exe 파일로 나인패치 작업 후 제대로 작업이 됐는지 확인할 때 쓰이며 나인패치를 잘 못 적용됐을 때는 해당 이미지파일에 대한 오류가 나타나고, 정상적으로 적용했을 때는 실행창이 자동으로 닫히며 Draw9Patch_compiler_softdx 폴더 안에 done 폴더가 새로 생기면서 나인패치로 그려진 부분이 깔끔하게 제거된 상태의 백업 된 이미지를 볼 수 있습니다.



나인패치(9 patch) 이미지파일 만들기.!


Draw9Patch_Files\res\drawable-hdpi 폴더에 나인패치하지 않은 이미지파일 넣기



나인패치(9 patch) 이미지파일 만들기.!


xUltimate-d9pc_x64.exe/xUltimate-d9pc_x86.exe 파일로 나인패치 오류 확인하기


오류가 나왔으니 해당 이미지파일을 나인패치로 작업합니다.



나인패치(9 patch) 이미지파일 만들기.!



나인패치(9 patch) 이미지파일 만들기.!


Draw9Patch_Files\res\drawable-hdpi 폴더 안에서 조금 전 오류 난 이미지파일을 불러옵니다.



나인패치(9 patch) 이미지파일 만들기.!


처음 이미지를 불러오면 이미지가 화면에 맞춰지지 않게 나오는데 창을 전체확대했다가 다시 복원하면 위와 같이 깔끔하게 볼 수 있고, 아래 Zoom으로 이미지를 확대/축소해서 볼 수 있습니다.



나인패치(9 patch) 이미지파일 만들기.!


화면 상단에 Hide bad patches 버튼을 누르면 이미지에 빨간색 테두리가 생기는데 그 기준으로 4개의 면으로 라인을 그려주면 됩니다.



나인패치(9 patch) 이미지파일 만들기.!


라인을 그리는 방법은 마우스 클릭으로 그릴 수 있고 오른쪽 클릭으로는 지우개 기능이 됩니다.


또 4개의 면을 다 그려도 빨간색 테두리가 없어지지 않는 건 어딘가 잘 못 된 부분이 있어서 테두리가 남아있는 것이니 라인을 다시 수정해 봅니다.



나인패치(9 patch) 이미지파일 만들기.!


왼쪽 아래 라인 1px을 지웠더니 해결이 됐고 테두리도 없어졌습니다. 이미지에 따라 라인을 그리는 기준이 다르니 잘 응용해 보세요.~



나인패치(9 patch) 이미지파일 만들기.!



나인패치(9 patch) 이미지파일 만들기.!


나인패치가 완료된 이미지파일을 저장하고 다시 xUltimate-d9pc_x64.exe/xUltimate-d9pc_x86.exe 파일을 실행하면 작업 된 상태에 따라 오류를 다시 나타내기도 하고 창이 닫히며 done\Draw9Patch_Files\res\drawable-hdpi 폴더에 나인패치로 그려진 라인이 지워진 백업 이미지를 볼 수 있습니다.


나인패치(9 patch) 이미지파일 만들기.!