brunch

You can make anything
by writing

C.S.Lewis

by Jay D Nov 06. 2019

Adobe XD 역대급 업데이트!(번역)

Adobe XD release note (2019. Nov)

Adobe XD가 열일 하고 있다.


2019년 11월 초에 열린 Adobe Max를 통해 Adobe XD 11월 업데이트 내용이 소개되었다. Adobe XD는 매월 새로운 기능과 업데이트를 공개하며, 사용자의 요구사항을 적극적으로 수용하려는 모습을 보여왔다. 특히 이번 11월 업데이트에는 주목할만한 새로운 기능과 개념이 추가되었기에, Adobe XD 블로그의 업데이트 글을 전문 번역하여 포스팅하려 한다. (스스로의 이해를 위해 의역이 있을 수 있으니, 정확한 표현을 위해서는 아래 원문 확인을 추천드린다.)


https://theblog.adobe.com/xd-november-2019-update-coediting-more


Adobe XD 팀은 매월 새로운 기능과 향상된 업데이트를 릴리즈 해왔습니다. 특히 Adobe Max는 저희에게 1년 중 가장 중요한 행사이며, 새로운 주요 기능을 Adobe Max를 통해 공개해왔습니다. 올해도 예외 없이 Adobe Max 2019를 통해 역대급 업데이트를 공개합니다.

이번 업데이트는 당신과 당신의 팀이 아이디어를 실무에 빠르게 적용할 수 있도록 돕는 real-time Coediting, states for components, support for hover interactions, a redesigned Plugin Manager와 같은 신기능과 개선사항 들을 포함합니다. 또한 늘 그래 왔듯이, 각 신기능은 쓰기 쉽고, 빠르며, 높은 품질의 상태로 제공될 것이고, 당신과 당신의 디자인 팀은 이를 통해 디자인 workflow을 강화할 수 있을 것입니다.

이 주요 신기능들과 함께, XD를 사용하는 디자이너들의 피드백에 대한 다양한 분야에 대해서도 업데이트를 진행해 왔습니다. 우리는 UserVoice를 통해 디자이너들의 요구사항을 받고, TwitterFacebook, 그리고 Community Forums에서 XD의 미래에 대해 토론하는 것을 좋아합니다.

자, 최신 XD 업데이트 소식을 살펴봅시다.


The power of collaboration in XD

디자인은 본질적으로 콜라보를 기반으로 하는 프로세스입니다. 여기에는 데이터, 공감, 연구, 사용자와의 지속적인 대화를 기반으로 문제를 깊게 이해하고 솔루션을 제작하는 과정이 포함됩니다. 이번 Adobe Max 2019에서 공개되는 Adobe XD는 협업 측면에서 큰 진전을 이루었습니다.


Coediting (Beta)

현재 베타 버전으로 제공되는 Coediting을 이용하면 XD 작업을 여러 디자이너가 실시간으로 함께 작업할 수 있습니다. Coediting은 XD의 백그라운드에서 원활하게 동작하며, 여러 명의 디자이너가 클라우드 문서에 동시에 접속하여 네이티브 앱과 동일한 퍼포먼스로 작업할 수 있도록 도와줍니다. Coediting을 사용하면 중복 업무나 중복 문서의 유지에 대해 걱정할 필요가 없도록 중앙 집중식 소스에서 함께 디자인할 수 있습니다. Coediting은 불필요한 마찰을 제거해서 여러분의 팀이 최상의 작업을 수행할 수 있도록 합니다.


https://www.youtube.com/watch?v=XDFE5DH2Z5E


Coediting은 XD의 클라우드 문서에서 활성화할 수 있습니다. Coediting이 활성화되면, 다른 팀원을 초대해서 함께 문서를 편집할 수 있고, 팀원이 어떤 아트보드와 오브젝트를 편집하고 있는지 확인할 수 있습니다.

Coediting은 팀이 함께 일하는 방식을 완전히 바꿀 것이고, 새로운 XD의 워크플로우를 제시할 것입니다. 새롭게 배울 것이 많다는 뜻이죠! 현재 Coediting은 베타 버전으로 제공됩니다. 직접 사용해 보시고, 어떻게 하면 Coediting을 보다 좋게 개선할 수 있을지 커뮤니티에 올려주세요. 베타 기간 동안 퀄리티와 퍼포먼스 이슈가 있을 수 있는 점 알려드립니다. 


Document history

