XD를 이용한 이미지파일의 추출이나 다른 포맷으로의 내보내기가 굉장히 다양한 편이고, 최근에는 flutter 파일로도 나가기도 하지만, 기본적인 구성 및 프로토타입 또는 작업 진행하는데 기준을 잡고 작업, 변경적용하는데에는 제플린이라는 플러그인이 굉장히 유용합니다.
기본적으로 한개 프로젝트를 생성하는데에는 무료고, 세가지 이상 생성하기 위해서는 비용을 지불해야 하지만, |자세한 설명은 생략합니다.|
제플린으로 내보내기를 하게되면 생기게되는 장점으로는
1. 이미지 작업에 있어 굉장히 수월하다
- 이미지 작업을 해놓고, 수정을 필요로 하는 경우 해당 이미지에 대한 수정 후 다시 내보내기를 하면, 이미지가 변경됩니다.
2. 개발자와의 작업에서 굳이 메일을 보내줄 필요가 줄어든다.
- 프로젝트의 설정에 따라 Desktop Web(pixel 단위), iOS(pt 단위), Android(dp 단위) 로 적용되어 나타나기 때문에 굳이 형태를 가지고 고민할 필요가 많이 줄어들기도 합니다. 나중에 보여드리기도 하겠지만, alt키를 누르면 %단위 수치로 변형되기 때문에, 비율로 맞추는 문제에서도 자유로와요.
게다가 조금만 신경써주면 모든 스크린 안에서 이미지파일을 바로받아서 적용시킬 수도 있어서 굳이 세세한 항목들에 대해 찾아다닐 필요가 줄어들죠.
3. 개발하는 입장에서 같은 이미지를 중복해서 받을 필요가 줄어든다.
- 작업물 중에서 공통적으로 적용되는 이미지파일을 별도의 파일에 담아두고 component처럼 필요에 따라 사용할 수 있기때문에, 나중에 이미지파일의 경로를 잃어버렸다거나, 없어졌을 경우 굳이 찾아다닐 필요가 없어져요.
우리는 일단 Xd를 사용하고 있으니까, 제플린먼저 연결해주러갑니다.
zeplin.io에서 받으실 수 있어요. 굳이 가입하기 귀찮기도하고, 구글로 로그인하셔도 됩니다.
처음 가입하시게되면, 오른쪽 상단에 프로젝트 생성이라는 메뉴를 통해 프로젝트를 먼저 만들어주셔야 합니다.
웹, 아이폰, 안드로이드 대상으로 추출하게됩니다. 프로젝트의 삭제는 자유롭지만, 가급적 작업한 내용을 날리기는 싫으니까.. 주로 작업하시게 될 프로젝트로 맞춰서 생성해주시는게 좋아요.
이제 플러그인을 연결해주시면 됩니다.
설정에서 플러그인 자동설치를 하셨거나, 포토샵플러그인을 설정하셨으면 거의 다 되었습니다.
Xd 파일에서 작업하다가, 내보낼 아트보드를 선택하고, windows기준으로 ctrl+alt+e를 누르시면 단축키로 내보내기가 됩니다.
내보내기에서 선택하셔서 zeplin으로 내보내기 하실 수 있고,
제플린이 열리면서 내보낼 대상을 묻습니다.
선택하시고, note를 추가하셔도 좋고, 하단에 Update Screens and Components With Same Name의 경우는 파일이 중복되지 않도록 주의하시면서 관리하시는 경우 체크, 이후 중복되는 파일을 업로드 하는 경우에는 파일이 대체됩니다. 꼭 주의하셔요.
내보낼 대상의 해상도에 대해서 묻는 창이나오고, 여기에서 선택한 것들이 맞는 경우에는 Done을 눌러줍니다.
잠시 처리중이었다가, 해당 프로젝트에 파일이 업로드 되는 걸 볼 수 있어요.
그럼 스크린을 살짝 둘러보면, 이렇게 구성되어 있습니다.
왼쪽에는 업로드한 스크린이 나오고, 각 요소가 내보내기 에셋으로 작성되어 있는 경우에는 다운로드가 가능해요.
오른쪽 패널에는 일반정보, 색상정보, 이미지 다운로드 메뉴, 그리고 해당 화면 내 추가된 메모에 대한 메뉴가 나타납니다.
나중에 프로토타입을 작성해서 업로드하는 경우에는 프로토타입에서 걸어놓은 링크를 따라서 화면이 이동하기도 하고, 섹션별로 구분해서 여러가지 작은 프로젝트를 관리할 수도 있습니다.
트렐로나 슬랙과 같은 협업툴과도 연동이 되니까, 유용하게 활용하실만 해요.
저희 회사에서도 본격적으로 적용한지 1년정도가 넘어가는데, 처음에 시행착오가 있었어도, 지금은 여러가지로 많이 편하게 사용하고 있습니다.
