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

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

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

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

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

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

Assistor PS 같은 포토샵 플러그인 다음 세대에는 스케치·XD 파일에서 스펙을 자동 추출해 개발자와 공유하는 전용 핸드오프 툴 Zeplin과 프로토타이핑·공유 툴 inVision이 자리 잡았다. 2018년 HCI KOREA에서 소개된 국내 스타트업 솔루션 Cracker9(HNINE)도 이 계열에 속하며, 이런 협업 툴들은 디자이너·개발자 사이의 허들 하나를 없애는 데 초점을 맞춘다. 그러나 발표자는 협업 툴이 '기본적인 기능'을 제공할 뿐 만능은 아니라고 짚는다. 첫째, Zeplin이 추출하는 속성값(Attribute)은 충분히 읽을 만한 수준이지 완벽하지 않다 — 하나의 아트보드가 플랫폼마다 다르게 렌더링되기 때문에 같은 속성값이라도 실제로는 다르게 보이며, 특히 Typography·Shadow·Gradient 표현 차이가 두드러진다. Web 개발에서는 Zeplin이 산출하는 소수점 단위나 REM 같은 상댓값 처리도 매끄럽지 않다. 둘째, 자동 추출된 에셋을 무조건 신뢰하기 어렵다 — PNG 무손실 압축 여부, 상황에 따라 필요한 Progressive JPEG·WebP·SVG 같은 포맷 선택은 매번 추가 공수(플러그인 탐색 또는 수작업)를 요구한다. 결론은 협업 툴이 아무리 발전해도 리스크는 늘 남으며, 디자이너도 개발자도 정교한 결과물을 위해서는 스스로 공부하고 노력해야 한다는 것이다.

핵심 내용

문제: 그림자·아웃 글로우 등 이펙트가 적용된 오브젝트는 경계를 확대해 일일이 측정해야 해 시간이 많이 듦
Assistor PS(위트스튜디오 제작)는 레이어 선택만으로 이펙트 포함 경계를 인식해 가이드박스와 크기값을 자동 추출
좌표값·마진값 추출 기능으로 marquee 툴 반복 확대·축소에서 오는 픽셀 오차 문제를 해결
공통 워크플로우: 레이어/영역 선택 → 기능 버튼 클릭 → `@Assistor_guide` 폴더에 수치값 자동 표기
부가 기능: 컷팅 이미지 내보내기, 안드로이드 해상도 자동 계산
정식 버전 추가 기능: 레이어 가이더(거리값·폰트정보 포함), 가이드 메이커(수치 입력식 가이드선 생성), 유닛컨버터(DPI 기반 수치 환산), 라운더(라운드값 일괄 변경), 타일러(규칙 기반 오브젝트 복제)
Zeplin·inVision: 스케치/XD 파일에서 스펙을 자동 추출·공유하는 전용 핸드오프 툴, Assistor PS류 플러그인의 다음 세대
국내 스타트업 솔루션 Cracker9(HNINE, 2018년 HCI KOREA에서 소개)도 같은 계열의 협업 툴
Zeplin의 한계 ①: 플랫폼별 렌더링 차이로 속성값은 같아도 Typography·Shadow·Gradient가 다르게 표현, 소수점·REM 단위 처리도 매끄럽지 않음
Zeplin의 한계 ②: 자동 추출 에셋의 신뢰성 문제 — PNG 무손실 압축, Progressive JPEG·WebP·SVG 포맷 선택은 여전히 수작업 필요
협업 툴은 만능이 아니며, 디자이너·개발자 모두 스스로 기술적 감각을 길러야 리스크를 줄일 수 있음

출처

Assistor PS 디자인 가이드 툴 리뷰 — 2013-12-26, 알 수 없는 사용자
Assistor PS - mini tool for GUI guideline — 2013-07-03, limho
HCI KOREA 2018 참관 후기 (3/3) — 2018-02-22, 문한별

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

핵심 내용

관련 개념

출처