앱디자인의 한계

mobile 2013. 9. 26. 10:55

현재의 앱디자인은 과거 웹디자인을 테이블로 짜던 시절과 거의 비슷하다. 모든 이미지의 shadow 를 포토샵에서 잘라내서 나인패치 형태의 테이블에 한 귀퉁이씩 짜넣던 그 시절. 이 답답함때문에 모바일웹 디자인이 차라리 편한 것 같다. 적어도 레이아웃에서 shadow를 고민하지 않아도 되니까. 

언제쯤이면 앱디자인에서도 CSS가 구현하는 수준의 언어기반 렌더링이 가능해질지....

AND

낚시제목 말고 정확한 제목을 굳이 적자면
‘디더링된 그라디언트를 그대로 나인패치로 쓰지마세요’ 임.

포토샵에서는 그라디언트툴에 기본적으로 dithering 옵션이 있는데, 켜져있는 경우가 간혹 있음.

image

▲ dither 옵션이 켜져있을 때

 

이 옵션이 켜져있을 때의 그라데이션은 아래 그림의 왼쪽과 같고, 옵션이 없을때는 오른쪽과 같다.

image

쉽게 말하자면 좀 더 눈에 자연스러운 계조를 만들기 위해서 각각의 색과 색 사이를 병치혼합으로 표현하는 걸 말하는데, 특히 그라디언트 양쪽 색상의 차이가 별로 없을 경우 dithering 의 힘이 크게 나타난다.

문제는 이게 눈에 쉽게 보이지 않기 때문에, 나인패치로 따올 때 별 생각없이 따오는 경우가 많다. 하지만 dithering 된 그라데이션은 사실 확대해보면 위 그림의 왼쪽같이 되어 있으므로, 이걸 나인패치로 만들면 이상한 줄무늬가 생기게 된다. (눈이 민감한 사람에게만 ㅡ,.ㅡ)

 

image 

▲ dithering 먹은 그라데이션으로 만든 나인패치

image

▲  나인패치가 적용되었을때.

image

▲  이 나인패치를 고대비로 효과를 줘보면 뭐가 문제인지 보이기 시작…

 

사실상 왠만큼 눈으로 봐서는 모를 일이지만… 거슬리는 사람들을 위해서.

이 문제를 해결하는 방법은 1) dithering 끄고 그냥 만든 그라데이션으로 나인패치를 만들거나 2) dithering 들어간 그라데이션을 나인패치로 만들게 아니라 그냥 타일링 해버리는 것.

AND

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

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

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

디자이너: 안드로이드님 여기 방금 만든 따끈한 나인패치입니다. 그라데이션 들어가 있으니 조심히 다뤄주세요.

안드로이드: 엇? 이 이미지는 그라데이션이 조금 있긴 하지만… 보자… 여긴 투명도가 없잖아. 뭐 이런거 따위에 32bit 디코딩을 해서 아까운 메모리를 쓰나. 됐어! 너는 그냥 256 컬러로 디코딩 해줘버리겠다!

디자이너: 흑흑흑… 내 그라데이션 안습 ㅠㅠ 

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

 

▲ 이것이 원본 나인패치

 

     

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

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

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

 

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


디자이너: 안드로이드님 여기 방금 만든 따끈한 나인패치입니다. 한번 보시죠.

안드로이드: 흠. 보자, 흔한 나인패치 따위인 거 같은… 헛? 투명도가 있잖아? 어이쿠. 그럼 32bit 디코딩 해줘야지. 옛다.

디자이너: 오예! 땡큐땡큐~~ 나이스 그라데이션!

 

AND

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

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 문제가 쉽게 해결되지는 않음)


AND