[Adobe XD][Zeplin] 개발자와 디자이너 헙엽툴 zeplin을 이용해보자!

나는 디자인과 개발을 동시에 하고있다.

두 분야를 동시에 하기 전에는 협업에 관련해서는 전혀 생각하지 못했다.

하지만 작년 말부터, 올해부터는 입장이 디자이너가 될 수 있고 개발자가 될 수 있다보니

무엇보다 협업하는 방법이 중요하다고 생각되었다.

[개발자와 디자이너 협업툴 Zeplin을 이용해보자!]

* 제플린(Zeplin)을 왜 사용하죠?

기획단계에서 화면설계를 완료한 후 디자이너에게 그 기획 문서를 전달합니다.

디자이너는 그 문서를 기준으로 화면을 디자인합니다.

디자이너도 또한 디자인을 마무리하면 GUI가이드 문서를 작성하는데요,

왜 그렇게 디자인을 했는지에 대한 의도를 설명하고 기준을 전달해야 원래의 디자인에 가깝게 개발이 되어지기 때문이죠.

그러한 일련의 귀찮은 과정이 생략되면 최종 결과물에서 디자이너가 표현하고자 했던 퀄리티와는 조금 동떨어질 수 있습니다.

외주로 비교하자면, 고객이 작업지시서 없이 구두로 '~을 만들고 싶어요.'라고 전달만 한다면

당연히 외주 결과물에 대한 높은 퀄리티를 보장받을 수 없다는 것과 동일한 맥락입니다.

하지만, 프로젝트진행이 한가지라면.. 일정이 넉넉하다면 꼼꼼한 GUI가이드 문서를 작성할 수 있겠지만

보통은 최소 2가지 프로젝트를 이행하게 됩니다. 그렇기에 그 문서 작성에 많은 시간을 할애할 수 없을 뿐더러,

그렇게 작성해도.. 개발팀에서 문서보고.. 첨부파일열고.. 다시 문서보고.. 번거롭기는 매한가지기 때문입니다.

수고를 들였지만, 서로가 번거롭기는 변함이 없는거죠 :-(

그렇기에 GUI가이드를 확인하면서 개발자가 필요한 Assets을 바로바로 다운로드 받아 사용할 수 있고,

앱에 공통적으로 적용되는 폰트값, 컬러값, 컴포넌트 등등의 정보를 확인할 수 있는 제플린을 사용합니다.

* 제플린(Zeplin)을 사용하면서 주의할 점은요?

1. 디자인 파일 아트보드 및 그룹 레이어 정리

   제플린에서 디자인 파일을 import할 때, 아트보드 혹은 그룹에 포함된 레이어상의 모든 개체를 가져오기 때문에

   개체간의 정확한 정보를 개발자에게 제공하려면 필요없는 레이어나 마스크 영역 등등은 모두 정리한 후

   제플린으로 내보내야 합니다.

2. 폰트 가이드 정확도 확인

    제플린에서 자동적으로 폰트, 색상, 사이즈 등등의 가이드가 나온다해도 정확하게 그 정보가 맞게 나오는지

    꼭 확인을 한 후에 넘겨야 합니다. 간혹 다르게 나올 수 있으므로 작업한 사양과 다르다면 제플린 파일에

    메모를 삽입하여 그 치수를 정정하거나 소수점의경우 반올림을 하는 등의 규칙을 정해 놓습니다.

3. 리소스 파일명 확인

    리소스를 제플린 파일에서 집적 다운로드 받을 수 있지만, 파일명이 다르게 설정될 수 있습니다.

    이 부분은 꼭 확인하고 개발자와 협의를 봐야할 사항인 것 같습니다.

    하지만, 기본적으로 디자인 파일 제작 단계에서 레이어 이름은 각각 꼭 정해주셔야 합니다.

* 제플린(Zeplin) 시작하기

서론이 너무 길었습니다.

이제 제플린 사이트로 넘어가서 가입한 후 운용 OS에 맞게 프로그램 다운로드하여 사용해봅니다.

https://zeplin.io/

단, 유료 서비스이기에 프로젝트는 한개만 가능합니다 :-(

일단 단일 프로젝트로 한번 사용해보시고 괜찮으시면 유료 구매하셔서 사용하시기를 추천합니다.

1. 제플린 프로젝트 생성

디자인 파일에서 제플린으로 내보내기 전에 제플린에서 'Create First Project'를 합니다.

그 후에 맞는 format을 선택하여 create를 합니다.

프로젝트를 생성하면 왼쪽에 친절하게 가이드가 보입니다.

오른쪽 메뉴부분에서 맨 위에서부터 다음의 메뉴로 구성되어있습니다.

1) 프로젝트 이름 변경

2) 제플린 프로젝트 공유하기

