어도비 XD(Adobe XD)에서 포토샵(.PSD)으로 변환시키는 방법
작업을 하다보면 클라이언트의 사정 및 개발자의 협업때문에 잘 쓰고 있는 프로그램을 바꿔줘야 하는
경우가 종종 있습니다. 하지만 디자이너들에는 이러한 과정은 굉장히 번거로울 수도 있는 작업이죠!
그나마 포토샵(Photoshop)의 경우는 Avocode라는 회사에서 스케치(Sketch)로 변환시켜주는 프로그램이 있어서 클라이언트 및 개발자와 협업할 수 있는 방법이 있지만, 어도비 XD(Adobe XD)의 경우는 아직 베타 버전이기 때문에인지는 몰라도 다른 프로그램(Sketch, Photoshop, Illustrator)와는 다른 방식인지 레이어를 복사해서 타 프로그램에 붙여넣으면 이미지가 병합되서 처리되고, 그나마 SVG로 추출(Export)하면 또 이상하게 출력되서 그 동안 디자이너들의 속을 끊이다 못해서 아주 증발을 시켜버렸습니다.
저도 최근 어도비 XD(Adobe XD)를 잘 사용하다가 개발자와의 협업을 위해서 제플린(Zeplin)을 사용할일이 있었는데 어도비 XD(Adobe XD)는 아직(인지 아니면 지원 예정에 있기는 한건지…) 제플린(Zeplin) 업로드를 지원하지 않기 때문에 굉장히 큰 난관에 봉착을 해야 했습니다..
레이어를 복사하여 넣자니 어느 프로그램에서 처리를 해봐도 레이어가 생성되기는 커녕(…) 아얘 병합하여 비트맵 방식으로 처리하질 않나, SVG로 추출하여 스케치(Sketch)나 포토샵(Photoshop)에 삽입하면 이미지라던가 폰트라던가 생각한 바로 처리되어 나오질 않아 정말 죽을 맛이었죠..
해외, 국내 모두 입을 모아서 하는 의견은 “어도비 XD(Adobe XD)는 현재 베타 버전이기 때문에 불온전하다. 그나마 스케치(Sketch)나 포토샵(Photoshop)으로 옮기려면 의도대로 나오지 않는 걸 각오하고어도비 XD(Adobe XD)에서 SVG 형식으로 내보내기(추출, Export)하여 옮겨야 한다.”라고 말하고 있습니다.
그러던 도중, 정석인 방법은 아니고 약간 편법인 방식이지만, 그나마 결과물이 덜 깨져보이도록(?) 나타나게 할 수 있도록 할 수 있는 방법을 찾았습니다!
준비물은 어도비 XD(Adobe XD)와 일러스트레이터(Illustrator), 포토샵(Photoshop)입니다!
(일러스트레이터의 설명은 CC 2017 한글 버전으로 하겠습니다. 아마 CS6 이하는 방식이 비슷하지만 다를 거에요.. 자세한 건 아래에서 다시 설명하겠습니다.)
(포토샵의 설명 역시 CC 2017로 하겠습니다. CS6도 방식을 지원할 것으로 예상되나 이 버전을 쓴 이유에 대해서는 역시 아래에서 설명하겠습니다.)
먼저 작업된 결과물(어도비 XD(Adobe XD))을 열어서 원하는 대지 및 모든 대지를 추출해야 합니다!
Ctrl + E(맥은 Command + E)로 원하는 대지(혹은 모든 대지)를 추출해주세요!
(스크린샷, 캡션: 임베드를 선택하고 추출하면 작업물 내의 이미지도 함께 추출되고 링크로 추출하는 경우는 이미지는 같이 나오지 않는 듯 하네요.. 처리속도는 링크가 임베드보다 몇 배 더 빠릅니다)
추출한 SVG 파일을 포토샵으로 바로 가져가는게 아니라 일러스트레이터를 한 번 거쳐서 가져가야 합니다!
제 예상이지만 어도비 XD(Adobe XD)와 일러스트레이터(Illustrator)같은 프로그램은 벡터 방식으로구동되는 프로그램이지만, 포토샵(Photoshop)의 경우는 비트맵 방식이기 때문에 처리 방식이 달라서다르게 결과물이 나타나는 것 같기도 합니다만, 진짜 이유는 다른 곳에 있을 것 같네요 흠…
* 가져오면 경고 창 하나가 뜨는데 일단 무시하고 확인을 하여 진행합니다!
결과물을 가져오면 일단 결과물을 가지고 오긴 했는데 음? 뭔가 그룹화가 되어있는 느낌이 드는군요?!
편집을 하기 위해선 오브젝트들을 분리시켜야 하는데 우클릭을 해보면 그룹화(정확히는 마스크화와 그룹화입니다)가 2번 되어있는 걸 볼 수 있습니다!
큰 그룹으로 클리핑 마스크로 묶여있고, 작은 그룹으로 그룹화가 되어있습니다..
라고 하면 뭔가 설명이 복잡해지네요 사진으로 설명하겠습니다.
첫번째로 오브젝트를 선택한 뒤 우클릭으로 클리핑 마스크를 해제합시다!
두번째로 오브젝트를 다시 선택해서 우클릭으로 그룹을 해제시켜 주세요!
이러한 과정을 거치면 짜잔!
그나마 덜 깨진 상태인 결과물을 일러스트레이터에서 볼 수 있습니다!..만
일러스트레이터에서 역시 제플린(Zeplin)으로 업로드할 수 없고, 회사 내부마다 다르겠지만 일러스트레이터로 개발자와 협업하거나 클라이언트와 상의하는 일은 아무래도 좀 드물겠죠..?
그래서 마지막으로 일러스트레이터에서 포토샵으로 옮겨줄 필요가 있습니다!
대지(아트보드)를 선택하고 내보내기 ⟩ 선택항목 내보내기(Export)에 진입합니다
그리고 .PSD(포토샵 포맷)을 선택해서 내보내기(Export)를 해주세요!
포토샵에서 파일을 열면 기적의 작업물을 볼 수 있습니다!
어도비 XD(Adobe XD)에서 적용한 그림자 효과 등은 무시되서 나오지만(…) 그나마 레이아웃, 폰트, 이미지 등은 어도비 XD(Adobe XD)와 유사하게 보이는 것을 알 수 있습니다!
제플린 업로드를 위해서 포토샵(Photoshop)으로 변환하신 분들은 포토샵(Photoshop)에서 대지를 생성해서 작업물을 대지 안으로 넣으면 됩니다!
(이게 바로 제가 포토샵 버전을 CC 2015 이상으로 사용한 이유입니다. 제플린은 아트보드가 없는 버전인 CC 2015 이하 버전을 지원해주지 않으니까요)
클라이언트의 컨펌 및 개발자와의 협업을 위해서 골치를 썩이고 계셨던 디자이너들에게 이 방식이 도움이 됐으면 좋겠습니다~^^
온전한 포스팅은 네이버 블로그에서 더 자세히 볼 수 있습니다.
