GUI 디자이너가 저지르기 쉬운 실수 2

포토샵으로 디자인된 작업을 모두 끝내도 애플리케이션 개발을 하기 위해서는 개발자에게 각 이미지를 모두 잘라주거나 PSD 파일을 넘겨야 합니다. 이 과정에서 간혹 실수를 하는 경우를 보았는데 Blend Mode의 잘못된 사용입니다.

먼저 아래와 같은 Application Design 작업물을 개발 환경으로
보내기 위해 모든 이미지를 알파패널을 포함한 PNG 파일 포맷으로
잘라내어야 한다는 가정을 해보겠습니다.

이미지를 모두 잘라 실제 개발화면에 적용해 보니 아래와 같은 결과가 나왔습니다. 좌측이 원본 PSD파일의 이미지이고, 우측이 개발 환경에 적용된 모습인데 뭔가 어색한 모습이죠. 바로 하단 영역의 Bar 부분과 Play 버튼의 컬러가 전혀 다른 모습으로 개발화면에 나타나고 있는 부분인데 작업 과정에서 적절하지 못한 부분에 Blend Mode를 사용했기 때문입니다.

아래 보이는 것처럼 Play 버튼의 레이어에 Blend Mode를 적용시켜 디자인을 완성했는데 보기에는 별 문제가 없어 보입니다.

하지만 문제는 각 이미지를 PNG파일 포맷으로 자르는 순간 드러납니다. Blend Mode는 하위 레이어에 어떤 컬러가 적용되어 있는가에 따라 서로 다른 컬러표현을 보여주는 기능이기 때문에 하위 레이어의 컬러가 다르다면 전혀 다른 모습을 나타냅니다. 그렇기 때문에 이미지를 자르기 위해 하위 레이어의 눈을 잠시 끄는 순간 Blend Mode는 무용지물이 되는 것이죠.

하단 Bar 부분도 마찬가지 입니다. Layer Style에서 Blend Mode 기능을 적용하였기 때문에 이미지로 자르려고 하는 순간 전혀 다른 컬러로 잘려지게 됩니다.

Blend Mode는 적재적소에 사용하면 다양하고 풍부한 느낌을 낼 수 있는 기능이지만 이런 사소한 실수를 유발할 수도 있으니 주의하세요!