포토샵, 스케치 소스를 어도비 XD에서 사용하기
UI/UX 디자인을 위한 프로토타이핑 툴 따라잡기 - 어도비 XD
XD를 오랫동안 기다렸던 만큼, 사실 실망도 컸다. 가장 기대했던 부분인 어도비 애플리케이션과의 호환성 부족 때문이다. 뒤늦게 프로토타이핑 툴 시장에 뛰어든 어도비에게 ‘호환성’이야말로 가장 큰 경쟁력이 될 수 있는데, 이번릴리즈 버전은(아무리 프리뷰라고 하지만…) 가장 기본적인 배려도 없었다는 느낌이 들었다. 기존 포토샵 CC에서 작업하던 아트보드(Artboard) 또는 크리에이티브 클라우드(Creative Cloud)에 저장된 라이브러리(Libraries)와의 호환을 기대했던 건 너무 큰 희망 사항이었나 보다.
전에 올렸던 포스팅 ‘어도비 XD 주요 기능‘에 잠시 언급된 적 있지만, 현재까지 살펴본 바로는 어도비나 스케치의 소스(벡터 이미지)를 활용하는 방법은 SVG가 유일한 방법인 것같다. (혹시 다른 방법을 알고 계신다면 댓글로 알려주세요~)
포토샵에서 아셋(Assets) 가져오기
1. 비트맵 이미지 가져오기
비트맵 이미지를 가져오는 방법은 일반적으로 다른 어도비 애플리케이션에서 사용하던 방식과 같다.
- 이미지가 레이어가 한 개인 경우: 포토샵 해당 이미지 레이어에서 영역을 지정(셀렉션)하고, ‘Ctrl+C’, 어도비 XD에서 ‘Ctrl+V’
- 이미지가 레이어 여러 개인 경우 1: 포토샵에서 가져오려는 이미지의 영역을 지정(셀렉션)한다. 그다음 Command+Shift+C(상단 메뉴 ‘Edit’ > ‘Copy Merged’)
- 이미지가 레이어 여러 개인 경우 2: 텍스트, 벡터 레이어를 그룹으로 만든 후, 스마트 오브젝트로 만든다. 그다음 레이어를 선택하고 ‘Ctrl+C’, 어도비 XD에서 ‘Ctrl+V’
2. 벡터 이미지 가져오기
텍스트 또는 벡터 레이어 또는 이를 포함하는 영역을 SVG로 내보내기 한다.
1. 가져오려는 이미지의 모든 레이어를 스마트 오브젝트로 만든다.
2. 스마트 오브젝트 레이어를 더블 클릭한다. 별도의 스마트 오브젝트 PSD 창이 열린다.
3. (레이어가 모두 살아있는 상태에서) File > Export > ‘Export As‘를 클릭한다.
4. 옵션 창에서 파일 포맷을 SVG로 선택 후 ‘Export All..’ 버튼을 클릭한다.
5. 파일 위치와 이름을 지정한다.
6. 어도비 XD에서 SVG 파일을 Import 한다(File > Import)
SVG 파일을 어도비 XD로 불러온 화면. 텍스트, 벡터 수정이 가능하다.어도비 XD로 가져온 SVG 파일은 텍스트와 벡터 파일 모두 수정이 가능한 형태로 들어온다.
하지만 위 방법은 어떻게든 재작업을 하지 않고, 포토샵에서 만든 소스를 어도비 XD에서 활용해보기 위해 소개는 했지만, 기능상 아쉬움이 너무 많이 남는다.
일단 파일 전환 과정이 번거롭고, 열심히 포토샵 라이브러리에 만들어 둔 아셋을 공통으로 사용 또는 활용할 수 없기 때문이다.
또한, 개인적으로 SVG 파일을 만들어 어도비 XD로 가져오는 몇 번의 테스트를 해 본 결과, 일부 벡터 이미지가 누락되어 들어오는 경우가 상당수 있었다.
스케치에서 아셋(Assets) 가져오기
포토샵에서 벡터 아셋을 가져오는 방법과 비슷하다. 스케치의 요소를 SVG 파일로 만들어서 어도비 XD로 가져온다.
1. 가지고 오려는 이미지를 선택한다.
2. 왼쪽 사이드바 프로스펙터 하단의 ‘Export’에서 ‘+’ 기호를 클릭한다.
3. 내보내기 할 파일 형태를 ‘SVG’로 선택한다.
4. 상단 메뉴바의 ‘Export’ 아이콘을 클릭해서 SVG 파일을 만든다.
5. 어도비 XD에서 SVG 파일을 Import 한다(File > Import)
스케치 아셋을 SVG로 내보내기(예제 이미지에서는 iOS UI DESIGN 템플릿을 사용했다.)SVG 파일을 만들지 않고 가져오는, 좀 더 간단한 방법이 있다.
1. 가지고 오려는 이미지의 레이어를 선택하고 그룹화한다.
2. 왼쪽 사이드바 프로스펙터 하단의 ‘Export’에서 ‘+’ 기호를 클릭한다.
3. 내보내기 할 파일 형태를 ‘SVG’로 선택한다.
4. Sketch 레이어 리스트의 그룹 폴더를 어도비 XD로 드래그한다.
스케치의 레이어 폴더를 어도비 XD로 드래그 / 문자 및 shape의 수정이 가능하다어도비 XD 공식 튜터리얼 페이지에도 포토샵 또는 스케치에서 SVG 불러오는 방법을 소개하고 있다. 동영상을 보면 좀 더 이해가 빠를 것 같다.
