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

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

▲ dither 옵션이 켜져있을 때

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

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

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

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

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

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

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

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

외국 블로그들에는 간혹 나온 내용인데, 국내 블로그엔 검색해도 잘 안 나와서 여기 적습니다.

둘 다 벡터이미지로 작업된 round box 입니다.

위에 것은 pixel 에 정확하게 맞아들어가서 지저분한 아웃라인이 생기지 않는 반면, 아래 것은 픽셀 사이에 어중간하게 벡터라인이 걸친 관계로 아웃라인이 지저분해졌습니다.

▲ 벡터라인이 픽셀 사이에 어중간하게 걸친 예

▲ 벡터라인이 픽셀에 정확하게 맞아들어간 예

방법을 몰랐을 때는, 정확하게 벡터라인 맞춘다고 일일이 포인트 잡아서 커서키로 밀거나 마우스로 낑낑거려서 맞추곤 했는데. 그럴 필요 없습니다. 옵션이 있거든요.

설정에 가셔서, Grid 옵션을 위 그림처럼 맞춰주면 픽셀기준으로 그리드 설정이 됩니다.
( View > Snap to > Grid ) 로 그리드스냅도 먹어야겠죠.

이렇게 하면 zoom scale 100% 일때는 벡터라인을 어떻게 그려도 pixel 에 정확하게 맞아듭니다. 하지만, zoom scale 을 확대하기 시작하면 이마저도 해법이 아니죠.

해서, 또 하나의 옵션이 바로 이 Snap to Pixels 입니다.
벡터 이미지를 그릴 때, snap to pixels 에 체크를 해놓으면 zoom 을 어느 상태로 해놓아도 pixel 에 정확하게 맞아들어가는 vector 를 그릴 수 있습니다.

물론, 이건 포토샵에서 벡터를 그릴 때 얘기고, 일러스트에서 벡터를 그려서 가져오면 답은 안 나옵니다. 세밀하게 pixel perfect 를 추구하는 수 밖에 ㅠㅠ