[리뷰] 개발자와 효율적인 협업을 위한 GUI가이드 프로그램 제플린
제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다. 제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다.
이 전에는 네이티브앱 디자인 시 디자이너가 ppt에 GUI가이드 문서를 하나씩 수작업하여 개발자에게 넘겼었습니다. 그리고 이런 수작업을 보다 빠르고 편리하게 하기 위해 어시스터 PS (Assistor PS) 라는 프로그램이 생기기도 하였습니다.
저 또한 어시스터 PS 출시 후 디자인 가이드를 작업할 때 종종 어시스터 PS를 많이 애용했습니다. 포토샵과 연동하면 좌표값, 가이드 박스, 크기 값을 자동으로 생성하여 추출할 수 있었습니다.
*assistor PS 사용 예시(assistor PS공식홈페이지)
그렇게 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나고 있는 추세입니다.
제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해줍니다. 모바일 해상도별 가이드를 일일이 수작업할 필요도 없습니다. 특히 스케치와도 연동돼 포토샵과도 연동할 수 있다는 것은 ios와 Windows 사용자를 동시에 겨냥한 제품이라고 할 수 있을 것 같습니다.
그러면 지금까지 제가 경험해본 제플린에 대한 소개 및 리뷰를 정리하도록 하겠습니다.
이번 리뷰에서 저는 포토샵과 제플린을 함께 사용했습니다.
- 제플린 설치 및 프로젝트 초기 세팅
먼저 제플린 웹사이트(http://zeplin.io)에서 회원가입 및 제플린을 다운로드합니다.
무료회원으로도 사용할 수 있습니다. 다만 무료회원일 경우 한 아이디 당 프로젝트를 한 개 무료로 사용 가능합니다. (여러 아이디를 생성하여 편법으로 사용 할 수도 있겠지요) 만약 보다 많은 프로젝트를 사용해야 한다면 유료로 업그레이드해야 합니다.
다운받은 제플린을 실행하면 자동으로 포토샵에 플러그인이 설치됩니다. 만약 자동으로 설치되지 않는다면, 처음 제플린을 실행할 때 나왔던 안내에서 연동되는 페이지에서 Install Plugin…을 클릭하여 플러그인을 설치할 수도 있습니다.
설치된 후에는 포토샵을 다시 실행하여 Window > Extensions 메뉴로 가보면 제플린(Zeplin) 플러그인이 생성된 것을 볼 수 있습니다. 이것으로 디자인을 제플린으로 내보낼 수 있습니다.
제플린에서 첫 프로젝트를 생성했을 시, 프로젝트의 대상 기기 타입을 묻는 팝업 창이 나타납니다.
*제플린 실행 후 Creater first project 버튼을 누르면 대상 기기 타입을 묻는 팝업이 나타남
제플린은 안드로이드에서는 dp/sp와 XML로, iOS에서는 pt와 jective C/Swift로 선택한 타입에 따라 그에 맞는 디자인 가이드를 생성해 줍니다.
저는 이번에 ios로 작업하였기 때문에, ios 초기셋팅을 마친 프로젝트를 생성해 두었습니다.
- 포토샵과 제플린 연동하기, 제플린으로 작업한 프로젝트 내보내기
제플린을 이용하기 위해서는 포토샵에서 아트보드 기능을 사용하여야 합니다. 포토샵의 아트보드안에 있는 레이어 중 제플린으로 내 보내기 할 레이어를 선택하여 포토샵의 제플린 패널에서 회색의 ‘Mark as asset’버튼을 먼저 눌러줍니다. 개별 레이어 혹은 그룹으로도 레이어를 선택가능합니다.
선택됐던 레이어의 이름에 -e-가 추가된 것을 확인할 수 있습니다.
Mark as asset을 끝냈으면 아트보드를 선택하여 제플린 패널의 ‘Export selected artboads to Zeplin’ 버튼으로 제플린으로 Export 합니다.
제플린에서 생성했던 해당 프로젝트에 import 시켜줍니다.
이 전에 mark as asset 버튼을 통해 Marking 된 이미지들은 제플린에서 설계 중인 플랫폼에 따라 개발에 필요한 다양한 사이즈, 형식으로 내 보내집니다.
성공적으로 포토샵에서 제플린으로 Import 되었다면, 제플린 우측상단에 완료되었다는 토스트 팝업(1)이 뜹니다.
이제 해당 프로젝트를 클릭하여(2) 구성요소를 자세히 볼 수 있고, 디자인 가이드를 작업할 수 있습니다.
- 제플린 인터페이스 구성요소
좌측의 컨버스 영역에서는 생성되었던 프로젝트 리스트들이 보여집니다. 이곳에서 프로젝트를 삭제할 수도 있고 생성된 프로젝트의 요소 및 가이드를 확인할 수도 있습니다.
- 프로젝트의 제목을 입력 가능한 곳입니다. 클릭하여 수정할 수 있습니다.
- Type : 프로젝트를 생성할 때 지정했던 현재 프로젝트의 디바이스 종류입니다.
- Density : 프로젝트 생성 시 지정했던 해상도 표시이며, Type과는 다르게 첫 생성 후에도 클릭하여 변경이 가능합니다.
- Web app : 현재 프로젝트를 웹앱으로 볼 수 있도록 공유 가능한 링크를 제공합니다.
- 현재 프로젝트를 같이 사용하는 멤버리스트입니다. Invite 버튼을 통해 협업하는 다른 디자이너나 개발자를 초대하여 같이 볼 수 있습니다.
이제 프로젝트를 클릭하여 들어가 보도록 하겠습니다.
크게 좌측은 캔버스 영역 우측의 그레이컬러 면으로 된 부분은 각 구성요소의 정보를 보여주는 패널 부분입니다.
우측 상단에 있는 네 개의 아이콘을 자세히 보면 다음과 같습니다.
- 현재 프로젝트의 정보를 보여줍니다.
- 현재 프로젝트에서 사용된 모든 컬러값을 보여줍니다. 컬러값에 마우스 오버 후 생성되는 아이콘을 클릭하여 스타일 가이드에 넣을 수 있습니다.
- 현재 프로젝트에서 사용된 모든 요소를 보여줍니다.
한꺼번에 포맷을 저장할 수 있습니다. Asset 패널에 대한 설명은 하단에서 자세히 다루도록 하겠습니다.
4. 프로젝트에 사용된 노트를 한꺼번에 볼 수 있는 패널입니다. 노트에 대한 설명은 하단에서 자세히 다루도록 하겠습니다.
- 선택된 컴포넌트의 X, X 좌표 등 기본정보 값을 알려주는 영역입니다.
현재는 Base라고 되어있는데, 이것은 선택된 컴토넌트의 포토샵 레이어 명입니다.
- Assets : 선택된 컴포넌트 요소를 보여줍니다.
- 또한, 선택된 컴포넌트의 해당 파일 포맷(png, pdf등)을 다운받을 수 있는 영역입니다. 한 번의 클릭으로 iOS 각 해상도의 모든 이미지를 다운받을 수 있습니다. (현재 저는 iOS를 기본 type으로 지정하였기에 ios기준 예시입니다.)
4. 도큐먼트를 살펴보니 제가 지정한 폴더에 포토샵에서 해당 컴포넌트를 그릴 때 작성했던 타이틀로 @1x, @2x, @3x이미지가 생성되어있는 것을 확인할 수 있었습니다.
5. File : 해당 컴포넌트의 컬러값을 보여줍니다. 컬러값에 마우스 오버 후 생성되는 아이콘을 클릭하여 스타일가이드에 넣을 수 있습니다.
위의 패널은 이미지, 그래픽 컴포넌트를 선택했을 때의 화면이며, 텍스트 컴포넌트를 선택했을 때는 XML소스도 확인할 수 있습니다.
또한, 제플린은 같이 협업하는 사람들을 위해 서로 피드백을 위한 코멘트 남길 수 있는 노트기능을 제공합니다.
*command (윈도우에서는 ctrl) + 클릭을 누르면 코멘트를 입력할 수 있으며 상호 피드백을 할 수 있습니다.
제플린은 GUI 가이드를 이용하기 위한 목적 외에도 위에서 컬러 팔레트를 스타일가이드에 넣었던 것처럼 스타일 가이드의 제작도 가능합니다.
좌측상단의 < Dashboard를 클릭하여 초기화면으로 돌아가면 중앙상단에 Styleguide라는 탭이 있습니다. 이것을 통해 이 프로젝트에서 따로 저장해놓았던 스타일가이드를 확인할 수 있습니다.
프로젝트를 진행하면서 처음 ppt로 GUI 가이드 문서를 제작했을 당시,
가장 어려웠고 궁금했었던 부분이 포토샵에서 작업할 경우 기준해상도를 몇으로 해야하나?
만약 640 사이즈를 기준으로 한다면 x3@의 사이즈는 몇으로 가이드를 제작해야할까?
그렇다면 같은 x2@이미지를 사용하는 아이폰5,6,7의 가이드는 어떻게 해야 옳은 걸까?
등등 정확한 기준을 잡기가 어려웠었고
다른 디자이너들은 어떻게 GUI가이드를 제작하고 있는지 또 안드로이드, iOS별로 각각 몇 벌씩 준비하는지에 대해 많은 의견들을 물어야 했었습니다.
이번 기회에 제플린을 사용해 보고 리뷰하면서 앞으로 프로젝트 진행 시 제플린을 이용해 개발자와 디자이너가 협업한다면 그런 이슈들을 해결할 유용한 프로그램이될 거라는 생각이 듭니다.
지금까지 리뷰 외에도 추가적으로 더 공부하고 사용해 봐야 할 내용과 기능들이 많이 있습니다. 여러분들도 제플린공식 사이트(https://zeplin.io/) 및 여러 사례들을 읽어보고 직접 테스트 해보신다면 제플린이 어려운 프로그램이 아니라는 걸 느끼실 수 있을 것 같습니다.
– 가치디자인그룹 박솔아
[관련글]
스캐치& 제플린 실제 사용기
http://blog.rightbrain.co.kr/?p=9567
[참고자료]
제플린 공식사이트 https://zeplin.io/
https://blog.zeplin.io/photoshop-open-beta-now-3f8f502fc4de
UI/UX디자이너를 위한 스케치 완전정복 서적
[메인이미지 출처]
https://lesniakswann.com
One comment, add your’s.
한명주
제플린 에셋 등록에 대한 궁금증이 생겨 질문남깁니다.
만약 PC용 로고를 에셋 등록한 뒤
해당 로고를 끌어와 모바일버전으로 크기조절하여 작업하게 되면
모바일 버전에서는 해당 로고의 에셋정보를 리셋을 한 뒤 재등록 해야 하나요???
아니면 그대로 페이지 내보내기를 해도 무관한건가요??