[사용법] 제플린 플러그인 설치&내보내기 가이드

UX 디자인은 대규모의 협업 과정입니다. UI를 디자인하는 디자이너는 물론, 사용자 경험을 설계하는 UX 디자이너, 부드러운 사용성을 가능케 하는 개발자 등 여러 가지 실무의 담당자가 관여합니다. 자연스럽게, 이 과정에서 가장 중요한 것은 소통입니다. 모든 UX 설계에는 컨셉을 위한 디자인가이드가 있습니다. 그러나, 이를 문서로 정리하기, 디자인을 구현하는 개발 과정 중 이를 계속 확인하기란 여간 번거로운 것이 아닙니다. 따라서 UX 디자이너에겐 정확하게 전달하는 것뿐만 아니라, 자료를 빠르게 정리하고 검토하기 위한 특별한 수단이 필요합니다.

Adobe XD와 Zeplin을 함께 사용하면 디자인 사양과 화면을 개발자에게 전달할 수 있습니다. 이 글에서는 플러그인 설치, 파일 내보내기, 전달 전에 확인할 항목을 단계별로 정리합니다.

1. Adobe XD와 Zeplin이란?

Adobe XD는 Illustrator, Photoshop 등 대표적 디자인툴과 호환성이 좋아, 크게 선호되는 UX 개발 툴입니다. 그러나 디자이너가 심미성을 위해 결정한 아이콘 사이즈, 여백 등은 정수로 계산되기 어려운 경우가 있습니다. 키컬러도 헥사코드를 항상 외우고 있을 수는 없죠. 때문에, 개발 중인 프로젝트의 디자인 가이드라인을 개발자와 빠르게 공유하기 위해 등장한 Xd 플러그인이 제플린입니다.

Adobe XD와 Zeplin을 통해 익스포트된 파일은 Zeplin 앱을 통해 실제 구현 화면과 디자인 가이드라인을 한번에 확인할 수 있습니다. 또한, 버튼이나 폰트시스템 등 반복적으로 사용되는 요소는 단순히 복사 붙여넣기 하는 것이 아니라, 컴포넌트로 저장해 간단하게 활용할 수 있죠. 잘 정리된 컴포넌트는 작업을 용이하게 만들 뿐만 아니라, 통일감 있고 정돈된 디자인을 가능케 한다는 점에서 매우 중요합니다.

Adobe XD와 Zeplin은, UX 개발의 전 과정에 디자이너와 프로그래머가 긴밀히 연계되어 참여해야 된다는 점에서 큰 중요성을 갖습니다. 디자이너가 수정하는 화면과 이를 개발자가 시스템적으로 구현하는 화면을 동시에 볼 수 없기 때문에, 문서작성과 확인에 쓸모없는 시간을 쓰고 있지 않았나요? Adobe XD와 Zeplin은 실시간 화면 체크를 가능하게 할 뿐만 아니라, 문서 작성과 검토에 소요되는 시간을 줄여줍니다.

2. Zeplin과 플러그인 설치

1. 제플린 사이트 접속 및 회원가입(로그인)

