포토샵 사용자의 어도비 XD 입문에 필요한 모든 것

포토샵 사용자이면서 어도비 XD를 사용해 보지 못한 분들이 반길만한 소식이 있습니다. 어도비 XD는 포토샵 디자인을 연결하여 인터랙티브한 앱과 웹의 프로토타입으로 변형시킬 수 있는 탁월한 기능은 물론 직관적인 디자인 기능까지 지원하므로 사용자가 포토샵과 어도비 XD를 오가며 디자인을 공유하고 피드백을 얻을 수 있는 심플하면서도 효과적인 워크플로우를 제공합니다. 어도비의 크리에이티브 클라우드 수석 이밴절리스트 폴 트라니(Paul Trani)의 도움으로, 포토샵 파일의 어도비 XD로 가져와서 작업하는 데 필요한 몇 가지 단계와 멀티앱 워크플로우의 이점을 활용하여 디자인의 수준을 한층 끌어올릴 수 있는 주요 팁을 소개합니다.

시작하기: PSD파일을 어도비 XD로 가져오기

  1. 어도비 XD가 아직 설치되어 있지 않은 경우 지금 다운로드하십시오.
  2. 새 디자인을 시작하기 위해 파일 > 열기를 클릭합니다. PSD 파일을 찾아 열기를 클릭합니다.
  3. 어도비 XD는 모든 레이어, 효과, 그룹 및 마스크를 유지한 채로 포토샵 파일을 가져오는 것이므로 어도비 XD에서 .PSD 파일을 편집하여 배경, 아이콘 등으로 사용할 수 있습니다.
  4. 어도비 XD 툴을 사용하여 앱 또는 웹 사이트 디자인을 시작합니다. 프로토타입 모드로 전환하고 화면을 연결하여 인터랙티브한 프로토타입을 완성합니다.
  5. 포토샵 디자인이 인터랙티브한 앱과 웹 사이트 프로토타입으로 작동하는지 확인합니다.

폴은 “XD에서 PSD를 열기만 하면 됩니다. XD에 포토샵 에셋을 가져온 다음에는 프로토타입 모드로 전환하여 화면을 연결합니다. 이때 모든 레이어는 개별 레이어로 되어 있어 모든 디자인 요소를 간단하게 직접 편집할 수 있습니다”라고 말합니다.

포토샵 디자인을 복사하여 어도비 XD에 붙여넣기

포토샵에서 작업하다가 어도비 XD로 디자인을 빠르게 가져오려면 디자인을 복사해 XD에 붙여넣으면 됩니다. 다시 말해 포토샵 이미지의 개별 레이어를 가져오거나 모든 레이어가 병합되어 있는 단일 이미지로 전체 디자인을 가져올 수 있습니다. 다음은 포토샵 디자인을 복사해 어도비 XD로 붙여넣는 단계별 방법입니다.

  1. 포토샵에서 선택 윤곽 툴을 사용하여 XD에 복사해 붙여넣을 콘텐츠를 선택합니다.
  2. 포토샵에서 편집 > 복사를 클릭하여 현재 선택되어 있는 레이어의 콘텐츠만 복사하거나 편집 > 병합하여 복사를 선택하여 선택 영역에 있는 모든 레이어와 콘텐츠를 복사합니다.
  3. 어도비 XD를 실행한 다음 편집 > 붙여넣기를 클릭해 복사된 레이어 또는 전체 디자인을 XD에 비트맵으로 붙여넣습니다.

크리에이티브 클라우드 라이브러리를 사용하여 어도비 XD에 포토샵 에셋 가져오기

폴이 말하는 가장 효과적인 작업 방법은 포토샵 디자인을 크리에이티브 클라우드 라이브러리로 가져온 다음 어도비 XD에서 이 라이브러리를 통해 해당 에셋에 액세스하는 것입니다. XD에서 포토샵 에셋을 앱과 웹 사이트 프로토타입으로 간편하게 이용할 수 있을 뿐만 아니라, 포토샵에서 에셋을 다시 편집하더라도 변경 사항이 어도비 XD에서 자동으로 업데이트되기 때문입니다. 다음은 포토샵 에셋을 크리에이티브 클라우드 라이브러리로 가져온 다음 어도비 XD에서 액세스하는 단계별 방법입니다.

  1. 포토샵에서 가져올 콘텐츠를 선택합니다. 화면 오른쪽에서 라이브러리 패널 아래에 있는 + 버튼을 클릭합니다. 그래픽을 선택한 다음 추가를 클릭합니다.
  2. 어도비 XD에서 파일 > CC 라이브러리 열기를 클릭합니다. 포토샵 에셋을 클릭하여 어도비 XD 프로젝트로 드래그합니다.
  3. 이제 연결된 에셋을 사용한 작업이 가능합니다. 포토샵에서 이 에셋에 적용한 모든 변경 사항은 어도비 XD에서 자동으로 반영됩니다.