당신이 작업을 하는 동안 클라우드 문서는 자동적으로 당신의 작업물을 저장합니다. 이번 업데이트를 통해, 문서의 히스토리와 작업이 어떻게 발전해왔는지를 확인할 수 있습니다. Document history를 통해 이전 버전의 문서를 열어, 컴포넌트를 현재 작업 중인 문서로 복사하거나 과거 작업물을 따로 저장할 수 있습니다.

문서의 히스토리는 30일간 자동 저장되며, 특정 버전을 북마크 하여 무기한 유지할 수도 있습니다. 또한 버전에 이름을 붙여 프로젝트의 중요 milestone을 표기할 수도 있습니다. 문서의 히스토리에 접근하려면 화면 상단의 클라우드 문서 옆 드롭다운 아이콘을 클릭하세요.


Share mode

디자인 프로세스에서 작업물을 팀 멤버와 관계자에게 공유하는 것은 매우 중요합니다. 공유를 통해 피드백을 받고, 디자인 에셋이 실제 제품에 적용될 수 있기 때문입니다. 공유는 늘 XD의 중요한 부분이었습니다. 그래서 이번 업데이트를 통해 공유에 관한 기능들을 하나로 묶어 Design과 Prototype mode 옆에 Share mode라는 신규 탭을 구성했습니다.

Share mode를 통해 작업물을 다른 사람과 공유할 수 있습니다. 공유 프리셋을 통해 디자인 리뷰, 개발 측에 전달, 프레젠테이션, UT 등 다양한 목적의 웹 링크를 만들거나 수정할 수 있습니다. Share mode에서 어떤 아트보드들이 링크에 포함되었는지 바로 확인할 수 있고, 링크에 이름을 달아서 트랙킹 할 수도 있습니다. 또한 링크에 대한 접속 권한과 비밀번호 부여 등 보안 작업을 한 곳에서 수행할 수 있습니다. 향후 업데이트를 통해 Share mode를 더욱 향상할 예정입니다.


https://www.youtube.com/watch?v=3vj03O641GA


위에 설명한 기능들은 모든 Adobe XD Plan level에서 사용 가능합니다. 유료 요금제 사용자들은 이 기능들을 무제한 사용할 수 있고, 무료 사용자들도 2020년 4월까지 사용할 수 있습니다. XD의 신기능들이 여러분이 일하는 방식을 어떻게 바꿀지 궁금합니다!


Deepening interaction and prototyping capabilities

XD는 초기단계부터 UX디자인과 프로토타이핑을 한 번에 할 수 있는 올인원 플랫폼으로 기획되었습니다. XD 팀의 목표는 디자인 팀이 다른 디자인 툴과의 연계를 고민하는 대신 놀라운 경험을 창출하는 일에 집중하도록 돕는 것입니다. 연중에 업데이트 진행한 것 외에 인터랙션과 프로토타이핑에 대한 주요 업데이트를 공유하게 되어 기쁩니다.


Component states

XD의 컴포넌트는 디자이너가 동일한 UI 요소를 반복적으로 작성하지 않도록 해 일관성을 유지하도록 도와줍니다. 또한 중앙 집중식 소스를 통해 여러 프로젝트에서 디자인 요소를 재사용할 수 있습니다. 그러나 오늘날의 경험은 단순한 시각적 요소에서 나아가 서로 다른 인터랙션에 대해 역동적으로 반응하고 있습니다. 

이것이 이번 XD 업데이트를 통해서 우리가 컴포넌트에 Sates를 추가한 이유입니다. 이제, 각 컴포넌트는 어떤 인터랙션이 가해졌느냐에 따라 다르게 반응하도록 디자인 될 수 있습니다. 예를들어 탭이 활성화 되거나 버튼을 사용자가 탭 한경우 처럼 말이죠. Component states를 활용하면 서로다른 시나리오를 위해 다수의 컴포넌트를 만드는 대신, 경험 설계에 집중할수 있고 문서간의 컴포넌트를 보다 쉽게 매니징 할 수 있습니다.


https://www.youtube.com/watch?v=JF-muM8vo5k


Component states는 쉽게 만들 수 있습니다. 컴포넌트를 선택하면, 우측 Property Inspector에서 선택된 컴포넌트의 다른 state를 선택할 수 있는 새로운 섹션이 표시됩니다. 특정 state를 선택하면 이전에 컴포넌트를 편집했던 것처럼 색상을 채우거나 문자 스타일 같은 속성을 변경할 수 있습니다.

