본문 바로가기

UXD Process

Hi-Fi 프로토타입은 정말 효율적일까?

728x90

# 원문: http://ixd.kr/?p=2473


국내/외 IT분야에서 최근 '프로토타입(Prototype)'이라는 단어는 정말이지 '핫'하다.

아래 이미지에서도 보이지만 invision, marvel, proto.io, proto pie, framer와 같은 다양한 프로토타입 툴들이 최근 몇 년간 큰 관심을 가지고 발전해나가고 있다.



위에서 언급된 툴들을 제외하더라도 수 많은 프로토타입 툴(도구)들이 쏟아져 나오고 있으며 해당 툴을 활용한 수 많은 결과물들이 나오고 있다. (가끔은 프로토타입을 위한 프로토타입 작업을 하는 경우들도 보이고 있으니..)




[그림] 프로토타입 툴의 춘추전국시대 


이러한 프로토타입 춘추전국 시대에서 좋은 프로토타입 툴을 고르는 방법과 활용하는 방법은 중요할 수 밖에 없으며, 이러한 글들은 이미 미디엄, 그리고 다양한 IT매체에 잘 정리가 되어있다. 


PXD> 프로토타이핑 툴 소개: http://story.pxd.co.kr/1069

IT기획연구소> 한번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리: http://yslab.kr/94

Medium> 첫 해외 UI디자인 프로젝트에서 사용한 10가지의 도구들: https://goo.gl/Z81HoY

Brunch> 프로토타이핑 이야기: https://brunch.co.kr/magazine/prototyping

등등..


하지만 이 즈음 무엇을 선택해야 하는가?(What)보다는 어떻게 활용해야 하는가?(How)에 대한 이야기를 해보면 어떨까 한다.



Low-Fi 프로토타입 vs, High-Fi 프로토타입

우선 프로토타입툴로 만들어지는 결과물들을 살펴보면 크게는 Low-Fi와 Hi-Fi 프로토타입으로 나누어볼 수 있다. (물론 용어는 정하기 나름이고 상황에 따라 미묘한 차이가 있을 수 있지만..)


Low-Fi 프로토타입의 경우 용어 그대로 Low-fidelity: '충실도가 낮은', '완성도가 낮은' 프로토타입을 이야기한다.

주로 페이지 기반으로 쉽게 '영역(hot spot)'을 지정해서 링크(link)로 페이지간 연결을 해주는 flinto, marvel, invision등이 Low-Fi 프로토타입에 적한한 도구라 할 수 있다.


Hi-Fi 프로토타입은 로우 피델리티의 반대편에 위치하는 의미로써 high-fidelity: '충실도가 높은', '완성도가 높은' 프로토타입이라 할 수 있는데, 코딩은 필요없지만 어느 정도의 툴 내의 조건문 정도는 이해를 해야하는 pixate, 혹은 proto.io나 코딩 기반의 프로토타입 툴인 framer등이 적합한 도구로 보여진다. (pixate의 경우 구글 인수 후 서비스 종료를..)



프로세스 내 프로토타입의 역할

앞서 이야기한 이러한 프로토타입들은 구현 수준에 상관없이 현업에서 프로덕트/서비스를 만들어가는 프로세스 내에서 점차 더 중요한 역할들을 하고 있다. 


대표적으로 최근 스타트업이나 모바일 중심의 기업에서 많이 활용되고 있는 린UX프로세스를 보더라도 2~4주 간의 스프린트 마다 최소한의 프로토타입이라고 할 수 있는 MVP(Minimum Viable Product)를 만들어내게 되는데, 이 때 Low-Fi, 혹은 Hi-Fi 프로토타입들을 많이 활용하게 된다.

 


[그림] 린UX 프로세스 내에서의 프로토타입 활용단계, 각 스텝이 마무리 되는 시점에 MVP에 대한 검증진행

출처: http://edward-designer.com/web/wp-content/uploads/2013/11/lean-ux-with-scrum.png


Low-Fi 프로토타입의 경우 디자인 프로세스 앞 단계에서의 방향성을 확인할 수 있도록 도와주고, 전체적인 동선을 확인해주는 역할을 하고 있다. 종이로도 충분히 테스트를 진행할 수 있지만, 요새는 스케치만 할 수 있다면 바로 스마트폰 카메라로 찍고 바로 동선을 연결해서 확인할 수 있는 손쉬운 툴들이 많이 나와있어 모바일 서비스의 경우 빠른 확인/테스트가 가능하다.

[그림] 페이퍼 프로토타입, Marvel을 이용한 모바일 프로토타이핑 제작


반면 Hi-Fi 프로토타입의 경우 프로젝트의 초기 단계 보다는 중간 단계 이후에 활용도가 높아진다고 할 수 있는데, 방향성에 대한 확인 보다는 실제 프로덕트 컨셉에 대해 사용자의 리얼보이스를 들어볼 수 있다는 점, 또한 구체적인 인터랙션에 대한 사용자들의 반응들을 살펴볼 수 있다는 점들이 다를 수 있다.


픽세이트 데모: http://www.pixate.com/education/demos/

