Prototyping for IxD - 01 Tools

851568_209350242603126_25189882_n.jpg
source : Facebook Paper Official Website

작년부터 NHN NEXT에서 좋은 워크샵을 많이 제공했고 운 좋게도 그중에서 3개나 들을 수 있었는데, 그중 마지막 과정이 Origami였다. 그래서 더 늦기 전에 공부했던 것들과 공부해야겠다고 느낀 것들을 정리해보려고 한다. 단편적인 오리가미 지식을 공유하기 전에, 일단 프로토타이핑에 대한 문제 의식 몇 가지를 나의 경험에 맞추어 풀어놓으려고 한다.


프로토타이핑, 그동안의 어려움

OrigamiFacebook Creative Lab에서 만든 프로토타이핑 툴로, Quartz Composer 플러그인이다. Quartz Composer는 들어보긴 했지만 사용에 대해서는 전혀 몰랐는데, Facebook Paper를 보고 인상 깊던 차에 Paper가 Origami를 이용하여 만들어진 것을 알게 되어 언젠가 꼭 해보리라 생각하고 있었다. Paper에서 인상 깊던 부분 중 인터랙션에 관한 것만 몇 가지 꼽아보자면,

  1. 버튼이 없어도 직관적이다.
  2. IA를 드러내는 오브젝트들의 위계가 자연스럽다.
  3. 이 모든 것이 오브젝트 단위로 움직여서 훨씬 더 다양한 인터랙션이 가능해졌다.
  4. 아주 작은 인터랙션 하나에도 세밀한 트랜지션이 들어가있다.

그밖에 말하고 싶은 것들이 너무 많지만, 결론적으로 Paper는 이전 어플에서 볼 수 없던 방식이었다. 어떻게 이런 디자인이 가능했을까? Paper의 인터랙션들은 매우 세밀했고 이러한 디테일을 만들기 위해서는 반드시 프로토타이핑 후 피드백하는 과정이 있을 것이라 생각했다. 그 배후에 Origami가 존재했던 것이다.
Paper가 등장한 후 얼마 지나지 않아 구글의 Material Design이 등장했다. Material Design은 애니메이션과 인터랙션에 대한 상세한 가이드를 제시했고, 이제 이 표준을 지키기 위한 더 좋은 프로토타이핑 툴이 나올 필요가 있다고 생각했다. 그리고 예상대로 Origami뿐만 아니라 Low Fidelity에서 High Fidelity까지 여러 범위에서 좋은 프로토타이핑 툴이 나오기 시작했다. 이런 툴들이 나오기 전에는 이게 실제 가능한지, 사용자들에게 좋은 인터랙션을 제공하고 있는지 실험해볼 만한 툴은 별로 없었고, 특히 모션이나 트랜지션이 기존 것과 다른 종류로 들어간 경우 대부분 Keynote와 After Effect로 만들고 있던 처지였다.

코딩지식이 전무했던 시절에 모션이 들어간 인터랙션 요소를 만들고 싶어서 After Effect를 이용해 동영상을 만들곤 했다. 하지만 몇 초짜리 gif를 만들어 낸 것 치고는 너무 많은 시간이 들었고, 결과적으로 그것들은 그저 이미지일뿐 코딩 불가능한 것이었다. 용량 문제도 있었고 구현을 위해서는 코드가 꽤 많이 필요한데 이걸 굳이 만들어야하는가 이슈가 됐다. 만들었던 인터랙션 중 하나는 progress bar에 맞춰 그림자가 움직이는 애니메이션이었는데 이를 구현하기 위해서는 css 코드로 시간에 따라 이미지를 돌아가도록 구현하거나 제품 컨셉인 ‘Shorter and Closer'에 반하는 무겁디 무거운 gif를 어플리케이션에 첨부해야만 했다. 결국 모두 그저 시안으로 남게 되면서 (만약 디자이너가 이를 구현할 수 있다해도, 용량 때문에 거절당했을 것이라 생각한다.) 결과적으로 시간만 허비하게 된 프로토타이핑이 되었다.

40776cafdcd50b3a1ffa5d162510d7b6.gif

현재는 그냥 봐도 딱 불가능해보인다 : )….
behance

1191317aa5d3755c7925d7745e534e92.gif

이 역시 얼마나 가능할지 모르겠다 : ) ….
behance

몇 개월 인턴 생활을 거친 뒤 개안이 돼서(?) 이제 정말 개발 과정을 알아야겠다고 생각했다. 그러다 공모전을 하게 되면서 개발자와 바로 붙어 실제 마켓에 올릴 앱을 만들게 되었는데, 옆에서 개발 과정을 지켜보면서 이에 맞춰 디자인 가이드를 만들기 시작했다. 하지만 정말이지 비효율적이었다. 아무리 안드로이드 어플리케이션의 그리드 잡는 법과 좌표 설정하는 법, 이미지를 따는 법 등을 알게 되어도 각각의 요소를 설명하기 위해 너무나 많은 툴이 필요했다. 기본 구조와 UI Flow는 [POP](popapp.in)을 이용해 만들고, 전체 구조는 [Mural.ly](mural.ly)에 지속적으로 업데이트를 하고, 어플리케이션에 들어갈 컴포넌트들은 바로 github에 업로드하였다. 하지만 여전히 가이드 문서가 필요했고, 이마저도 설명하기 힘든 인터랙션은 Keynote나 바디랭귀지로 설명해야했다.