제플린 프로그램 다운로드를 위해서, 제플린 공식 홈페이지(https://zeplin.io/)에 접속합니다. 그리고 로그인합니다. 계정이 없는 경우는 새로 생성해야 합니다.

2. 제플린 설치

로그인을 완료한 후, 자신의 운영체제에 맞춰 제플린을 설치해주세요. 이는 Adobe XD와 Zeplin 플러그인을 통해 내보낸 프로젝트를 확인하고, 이를 수정하기 위해 꼭 필요합니다. 웹 상에서의 수정도 가능하지만, 개발자의 코드 수정만 가능하니 유의하세요.

3. Adobe XD에서 플러그인 검색 및 Adobe XD와 Zeplin 설치

Adobe XD를 실행합니다. 메뉴에서 ‘플러그인’을 선택, ‘플러그인 검색’을 실행하세요. 검색창에 ‘Zeplin for Xd’를 입력합니다. 클릭해서 플러그인을 설치하세요. 설치가 완료되면, Adobe XD 화면에서 왼쪽 하단의 블록 모양을 클릭해, Adobe XD와 Zeplin 플러그인이 잘 설치되었는지 확인하세요. 이제 디자인 프로젝트를 Adobe XD와 Zeplin을 통해 내보내고, 협업할 준비가 다 되었습니다.

3. Adobe XD 파일을 Zeplin으로 내보내기

1. Xd 파일 열기 >메뉴: [파일>내보내기>제플린]

작업한 xd 파일을 엽니다. 상단 메뉴바에서 ‘파일’을 선택한 후 ‘내보내기’를 선택합니다. 그리고 ‘zeplin’을 선택합니다.

2. Xd 파일 열기>디자인>플러그인>제플린>내보내기

Adobe XD 화면 왼쪽 하단의 블록 모양을 클릭해, 플러그인 목록을 불러옵니다. 플러그인 목록이 로딩되면, xd 제플린을 선택합니다. 해당 플러그인 화면에서 ‘내보내기’를 선택해, 디자인 프로젝트를 제플린으로 내보냅니다.

4. 플러그인 없이 협업하는 Pixso

앞서 언급했듯, Adobe XD와 Zeplin을 활용하기 위해서는 Adobe XD와 Zeplin의 계정 및 요금제 조건을 각각 확인해야 합니다. Zeplin의 프로젝트·멤버 제한과 요금은 플랜에 따라 달라질 수 있으므로, 현재 공식 안내를 확인해야 합니다. 더욱이 신입 디자이너거나 학생이라면 비용이 부담될 수 있습니다. 이런 분들에게 딱 맞는 대안이 있습니다.

바로, 웹 기반의 UX 디자인 저작도구이자 협업툴인 Pixso입니다. Pixso만이 가지는 장점은 아래와 같습니다.

첫째, Pixso는 무료 플랜을 제공하지만, 기능과 사용량은 현재 요금제 조건을 확인해야 합니다. Adobe XD와 Zeplin 플러그인을 무료로 사용한다고 하더라도 Adobe XD를 사용하기 위해서는 Adobe 멤버십이 필요합니다. 혹은 7일간만 사용할 수 있죠. 반면에 Pixso는 회원가입 후 사용 가능한 기능과 한도는 현재 요금제 안내에서 확인할 수 있습니다.

둘째, Pixso는 협업을 위한 플러그인이 필요하지 않습니다. GUI 가이드를 확인하고 다듬기 위해, Adobe XD와 제플린을 사용한다면, 모두를 왔다갔다하는 번거로움을 감수해야 합니다. 그러나 Pixso는 이와 달리, 한 화면에서 모든 멤버의 댓글과 수정작업을 확인할 수 있습니다. 실시간 화면 업데이트 기능도 제공하므로, 더욱 빠르고 편리한 협업을 가능케 합니다. 또한, 작업한 화면을 URL을 통해 공유하여 시뮬레이션할 수 있습니다. 이는 프로토타입 테스트를 더욱 간편하게 만들어 빠르게 작업할 수 있게 합니다.

셋째, Pixso는 다양한 디자인 템플릿을 제공합니다. 디자인 저작도구이자 협업 툴이면서도 다양한 디자인 애셋을 보유하고 있기 때문에, 더욱 빠르게 프로토타입을 개발할 수 있습니다. UI뿐만 아니라, 포스터나 배너 등 그래픽 요소도 다양하게 준비되어 있기 때문에 더욱 빠르게 디자인의 완성도를 올릴 수 있습니다. 또한, 이미 Adobe XD나 스케치, 피그마 등을 이용해왔더라도, 지원되는 파일 형식과 가져오기 조건은 사용 전에 확인해야 합니다. 따라서, Pixso의 디자인 애셋과 협업 툴을 이용해 개발한다면 더욱 편리한 작업 환경을 구축할 수 있습니다.

마무리

Adobe XD 플러그인 추천에 도움을 좀 받으셨나요? Adobe XD와 Zeplin 플러그인에 대한 궁금증도 풀리셨길 바랍니다. 제플린 등의 협업툴을 이용하는 이유는 GUI 가이드를 배포하고 검토하는 시간을 아끼고, 과정을 편리하게 만들어 디자인 의도를 개발자에게 전달해 프로젝트의 심미성을 올리는 것에 있습니다. 이러한 목적을 달성할 수 있는 더욱 빠르고 편리한 방법이 있다면, 꼭 정해진 방법이 아니더라도 한번 시도해보는 것이 좋겠죠. 본 글에서 추천하는 Pixso는 무료이며, 공동 저작을 통해 실시간으로 협업이 가능하고 URL을 통한 프로토타입 테스트가 가능합니다. 풍부한 디자인 소스를 제공하는 것은 말할 것도 없죠. 꼭 시도해보시고, 각자에게 맞는 UX 디자인 개발 환경을 찾아가십시오.