디자인 가이드 문서 자동화 도구

개발자에게 전달할 디자인 가이드(스펙) 문서를 만들 때 가장 번거로운 작업 중 하나는 그림자나 아웃 글로우 같은 이펙트가 적용된 오브젝트의 실제 경계를 측정하는 일이다. 이펙트 영역까지 잘리지 않게 표시하려면 화면을 확대해 꼼꼼히 확인해야 하는데, 이는 생각보다 많은 시간이 드는 반복 작업이다.

Assistor PS는 이런 수작업을 자동화하는 포토샵 플러그인이다. 오브젝트 레이어를 선택하고 'Guide Box' 버튼을 클릭하면 그림자 등 효과가 적용된 부분까지 인식해 정확한 가이드박스를 자동 생성해주고, 같은 방식으로 효과를 포함한 크기값도 곧바로 추출할 수 있다. 확대해서 눈으로 일일이 확인하던 과정을 클릭 한 번으로 대체하는 것이 핵심 가치다.

좌표값·마진값 추출 기능도 유사한 문제를 해결한다. 기존에는 marquee 툴로 도큐먼트 좌측 상단부터 오브젝트까지 드래그해 좌표를 측정했는데, 전체 화면을 축소한 상태에서는 몇 픽셀씩 어긋나 확대·축소를 반복해야 하는 경우가 많았다. Assistor PS는 레이어 선택만으로 절대좌표·상대좌표를 즉시 표시하며, 오브젝트 두 개의 레이어를 선택해 마진값도 바로 구할 수 있다.

이 도구의 공통 사용 흐름은 레이어 선택 또는 marquee 영역 설정 → 기능 버튼 클릭 → 포토샵 내 `@Assistor_guide` 폴더에 수치값 자동 표기로 단순하다. 배우기 쉬운 조작 방식 위에, 컷팅할 이미지를 새 창으로 내보내는 기능과 안드로이드 해상도 자동 계산 기능 등이 더해져 반복적이고 소모적인 가이드 작업의 부담을 줄여준다. 위트스튜디오가 제작했으며, 극적인 생산성 향상이라기보다는 포토샵 단축키처럼 손에 익으면 작업을 한결 수월하게 만들어주는 보조 도구로 평가된다.

pxd는 베타 버전을 사용해보고 정식 버전을 구매할 만큼 이 도구를 실무에 적극 도입했다. 정식 버전은 좌표값·크기값·마진값 자동 추출 기능(레이어 가이더)에 오브젝트 간 거리값과 폰트 정보 추출까지 포함해, 다양한 해상도·비율의 단말별 GUI 가이드라인을 여러 벌 만들어야 하는 GUI 디자이너의 반복 작업을 크게 줄여준다. 이 밖에도 마우스 드래그 대신 수치 입력만으로 포토샵 가이드선을 만드는 가이드 메이커, 단말 DPI에 따라 수치값을 자동 환산하는 유닛컨버터, Path Shape 모서리의 라운드값을 일괄 변경하는 라운더, 입력한 규칙에 따라 오브젝트를 반복 복제하는 타일러 기능이 있다. 하나하나는 사소해 보이지만, 마우스로 가이드선을 일일이 끌어다 놓거나 라운드값이 다른 사각형을 매번 새로 그려 비교하던 기존 작업 방식을 대체해 실질적인 작업 효율을 끌어올린다는 것이 pxd 디자이너들의 공통된 평가다.

핵심 내용

문제: 그림자·아웃 글로우 등 이펙트가 적용된 오브젝트는 경계를 확대해 일일이 측정해야 해 시간이 많이 듦
Assistor PS(위트스튜디오 제작)는 레이어 선택만으로 이펙트 포함 경계를 인식해 가이드박스와 크기값을 자동 추출
좌표값·마진값 추출 기능으로 marquee 툴 반복 확대·축소에서 오는 픽셀 오차 문제를 해결
공통 워크플로우: 레이어/영역 선택 → 기능 버튼 클릭 → `@Assistor_guide` 폴더에 수치값 자동 표기
부가 기능: 컷팅 이미지 내보내기, 안드로이드 해상도 자동 계산
정식 버전 추가 기능: 레이어 가이더(거리값·폰트정보 포함), 가이드 메이커(수치 입력식 가이드선 생성), 유닛컨버터(DPI 기반 수치 환산), 라운더(라운드값 일괄 변경), 타일러(규칙 기반 오브젝트 복제)

출처

Assistor PS 디자인 가이드 툴 리뷰 — 2013-12-26, 알 수 없는 사용자
Assistor PS - mini tool for GUI guideline — 2013-07-03, limho

디자인 가이드 문서 자동화 도구

핵심 내용

관련 개념

출처