Component states는 Prototype mode에서도 사용할 수 있습니다. 이를 활용해서 인터랙티브 UI를 만들 수 있고, 마이크로 인터랙션을 구현할 수도 있습니다. 선택한 구성요소에 states가 설정된 상태라면, 프로토타이핑 액션의 destination으로 그 sates를 설정할 수 있습니다. 예를 들어, 디자인 모드에서 버튼 컴포넌트의 hover state를 설정한 다음, Prototype mode에서 destination으로 해당 state를 설정할 수 있습니다.

Component states가 어떻게 동작하는지 보다 나은 이해를 제공하기 위해, Danksy와 파트너십을 맺고 XD Fresh UI Kit을 제작했습니다. 이 Kit에는 온라인에서 과일과 채소를 구매하는 경험을 시뮬레이션 한 앱이 포함되어 있습니다. 이 Kit는 주문 프로세스에서 변화하는 컴포넌트 들, 예를 들어 체크박스, 스위치, 버튼 등을 포함하고 있습니다.


Hover trigger

Hover는 Component states 중 가장 자주 사용되는 상태 중 하나입니다. Hover에 대한 지원은 오랜 기간이 걸리더라도 최대한 디자인 과정에서 유용하게 사용할 수 있도록 만들고 싶었습니다. 이름에서 알 수 있듯이 Hover trigger는 데스크톱 프로그램에서 버튼 위로 마우스를 가져가는 것과 같이 호버링을 할 때마다 트리거 됩니다.

Component states에 대해 위에서 설명한 것처럼, 요소의 Hover trigger에 대한 state를 정의할 수 있고, Property Inspector의 드롭다운을 통해 수동 설정할 수도 있습니다. Hover는 tab, drag, voice command, keyboard input, game pad input을 포함한 트리거 목록에 합류합니다.


Support for multiple interactions

XD에서 점점 더 많은 사용자 input을 지원하면서, 인터랙션 디자이너들은 코딩 없이 인터랙티브 프로토타입을 만들 수 있습니다. 종종 동일한 오브젝트에 서로 다른 인터랙션을 지원해야 하는 경우가 있습니다. 예를 들어, 오브젝트를 탭 했을 때와 드래그했을 때 같은 경우입니다. 지금까지는 이를 위해 복제된 아트보드가 필요했지만 더 이상은 아닙니다.


https://www.youtube.com/watch?v=zWQv9Qszm7c


이제 불필요한 작업 없이 단일 객체에 여려가지 인터랙션을 정의할 수 있습니다. 단지 오브젝트에서 여러 와이어를 끌어와서 서로 다른 인터랙션 시나리오를 정의하세요. 이를 이용해 다양한 음성 명령이나 키 입력에 대해 서로 다르게 반응하는 인터랙션을 만들 수 있습니다. Multiple interaction은 component states와도 연계해서 사용할 수 있습니다. XD는 사용자가 미리 정의한 특정 트리거에 대한 인터랙션을 자동 인식하기 때문에, 인터랙션 충돌에 대해서는 걱정할 필요가 없습니다.

앞서 소개한 component states와 hover trigger, multiple interactions의 조합으로 어떤 결과물이 만들어 질지 기대됩니다.


Extensibility and compatibility with other tools

디자인 팀이 XD를 디자인 툴로 선택하는 주된 이유 중 하나는 XD가 오픈 플랫폼을 지향하며, 다른 도구들( Creative Cloud의 서비스와 툴 들, 써드파티 툴 들과 플랫폼)과 상호운용성을 확보했기 때문입니다. 이번 업데이트의 일환으로, XD를 통해 다른 툴과 어떻게 협업하는지 소개합니다.


Enhanced Creative Cloud Librarises integration

Creative Cloud Libraries는 로고, 색상, 그리고 다른 디자인 요소를 Creative Cloud 애플리케이션끼리 공유할 수 있는 환경을 제공합니다. Creative Cloud Libraries은 기존에도 포토샵이나 일러스트레이터의 에셋을 XD에 적용하는 기능을 제공해 왔습니다.

사용자의 피드백을 바탕으로, 이제는 XD에서 만든 에셋과 컴포넌트를 Creative Cloud 애플리케이션에서 사용할 수 있습니다. 이를 통해 중앙 집중 개념의 크리에이티브 시스템 안에서 조직 전체의 브랜드, 마케팅 및 디자인 자산을 공유할 수 있습니다.

피드백을 바탕으로 XD 내에서 라이브러리를 생성 및 관리하고 XD에서 라이브러리로 자산 및 구성 요소를 추가하고 다른 Creative Cloud 응용 프로그램에서 사용할 수 있도록 Creative Cloud Libraries에 대한 지원을 확대하고 있습니다. 이를 통해 처음으로 중앙 집중식 크리에이티브 시스템 내에서 조직 전체에서 브랜드, 마케팅 및 디자인 시스템 자산을 공유할 수 있습니다.


