Adobe XD 디자인을 Zeplin으로 Export하는 방법

 

Adobe XD에서 앱 디자인과 프로토타이핑까지 마쳤다면

이제 디자인 요소들을 준비해야죠!

 

디자인에 필요한 요소들을 안드로이드 프로젝트에 다 갖추고 개발을 시작하는 것이 편하고 좋거든요.

개인적으로 개발을 마치고 후에 디자인을 입혀본 적이 있는데 원하는 모양도 안 나오고

Activity 쪽 코드도 수정해야 하는 불상사가 발생했었습니다. (이건 물론 아키텍처나 구현 방식에 따라 얘기가 달라지지만요)

 

오늘은 이 디자인 요소들을 클라이언트 개발자가 정말 개발하기 편하게 도와주는 도구를 알려드릴 거예요.

그리고 XD로 만든 앱 디자인을 이 도구에 옮겨볼 예정입니다.

 

바로 Zeplin이라는 도구인데요.

이 도구 덕분에 디자이너와 개발자 사이의 거리가 많이 가까워졌다고 얘기들 많이 하더라고요.

 

일단 Zeplin 프로그램을 설치해줍니다.

Windows 10과 Mac 모두 지원하니 사이트에 가셔서 다운로드하시면 됩니다. 

 

 

Zeplin 계정을 만들어주시고 프로그램 설치까지 완료하시면 이런 화면이 나옵니다.

Create Project를 눌러서 디자인을 가져올 프로젝트를 만들어주세요

 

 

프로젝트 타입을 선택하는 화면인데요.

현재 안드로이드 앱 개발에 관한 얘기를 하고 있기 때문에 Android 프로젝트를 선택해줍니다.

 

각 플랫폼마다 다루는 단위가 다르기 때문에 알맞게 설정해주는 것이 당연히 좋겠죠?

 

이제 Adobe XD로 돌아와서 만든 디자인을 내보낼 준비를 할 건데요.

Zeplin으로 디자인이 넘어가면 XD에서 만든 버튼이나 이미지들이 다운로드할 수 있는 Asset이라는 형태로 인식됩니다.

 

그런데 이게 다 알아서 되는 것은 아니고요.

이렇게 이미지로 사용해야 하는 요소들을 눌러서 "내보내기에 대해 표시" 설정에 체크를 해주어야 합니다.

그래야 다운로드할 수 있는 Asset으로 인식이되니 주의해주세요!

 

 

이제 왼쪽 상단에 메뉴를 눌러서 내보내기 > Zeplin을 눌러줍니다.

 

 

 

Zeplin 프로그램이 설치돼있어야 이렇게 연동이 된답니다.

아까 만든 프로젝트를 선택하고 EXPORT 버튼을 눌러줍니다.

 

사이즈를 선택하는 화면이 나오는데요.

대체로 mdpi를 선택해주면 됩니다.

이제 DONE 버튼을 눌러줍니다.

 

 

 

 

Adobe XD의 모든 화면들이 Zeplin으로 넘어옵니다.

 

그리고 아까 "내보내기에 대해 표시" 설정을 한 요소들을 눌러보면

위 그림처럼 다운로드 받을 수 있는 Asset으로 표현이 됩니다.

 

Android 프로젝트를 만들어 놓으면 이 요소들이 알아서 res 폴더에 들어가게끔 할 수도 있습니다.

정말 편리하죠?