제플린(Zeplin) 소개 및 설치 방법

  제플린(Zeplin)은 디자이너와 개발자와의 협업을 위한 대표적인 디자인 협업 도구입니다. 디자이너가 단순히 포토샵이나 스케치(Sktech)를 이용해 작업한 화면을 개발자에게 전달해 주는 것이 아니라, 실제로 웹 사이트에서의 화면 구성요소 (글자 폰트, 글자 크기, 여백 값, 구체적인 색상 등)을 상세하게 개발자가 확인할 수 있도록 해줍니다. 특히 아이콘이나 그림 파일 등을 개발자가 바로 제플린에서 다운로드 받을 수 있다는 점은 매우 강력한 장점인 것 같아요.

 

  ▶ 제플린 사이트: https://zeplin.io/

 

  제플린을 이용하는 방법은 간단합니다. 가장 먼저 제플린(Zeplin)에 접속하여 로그인을 진행합니다. 다음과 같이 다운로드 버튼을 누르면 제플린을 다운로드 할 수 있어요. 사실 개발자 입장에서는 굳이 다운로드 할 필요도 없습니다. 웹 사이트로 이용할 수 있어요.

 

 

  이후에 다음과 같이 포토샵과 제플린(Zeplin)을 연동할 것인지에 대한 내용을 물어봅니다. 본인이 디자이너라면 포토샵이나 스케치(Sketch)와 같은 디자인 소프트웨어와 연동을 진행하셔야 합니다.

 

.

  다음과 같이 포토샵 실행 파일을 입력하면 됩니다. (사실 최근 제플린은 CC 2015 버전 이상의 포토샵을 지원하고 있기 때문에, 아래 사진에 나오는 CS6은 사용할 수 없답니다.)

 

 

  아무튼 개발자 입장에서는 반드시 포토샵을 연동할 필요는 없기 때문에, 다음과 같이 단순히 로그인 이후에 프로젝트를 생성할 수 있습니다.

 

 

  프로젝트를 생성할 때는 iOS 앱, 안드로이드(Android) 앱, 웹(Web) 중에서 하나를 선택할 수 있습니다.

 

 

  이제 다음과 같이 포토샵 등과 연동할 수 있는 내용이 나옵니다.

 

 

  일반적으로는 팀 단위로 제플린 프로젝트를 하나 생성한 뒤에 디자이너가 작업한 디자인 파일을 업로드 하면, 개발자가 이를 확인하는 방식으로 진행합니다.