안드로이드앱 디자인을 위한 나인패치(9patch) 이미지를 만들어 보자.

안녕하세요 키다리디자이너입니다.

오늘은 나인패치(9 patch)이미지에 대해 포스팅 할게요.

 

나인패치이미지란 안드로이드 환경에서만 사용하는 특수한 이미지 형식입니다.(거의 안드로이드 앱을 만들때 사용됩니다.)

이미지를 늘릴 때 늘어날 부분을 따로 지정할 수 있구요 그 안에 들어갈 내용에 대한 영역을 지정할 수도 있어요.

 

예를 들어 볼게요. 

위와 같은 말풍선 이미지를 일반적인 방법으로 늘릴 경우 위처럼 보기 싫게 늘어나게 됩니다. 

 

어떤가요?

두번째 이미지가 자연스럽게 가운데 부분만 늘어나서 더 보기가 좋죠

 

나인패치는 이런 특수한 경우를 위한 포맷입니다.

 

 

나인패치 이미지는 이런 형태로 만들어져 있습니다.

윗쪽과 왼쪽에는 1px의 검정 라인으로 늘어날 부분을 지정하고 오른쪽과 아랫쪽에는 마찬가지로 검정 라인으로 내용이 들어갈 부분을 지정해 줍니다.

각 라인은 반드시 검정색의 1px 라인으로 그려야 하구요 확장자는 *.9.png로 저장합니다.

 

 

 

위에 이미지는 실사이즈의 나인패치이미지입니다.

마찬가지로 왼쪽과 상단에 1px의 검은 점으로 늘어날 영역을 지정했고 하단과 오른쪽에 내용이 들어갈 영역을 지정했습니다.

만약 이 이미지 안에 내용이 들어갔을 때를 가정해 본다면 이렇게 되겠죠.

 

 

어때요 별거 아니죠? png파일에 검정 라인만 그려서 확장자만 바꿔주면 됩니다.

 

 

작업은 포토샵으로 해도 상관 없지만 만약 포토샵을 사용할 줄 모르시거나 나인패치를 만들기 위한 툴을 따로 사용하고 싶으시다면 무료 안드로이드 개발툴을 받으시면 됩니다.

 

 

위에 사이트에서 프로그램을 다운 받으신 후 압축을 풀어줍니다.

 

 

eclipse 폴더에 들어가시면 'eclips.exe' 파일이 있는데 한 번 실행했다가 프로그램이 실행되면 그냥 닫아주시구요.

 

 

 

 

상위 폴더로 이동해 sdk 폴더로 들어갑니다.

  

폴더 안에 보시면 'draw9patch.bat' 파일이 있습니다.

이걸 실행해 주시면 나인패치 이미지를 만들 수 있는 프로그램이 뜹니다.

이 프로그램은 확장자가 그냥 .png파일과 .9.png파일을 같은 파일로 인식해 혼란을 덜어주는 장점도 있습니다.

 

 

 

 

이 프로그램은 로딩시간이 다소 깁니다.(별것도 아닌게...)

이걸 실행하면 까만 커맨드입력창만 한동안 뜨는데요 이상태에서 프로그램이 실행될 때까지 기다리세요.

 

 

 

 

 

 

요런 창만 덩그라니 떠 있더라도 종료하지 말고 기다리세요

 

 

 

Draw 9patch가 실행되었습니다.

메뉴는 정말 단순히 파일을 불러오고 저장하는 기능밖에 없습니다.

 

 

 

나인패치 이미지를 불러와 보았습니다

왼쪽은 검정색 라인을 그리는 작업창이고 오른쪽에는 넓어지도록 지정한 부분이 넓어졌을 때를 가상으로 보여줍니다.

 

 

 

사용도 아주 간단합니다.

이미지의 각 모서리에서 마우스 왼쪽클릭을 하면 검정색으로 점이 칠해집니다.

라인을 지우고 싶을 때는 마우스 오른쪽클릭한 상태로 드래그 하면 지워집니다.

 

 

 

하단에 show content 체크박스에 체크하면 내용이 들어가도록 설정한 부분에 대해 영역을 미리 보여줍니다.

 

 

 

하단에 show patches 체크박스에 체크하면 넓어지도록 지정된 부분을 녹색으로 보여줍니다.

 

 

여기까지 나인패치이미지를 만드는 방법을 알아봤습니다.

사실 포토샵으로 만들어도 되고 안드로이드개발툴 외에 다른 프로그램을 사용해서 만들어도 상관 없습니다. 본인이 편한 방법으로 만들어 주시면 됩니다.

많은 안드로이드개발자들이 디자이너가 나인패치영역을 설정해 주지 않아 직접 만드는 경우가 많은데 가능하면 이 부분은 디자이너가 직접 작업해서 개발자에게 넘겨주길 바랍니다.

디자이너가 직접 나인패치이미지를 만들어야 디자인 할 때의 의도대로 정확히 설정할 수 있으니까요.