Adobe MAX 2016 (2/2)
Adobe XD의 제작 과정과 새로 추가될 기능들에 대하여.
이번에 좋은 기회가 있어 미국 캘리포니아 샌디에이고에서 진행된 Adobe MAX 2016에 참석할 수 있었습니다. 운 좋게 다녀온 만큼 컨퍼런스에서 이야기되었던 다양한 주제들과 모습들을 글로 작성하여 가능한 많은 분들에게 전달드리고자 합니다. 두 편으로 나눠서 공유드릴 예정입니다
독립세션들
지난 첫번째 글에서는 Adobe MAX의 메인 키노트 부분을 다뤘습니다. 이번 두번째 글에서는 Adobe MAX에서 제가 들었던 독립세션 중 제 브런치를 방문해주시는 분들에게 도움이 될만한 세션을 택하여 다뤄보려고 합니다. 아래는 제가 신청했던 세션들의 시간표입니다.
제가 참석했던 세션 시간표입니다.이 중 Adobe XD의 제작 과정과 향후 추가될 기능을 담은
- Behind the Scenes of Designing Adobe XD
- What's Next for Adobe XD?
세션에 대하여 공유하도록 하겠습니다.
Behind the Scenes of Designing Adobe XD (영상)
(Speaker: Talin Wadsworth, lead designer of Adobe XD)
Adobe XD를 만든다는 것은 이런 것이죠.01.
Introduction
이 세션은 Adobe XD 디자인팀의 리드 디자이너인 Talin Wadsworth가 XD팀이 어떻게 XD를 만들게 되었는지에 대해 이야기하는 시간이었습니다. (Talin을 비롯한 Adobe XD팀은 지난 2016년 4월에 한국에 방문해서 XD에 대한 미팅을 가졌었는데요 당시 행사에 대한 글을 한번 읽어보셔도 좋을 것 같습니다.)
어도비 디자인 팀은 크게
- 크리에이티브 클라우드 팀
- 마케팅 클라우드 팀
- 아크로뱃 팀으로 이루어져 있습니다.
어도비 XD 팀은 어도비 크리에이티브 클라우드 팀 산하 팀들 중 하나이구요. XD 팀의 인원은 Designers / Researchers / Writers / Architects / Artists / Technologists 들로 구성되어 있습니다.
Talin이 맨처음 어도비에 왔을 때 어도비 내부에서는 Fireworks(이하 Fw)를 적극적으로 사용하고 있었다고 합니다. 의도적으로 느껴질 정도로 내부에서 Fw의 사용을 권장했다고 하네요. Fw는 스크린월드를 위해서 생겨난 도구였고 그 나름대로의 분명한 장점이 있었습니다. 그러던 중 Fw가 곧 없어질 것이라는 내부 소식을 접했고 이 시점에서 Talin을 비롯한 몇몇 팀원들은 새로운 툴을 만들 생각을 했습니다.
다만 어도비 안에서 새로운 툴을 만드는 것은 상당히 힘든 일이었다고 Talin은 회고했습니다. 어도비는 대기업이고 내부에 수많은 사정들이 까다롭게 얽혀있습니다. 단지 디자인적으로 훌륭하거나 기능적으로 뛰어난 것이 새로운 도구를 만들기 위한 이유가 될 수는 없었습니다. 만드려는 툴이 Design과 Business 그리고 Engineering 세가지 영역을 아우르는 교집합을 가지고 있어야만 어도비 내부에서 새로운 도구를 만드는 것에 당위성을 주장할 수 있었습니다. 다행스럽게도 XD 팀은 그 접점을 찾아냈었고 Adobe XD를 만들기 시작했습니다.
새로운 도구를 만들기 위한 기본 조건02.
How to Make Adobe XD
어도비 XD는 아래와 같은 과정을 거쳐서 만들어졌습니다.
a. Map a shared Vision
먼저 비전에 대해서 각자의 생각을 공유했습니다. 자신들의 손으로 만들어 내는 것이 과연 가치가 있을 것인지 팀원들 간의 공감대를 형성할 필요가 있었습니다.
b. Research
기존 툴들에 대한 리서치들을 시작했습니다. 툴을 만들었을 때 이 세계에 파고들 여지가 있는지 계산을 해보았고 그러면서 자신들이 만들 툴이 위치할 포지션에 대해 고심했습니다.
기존 툴들에 대한 리서치.
C. Scratch
기존 툴(스케치 등)과 어도비 내부의 툴(ex.일러)의 장점들을 믹스업하면서 새로 만들 툴의 스크래치를 그려보기 시작했습니다.
D. Make-Show-Learn-Make-Show-Learn을 순환할 수 있는 구조
XD팀은 'Make-show-learn'이 UI를 디자인하는 데 있어 가장 핵심적인 요소라고 생각했습니다. 이를 툴에 녹여내야 한다고 생각했지요. 이것이 XD를 만들때 지속적으로 팀 내부에서 가지고 있던 공감대였습니다.
Make-Show-Learn의 순환 프로세스05. Sketch + Prototype
기본적인 방향이 정해진 이 후엔 닥치는대로 하나하나 스케치해보고 프로토타이핑해보기 시작했습니다. 어떤 식으로 툴의 레이아웃을 잡을지, 제일 중요한 기능들은 어떤 것들이 있을지 정리하면서 말이죠.
06. Decide on an MVP (최소기능제품)
그저 멋있고 이쁜 것을 이것저것 계속 만들어본다고 해서 Product가 될 수 없기 때문에 디자이너들이 가치를 찾을 수 있는 최소한의 것부터 확실히 정립하여 세상에 내보이기로 결심했습니다. 일단 디자이너들에게 꼭 필요하다고 생각되는 것부터 리스트업해보았지요. 그리고 이러한 것들을 어떻게든 적용하여 만들어보기로 했습니다.
디자인할 때 필요한 요소들, 기능들
아이콘에 대한 부분
패턴들07. 핵심적인 기능들의 도출
이러한 과정들을 통해 디자이너들에게 꼭 필요할만한 Repeat Grid 같은 기능들이 나오기 시작했습니다.
08. Test
이 후 나온 MVP(Minimum Viable Product) 버전을 가지고 슬랙을 통해서 내부 어도비 디자이너들에게 테스트를 시작했습니다. 어도비의 디자이너라면 누구나 오픈채널을 통해서 프로토타입을 테스트해볼 수 있었고 이를 통해서 엄청난 수의 피드백들을 받았습니다.
어도비 XD 슬랙 채널또한 어도비 내부의 디자이너들 이외에도 airbnb 디자인팀 같은 외부팀 대상으로 테스트를 진행하여 더욱 다양한 의견들을 수렴했습니다. 한가지 새로운 시도도 있었는데요, 7살 정도의 어린 아이와도 XD에 대한 테스트를 진행했습니다. 7살의 아이는... 대다수의 아이들이 그렇듯 정말로, 정말로 인내심이란게 없었기 때문에 XD가 인내심이 다소 부족한 디자이너들도 쓸 수 있는 레벨인지 테스트할 수 있는 좋은 경험이 되었습니다.
그 이후 Adobe XD Preview가 나왔습니다. XD팀은 XD Preview를 처음 릴리즈할 때 수많은 필수 기능들이 모자란 상태라는 것을 명백히 인지하고 있었습니다. 그러나 MVP 버전을 발전시키기 위해 가장 필요했던 것은 수많은 필드에 있는 실무 디자이너들의 다양한 피드백이었고, 그를 위해서 프리뷰 버전을 내놓게 되었습니다.
03.
Adding new Features
이 부분에서 Talin은 Layers에 대한 Case study 내용을 보여주었습니다. 텍스트로 설명하기 어려운 부분이 많아서 영상을 직접 보시는 것을 추천드려요. 어도비 XD 팀에서 도출된 좀 더 효과적인 레이어 관리 기능을 확인 하실 수 있습니다. (영상의 32:00-44:00까지의 내용입니다.)
새로운 기능들에 대한 자세한 내용은 이번 세션 바로 다음으로 서술할 What's next for Adobe XD?세션에 정리되어 있으니 그 부분을 보셔도 무방합니다 .
04.
XD Design Principles.
아래는 Adobe XD를 디자인하면서 팀원들 간 상정했던 XD의 Principles 입니다.
- Tell a Story
우리(디자이너)들은 유저가 아니란 것을 항상 기억해야합니다. 우리들은 우리들이 디자인하는 것들에 대해서 너무 많이 알고 있어요. 우리가 의도한 바를 상대방이 명확히 이해할 수 있도록 이야기할 수 있어야 합니다.
"Invisible UI" is great to strive for, but when you have a complex set of features and interactions, it's important to ground the experience with clear calls to action.
- Clean and Focused Experience
한꺼번에 모든 것을 하려고 하지 않는 것을 추천합니다. 이 같은 논지 아래서 XD는 Design 모드에서부터 출발했습니다. 그 이후에 Prototyping 모드를 만들고 그 다음에 Surfaces (organize / create / share)부분을 생각했습니다. 그리고 각 모드의 롤을 명확히 정의했죠. 예를 들어 Design을 하는 패널에서는 오롯히 디자인에 집중하게 하고 Comment 등이 가능하게 하지 않습니다. 이런 명확한 구분은 디자인 프로세스에서 매우 중요합니다.
- Workflows, not features
When you defining a roadmap of features, you should have a clear outcome in mind. (If you don't, the user won't either.)
기능 하나하나를 상위에 놓기보다는 이게 어떠한 경험을 가져야하는지 명료하게 정의한 뒤 프로젝트를 진행하려 노력했습니다. 'Adobe XD는 모바일 앱 디자인을 위한 것이다' '아이콘 디자인을 위한 것이다' 등의 로드맵을 먼저 확실하게 정해놓고 기능들을 하나하나 만들어 가기 시작했죠.
- Testing is always the goal.
무언가를 만든 후 그것을 테스트하는 것은 정말 중요합니다. 결과물에 대해서 함께 이야기해보고 피드백을 받고 테스트를 진행하는 행위가 우리가 이루고자 하는 최종 목표에 조금씩 다가가게 하는 원동력이 됩니다. 디자인의 골은 문제를 풀어내는 것이고 테스트는 이 문제풀이에 가장 적합한 길입니다.
세션의 마지막을 빅터 파파넥의 말로 마무리했습니다. What's next for Adobe XD? (영상)
(Speaker: XD Team)
Adobe XD의 향후 추가 기능에 대한 세션이었습니다. 이 세션은 향후 Adobe XD에 어떠한 기능이 추가될지에 대해 이야기하는 시간이였습니다. 메인 키노트와 바로 위 Talin의 세션에서도 일부분 언급하였지만 이번 세션에선 좀 더 기능 쪽에 치중하여 심도 깊은 이야기가 진행되었습니다. Talin이 이야기한 내용과 약간 중복되는 부분도 있지만 그대로 다 써내려가려 합니다.
01.
Background
Adobe XD는 Project Comet이라는 이름으로 프로젝트를 시작하고 정식으로 Adobe XD라는 이름을 부여받아 지금에 오기까지 2년이 넘는 시간이 흘렀습니다. 사실 XD팀은 처음 툴을 만들 때 오롯이 정지된 UI 화면에만 집중한 디자인 툴을 만들려고 했습니다. 그러나 대부분의 UI 디자인 환경이 여러 명의 협업과정을 필수적으로 요구하게 되었고 이에 프로토타이핑 부분과 쉐어 부분을 고민하지 않을 수 없었습니다. XD팀은 디자인-프로토타이핑-쉐어 부분이 따로 나누어진 별도의 툴 3개를 만들지 아니면 All in one으로 하나의 툴로 만들지 고심을 거듭했습니다.
그리고 최종적으로는
Ideate -> Prototype -> Test (Design -> Prototype -> Share 과 같은 개념)
를 담아낼 수 있는 하나의 툴을 만들기로 결정했지요.
디자인 툴로써 XD가 추구하는 바는 다음과 같았습니다.
1. Lightweight & approachable
2. Zero Friction
3. transparent & Open
이 중 3번째 Transparent & Open은 모든 유저들에게 열려있다는 것을 의미하는데요, 사용자들의 모든 트윗에 대답하며 피드백을 잘 반영하고 소비자를 중심에 놓는다는 뜻이라고 합니다. 실제로 트위터에 adobexd라고 해시태그만 넣으면 모든 트윗을 다 읽고 대답을 해준다고 하네요. XD팀은 기존의 어도비가 유저들의 목소리에 즉각적으로 반응하지 못하는 것을 매우 심각한 문제라고 생각하고 있었습니다. 최근의 UI 디자인 필드는 매우 빠른 속도로 변화하기 때문에 항상 유저들의 피드백에 반응할 수 있도록 만반의 준비를 하고 있다고 합니다.
덧붙여서 xd에 대해서 추가적인 의견이 있을 경우 언제든
https://adobexd.uservoice.com/에 의견을 남겨달라고 이야기 했습니다.
02.
New Features
전반적인 배경 설명이 끝나고 새로 추가될 기능들에 대해서 하나하나 이야기를 시작했는데요, 그 내용은 아래와 같습니다.
1. Layer개념과 기능을 강화합니다.
레이어를 더블클릭하면 그 레이어 세부 항목으로 이동한다거나, 선택한 레이어는 언제나 레이어 창에서 중앙에 위치하는 등 사용자 편의를 최대한 고려하여 제작하고 있습니다. 최초에 XD팀은 레이어 개념을 크게 중요히 여기지 않았고 일러스트레이터처럼 만들 생각이었다고 해요. 하지만 유저들은 명확하게 레이어 개념을 정립해주길 원했고 이에 따라서 기존의 포토샵과 애프터이펙트의 레이어 개념을 차용하며 최대한 UI 디자인 맞춤형으로 개선, 적용할 예정이라고 합니다.
2. Symbol 기능을 지원합니다.
스케치(Sketch)를 쓰시는 분이라면 익숙한 기능인 Symbol 기능을 지원합니다. 그리고 심볼 내 또다른 심볼을 넣을 수 있는 Override 기능 또한 지원 예정입니다. 모든 심볼들은 심볼 라이브러리 패널에서 관리됩니다.
좌측 하단에 심볼 관리 란이 생긴 것을 확인할 수 있습니다.3. Micro Interaction
점차적으로 마이크로 인터랙션 기능을 폭넓게 지원할 예정입니다. 현재까지의 XD는 Artboard to Artboard로 단일의 트랜지션만 지원했었는데요, 한개의 Artboard에 여러개의 트랜지션을 오버레이해서 적용할 수 있게끔 지원할 예정입니다. 또한 오브젝트 베이스의 트랜지션을 좀 더 적극적으로 지원하고 다양한 제스쳐 및 인풋 모델을 검토하고 있습니다.
4. 비디오 임포트와 GIF 임포트를 지원합니다.
5. USB 및 와이파이 연결을 통해 모바일 디바이스와의 스크린 쉐어링을 지원합니다. (와이파이는 추후 지원)
데스크탑에서 작업한 내용들을 XD 모바일앱을 통해서 리얼타임으로 모바일 디바이스에 반영합니다. (Sketch - Sketch mirror와 같은 구동방식입니다.) XD 모바일 앱 내에서 롱프레스를 통해서 아트보드들을 브라우징 하거나 클릭 가능한 핫스팟을 보여주는 등의 행동을 할 수 있습니다. (InVision 모바일 앱에서 지원하는 것과 같은 구동방식)
우측 하단에 XD 앱이 보입니다. 아직 빌드 중인 앱이에요. 
롱프레스를 통해 모바일 앱에서 추가적인 메뉴 불러오기가 가능합니다. 그리고 XD 모바일 앱은 크리에이티브 클라우드 계정과 연결되어 이전 어도비 XD파일을 불러와서 볼 수도 있습니다. 이 기능 또한 현재 빌드 중입니다.
.
6. XD Windows 10 버전이 곧 릴리즈됩니다(End of this year)
많은 분들이 기다리시던 XD 윈도우 버전이 곧 릴리즈됩니다. 윈도우 베타 버전이 릴리즈되면 한동안은 맥 버전과 약간의 시간차가 있겠지만, 윈도우 버전과 맥 버전이 동일하게 업데이트되도록 최대한 빨리 맞춰나갈 것이라고 합니다.
윈도우 버전이 준비되고 있음을 확인할 수 있습니다.7. 서로 간의 협업을 돕기 위한 코멘트 기능이 추가됩니다.
코멘트 기능8. 제플린과 같은 Spec / Color / Typeface / Style Guide system이 XD에 탑재됩니다.
Prototype 탭 옆에 Spec 과 library탭이 생길 예정입니다. Spec 에서는 제플린처럼 스펙 가이드를, Libarary는 인비전 보드나 제플린 컬러가이드처럼 폰트 / 컬러 / 심볼 등을 정리하여 보여줍니다.
이제 XD에서 개발자와 소통할 수 있는 가이드를 확인할 수 있습니다. (제플린처럼!)
스타일 가이드, 컬러 가이드, 심볼, 폰트에 대한 부분을 라이브러리 모드에서 확인 가능합니다. 그리고 해당 Design / Prototype 탭 쪽에는 (include Spec / Library) 사람들을 초대할 수 있는 메뉴가 생깁니다. 여러 명이 한꺼번에 가이드를 보면서 이야기하고 디자인 작업을 할 수 있습니다. (다만 시연해준 데모에 따르면 피그마(Figma)처럼 여러 명이 같이 실시간으로 작업하는 것은 아니고 작업자에 따른 우선순위가 부여되어 컨트롤 권한이 이동하는 것 같습니다.)
9. 버전 관리를 위한 버전 관리바(Visual Versioning)가 추가됩니다.
사용자가 저장한 시점에 타임라인 마커가 찍히며 각 마커 별로 버전 히스토리를 관리할 수 있습니다.
화면 상단에 가로형 타임라인 인터페이스를 확인할 수 있습니다. 최상단 파일명을 클릭하면 나오는 구조입니다.10. 그 외...
이외에도 https://adobexd.uservoice.com/ 에 올라오는 수많은 요청 사항 중 우선순위를 정해서 지속적으로 수정할 내용들을 정리하고 있다고 합니다. XD는 매달 업데이트 하는 것을 목표로 하고 있습니다. 이는 제작팀의 약속으로, Monthly release cadence를 팀내 규칙으로 세워두었다고 하네요. 윈도우 버전이 아직 릴리즈되지 않은 상황이기 때문에 모든 업데이트들은 맥 버전에 먼저 반영될 예정입니다.
https://adobe.typeform.com/to/A20CK8
위 주소는 Adobe XD의 최신 업데이트 (프리릴리즈)를 가장 먼저 체험해 볼 수 있는 URL입니다. 모든 분들이 다 테스트하실 수 있는 건 아니고 설문을 통해 매달 50분씩 가능한 것 같습니다.
마무리하며...
XD 세션들 외에도
airbnb의 Production Design team에 대해 이야기한
- Adobe XD, Photoshop, and Sketch for Product Design: I Can't Keep up!
사회에 영향을 끼치는 실험적인 디자인에 대해 경험을 나눈
- Adventures in Experiential Design
팀에 유용한 디자인 시스템은 어떻게 디자인하는지를 다룬
- Designing a Design system
등 기억에 남는 세션들이 많았습니다. 하지만 해당 내용들을 모두 풀어놓기엔 너무 양이 많고 아쉽게도 제가 다소 힘이 부치더라구요. 그리하여 Adobe XD의 제작 과정과 향후 추가될 기능들에 대해서만 집중해서 다루는 것으로 마무리를 지었습니다.
Adobe MAX 행사는 매년 규모가 커지고 행사의 운영과 내실로 발전을 거듭하고 있습니다. 메인 키노트들과 수많은 세션들, 커뮤니티 파빌리온이라는 이름으로 구성된 각 기업의 부스들, 아티스트/디자이너들의 마켓들, 메인 컨퍼런스 이틀째의 Night Party까지. 디자이너들의 축제 같은 컨퍼런스였어요.
내년에는 샌디에고가 아닌 라스베가스에서 10월 16일부터 20일까지 열린다고 합니다. 기회가 닿으시는 분들은 꼭 가보시길 추천드립니다 !
내년에는 더 새로운 소식들로 가득하길 !
