근래 앱 개발에 대한 문의들이 있는 가운데 클라이언트에게 어플리케이션의 레이아웃, 디자인은 물론 기본적인 동작까지 보여줄 수 있는 여러 프로토타이핑 도구들에 대한 관심도 역시 커져가고 있었지만 주요 작업이 앱 보다는 웹(반응형)이기 때문에 크게 신경은 쓰지 않았습니다.
그래도 어떤 도구들이 있으며 어떤 것들이 많이 쓰인다 정도는 인터넷을 통해 어느 정도는 알고 있었죠. 그 중에 구글에서 인수하여 무료로 공개한 'Form(Mac)'과 'Pixate(Mac/PC)'정도는 시스템에 설치해 놓고 만져보고 있던 상황이던 중에 '어도비가 그냥 있지는 않을 텐데...'라는 생각에 구글링을 해 보니 역시나 진행중인 프로젝트가 있었습니다. 그것이 바로 이번에 프리뷰 테스트 단계에 들어간 프로토타이핑 프로그램 'Adobe XD'입니다('XD'는 'Experience Design'을 뜻하고 있으며 얼마전까지는 'Adobe Comet'로 알려져 있었습니다).
프리뷰 테스트 중이기 때문에 어도비 ID가 있으면 무료로 다운로드 받아서 사용할 수 있지만 아직까지는 맥(Mac) OSX용으로만 공개하고 있습니다. 조만간 혹은 정식 버전이 공개되면 윈도우용도 나오겠지만요.
어쨌든 프로그램을 다운받고 설치 후 바로 실행해 보았습니다. 그리고 잠깐 끄적끄적 해 봤는데 아주 손쉽게 아래와 같은 결과물이 나옵니다.
어도비의 홈페이지에서 프로그램 설명 동영상을 보면 더 쉽게 이해할 수 있는데, 포토샵이나 파워포인트 등을 사용해서 프로토타입 이미지를 만드는 경우 텍스트 나 사진 등의 반복작업이 (복사+붙이기 작업)이 꽤나 많아집니다만 Adobe XD를 사용하면 그럴 필요가 없습니다.
위의 캡쳐화면에서 중간에 볼 수 있는 녹색 상자가 그런 번거로움을 확 줄여주는데요. 드래그(drag)만 해 주면 자기가 알아서 반복 복사를 해 줍니다.
거기다가 이미지에 대한 마스킹도 아주 간단하게 할 수 있으며 반복되는 레이아웃 내의 이미지들도 간편하게 개별 수정이 가능합니다. 거의 모든 작업이 그냥 드래그앤드롭(drag&drop)으로 마무리 되는 것이 매우 직관적이면서도 편하게 작업할 수 있게 합니다.
Adobe XD는 크게 3영역으로 나누어지는데 'Design', 'Prototype' 그리고 'Preview'입니다.
Design 영역에서는 좌측 툴박스의 여러 도구 및 외부 이미지, 클립, 아이콘 등을 사용해서 앱, 웹의 레이아웃 및 디자인을 할 수 있고,
Prototype 영역에서는 Design 영역에서 만들어진 아트보드(artboard) 사이의 링크를 통한 이동 관계 및 전환 애니메이션을 설정할 수 있습니다.
Preview는 위의 두 영역에서 만들어진 프로토타입을 미리보는 기능을 통해 실제 디스플레이에서 보이는 모습과 동작을 실행해볼 수 있습니다.
특히 이 'Preview' 기능은 매우 강력한데요. 저의 경우 다른 프로토타이핑 도구(Form, Pixate)들이 프리뷰 부분에서 생각보다 만족스러운 결과를 볼 수 없었기 때문입니다. Form의 경우는 자꾸 프리뷰 창이 닫히고 실시간 수정이 잘 되지 않았으며, Pixate는 클라우드에 저장이 가능했지만 저장 시간 간격에 문제가 있는 것인지 아니면 해외 접속 문제 때문인지 수정 사항이 반영이 안되는 경우가 많았습니다만 Adobe XD의 프리뷰는 클릭과 함께 바로 동작하고 전혀 지연시간도 없고, 오류도 없었으며 프리뷰 창이 띄어진 상태에서 수정작업을 해도 곧바로 적용이 됩니다. 동영상으로 저장(mov파일)도 클릭만으로 바로 되기 때문에 동작을 다른 사람들에게 보여주기도 쉽고 'Creative Cloud'에 바로 저장하고 URL을 만들어 배포할 수 있습니다.
2D기반의 그래픽 프로그램의 대부분을 Adobe가 꽉 잡고 있는 것은 어찌보면 '독점'이 아닐까 생각이 되기도 합니다. 저 역시 비용적인 부분이라던가 약간 반항심(?)같은 마음으로 다른 대체 프로그램들(상용 혹은 오픈소스)을 찾아보고 사용도 해 봤지만 결국은 Adobe로 돌아올 수 밖에 없는 것은 현실이었습니다. 이번에 만나게 된 Adobe XD도 프리뷰 버전을 경험해 보니 역시나 어도비...라는 생각밖에 들지 않으며, 거의 100% 사용하게 될 것 같습니다.
환타73
디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.