프린시플 데모: http://principleformac.com/gallery.html

프레이머 갤러리: https://framerjs.com/gallery/



 Hi-Fi 프로토타입의 역할

자, 이제 본론으로 들어가보도록 하자. (헉헉..;;)

각 프로세스에 맞는 적합한 프로토타입들의 수준은 분명히 존재한다. 

그리고 Low-Fi 프로토타입의 경우 초기에 누구든지 쉽게 서비스의 방향성을 고민하고 동선을 확인할 수 있는 역할을 충분히 해주고 있기 때문에 논란의 여지는 적을 듯 하다. 툴에 대한 러닝커브가 높은 것도 아니고 빠르게 작업할 수 있기에..


하지만 Hi-Fi 프로토타입의 경우는 어떨까?

굳이 이렇게 개발버전에 가까운 프로토타입을 만들 필요가 있을까?

프로토타입 툴에 대한 러닝커브가 높은데 디자이너들이 꼭 배워야 할까?

서비스 프로토타입을 만들더라도 개발은 다시 따로 해야만 하는 이중작업이 필요한 것 아닌가?

빨리 설계된 문서를 보고 구현/개발하기도 바쁜데 실제 모습과 유사한 프로토타입을 꼭 만들어야 하는가?

결국 전체 프로젝트의 기간만 늘리는 역할만 하지 않을까?


결론부터 이야기하면 'Hi-Fi 프로토타입'은 전체 프로젝트의 시간을 절약할 뿐만 아니라 사용자들에게 완성도 있는 앱을 사용자들에게 제공하는데 있어 반드시 필요한 과정이다.


최근 실제 실무에서 활용되었던 사례 두 가지를 가지고 이야기해보면 좋을 것 같다.



1. 신규 서비스 오픈 시 하이-피델리티 프로토타입의 활용


여느 프로젝트와 마찬가지로 촉박한 일정에 빨리 오픈을 해야하는 프로젝트였으며 국내 서비스가 아닌 일본인들을 대상으로 하는 서비스의 오픈인지라 언어/문화/협업 등에 대한 다양한 장벽이 있었던 프로젝트였다.

'촉박한 일정'이라는 단어가 표현해 주듯이 사용자들의 피드백을 받아보는 리서치에 대해서는 이야기를 꺼내는 것 조차 조심스러운 상황이었지만, 몇 번에 설득 끝에 현지에서 사용자 리서치를 진행해보기로 하였고 이 때 프로토타입을 활용하여 '리서치 스프린트'를 진행하였다.



[그림] GV(Google Ventures)의 리서치 스프린트


현지 리크루팅 자체가 쉽지 않았기에 아쉽지만 4일 보다 좀 더 길게 사용자들의 피드백을 받아보며 중간중간 프로토타입을 수정하며 진행했었으며, 꽤나 많은 인사이트들을 얻고 그 동안 논쟁이 있었던 부분들에 대한 해결책을 얻어갈 수도 있었다.


프로젝트 프로세스 내에서 디자인 시안 작업과 병렬적으로 이루어졌기 때문에, 실제 디자인 컨셉에 대한 사용자들의 의견, 그리고 서비스 첫인상에 대한 의견, 그리고 어색하다고 생각되는 동선, 디테일한 인터랙션에 대한 의견까지, 설계+ 디자인+ 그리고 개발 사이에 생길 수 있는 중간 공백을 해당 프로토타입은 매우 잘 메워주었고, 실제 프론트 개발에 들어가며 더 나은 UI의 제안을 하기 위한 역할을 충분히 해냈다고 생각한다.




[그림] 프로젝트 프로세스 중 Hi-Fi 프로토타입을 활용한 리서치


뿐만 아니라 해당 프로토타입은 기획, 개발, 디자인, UX 모두가 하나의 (부족할 지라도) 그림을 그리며 프로젝트를 진행하는데 있어  중요한 시각적 언어로써 역할을 해주었다. (외부 출판사와의 계약 시에도 해당 프로토타입을 보여주며 영업에 활용하기도 했다.)



[그림] 프로토타입은 기획, 디자인, 개발을 연결해 주는 시각적 언어이다.

(출처는 어디선가 봤었는데, 기억이 잘.. 그래서 그냥 기억나는대로 그려보았다. 혹시라도 출처를 아시는 분은 알려주셔도 감사하겠다.) 



'생각해 볼만한 점'


설계: 해당 프로토타입이 결국 설계문서 작업을 대체하거나 줄여주지는 못했음

디자인: 프로토타입에서는 가능했던 디자인/인터랙션이 실제 개발에서 구현되지 못하는 경우 존재

개발: 프로토타입에서 구현된 인터랙션은 참조할 수 있었지만 관련 코드를 활용하기는 어려웠다는 피드백




2. 특정 인터랙션의 제안 시 하이-피델리티 프로토타입의 활용


신규 서비스의 오픈이나 리디자인과 같은 큰 규모의 프로젝트에서는 사실상 구체적인 인터랙션에 대한 고민을 하기 어렵다. 서비스의 가치 제안(value proposition)을 가장 우선적으로 고민하여 서비스의 '틀'을 만드는 것이 우선이므로 프로토타입 역시 구체적이고 마이크로한 인터랙션 보다는 전체 신(scene)을 구현하여 실무자들과 사용자들의 의견을 듣는 것이 중요하다. 


