#03. Prototyping tools (1)
Introduction: 함께 일하는 사람들과의 소통을 위하여.
Situation
제 스스로의 관심이 계속 이 쪽에 머물러 있기 때문에 더 눈에 잘 띄는 것이겠지만, 최근 프로토타이핑 관련 밋업이 많이 늘어난 것 같습니다. 다양한 분야의 UI 디자이너 분들께서 본인이 익숙해져있던 관성을 과감하게 떨쳐내고 새로운 도구와 방식을 접목하려는 시도도 많이 보이구요. 혹은 그동안 해왔던 방식의 규모가 너무 커서 아직은 건드릴 수가 없지만 적당한 때를 기다리시는 분들도 많은 것으로 생각됩니다.
각각의 디자이너들이 자신들이 몸 담고 있는 팀의 규모와 성격에 맞물려 다채로운 상황이 펼쳐지고 있겠지만
조금은 느리게, 아니면 적당히, 혹은 다소 빠르게 프로토타이핑 문화가 정착되고 있는 것 같습니다.
why we do 'Prototyping'
프로토타이핑은 보통 무언가를 생산/양산하기 전에 그 타당성을 검증하거나 성능 평가를 하기 위해 만들어보는 모형 제작을 뜻합니다. 이를 통해서 사용자들에게 필요한 것들을 면밀히 분석하기도 하고 혹은 대량 생산(mass product)하기 전에 시장성을 검토하는데 쓰이기도 합니다.
다만, UI 디자이너들이 이야기하는 프로토타이핑은 목적이 좀 더 간단하고 명확합니다.
UI 디자이너들이 프로토타이핑에 관심을 두게 된 이유는,
본인의 디자인을 더 정확하게, 그리고 이해하기 쉽게 전달하기 위함입니다.
UI 디자인을 하시는 분들이라면, 그리고 기획자 및 개발자 분들과 팀을 이루어서 일을 해보신 디자이너 분들이라면 각 직종간 '언어의 차이'가 얼마나 큰지 실감하실 겁니다. 굳이 타 직종으로 구분하지 않더라도 디자이너와 디자이너 사이에서도 서로가 바라보는 그 '느낌'의 차이에 따라서 극명히 다른 결과물들이 나올 가능성이 충분히 존재하죠.
디자이너와 개발자의 언어는 확연히 다릅니다.디자이너: 여기서 이 오브젝트가 '슝'하고 나와서 반대쪽 사이드로 '휙' 이동했으면 좋겠는데요.
개발자: '슝'하고 '휙'이요???
디자이너: 네, 아 그러니까... 이런 영상처럼요. (뭔가 비슷한 예시 영상을 보여줍니다.)
개발자: 이 타이밍은 어떻게 알죠?
디자이너: 보시면 딱 감이 오시지 않아요?
개발자: ... 네?
위의 상황이 너무 비약이 심하다고 분개하실 디자이너 분들도 많으실 겁니다 . 그리고, 그 상황에 분개하셨다면 다행이라고 생각합니다. 그 분들은 적어도 위와 같은 식으로 작업을 하고 계시지 않은 분들이니까요.
그러나 정도의 차이가 있을 뿐 위와 비슷한 상황은 아직도 꽤 자주 일어나고 있는 것 같습니다.
Environment
예전에도 기획자, 개발자, 디자이너가 같이 일했지만 지금처럼 UI 분야에서 간극이 두드러지지 않았던 이유는
첫번째, 디바이스 자체의 성능이 낮았고
두번째, 주변 여러기기와 상호 데이터 인터랙션이 일어날 가능성이 적었고
세번째, 이로 인해서 개발하는 제품/서비스 자체의 볼륨이 지금보다 현저히 작았으며
네번째, 이는 곧 그 제품/서비스 안에 지금과 같이 다양한 인터랙션이나 시각 효과, 여러 유형의 사용자 사용 행태를 모두 충족시켜야 하는 엄청난 경우의 수(=일의 양. 그리고 기획자, 개발자, 디자이너 간의 다수의 회의와 갈등을 유발시키는)가 없었기 때문입니다.
(게임...쪽은 예외로 하겠습니다. 제가 잘 모르는 분야이기도 해서 섣불리 이야기를 안하는 것이 맞기도 하고...게임 업계에서 일하시는 분이 있으시면 예전과 지금의 디자이너-개발자 간 업무형태가 혹시 많이 달라졌는지 알고 싶네요. )
그러나 아이폰 출시 이 후로 상황은 급격하게 변했고 제품과 서비스를 기획/디자인/개발하는 사람들은 훨씬 더 다양한 분야의 고민을 복합적으로 해야하는 문제에 봉착했습니다.
디자이너들은 이제,
그전과는 비교도 안 될 정도로 많은 화면들을 제작해야 했고,
아이부터 노인 분들까지 모든 연령대를 충족시킬 수 있는 사용성에 대한 배려를 더 깊숙하게 해야 했고,
Accessibility (접근성)에 대한 부분도 보다 면밀하게 살펴야 했으며,
Acceessibility에 대한 이야기를 최인영 디자이너의 브런치(https://brunch.co.kr/@gokeshi/1)에서 확인하실 수 있습니다.
시각적으로/인지적으로 그 전과는 차별화되는 인터랙션이 무엇인가 고심하기 시작했습니다.
또한 자신이 주력하는 제품/서비스 이외에 타 제품/서비스와의 연결점, 상호작용, 시너지를 살펴볼 수 있는 능력이 요구되었습니다.
Here comes problems.
디자이너들이 당면한 문제의 깊이와 심각성과는 판이하게,
디자이너들이 쓰는 도구(Tool)들은 생각보다 빠르게 변화하지 못했습니다.
우리 모두가 애증해 마지않는 그 이름, 어도비. (아, 전 사랑합니다.)위에서 이야기한 일련의 작업들을 실행하기 위해서, 디자이너들은 일단 원래 그들이 사용해왔던 도구들을 꺼내듭니다. 수많은 페이지를 만들기 위해서 포토샵(Photoshop)을 켰고 인터랙션을 제작하기 위해 플래시(Flash)와 애프터 이펙트(After effect)를 실행시켰습니다. 레이아웃과 모션/인터랙션 디자인 가이드를 제작하기 위해 파워포인트(Microsoft PowerPoint)의 도움을 받았습니다.
정말 간략히 나눴을 때 툴의 사용 방식은 이러하겠지요. 그러다가 작은 컴포넌트 하나가 수정되면 다시 포토샵을 꺼내서 PSD, Layer들을 체크하며 수정 혹은 수정된 내용을 체크했고, 이를 인터랙션에 재반영시켜서 다시 렌더링을 걸었으며, 파워포인트 슬라이드를 불러내어 가이드를 다시 수정했습니다. 그러기를 매일매일 반복했습니다.
그 과정이 고난하고 지루하더라도 어쨌든 작업은 가능했고, 워낙 손이 빠른(빨라진) 디자이너들은 충실하고 묵묵하게 그 작업들을 수행했습니다. 그러나 프로젝트의 규모가 커지면 커질수록 작업해야 될 기본적인 양은 엄청나게 늘어났고, 그에 수반되는 반복적인 수정/재작업은 디자이너들의 각종 영감과 창의성마저 빼앗아가기 시작했습니다.
비생산적으로 반복되는 작업에 지친 나머지
디자이너들은 본연의 번뜩임과 재치를 잃어가기 시작했습니다.
더 문제가 되었던 것은 디자이너들이 이렇게 혼신의 힘으로 만든 디자인을 현실로 이뤄내기 위해 가이드화해서 개발자 분들에게 전달드리면 서로가 서로의 언어를 이해하지 못하는 일들이 너무 빈번하게 생겼다는 겁니다.
디자이너와 개발자는 모두 '더 나은 제품과 서비스'라는 같은 목표를 향해 달려가고 있었지만, 서로가 각자의 영역에서 열심히 하면 할수록 그 골은 종종 더 깊어지곤 했습니다.
디자이너들이 너무나 친숙하게 써왔던 어도비의 제품들은 사실 수십/수백의 페이지들을 함께 보면서 여러 의견을 교류하고 협업하기에는 크게 적합하진 못했습니다.
어도비의 제품들은 애시당초 목적 자체가 개인의 창의성과 표현능력을 도구들을 통해서 최대한 발현해주는 것에 있었기 때문입니다.
Here comes new solutions.
다행스럽게도 2015년 11월 현재, UI디자이너들의 손에는 어도비를 대체할 수 있는, 혹은 함께 쓸 수 있는 도구들이 많이 생겼습니다. 아래와 같은 도구들이지요.
UI 디자이너들의 새로운 친구들입니다. 물론 이것보다 훨씬 더 많은 종류가 있습니다만...이 도구들은 디자이너와 개발자들이 처한 환경이 변화한 이후 태어났고, 그렇기에
어떻게 하면 디자이너와 개발자가 더 쉽게 소통하면서도 더 나은 디자인 결과물을 이끌어낼 수 있을까 에 대한
고민들이 담겨져 있습니다. 또한 기존의 어도비 프로그램이 맡고 있던 디자인 프로세스에서 하나씩 자리를 가져오기 시작했습니다.
기존 어도비 툴의 자리를 새로운 툴들로 대체할 수 있게 되었습니다. 실리콘밸리에서부터 시작된 이 흐름은 다수의 UI 디자이너들에게 큰 기쁨을 안겨주었습니다.
스케치(Sketch)는 많은 수의 화면 디자인을 진행하면서 여러 개의 컴포넌트를 일괄적으로 바꾸는데도 무리가 없었습니다. 그리고 스케치를 지원하는 다양한 플러그인들은 포토샵의 플러그인들과는 다르게 '표현을 위한 부분'이 아닌 '개발자들과의 소통'을 도와주는데 초점이 맞춰져 있었습니다. (ex. 제플린(Zepin): GUI 가이드 자동생성 등)
인비전(InVision)은 여러 명의 기획자/디자이너/개발자가 와이어프레임 화면 혹은 디자인된 시안을 보면서 서로간의 의견을 공유하고 워크플로우를 최적화하는데 크게 공헌했습니다.
수많은 인터랙션 프로토타이핑 툴들 - 픽세이트(Pixate), 프레이머(FramerJS), 폼(Form)등등- 은 기존에 주로 영상 산출물로만 진행되었던 인터랙션 예시에서 벗어나 디자이너가 실제 디바이스 위에서 본인이 작업한 내용을 테스트할 수 있는 환경을 제공했습니다.
그리고 이러한 변화들은 디자이너와 같이 일하는 개발자와 기획자들에게도 긍정적으로 작용했습니다. 회의할 때 그들이 마주하게 된 것은 더이상 정지된 스크린샷 더미가 아니었습니다. 각자의 모바일 폰에서, 혹은 모니터 화면에서 디자인이 살아 움직이는 걸 볼 수 있었고 같은 팀 안에서 일하는 지구인과 화성인과 금성인들은 서로의 언어를 조금 더 편하게 이해할 수 있게 되었습니다.
Let's find yours.
예전에 UI 디자이너가 선택할 수 있는 도구란 최종적으론 결국 '어도비'였습니다.
그러나 지금은 오히려 정반대의 상황이 되었지요. 너무나 많은 툴들이 각자의 강점을 뽐내며 출시/업데이트 되고 있고 디자이너들은 행복한, 그러나 다소 난감한 고민에 빠집니다.
이 많은 툴 중에서 난 무얼 써야하지?
이제 프로토타이핑을 접하기 시작한 디자이너 분들이 계시다면,
그리고 새로운 방식으로 디자인 프로세스를 바꾸고자 하는 분들이 계시다면,
살짝 난감한 상황일 정도로 이제는 많은 툴들이 디자이너 여러분들을 기다리고 있습니다.
그렇기에 다음 글부터는 간략하게나마 도구들을 하나하나 소개해드릴 예정입니다.
아마도 아래와 같은 순서로 진행될 것 같습니다.
01. 자신에게 가장 유용한 도구를 찾기 위한 기준
02. 스케치 (+제플린 및 몇몇 유용한 플러그인)
03. 인비전 / 슬랙
04. 인터랙션 프로토타이핑 툴 오버뷰
05. 플린토, 아토믹, 프린시플 (Page Based / Timeline 인터랙션 프로토타이핑 툴)
06. 픽세이트, 오리가미, 폼, 프레이머 (Layer Based 인터랙션 프로토타이핑 툴)
저 스스로도 주로 사용하는 도구들은 정해져 있기에 자세하게 다뤄드릴 순 없겠지만, 각 툴들의 면면을 정리해드리는 것만으로도 후에 선택하실 때 도움이 될 수 있을 것이라 생각합니다.
다음 글로 찾아뵙겠습니다.
*Pixate는 2016년 10월부로 서비스를 종료했습니다.
