어도비 XD 제플린 연동하기
- IT/web&dev
- 2021. 8. 21.
어도비 XD 는 UI 디자인을 할 수 있는 도구입니다. 제플린과 연동해서 디자이너와 퍼블러셔 개발자가 협업작업도 가능해서 많은 분들이 사용하고 있는데요. 예전에는 스케치를 많이 썼고 아직도 현업에서 사용하고 계신 회사들이 있는지는 잘 모르겠지만 저는 처음부터 XD 만 사용해서 XD 에 익숙한 편입니다. 오늘은 제플린과 어도비 XD 연동하는 방법을 살펴보겠습니다.
제플린
제플린은 디자인 작업물을 개발자에게 전달할 수 있는 툴입니다. 이전에 포토샵에서 작업한 디자인을 개발자에게 전달한다면 아마도 중간에 퍼블리셔가 완전한 작업물을 만들기 전까지는 작업물의 수치나 이미지 요소들을 가져다 쓰기가 불편해서 디자이너는 디자이너대로 이미지요소를 모아서 보내줘야하고 수치도 각각 알려줘야만 했습니다. 지금은 제플린이 있기 때문에 디자이너, 개발자 모두가 빠르게 협업할 수 있게 되어 있죠.
제플린은 별도의 앱도 있고 브라우저에서도 바로 확인이 가능합니다. 1개 프로젝트에 대해서는 무료로 사용이 가능하고 유료플랜으로 사용해서 더 많은 작업물을 협업할 수 있습니다.
Zeplin
A structured workspace to publish designs, where the entire team can collaborate to ship beautiful products together
zeplin.io
제플린 사용하기
제플린은 위 홈페이지에 접속해서 로그인을 하면 제플린을 이용할 수 있는 상태가 됩니다. 그리고 연동할 프로그램을 연결하면 되는데요.
연동하면 프로젝트에 작업물들이 클라우드로 올려집니다. 계정에 초대, 공유해서 다른 작업자와 협업하는 방식입니다.
따로 이미지를 만들고 가이드를 만들지 않아도 스타일 가이드가 저절로 생성이 되기 때문에 생산성이 올라가죠. 마우스로 정보가 필요한 부분을 클릭하면 사이즈, 위치, 마진, 폰트, 컬러값 등을 모두 확인할 수 있고. CSS 까지 생성해주기 때문에 그대로 복사해서 가져다 쓰고 적절히 수정하면 됩니다.
브라우저보다 앱을 선호는 경우라면 제플린 홈페이지 아래쪽에 있는 링크로 앱을 다운로드 해서 이용할 수 있습니다. 기능엔 거의 차이가 없습니다.
어도비 XD 제플린 연동하기
어도비 XD 를 실행합니다. XD 사용법에 관해서는 별도로 포스팅하겠습니다. 작업한 프로젝트들 중에서 하나를 선택합니다.
제플린과 연동할 프로젝트를 선택하고 내보내려면 제플린 플러그인이 어도비XD 에 설치되어 있어야 합니다. 왼쪽 맨 아래 블럭모양의 버튼을 누르면 플러그인을 관리할 수 있습니다. 설치된 플러그인 목록이 보이고 추가할 수 있는 + 버튼도 보입니다. + 버튼을 누릅니다.
플러그인 추가를 선택하면 플러그인을 선택할 수 있는 마켓플레이스 창이 뜨는데요. 여기서 모든 플러그인을 선택하고 아래쪽으로 이동하면
제플린을 선택할 수 있습니다. 제플린 플러그인을 설치합니다.
설치된 플러그인은 플러그인 관리에서 확인할 수 있습니다.
설치가 완료되면 플러그인 목록에 zeplin for XD 가 추가되어 있는 것을 확인할 수 있게 됩니다. 이제 제플린과 공유할 준비는 된 상태인데요.
기존에는 아트보드나 오브젝트를 선택하고 파일 >내보내기>Zeplin을 선택하면 내보내기가 됐었는데 지금은 방법이 바꼈습니다. 위에 보이는 플러그인 목록에서 Zeplne for XD 우측에 있는 화살표를 누르면 Open Plugin, Export SElected 메뉴가 나오는데요 이때 Export Selected 를 선택하면 제플린으로 내보낼 수 있습니다. 먼저 제플린에는 관리할 프로젝트가 하나 생성되어 있어야 합니다. 저는 TEST 라는 프로젝트를 생성해 두었습니다.
생성해둔 프로젝트를 선택하고 export 하면 더 크게 내보낼 것인지 동일한 크기로 내보낼 것인지 선택하는 화면이 나타납니다. 원하는 사이즈를 선택하고 내보내면 됩니다.
정상적으로 XD에서 제플린으로 내보내기가 완료되면 대시보드에 내보낸 아트보드를 확인할 수 있습니다.
제플린에서 이미지 파일 내려받기
제플린에서 타이틀이나 이미지를 블럭으로 내려받아야할 경우가 있습니다. 이럴 땐 먼저 XD 에서 이미지를 다운로드할 수 있도록 한가지 작업을 해줘야하는데요. 예를 들어 아래 이미지의 버튼을 제플린에서 내려받을 수 있도록 하려면 XD에서 해당 요소를 선택하고 XD우측하단의 "내보내기에 대해 표시"를 체크해 합니다. 그 다음에 다시 제플린으로 내보내기를 합니다.
제플린에서 내보내기한 아트보드로 들어가서 해당 버튼을 선택하면 오른쪽에서 버튼을 PNG, WebP, SVG 등 다양한 포멧으로 내보내기 할 수 있습니다.
마치며
어도비 XD 와 제플린을 연동하고 제플린에서 이미지를 받기 위해서 XD에서 내보내기 설정을 하는 방법까지 살펴봤습니다. 어도비 XD는 7일간은 무료로 사용해볼 수 있습니다. 유료로 사용하게 되면 11000원/월에 이용 가능합니다.
고맙습니다.
'IT > web&dev' 카테고리의 다른 글
| Git이란 무엇일까? 최대한 쉽게 정리해봤습니다. /사용법 (0) | 2021.08.28 |
|---|---|
| CSS 애니메이션 만들기 (1) 준비 / 기초 (2) | 2021.08.24 |
| CSS 셀렉터 활용하기 (0) | 2021.08.20 |
| CSS 이해하기 (0) | 2021.08.20 |
| 파이썬 아나콘다 / 차이 / 설치 / 사용법 (0) | 2021.08.19 |