하지만 이미 완성되어 있는 서비스들의 경우 사용하면서 아쉬운 점들, 더 개선할 점들이 많이 보여지게 되는데, 이 시점에서도 역시 하이-피델리티 프로토타입이 의미있게 활용될 수 있다. 


아래 포털앱의 '소셜쉐어' 사례를 통해 설명을 해보면 이해가 빠를 듯 하다. (팀에서의 초반 작업이었어서 아무래도 부족한 점들도 많았을꺼라 생각되지만, 그래도 의미있는 작업과 제안이지 않았나 싶다.)



  



      

    

[영상] 소셜쉐어 인터랙션을 테스트하기 위한 프로토타입의 활용



위에서 보듯이 작더라도, 해결하고자 하는 문제점만 명확하면 솔루션에 대한 다양한 아이디어들을 만들어낼 수 있다.

(지금 기억으로는 5가지 이상 프로토타입을 만들었던 것으로 생각된다. 물론 팀분들이 만들어주었음.)

이는 정말 짧은 시간안에 굳이 문서 기반의 작업을 하지 않아도, 스케치와 프로토타입을 병행한 상당히 좋은 사례로써 생각되어진다.


물론 문서 작업이 프로토타입 작업보다 시간 상 더 효율적이라고 생각되는 사람들이 있을지 모르지만, 당장의 시간을 절약해 줄 수는 있지만, 실제 문서 작업 후 이를 표현하고 커뮤니케이션하며 설득하는 일련의 과정에서의 시간은 아마도 더 소요될 것이라고 생각한다.



생각해 볼만한 점'


설계/디자인: 다양한 프로토타이핑 툴들을 사용해보았지만, 각각 한계점들이 존재, 결국 코딩기반의 프로토타입의 툴로..(no pain, no gain..)

개발: 프로토타입으로 구현이 되더라도 실제 해당 서비스에서 개발이 가능한가의 여부는 별개의 문제일 뿐만 아니라, 제안 이후 실제 개발 시에 해당 플랫폼의 한계, 또 다른 히스토리들로 인해 마지막까지 유지되기 어려운 지점 또한 존재 (결국은 커뮤니케이션 리소스)



커뮤니케이션 도구로써의 프로토타입

이야기 하고 싶은 점은 ‘디자인 프로세스에서 Hi-Fi 프로토타입은 효율적이더라.’ 이기도 했지만, 전체 프로세스, 해당 프로세스가 신규 서비스 오픈이든, 작은 개선이든 전체 인터랙션 디자인을 표현하고 커뮤니케이션 하는데 있어 상당히 효율적인 도구이자 언어라는 점이기도 했다.


앞서 신규 서비스를 만들었던 사례에서는 프로토타입을 활용하기 위해 2~3주 가량 1MM가 100% 들어갔지만, 비효율적이라고는 보기 힘들다. 앞서도 언급했지만 사용자들을 통한 다양한 피드백이 도움이 되었고, 이후 논쟁을 하게 될 시간을 줄여주었으며, 기획, 개발, 디자인, UX모두가 한 방향을 보게 해주는 역할을 해주었고, 문서를 통해 어렵게 커뮤니케이션 하는 것 보다 더 명확히 시각적으로 커뮤니케이션 해볼 수 있었기 때문이다.

특정 요소의 개선과 같은 마이크로 인터랙션은 어떤 도구가 되었던 빠르게 생각을 구현하고 이를 시각화 할 수 있다면 전체 프로젝트의 시간/리소스까지도 더 줄일 수도 있을 것이다.


프로토타입은 디자이너의 생각을 구현하는 도구이기도 하지만, 디자이너와 개발자, 의사결정권자와 실무자, 그리고 서비스와 사용자 간의 커뮤니케이션 도구이기도 하다. 그리고 지금처럼 Agile, Lean을 외치는 빠르고 효율적인 프로세스 안에서 더욱 빛을 발하고 있는 커뮤니케이션 도구라고 생각한다. :)

이 커뮤니케이션 도구를 잘 사용할지, 혹은 사용하지 말지, 또 다른 도구를 선택할지는 이 글을 읽으시는 분들의 몫이라고 생각한다.


마지막으로 카카오 인터랙션 디자인 랩의 슬로건이자 모토이자 구호이자 표어(응?)를 마지막으로 글을 마무리하고자 한다.


Keep Calm, Just Show. :)


글에 소개된 작업에 참여해주신 분들

리서치 스프린트: 프로토타이핑(@lain), 프로토타입 디자인(@louie, @tylor), 진행/설계(@marvin,@edward/@sienna, @hazel)

소셜쉐어: 프로토타이핑(@Ojay)


그 외 다양한 제안에서 Hi-Fi 프로토타입의 제작, 커뮤니케이션하고 있는 모든 랩 멤버들.


감사. :)


# 원문: http://ixd.kr/?p=2473