촉박한 기한에 최대한 효율을 끌어올리려고 여러 툴을 썼지만, 아무리 그래도 인터랙션은 구현할 수 없었다. 개발자에겐 부가적인 일이 되기 쉬웠고, 디자이너가 하기엔 복잡한 일이었다. 그리고 가장 큰 문제는 구현을 해내도 이것이 정말 효과적이고 사용자에게 좋은 디자인이 될 지 실험하지 않으면 대부분은 불필요한 인터랙션이라는 점이었다.

Paper Prototyping이 빠르고 직관적이라지만 처음 종이 조각들을 본 순간부터 이건 아무리 그래도 너무 원시적이라고 생각했다. 최소한 스케치들을 POP을 이용해 어느정도 인터랙션이 가능하게 만들 필요가 있다고 느꼈고, 이마저도 한계를 느끼면서 좀 더 나은 프로토타이핑 툴에 대한 열망은 점점 강해졌다. 그리고 혜성처럼 등장한 것이 Paper와 Origami였다.

하지만 Quartz Composer 화면을 처음 보면 숨이 턱 막히는 것이 사실이다. Visual Programming이라 조금 더 친숙하고, Quartz Composer 가 많은 툴 중에서도 진입 장벽이 낮다는 말을 들었음에도 불구하고 그랬다. 그래서 점점 공부를 미루고 있던 차에, 워크샵을 통해 시도해볼 기회를 얻게 된 것이다. Facebook에서 제공하는 튜토리얼이 너무 훌륭해서 몇 번씩 돌려보며 다시 만드는 것이 많은 도움이 됐다. 그럼에도 이런 비효율적인 일을 다른 사람이 겪지 말았으면 하기에, 다음 글에서 Origami에 대한 기본적인 소개와 간단한 튜토리얼 요약을 해보려고 한다.


프로토타이핑 툴 간단 비교

Origami로 본격적으로 들어가기 전에 그동안 사용해본 프로토타이핑 툴을 비교해본다.
먼저, 이미 쿠퍼사의 블로그에 훌륭한 프로토타이핑 툴 포스트가 있어 소개하고 추가적인 내용을 덧붙여보려고 한다. pxd 블로그에도 관련 글이 있다.
Designer’s Toolkit: Prototyping Tools

  1. POP : 사용이 가장 쉽고 빨라 애용하고 있었는데 좋은 프로토타이핑 툴이 많이 등장하면서 기능이 더 보완되었다. 스케치한 것을 사진 찍고 바로 모바일 앱에서 이들을 연결하는 방식이었는데 gesture와 transition설정이 가능해지고 dropbox호환, PC 웹 제공, 그리고 icon설정과 공유 기능 등 디자이너들이 원하는 대부분의 기능을 갖추었다. 하지만 세밀한 인터랙션 조절은 불가능하다.

  2. Flinto : POP은 이전에 스크롤시 고정 영역을 설정하는 기능이 없었다. 아마도 Invision이나 Flinto 등 다른 툴들이 기능을 제공하면서 추가한 것으로 보인다. Flinto또한 매우 편리한 툴이었으나, 모바일에서는 웹 브라우저를 통해서만 볼 수 있기 때문에 테스트 중 상단에 주소창이 계속 떠있는 것이 너무 걸려 나중에 다시 POP로 만들었다.

  3. Invision : Flinto와 매우 유사하다. 둘을 비교하자면, 가격측면을 비교하는 것이 나을 것 같다.
    Flinto는 $20/Month, Invision은 Free의 경우 1개의 프로젝트를 허용하고 나머지는 프로젝트 개수에 따라 다른 비용 정책을 가지고 있다.

  4. Keynote : 업데이트 후 더 많은 모션이 추가되었다. 추가된 것들 중에서는 개인적으로 '넘기기'와 '진동'을 많이 쓴다. 기본으로 제공하는 애니메이션과 트랜지션의 퀄리티가 좋아 여전히 사용하기 좋은 툴이라고 생각한다. 파워포인트와 비교할 수 없다.

  5. After Effect : 정말로 세밀한 모션 그래픽을 만들고자 할 때, 가령 실제 gif로 넣어야하는 애니메이션 등과 인터랙션을 함께 보여주고자 할 때는 좋은 툴인 것 같다. 하지만 잘 구현하려면 key감이 좋아야하고 그냥 단순히 기능을 배워서는 감각적인 디자인을 만드는 데 훈련이 필요하다.

미리 말하자면 결론은, POP 그리고 Origami, 가능하면 직접 코딩이다. : )

 
3
Kudos
 
3
Kudos

Now read this

_____ Designer @ _____

Designer 앞에 붙는 단어와 그 디자이너가 일하고 있는 곳의 매칭이 재미있다. 같은 회사(아래는 Google)에서 디자이너의 역할이 변하거나 디자인의 의미가 변하는 것도 흥미롭다. 그래서 한번 모아봤다. 이 리스트는 계속해서 갱신하려고 한다. Interaction Designer@Google, 2015 Making Material Design: Crafting Material Product... Continue →