Draw 9.PNG mode 수정하는 방법

안드로이드에서 테마를 꾸미다 보면 접하게 되는 9.png입니다.

그냥 일반적인 png로 생각해서 수정하다 보면 테마 전체적으로 일그러 진다거나...

심할 경우 FC오류가 뜨는 경우도 있습니다.

이 9.png까지 잘 수정을 해야 완성도가 높은 테마를 만들수 있겠죠.

9.png는 쉽게 생각하자면 똑같은 모양의 아이콘을 사용하는데 사이즈만을 바꿔야 하는 경우가 있습니다.

만약 그렇게 된다면 사이즈별로 아이콘들을 만들어야하고 

그렇게 되면 안드로이드라는 운영체제 자체가 용량이 커질수밖에 없습니다.

이를 9.png로서 크기를 임의적으로 키워야 할때 한 아이콘을 갖고서 정해진 픽셀을 늘려 사용하게 됩니다.

하지만 일반적인 그래픽 수정처럼 이미지를 수정한다면 안드로이드에서 로드를 했을때 전체적으로 늘려버리기 때문에

이미지가 일그러지는 현상이 생기는거죠..

그래서 9.png를 제대로 수정해야 될 필요성이 있습니다.

그림을 보면서 해보신다면 어렵지 않는 일입니다.

이 프로그램은 안드로이드 SDK내에 Tools/draw9patch.bat 를 실행하여 9.png를 하나 불러온 모습니다.

일반적으로 아무 설정없이 안드로이드에서 로드한다면 우측의 모습처럼 일그러짐이 나타납니다.

맨아래 그림은 전체적으로 늘려 안정된 모습이지만 일반적으로  저렇게 되는 부분은 상당히 적습니다.

가로모드로 했을때는 2번째 그림처럼 로드 될 경향이 높습니다.

이제 이를 늘어나지 않게 수정을 해야되는데요..

위 그림을 보면 이 프로그램 내에서 이미지를 수정하지는 못합니다. 분홍색 되어진 부분은 수정을 할수 없다는 것이죠..

그럼 그 이후 상하좌우에 1px씩의 공간이 남겨져 있습니다.

이 1px의 공간에 점을 찍음으로서 해당 점이 찍여있는 부분을 늘려주게 됩니다.

하지만 그 늘려주는 부분은 제가 파란색 화살표로 표시한 좌측과 상단부분에 점을 찍었을때 늘려줍니다.  

그럼 우측과 하단은 무엇이냐..

이 부분은 이 아이콘이 화살표가 없고 그냥 동그라미라고 가정할때...

빨간 화살표가 중복선택되어진 부분에 화살표를 넣겠다~ 라는 의미입니다. 

일단 파란화살표가 선택되어진 부분을 쉽게 설명해드리겠습니다.

 위의 그림 왼쪽을 보면 좌측에 임의적으로 한포인트.. 상단에 한포인트를 찍었을 경우

그 부분이 겹치는 부분이 있습니다. 안드로이드에서는 그 겹치는 부분을 늘려주게 됩니다.

오른쪽 맨위의 그림을 보시면 중복되는 1px이 세로로 늘어난 모습을 모실수 있습니다.

두번째 그림은 그 픽셀이 가로로 늘어나구요.. 마지막 픽셀은 그 선택되어진 점이 가로와 세로로 늘어나게 됩니다.

이런 구도가 나오면 일부러 정성들여 아이콘을 만든 소용이 없겠지요?

매번 이런 방법을 쓰는것은 아니지만 이러한 방법도 있다는 것을 설명해드리겠습니다.

이번에는 좌측은 맨 상단과 맨 하단에 1px씩 찍었습니다.. 상단도 마찬가지로 맨 가장자리에 찍었습니다.

(4꼭지점이 되는 부분에는 점을 찍을 수 없고 찍게 되더라도 오류가 날수 있습니다.)

이 경우 아이콘은 그대로 살려두고 아이콘이 없는 부분을 늘리게 되어 깔끔한 이미지를 모여주게 됩니다.

추가적으로 아이콘이 없는 지점 아무데나 찍으시면 안된다는 점이 되겠습니다.

간혹 아이콘의 위치가 바뀌는 경향이 있기때문입니다.

그리고 이 방법은 간혹 이런 아이콘에서만 쓰이게 되고 예외가 되는 경우도 많습니다. 상황에 따라 바꿔가며 적용하실 필요가 있습니다.

다음으로 위의 빨간화살표가 선택되어진 부분을 설명드리겠습니다.

이 부분을 선택함으로써 이 Draw-9-patch에 보여지는 특이사항은 없습니다.

위에서 대충 말씀드렸듯이 아이콘에 화살표가 없다고 가정했을때...

일반적인 아이콘에 위 그림과 같이 화살표를 넣고 싶다 할때는 우측과 하단의 1px에 저런식으로 체크를 해줍니다.

저 체크되어진 부분에 화살표가 나온다라고 생각하시면 됩니다.

더 쉽게 보아 제가 작업중인 테마에서 실수로 찍은 9.png를 확인해보겠습니다.

 이 스냅샷에서 오른쪽위 빨간화살표가 가르키는 Box에 "지우기"라는 텍스트가 위로 쏠려있습니다.

이는 우측의 px을 잘못찍어서 이렇게 나오는 겁니다.

이 부분만을 빼와서 설명드리자면

그림이 작게 나와 잘 않보이지만

아래 부분은 정가운데로 잘 찍었고...

우측부분도 잘찍었다고 생각되었지만 맨 위쪽부터 텍스트가 채워지기때문에 위쪽에 쏠려있게 됩니다.

이 경우에는 어쩔수 없이 수시로 적용을 해보면서 맞춰가는 방법 밖에는 없겠습니다.

이 경우 확대해서 설명해드리자면

이렇게 적용이 되어있다는 겁니다.

얼핏보면 우측의 경우 균등하게 잘 찍었다고 생각이 되어졌지만 실제로는 텍스트 크기가 작음으로서

위쪽부터 채워지느라 위로 쏠리게 된겁니다.

만약 이런 경우라면 우측을 좀 바꿔서

이런식으로 찍어줘야 위의 그림처럼 나올듯 싶습니다.

이 위의 그림은 아직 제가 적용을 한게 아니라 임의적으로 포토샵에서 작업을 한것입니다.

물론 결과물도 이렇게 나오지요..

이로써 9.png는 쉽게 수정이 가능하구요..

SDK가 없을 경우 그냥 임의적으로 포토샵에서 검은색연필로 찍어주셔도 무관합니다.