Sketch 소스를 Adobe XD, PS에서 활용하기
이젠 포토샵에서도 Sketch 소스를 써보자!!
(2016.04.06 Photoshop 내용 추가)
Project Comet이 Adobe Experience Design CC (Preview)로 출시되면서 기존 Creative Suite에 전문 UI/UX 디자인 툴이 추가되었습니다. Sketch 처럼 디자인하고 Flinto 처럼 화면간 연결을 통해 Prototyping까지 가능한 아주 유용한 툴인데요. 앞으로 Sketch+Craft 2.0와의 경쟁이 어떤 방향으로 흘러갈지 대단히 기대가 됩니다.
Sketch가 디자인 작업에서 큰 효율을 보일 수 있는 이유는 다양하고 효율적인 플러그인들을 비롯하여 기본 제공되는 iOS나 Material 디자인 템플릿 이외에 Sketchappsources.com처럼 훌륭한 템플릿들을 제공하는 사이트가 있기 때문이라고 생각합니다. (요즘 저 사이트 서버 응답이 없다고 접속이 안되던데 저만 그런건가요?;;)
반면, 아직 Adobe XD가 출시되지 얼마 지나지 않았기때문에 다양한 소스를 제공하고 있지 못합니다. Sketch 처럼 기본 템플릿들은 제공하고 있습니다만, 그 양과 질에 있어서 Sketch에 비할바는 못됩니다.
XD에서 제공하는 UI Kits - iOS, Material, Windows Sketch에서 쓸 수 있는 다양한 소스를 XD에서도 그대로 쓰고 싶은데 막상 sketch에서 그대로 XD에 복사할 경우 Vector가 유지 되지 않으며 편집이 불가능한 상태로 붙여넣기 되더군요. 그래서 그 해결책을 찾아 본 결과 방법은 다음과 같습니다.
1. Sketch에서 쓸 소스를 선택합니다.
2. Make Exportable > 파일 확장자를 SVG로 선택하고 익스포트합니다.
3. XD에서 익스포트한 파일을 import 합니다.
4. 디자인에 사용합니다.
여기서 주의할 점은 Adobe 어플리케이션 답게 Open이 아닌 반드시 Import를 사용해야한다는 것. 그냥 Open할 경우에는 SVG 확장자는 인식되지 않습니다. 이렇게 할 경우 Path는 물론이고 오브젝트끼리 Union된 아이콘도 그대로 사용 할 수 있습니다. 텍스트도 편집이 가능하구요!
Union된 오브젝트가 살아있음. 간단하쥬?단, Sketch에서 적용한 일부 스타일과 Mask는 적용되지 않는 현상은 있습니다. 하지만 그 정도 노력을 투자해서 이미 만든 소스들을 활용할 수 있다면 그것 또한 도움되는 일 아닐까요? ^^
Sketch(왼쪽)와 Adobe XD(오른쪽)의 차이 - 스타일과 마스크XD로 작업을 시작하려고 했던 분들 중 소스가 없어서 일일이 다 그려야 하나 막막하셨던 분들은 이 방법을 써보시면 어떨까합니다~! 혹시 더 나은 방법을 알고 계신분은 공유해주시면 작업하는데 큰 도움이 될 것 같습니다!!
(2016.04.06 추가)
디자인 후 운영을 위해서, 혹은 스케치를 쓰지않는 다른 디자이너에게 전달하기 위해서 포토샵 파일이 필요할 때가 있는데 위에 언급한 비슷한 방식으로 가능하다는 것을 확인했습니다. 방법은 다음과 같습니다.
1. Sketch 파일에서 아트보드를 SVG 파일로 추출합니다.
이때 편집할 수 있는 모든 오브젝트들은 그룹 상태여선 안됩니다. 포토샵에서 하나의 레이어로 추출됩니다
2. 추출된 SVG 파일을 일러스트레이터에서 불러오기 합니다
3. 일러스트레이터 상단 메뉴 → 파일 → 내보내기 선택 후, 형식을 PSD로 바꾼 후 저장합니다.
4. 포토샵에서 불러옵니다.
이 과정을 거쳐 익스포트된 파일의 레이어가 포토샵에서 살아있는 것을 확인 할 수 있습니다. (실제 디자인은 부끄러우니까 안보여드립니다)물론 모든 아트보드를 이런 과정을 거쳐서 익스포트 한다는 것은 상당히 고된 작업일 수 있습니다만, 반드시 필요할 때 방법이 없는 것은 아니라는 것. 그것이 중요하겠죠~!
아 그리고 이런식으로 익스포트 했을 때, 스케치에서 적용한 스타일 중 일부가 적용되지 않는 것을 확인했습니다. 예를들어 텍스트에 적용한 Opacity같은...(이 부분은 더 확인이 필요합니다)
이번에도 도움이 되었으면 좋겠습니다.
디자이너 여러분 화이팅입니다~!
