GUI 디자이너가 저지르기 쉬운 실수 3 (디자인 가이드의 실패)
GUI 디자인 작업의 끝판왕. 바로 '디자인 가이드' 작업입니다.
원활한 UI 개발 작업을 위해, 디자인된 각 요소의 크기, 좌표 등을 정확히 작성하여 넘겨줘야 하는 부분이죠.
생각할 부분을 크게 요구하지는 않지만 굉장히 반복적이고 번거롭기 때문에 스트레스를 받기 쉬운 작업입니다.
이번 글에서는 디자인 가이드 작업중에서도 이미지를 잘못 적용하여 실패한 사례를 살펴보겠습니다.
그 주인공은 LOL(리그오브레전드)과 애플 입니다. 그럼, 바로 아래 그림을 보시죠. :)
- 먼저 LOL(리그오브레전드)입니다.
저도 참 좋아하는데요, 주력 챔피언은 베이가 입니다.윗 부분의 메뉴 버튼은 롤오버를 하여도 문제가 없어 보입니다. 성공적으로 이미지를 적용하였네요.
하지만 아랫 부분은 롤오버를 하였더니 순간적으로 이미지가 좌측으로 밀립니다. 아마 실수로 이미지의 크기를 다르게 잘랐거나 좌표를 잘못 입력한 것 같습니다.
- 그리고 애플입니다. (iOS 6.1.3 기준)
아이폰에서 웹브라우저 사파리를 이용하다가 발견하였는데 탭 하는 순간을 주목해 주세요. 탭의 성공을 알리는 화이트 이미지의 윗 부분이 잘려 있는 것을 볼 수 있습니다. 완벽을 추구하는 것으로 유명한 애플도 이런 실수를 하는 것을 보니 그들도 사람인가 봅니다. 아마도 디자이너가 이미지를 잘못 자른 것 같아요. :( 아니면 다른 이유가 있는지 궁금하네요.
이미지 슬라이스 작업을 하다보면 여러 이유로 이런저런 실수를 하게 되는데, 대표적으로 다음과 같은 상황이 있습니다.
보이는 것처럼 그림자가 적용된 디자인의 경우, 그림자가 어디에서 끝나는지 자세히 보고 잘라야 하지만 경계가 애매하여 잘못 자르는 경우가 종종 있습니다. 사실 이를 해결할 다른 방법은 딱히 없습니다. 단지 두눈을 부릅뜨고 다시 한번 더 정확히 잘라내는 수 밖에...
(물론 그림자 등은 개발에서 처리하는 경우도 있습니다. :D)
디자인 가이드 작업을 하다보면 당연히 이런저런 실수를 하게 됩니다. 하지만 최소한으로 줄이는 것이 최선이겠죠. UI 의 전체적인 완성도에 영향을 미치는 아주 중요한 부분이기 때문입니다.
만약 이런 실수를 줄이고자 한다면 어시스터 PS의 기능을 추천합니다. 선택된 레이어의 실제 크기를 인식하고(레이어 스타일 포함) 잘라주기 때문에 훨씬 빠르고 정확하게 이미지 슬라이스 작업을 할 수 있습니다. 아래 그림을 보시죠.
레이어를 선택하고 어시스터 PS의 'Layer Snips'를 클릭하면 레이어에 적용된 그림자를 인식하고 실제 크기 그대로 곧바로 슬라이스가 됩니다. 물론 여러개의 레이어를 동시에 처리할 수도 있습니다. :) 훨씬 정확하고 간편한 디자인 가이드 작업을 하고 싶다면 한번 http://assistor.net/ 를 방문해 보세요. 신세계가 열릴 수 도 있습니다.