3) 설명 입력

4) 언어 설정

5) 공유되고 있는 멤버 목록

2. 디자인 파일 내보내기(Adobe XD)

디자인 내보내기는 각 개별 아트보드, 전체 아트보드 둘다 가능합니다.

대신, 제플린 프로젝트에서 Assets목록을 자동으로 업로드하고 다운로드 받게 하려면

다음 이미지와 같이 '일괄 내보내기에 대해 표시'에 체크를 하셔야 합니다.

그리고 내보낼 아트보드를 선택 하고 파일 > 내보내기 > Zeplin을 선택합니다.

파일을 내보내면 제플린에서 import를 합니다.

그 다음으로 해상도를 정할수 있는데, 웹디자인의 경우 원본 해상도를 유지하니 1x그대로 불러옵니다.

상단탭에서 Dashboard는 프로젝트 관련된 리스트와 상세정보를 볼 수 있는 탭이고,

그 옆의 Styleguide탭에서는 Dashboard에서 추가한 스타일(폰트, 컬러, 컴포넌트)을 종합적으로 불 수 있습니다.

3. 제플린 프로젝트 구성요소 확인

프로젝트를 선택해서 들어가서 아무것도 선택하지 않았을 때, 처음으로 보는 화면부터 확인합니다.

1) 프로젝트에 대한 개요를 보여줍니다.

5) 개요에서 그리드를 활성화시키면 디자인파일에서 적용한 그리드를 그대로 볼 수 있습니다.

2) 파일에 적용된 컬러값을 확인 할 수 있습니다.

3) Assets을 확인하고 다운로드 할 수 있습니다. (일괄 다운로드 가능하며 확장자는 PNG or SVG로 가능)

    * 위 내용에서 '2.'번 항목, 레이어 '일괄 내보내기에 대해 표시'를 설정해 놓은 상태에서 import한 파일만 Assets이 업로드 됨

    * 설정에서 파일 이름 방식을 정할수 있습니다.

4) 프로젝트에 대한 notice를 입력할 수 있습니다.

제플린 사용에 처음이라면 각각의 탭을 세세하게 눌러서 먼저 확인해보는것이 좋습니다.

4. 가이드 확인 및 스타일가이드에 요소 등록

1) 개체를 선택하면 오른쪽에서 사이즈 사양을 확인할 수 있습니다.

2) 기준개체를 선택하고 거리를 측정하고 싶은 상대 개체를 선택하면 간격을 확인할 수 있습니다.

3) 해당 폰트 스타일과 색상값을 '스타일가이드(Styleguide)'에 별도로 추가할 수 있습니다.

4) 해당 CSS스타일을 코드로 확인할 수 있습니다.

5) 하단의 말풍선 아이콘을 눌러 메모를 삽입할 수 있습니다.

5. 프로젝트 공유

멤버스에서 오른쪽 상단 설정 버튼을 누릅니다.

1) Invite를 선택해 파트너를 초대합니다.

2) 프로젝트를 같이할 파트너의 이메일을 입력합니다.

    * 단, 파트너도 제플린 계정이 가입이 되어있어야 합니다.

3) 링크로도 공유 할 수 있습니다.

공유가 완료되면 그림과 같이 멤버스에 추가되어 보입니다.

기본적인 제플린 사용방법은 위와같습니다.

제플린을 통해 디자이너와 개발자가 실제 프로젝트를 한번 수행해 본다면 능숙하게 다룰수 있을 것입니다.

그래야 제플린만 온전하게 사용하는 것이 효율적인지, 에셋 관리는 별도로 하던 방식대로 가는것이 좋을지

선택할 수 있게 됩니다 :-)