“크리에이티브 클라우드 라이브러리를 이용하는 이유는 링크 때문입니다. 내 라이브러리로 이동해 마우스 오른쪽 버튼 클릭으로 선택하고 포토샵에서 배경을 약간 편집한 다음 XD로 다시 돌아와 작업을 계속할 수 있습니다. 긴밀하게 실시간으로 연결되어 있기 때문에 15개의 아트보드가 있는 경우에도 수월하게 작업할 수 있습니다”라고 폴은 말합니다.

반복 그리드를 사용하여 포토샵 에셋으로 멀티스크린 경험을 신속하게 제작

포토샵으로 작업을 많이 하는 디자이너의 경우 여러 개의 시각 요소를 조정하는 데에 상당한 시간이 소요됩니다. 에셋을 어도비 XD로 가져온 다음 강력한 반복 그리드 기능을 사용하면 이러한 작업 시간을 단축할 수 있습니다. 반복 그리드를 사용하면 포토샵 디자인을 비롯해 여러 오브젝트를 하나의 그룹으로 만들 수 있습니다. 하나의 아트보드에 적용한 변경 사항은 나머지 아트보드에도 모두 자동으로 적용됩니다.

“디자인 작업을 새로 해야 하는데, 아이콘 또는 버튼이 거의 없는 경우 반복 그리드와 같은 툴을 사용하면 훨씬 수월합니다. 한 화면에 5개의 서로 다른 항목을 넣어야 하고 다른 아트보드에서도 동일하게 유지해야 하는 경우 포토샵에서 상당히 많은 복사 및 붙여넣기 작업이 필요합니다. XD에서는 포토샵 에셋이 사용된 아트보드 전체에서 일관된 경험을 손쉽게 제작할 수 있습니다”라고 폴은 말합니다.

어도비 XD에서 반복 그리드를 사용하는 방법에 대한 자세한 내용을 다룬 튜토리얼은 블로그 게시물 중 어도비 XD의 반복 그리드 살펴보기를 확인하고 여러분이 만든 디자인을 직접 활용하여 작업해 보시기 바랍니다.

프로토타입 공유 및 포토샵 디자인에 대한 피드백 수렴

어도비 XD를 사용하여 인터랙티브한 프로토타입을 디자인 및 제작함으로써 얻을 수 있는 이점 중 하나는 링크를 통해 작업을 손쉽게 공유하고 피드백을 얻을 수 있다는 것입니다. 포토샵 디자인에 대한 피드백을 얻어야 하는 경우에도 효과적입니다.

인터랙티브한 프로토타입을 만들어 아트보드를 모두 연결한 다음 이를 공유하려면 어도비 XD의 오른쪽 상단에 있는 공유 버튼을 클릭하고 프로토타입 게시를 클릭합니다. 여기에서 공개 링크 만들기를 클릭하여 다른 사람과 공유할 수 있는 URL을 생성할 수 있습니다. 이 링크를 공유하는 사람들은 디자인의 특정 측면을 강조 표시하고 주석을 추가할 수 있습니다.

“해당 링크를 받고 포토샵 디자인에 대한 피드백을 남기고 싶다면 포토샵에 있었던 특정 디자인 요소에 대한 주석을 어도비 XD프로토타입에 핀으로 고정시킬 수 있습니다. 클라이언트가 ‘이 부분은 녹색으로 해 주세요’라는 주석을 작성해야 하는 경우, 녹색으로 바꿔야 할 부분을 왼쪽 상단에 주석으로 표시할 수 있습니다. 모든 주석이 축적되므로, 디자이너로서 해당 사항(특히 에셋이 연결되어 있는 경우)을 해결하고 포토샵으로 다시 돌아가 이 링크를 나중에 업데이트 할 수 있습니다”라고 폴은 말합니다.

이 기능은 개발자에게도 매우 유용한 툴입니다. 링크를 통해 모든 요소에 대한 크기 정보에 엑세스할 수 있기 때문입니다.

어도비 XD에서 성공적인 작업 수행에 필요한 모든 리소스

포토샵과 어도비 XD에서 작업하는 경우 얻을 수 있는 이점이 많지만 매력적인 디자인을 만들어 인상 깊은 인터랙티브한 웹과 앱 프로토타입으로 변환할 수 있는 가장 효과적인 방법은 두 가지 툴을 병행하여 사용하는 것입니다. 다음은 어도비 XD를 시작하는 데 도움이 되는 유용한 리소스입니다.

폴은 “XD는 포토샵 사용자라면 누구나 손쉽게 사용할 수 있습니다. 이 툴은 매우 간단하므로 포토샵을 사용할 줄 알면 XD도 쉽습니다”라고 말합니다.

UX에 대한 유용한 정보를 이메일로 받아보려면 어도비의 경험 디자인 뉴스레터를 구독하십시오.

원문보기