https://www.youtube.com/watch?v=GWuA1y79AT8


Improved Stetch import and compatibility

디자인 팀이 다양한 툴을 사용하고 있으며, 에셋들을 툴들에서 공유하며 재활용하는 것은 매우 중요하다는 것을 알고 있습니다. 지금까지 Sketch의 디자인 파일을 XD로 가져오는 기능을 제공해 왔고, 이번 업데이트를 통해 Sketch의 라이브러리 에셋을 XD의 디자인 시스템으로 가져올 수 있습니다. XD는 변환된 라이브러리의 모든 에셋과 구성요소를 클라우드 문서에 자동으로 연결하기 때문에 바로 작업에 사용할 수 있습니다.


https://www.youtube.com/watch?v=DHyMngVm8CA


Redesigned Plugin Manager

MAX 2018에서 우리는 Adobe XD 플랫폼을 열어 기술 디자이너와 개발자가 플러그인으로 XD의 기능을 확장할 수 있었습니다. 현재 Jira Cloud, zeroheight, UI Faces, Stark, Arranger 및 기타 수십 가지를 포함하여 XD에 사용할 수 있는 200 가지가 넘는 플러그인이 일상적인 디자인 작업을 자동화하고 XD를 다른 도구에 연결하며 XD를 새로운 용도로 확장하는 데 도움을 줍니다 사례. Google 개발자 커뮤니티는 지속적으로 새로운 플러그인을 도입하고 기존 플러그인을 개선하여 XD의 새로운 기능을 활용하고 있습니다.

Max 2018에서, 우리는 Adobe XD 플랫폼을 오픈하여 플러그인으로 XD의 기능을 더욱 강화했습니다. 현재 Jira Cloud, zeroheight, UI Faces, Stark, Arranger 등 디자인 작업을 자동화하고 XD를 다른 툴에 연결하는 200개가 넘는 플러그인이 제공되고 있습니다. 그리고 개발자 커뮤니티를 통해 지속적으로 새로운 플러그인을 도입하고 기존 플러그인을 개선하는 활동을 진행 중입니다.

이와 같은 우리의 생태계가 지속적으로 성장함에 따라, 사용자가 원하는 플러그인을 쉽게 찾을 수 있으면 좋겠다는 생각을 했습니다. 이번 업데이트를 통해 완전히 새롭게 개선된 Plugin Manager를 소개하게 되어 기쁩니다. 새롭게 디자인된 Plugin Manager는 추천 플러그인과 큐레이팅 된 컬렉션을 제공합니다. 또한 카테고리별로 분류된 플러그인의 자세한 정보를 볼 수 있습니다. 여기에는 다른 디자이너들의 별점 정보도 포함됩니다. 플러그인 개발자에게 문의하여 지원을 받거나 피드백을 제공하고, 링크를 복사하여 팀의 다른 구성원들과 플러그인을 공유할 수도 있습니다.


https://www.youtube.com/watch?v=YAgKDA6c9_I


Plugin Manager 외에도, 개발자가 사용할 수 있는 API 범위를 확장하고 있습니다. 이번 업데이트를 통해 XD Cloud Content API를 소개합니다. 이 API는 XD 문서의 정보를 다른 앱에서 접근할 수 있도록 도와줍니다. 우리는 이 API를 기반으로 Jira, Slack, Microsoft Teams 와의 통합 기능을 강화합니다. API의 상세 내용은 developer site를 통해 확인할 수 있습니다.

우리는 디자이너들의 요구사항이 증가하는 만큼 XD를 더욱 발전시킬 것입니다. 위에 소개된 신기능은 XD 최신 버전을 다운로드하거나 기존 버전을 업데이트하면 사용할 수 있습니다.

XD의 향후 업데이트를 지속적으로 지켜봐 주세요. 그리고 당신의 생각과 피드백을 우리에게 전달해주세요! 




이번 업데이트 노트를 번역하며 자연스레 내용을 정독하게 되었고, Adobe XD 팀이 이를 갈았구나 하는 생각이 들었다. 그간 XD를 사용하며 아쉬웠던 부분들을 거의 정확하게 긁어준 느낌이었다. 각 기능을 좀 더 자세히 만져봐야겠지만, XD 팀이 잡은 UX 디자인 툴로서의 방향성은 매우 근사해 보인다. 브라보 XD!



Jay D

UX Designer

매거진의 이전글 공항 사이니지 제어 솔루션 디자인 회고
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari