Assistor PS 디자인 가이드 툴 리뷰

GUI 가이드 문서 만들 때, 오브젝트에 그림자나 아웃 글로우 같은 이펙트가 걸려있을 경우, 경계를 확대해서 꼼꼼히 보지 않으면 안됩니다. 생각보다 시간이 많이 걸리는 작업인데요, 컴퓨터가 알아서 어디까지 이펙트가 걸려있는지 자동으로 크기값을 알려주고 좌표값을 표시해 준다면 얼마나 편할까요?
이 때 필요한 프로그램이 Assistor PS입니다. 이전에 pxd블로그에서 디자인 가이드 툴 Assistor PS에 대해 소개한 적이 있었는데요, 오늘은 제가 Assistor PS를 사용하면서 유용했던 기능을 공유하려 합니다.

1. 가이드박스 생성&크기값 추출

가이드박스 생성
첫번째로 가이드 박스 자동 생성입니다. 작업을 시작하기 전, 좀 더 가이드를 수월하게 하기 위해 오브젝트나 텍스트의 영역을 표시해주는 가이드 박스를 그리는 경우가 많은데요, 이때 세심한 작업이 필요합니다. 오브젝트에 그림자 등의 효과가 적용 되었을 경우 최대한 확대를 하여 효과가 끝나는 지점이 잘리지 않게 영역 표시를 해 주어야 하기 때문이죠.

포토샵에서 원하는 오브젝트의 레이어 선택 후 Assistor PS의 'Guide Box'버튼을 클릭하면 그림자 효과가 적용된 부분까지 인식하여 박스를 생성해 주기 때문에 확대해 자세히 보지 않아도 정확하게 영역을 설정할 수 있습니다. 이것 만으로도 시간이 많이 절약 되었습니다. 

크기값 추출
크기값 추출도 가이드박스 생성과 비슷합니다. 원하는 오브젝트, 텍스트의 레이어를 선택하거나 marquee툴로 영역을 설정 후 크기값 추출 버튼을 클릭하면 적용된 효과를 포함한 크기값을 알 수 있습니다. 아래 그림과 같이 포토샵 내에 @Assistor_guide폴더를 생성해 수치값을 자동으로 표시해 주는 방식입니다. 

2. 좌표값 및 마진값 추출

좌표값 추출
지금까지는 아이콘이나 이미지의 좌표값을 알아내기 위해 포토샵의 marquee툴을 사용했습니다. 도큐먼트의 왼쪽 최상단에서부터 오브젝트의 좌측 상단 좌표점까지 쭉- 드래그를 해서 선택된 공간의 좌우 값이 좌표값인 것이죠.
이때, 전체 디자인이 화면에 꽉 차도록 축소한 상태에서 좌표값을 잴 때가 많은데요, 그럴 경우 오브젝트의 정확한 좌표점을 찍지 못하고 몇 픽셀 어긋나는 경우가 많았습니다. 좌표점이 어긋나면 다시 화면을 확대해서 정확한 좌표점을 찾아 드래그를 하는 반복 작업을 해야합니다.

Assistor PS에서는 좌표값을 추출할 수 있는 기능이 있어 한번의 클릭으로 좌표값을 알아낼 수 있습니다. 좌표값을 알고싶은 오브젝트의 레이어를 선택하고 ‘좌표값 추출’ 버튼을 클릭하면 '짠' 하고 좌표값을 표시해 줍니다.
상대좌표를 구할 때에는, marquee툴로 영역을 설정하고 레이어를 선택한뒤 '좌표값 추출'버튼을 클릭하면 선택된 영역의 좌측 상단을 기준으로 한 상대좌표값을 알 수 있습니다. 사소한 기능일 수도 있지만 지금까지 좌표값 하나를 알기위해 확대하고 축소하고 마우스 드래그도 몇번씩 했던 귀찮음에 비하면 작업 과정이 깔끔해 졌습니다.

마진값 추출
컴포넌트간, 오브젝트간, 또는 텍스트와 아이콘간의 마진값을 가이드에 표기하는 경우도 많은데요, 마진값을 구할때도 역시 포토샵의 marquee툴을 사용하고 있었습니다. 좌표값 추출기능에서도 이야기 했듯이, marquee툴을 사용하면 열심히 확대를 해서 보지 않을 경우 픽셀이 어긋나는 경우가 많습니다. Assitor PS의 마진값 추출 기능을 사용하면 오브젝트 두개의 레이어를 선택한 뒤 마진값 추출 버튼을 클릭하여 쉽고 정확하게 마진값을 구할 수 있습니다.

 
대부분의 기능이 포토샵에서 레이어 선택 or marquee툴로 영역 설정 > Assistor PS의 기능 버튼 클릭 > 포토샵에 자동으로 @Assistor_guide폴더 생성, 수치값 표기의 순서로 사용법이 간단하여 배우기가 편했습니다. 또, 컷팅해야 할 이미지를 저장하기 쉽게 새창으로 내보내는 기능, 안드로이드 해상도 자동 계산 기능 등도 포함되어 있어 가이드 작업 중 귀찮고 불편했던 부분이 많이 편해졌다고 느껴졌습니다.

"작업시간이 눈에 띄게 줄어들어 매일매일 칼퇴를 하게 되었다!" 라든지 "이게 없으면 가이드 작업을 절대 할수 없다" 정도는 아닐 수도 있지만, 한번 익숙해지니 포토샵의 단축키를 사용하는 것 처럼 작업이 한결 수월해 졌습니다. 매우 중요하지만 소모적인 작업인 디자인 가이드를 덜 귀찮게 작업할 수 있도록 도와주는 요긴한 툴이라고 생각됩니다.

제작사인 위트스튜디오의 블로그를 참고하시면 자세한 기능에 대한 설명이나 업데이트 소식을 보실 수 있습니다. :)
참고 : 위트스튜디오 Assistor PS 블로그


[참고##앱소개##]