chapter 18.4 - Zeplin, Figma

이전 챕터에서 팀의 구조를 보았습니다. 

그중에서 화면의 구성을 좋게 보이기 위해 디자이너와 함께 작업하는 경우도 있습니다.

디자이너와 개발자 간의 소통을 위한 도구를 소개하겠습니다.

 

디자이너의 경우에는 자신이 사용하는 디자인 도구가 따로 있을 것입니다.

만약 개발자가 디자인을 이용하고 싶을 경우에는 디자이너와 같은 디자인 도구를 다룰 줄 알거나, 아니면 디자이너가 가이드를 하나하나 PPT로 만들어서 소개를 해야 합니다. 말만 들어도 복잡하고 귀찮을 것 같습니다.

 

디자이너가 작업한 디자인 자료를 개발자가 따라 만들기 편하도록 정리해주는 기능을 가진 사이트를 소개하겠습니다.

다양한 사이트가 있지만 인강에서 소개하는 Zeplin을 알려드리겠습니다.

사이트의 경우에는 제가 따로 프로젝트를 준비한 적이 없기 때문에 ㅠㅠ 예시 없이 글로 소개하겠습니다.

 

https://zeplin.io/

 

 

 

장점을 알아보겠습니다.

프로젝트를 만들게 되면 로그인 화면부터 메인화면, 세부화면까지 실제 앱처럼 디자인이 되어 있습니다.

그러면 화면의 크기나 RGB 값, 여백 또는 간격 등의 스타일 가이드가 자동으로 제공합니다. 위 사진처럼 나옵니다.

마우스를 가져다 놓으면 RGB 값이 나오고, 여백의 크기가 다 나와있어서 따라 하기 쉽게 가이드가 나와있습니다.

이미지가 필요한 경우에는 디자이너 분이 사이트에 올려놓으면 바로 다운을 받아 사용할 수 있게 되어있습니다.

SLACK 등의 업무용 메신저와 챗봇 기능이 결합되어있어 디자이너가 작업을 완료하여 업로드한 경우 챗봇이 자동으로 메시지를 뿌려 따로 메시지를 보내지 않아도 됩니다.

화면에 직접 댓글을 달아서 직관적인 커뮤니케이션이 가능해서 커뮤니케이션 비용이 절감되고 개발의 효율이 상승하여 수익성 향상에 도움이 됩니다.

화면에 직접 댓글을 다는 것은 만약 이미지가 업로드되지 않았을 경우에는 이미지가 들어가는 부분에 메모처럼 글을 올려 어느 부분을 원하는 것인지 직관적으로 볼 수 있다는 의미입니다.

그러므로 위치나 무엇을 의미하는지 바로 알 수 있어 커뮤니케이션을 더 이상 안 해도 되고, 그만큼 시간이 절약되어 개발 효율이 상승합니다.

 

단점을 알아보겠습니다.

유로 도구이기 때문에 한 계정 당 하나의 프로젝트만 무료로 업로드가 가능합니다.

그렇지만 이 프로젝트를 공유하는 것은 무한으로 가능하기 때문에 초대받는 것은 무제한으로 보면 됩니다.

개발자의 경우 직접 디자인을 업로드하지 않기 때문에 초대받을 계정만 있으면 될 것 같습니다.

 

 

Figma 사이트의 경우에도 비슷한 툴을 이용하기 때문에 둘 중에 하나를 이용하는 것이 좋을 것 같습니다.

 

https://www.figma.com/

 

 

요즘은 둘 중 하나를 다를 줄 아는 디자이너 분이 많기도 하고 필수라고 합니다.