이전 포스팅에서 (http://zamar.tistory.com/162) 한 번 얘기한 적 있는 ‘5/6/5 디코딩’ 이슈. 32bit 이미지로 아무리 만들어도, 기기에서 256 컬러로 강제로 다운시켜버리는 현상이다. 이렇게 되면 넓은 면적에 그라데이션이 들어간 부분이나, 그라데이션이 있는 나인패치 들은 아주 절망적인 계단현상을 볼 수 있다.

이게 딱히 방법이 없어서 그 동안 깨나 골치를 썩였는데, 나인패치에 꼼수를 조금 부리면 기기에서 강제로 디코딩 하는 것을 막을 수 있다.

안드로이드는 이미지에 투명도가 조금이라도 들어가면, transparency 를 구현하기 위해서 32bit 이미지로 디코딩을 하게 되는데, 이걸 활용하는 것이다.

자, 아래의 방법으로 안드로이드를 속이고, 32bit 디코딩을 쟁취하자.

▲ 이것이 원본 나인패치

▲ 맨 위에 한 픽셀만 뜯어내자. delete 해서 아예 지워버린다.

▲ 여기가 핵심. 방금 잘라낸 곳과 거의 비슷한 컬러로

100% 가 아닌 99% 불투명도로 채워넣는다.

▲ 99% 불투명도로 채워넣어서 원래 나인패치와 비슷하게 만들어진 나인패치

앞글에서 말한 문제를 해결하기 위해…

16비트 컬러로(라고 적고 256 칼라라고 부른다) 이미지 파레트를 고쳐볼라고 하니, 흔히 말하는 5/6/5 필터를 사용해야하는 상황이 됐다. 5/6/5 필터는 telegraphics 라는 데서 무료로 제공하고 있는데, 모바일 GUI 하는 사람들은 다 알고 있던 툴인 듯. (나만 몰랐어 ㅠ_ㅠ)

이 5/6/5 필터를 사용하면 dithering 을 통해서 그라데이션 같은 많은 계조가 필요한 것들을 눈에 거슬리지 않게 16비트 컬러로 낮춰준다.

언뜻 눈으로 보면 별반 차이가 없다. 그러라고 필터를 만든 거겠지만…
그러나 확대해서 보면 대략 이런 차이… (보일런지????)

오케이. 여기까진 좋았다.
근데 문제는 안드로이드에서 버튼 따위를 만들 때 많이 쓰는 나인패치(nine-patch) 에 이 필터를 먹이기 시작하면서 딜레마가 생겨버렸다.

왼쪽에 보이는 것이 원본 나인패치고, 오른쪽이 5/6/5 필터를 먹인 나인패치다. 문제는 나인패치에서 늘어나는 영역이 붉은 색으로 박스쳐놓은 저 한 픽셀이라는 데 있다. (늘어나는 픽셀의 범위를 더 지정할 수도 있지만, 해결책이 되지 못한다.)

보시다시피 5/6/5 필터는 그라데이션을 사방팔방 모자이크를 하면서 dithering 을 하기 때문에, vertical 한 픽셀만 잡아서 늘이면 진정한 의미의 dithering 이 되었다고 볼 수가 없다.

엄청난 그라데이션 깨짐 현상 ㅠ_ㅠ
그 결과는 아래와 같다.

앞서도 말했지만, 늘어나는 영역을 두어픽셀 정도 같이잡아놔도, 늘어난 영역에 픽셀들이 반복해서 채워지는 개념이 아니라서. 이 문제가 해결이 안 된다.

차라리 HTML/CSS 처럼 stretch 가 아닌 fill 의 개념으로 nine-patch를 만들 수 있다면, 좋겠는데. 고건 좀 아쉽다. (근데 이거도 또 다른 문제를 불러일으킬 듯)

안드로이드에서도 tile 형태로 이미지를 만들어낼 수 있음! (그렇다고 5/6/5 문제가 쉽게 해결되지는 않음)