제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다. 제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다.

이 전에는 네이티브앱 디자인 시 디자이너가 ppt에 GUI가이드 문서를 하나씩 수작업하여 개발자에게 넘겼었습니다. 그리고 이런 수작업을 보다 빠르고 편리하게 하기 위해  어시스터 PS (Assistor PS) 라는 프로그램이 생기기도 하였습니다.
저 또한 어시스터 PS 출시 후 디자인 가이드를 작업할 때 종종 어시스터 PS를 많이 애용했습니다. 포토샵과 연동하면 좌표값, 가이드 박스, 크기 값을 자동으로 생성하여 추출할 수 있었습니다.

*assistor PS 사용 예시(assistor PS공식홈페이지)

그렇게 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나고 있는 추세입니다.

*zepline 화면 예시(zepline공식홈페이지)

 

제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해줍니다. 모바일 해상도별 가이드를 일일이 수작업할 필요도 없습니다. 특히 스케치와도 연동돼 포토샵과도 연동할 수 있다는 것은 ios와 Windows 사용자를 동시에 겨냥한 제품이라고 할 수 있을 것 같습니다.

그러면 지금까지 제가 경험해본 제플린에 대한 소개 및 리뷰를 정리하도록 하겠습니다.
이번 리뷰에서 저는 포토샵과 제플린을 함께 사용했습니다.

 

1. 제플린 설치 및 프로젝트 초기 세팅

먼저 제플린 웹사이트(http://zeplin.io)에서 회원가입 및 제플린을 다운로드합니다.

무료회원으로도 사용할 수 있습니다. 다만 무료회원일 경우 한 아이디 당 프로젝트를 한 개 무료로 사용 가능합니다. (여러 아이디를 생성하여 편법으로 사용 할 수도 있겠지요) 만약 보다 많은 프로젝트를 사용해야 한다면 유료로 업그레이드해야 합니다.

다운받은 제플린을 실행하면 자동으로 포토샵에 플러그인이 설치됩니다. 만약 자동으로 설치되지 않는다면, 처음 제플린을 실행할 때 나왔던 안내에서 연동되는 페이지에서 Install Plugin…을 클릭하여 플러그인을 설치할 수도 있습니다.

 

 

설치된 후에는 포토샵을 다시 실행하여 Window > Extensions 메뉴로 가보면 제플린(Zeplin) 플러그인이 생성된 것을 볼 수 있습니다. 이것으로 디자인을 제플린으로 내보낼 수 있습니다.

 

 

제플린에서 첫 프로젝트를 생성했을 시, 프로젝트의 대상 기기 타입을 묻는 팝업 창이 나타납니다.

 

*제플린 실행 후 Creater first project 버튼을 누르면 대상 기기 타입을 묻는 팝업이 나타남

 

제플린은 안드로이드에서는 dp/sp와 XML로, iOS에서는 pt와 jective C/Swift로 선택한 타입에 따라 그에 맞는 디자인 가이드를 생성해 줍니다.
저는 이번에 ios로 작업하였기 때문에,  ios 초기셋팅을 마친 프로젝트를 생성해 두었습니다.

 

2. 포토샵과 제플린 연동하기, 제플린으로 작업한 프로젝트 내보내기

제플린을 이용하기 위해서는 포토샵에서 아트보드 기능을 사용하여야 합니다. 포토샵의 아트보드안에 있는 레이어 중 제플린으로 내 보내기 할 레이어를 선택하여 포토샵의 제플린 패널에서 회색의 ‘Mark as asset’버튼을 먼저 눌러줍니다.  개별 레이어 혹은 그룹으로도 레이어를 선택가능합니다.

 

선택됐던 레이어의 이름에 -e-가 추가된 것을 확인할 수 있습니다.

 

Mark as asset을 끝냈으면 아트보드를 선택하여 제플린 패널의 ‘Export selected artboads to Zeplin’ 버튼으로 제플린으로 Export 합니다.

 

제플린에서 생성했던 해당 프로젝트에 import 시켜줍니다.
이 전에 mark as asset 버튼을 통해 Marking 된 이미지들은 제플린에서 설계 중인 플랫폼에 따라 개발에 필요한 다양한 사이즈, 형식으로 내 보내집니다.

성공적으로 포토샵에서 제플린으로 Import 되었다면, 제플린 우측상단에 완료되었다는 토스트 팝업(1)이 뜹니다.
이제 해당 프로젝트를 클릭하여(2) 구성요소를 자세히 볼 수 있고, 디자인 가이드를 작업할 수 있습니다.
 

3. 제플린 인터페이스 구성요소

좌측의 컨버스 영역에서는 생성되었던 프로젝트 리스트들이 보여집니다. 이곳에서 프로젝트를 삭제할 수도 있고 생성된 프로젝트의 요소 및 가이드를 확인할 수도 있습니다.

1. 프로젝트의 제목을 입력 가능한 곳입니다. 클릭하여 수정할 수 있습니다.
2. Type : 프로젝트를 생성할 때 지정했던 현재 프로젝트의 디바이스 종류입니다.
3. Density : 프로젝트 생성 시 지정했던 해상도 표시이며, Type과는 다르게 첫 생성 후에도 클릭하여 변경이 가능합니다.
4. Web app : 현재 프로젝트를 웹앱으로 볼 수 있도록 공유 가능한 링크를 제공합니다.
5. 현재 프로젝트를 같이 사용하는 멤버리스트입니다. Invite 버튼을 통해 협업하는 다른 디자이너나 개발자를 초대하여 같이 볼 수 있습니다.

 

이제 프로젝트를 클릭하여 들어가 보도록 하겠습니다.

크게 좌측은 캔버스 영역 우측의 그레이컬러 면으로 된 부분은 각 구성요소의 정보를 보여주는 패널 부분입니다.
우측 상단에 있는 네 개의 아이콘을 자세히 보면 다음과 같습니다.

 

1. 현재 프로젝트의 정보를 보여줍니다.
2. 현재 프로젝트에서 사용된 모든 컬러값을 보여줍니다. 컬러값에 마우스 오버 후 생성되는 아이콘을 클릭하여 스타일 가이드에 넣을 수 있습니다.
3. 현재 프로젝트에서 사용된 모든 요소를 보여줍니다.

한꺼번에 포맷을 저장할 수 있습니다. Asset 패널에 대한 설명은 하단에서 자세히 다루도록 하겠습니다.

 

*슬라이스 아이콘을 눌렀을 때 나오는 화면

 

4. 프로젝트에 사용된 노트를 한꺼번에 볼 수 있는 패널입니다. 노트에 대한 설명은 하단에서 자세히 다루도록 하겠습니다.

1. 선택된 컴포넌트의 X, X 좌표 등 기본정보 값을 알려주는 영역입니다.
   현재는 Base라고 되어있는데, 이것은 선택된 컴토넌트의 포토샵 레이어 명입니다.

2. Assets : 선택된 컴포넌트 요소를 보여줍니다.
3. 또한, 선택된 컴포넌트의 해당 파일 포맷(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