Axure vs. ProtoPie
Windows 환경에서 사용할 인터랙션 디자인 툴 선택기
이 글은 현업에서 사용할 인터랙션 디자인 툴을 선택하며 느꼈던 점을 정리한 글이다.
어떻게 하면 내가 생각하는 모션과 인터랙션을 개발자에게 정확히 전달할 수 있을까?
인터랙션과 모션그래픽은 UI 컴포넌트의 움직임(movement)에 근간을 두고 있다. movement는 시간에 대한 속성이나 값의 변화를 의미하기 때문에, 그림이나 말로 정확히 설명하기 어렵다. 간단한 ease in-out transition만 하더라도 말로 설명하려면 난감해진다. (easing에 대해서는 구글 developer 사이트의 설명으로 대신한다.)
이렇다 보니 모션 부분에 대한 구현은 주먹구구식으로 진행되는 경우가 많았다. 개발자에게 내가 원하는 모션과 유사한 레퍼런스를 보여주면서 구현을 부탁하는 경우가 많았고, 당연히 결과물은 내 생각과 제법 차이를 보였다. 돌이켜 생각해보면 개발자 분들이 내 부족한 요청을 받고 얼마나 힘들었을까 싶다.
이러던 중 우연한 기회에 프로토타이핑 툴이란 것을 접하게 되고, 이를 잘 활용하면 개발자에게 표현하고자 하는 모션을 정량적으로 전달할 수 있을 것 같았다. 그리고 어떤 툴이 적합한지 검토를 시작했다.
후보 선택
내가 속한 기업에서는 보안 등의 이슈로 Mac OS를 주 업무 용도로 사용하기 어려운 상황이었다. Windows를 대응하는 Hi-Fi 프로토타이핑 툴로 조건을 좁혔더니, 후보는 Axure와 ProtoPie로 쉽게 선택됐다. Sketch를 필두로 Mac OS만 지원하는 좋은 디자인 툴이 많다는 점은 늘 아쉬움을 남겼다.
UX 개발 프로세스 관점에서 프로토타이핑 툴이 갖췄으면 하는 덕목
디자인 결과물을 잘 가져다가 모션과 인터랙션을 입혀서 개발자에게 정확히 전달하는 것이 개략적인 UX 개발 프로세스에서 프로토타이핑 툴에 기대하는바였다. 이 관점에서 프로토타이핑 툴이 갖췄으면 하는 덕목을 아래와 같이 정했다.
1) UI 디자인 툴의 결과물을 쉽게 가져다가 쓸 수 있을 것
2) 인터랙션과 모션을 효율적으로 정의할 수 있을 것
3) 심도 있는 인터랙션과 모션을 표현할 수 있을 것
4) 인터랙션과 모션 디자인의 결과물을 개발자에게 정확히 전달할 수 있을 것
그리고 각 항목에 대해서 두 툴을 비교했다. (아래 비교는 Windows OS를 사용한다는 전제하에 진행되었다.)
UI 디자인 툴의 결과물을 쉽게 가져다가 쓸 수 있는가?
이 항목은 사실 Adobe XD의 디자인 결과를 가져다 쓸 수 있는가로 표현하는 것이 맞다. 프로토타이핑 툴 검토 이전에 UI 디자인 툴을 XD로 정했기 때문이다. Sketch를 선택하는 것이 옳지만 OS의 제약이 있기 때문에 차선책으로 XD를 선택했다. 당시에는 약간 울며 겨자 먹기였지만, XD도 나름의 업데이트를 지속하며 상당히 좋은 디자인 툴이 됐다고 생각한다.
XD와의 연계 관점에서 ProtoPie가 우세했다. ProtoPie는 xd파일 import 기능을 제공하고 있어서, 컴포넌트와 레이아웃, 레이어를 가져다가 인터랙션을 디자인하기 수월했다. 반면 Axure는 XD import기능을 제공하지 않고 있다. XD forum의 답변은 XD canvas를 svg로 저장한 뒤 Axure에서 불러 사용할 것을 권하는데, 작업 효율성이나 안정성 측면에서 부족한 솔루션이었다.
인터랙션과 모션을 효율적으로 정의할 수 있는가?
두 툴 모두 Event - Result 기반의 인터랙션 로직을 사용하고 있기 때문에, web 기반의 인터랙션 구조에 대한 기본적인 이해가 있다면, 큰 어려움 없이 원하는 인터랙션이나 모션을 표현할 수 있어 보였다. 차이는 인터랙션을 효과적으로 수정할 수 있는가에서 나타났다.
ProtoPie는 최근 4.0 업데이트를 통해 컴포넌트 기능을 선보였다. UI 요소들을 조합하여 컴포넌트를 정의하면, 이를 화면의 여러 군데에 사용할 수 있고 스타일과 모션을 한 번에 수정할 수 있는 것이 컴포넌트 기능의 간략한 설명이다.
바로 이 일괄 수정 부분이 작업 효율성에 큰 영향을 미친다고 생각한다. 특히 버튼처럼 여러 곳에 자주 사용되는 UI 컴포넌트를 일일이 수정하는 작업은 굉장히 소모적이고 디자이너를 지치게 한다. Axure를 사용하는 경우 이를 막기 위해 투명한 Dummy item에 모션 정보를 정의하고 다른 컴포넌트들이 Dummy item의 모션을 invoke 하게 하는 트릭을 쓰기도 했다. (이 아이디어는 객체지향 프로그래밍에서 사용하는 클래스의 개념과 닮아있다. 이 트릭의 개념과 활용에 대해서는 다음에 간단히 포스트 할 생각이다.)
어디까지나 Axure의 그것은 트릭이며, 디자이너가 Dummy의 이름과 위치, 연계된 컴포넌트가 무엇인지 등을 기억해야 한다는 단점이 있다. 이 단점은 스스로 디자인을 진행할 때뿐 아니라, 인수인계를 진행해야 하는 경우 더욱 크리티컬 하다. 작업 효율성 측면에서는 이러한 관점에서 ProtoPie의 손을 들어주고 싶다.
심도 있는 인터랙션과 모션을 표현할 수 있는가?
Axure와 ProtoPie 모두 Hi-Fi 프로토타이핑 툴을 표방하는 만큼, 꽤 다양한 모션 옵션 preset을 제공하고 있고, 변수를 활용하면 어느 정도 코드 기반의 프로토타이핑이 가능했다. Custom easing처럼 아주 정밀한 표현은 어렵지만, 이 영역에 들어서면 그냥 개발자와 함께 코드 단위에서 값을 수정하면서 tuning 하는 것이 낫다고 판단했다.
인터랙션과 모션 디자인의 결과물을 개발자에게 정확히 전달할 수 있는가?
Axure는 결과물을 Html과 CSS, Javascript 파일로 Export 하는 기능을 제공한다. 그리고 당연히 이 코드들을 열어서 Edit 할 수 있다. 이 점이 개발자와 협업하는데 큰 도움이 됐다. 나는 내 의사를 코드와 숫자로 정확하게 전달할 수 있었고, 개발자는 그들에게 친숙한 형태로 나의 Request를 전달받을 수 있었다.
ProtoPie는 아직 이 기능을 제공하지 않는다. 이 부분을 제외하면 ProtoPie가 현존하는, 가장 완성도 있는(현업에 적용하기 좋은) 프로토타이핑 툴이라고 생각했기 때문에, 더욱 아쉬움이 컸다. ProtoPie의 Feature에 Code와 CSS Export에 관한 것들이 많이 보이는 걸 보면, 나만의 아쉬움은 아닌 듯하다. 아마 ProtoPie 관계자들도 이 부분을 인지하고 있을 것이며, 개인적으로 빨리 개선되었으면 좋겠다.
이 글이 '어떤 툴이 좋은가'가 아니라 '어떤 관점에서 툴을 바라봐야 하는가'로 읽히기를 바란다.
UX Designer
Jay D
