Hi-Fi Prototyping: 디자인과 코드

이 문서는 UX Magazine의 Heather Daggett가 작성한 "Hi-Fi Prototyping : Design Is Our Muse, Code Is Our Medium"을 번역한 글입니다. (This article is written by Heather Daggett, published on UX Magazine website.)

Hi-Fi Prototyping: 디자인은 우리의 뮤즈이며, 코드는 우리의 매체이다

프로토타이핑은 빠른 반복을 돕고 빠른 실패와 배움을 경험하게 해줄뿐만 아니라 팀의 기술적인 한계를 넘도록 유도하는 역할을 담당한다.

요즘 많은 채용공고문에서  “HTML, CSS, JavaScript, Bootstrap, Foundation, AngularJS와 같은 프런트 앤드 프레임워드"를 할줄 아는 UX 디자이너를 찾는 것을 흔히 본다. 이처럼 디자이너들에게 코드를 이해하라는 요구는 그만큼 UX가 매력적이고 서비스/제품을 디자인하는 데에 필수적 요소라고 깨닫고 있기 때문일 것이다.

많은 조직들이  하이브리드 코더-디자이너(coder-designers)가 더 나은 사용자를 위한 경험을 만들어 내리라는 믿음으로 이들을 찾고있다. 실제로도 코드는 디자이너가 시스템적인 실현 가능성과 한계를 모두 이해할 수 있는 능력을 더해준다. 하지만, 이가 ‘좋은 디자인’에는 어떤 관계가 있을까? 또한 경험 디자이너들은 이런 지식을 어떻게 사용해야 할까?

Intuit의 TurboTax group에서는 이러한 떠오르는 전문성을 한 목적을 위해 사용한다: 프로토타이핑을 통한 디자인 개선. 우리는 좋은 사용자 경험을 위한 프로토타이핑을 하는 기술 회사가 아니다.  바로 소프트웨어 개발로 넘어가는 회사와는 다르게 프로토타이핑을 온전히 디자인 프로세스에 넣는다.

Showing and Telling

프로토타이핑은 디자이너들의 디자인에 스피드와 액션을 더해준다. 결과적으로 개발자가 프로덕트로 구현하기 전에 빠른 디자인 수정이 가능하다는 것이 큰 장점이다. 개발 단계에서의 이러한 수정은 가능하다고 해도 매우 소모적이기 때문이다.

더 큰 장점은 실제 유저 데이터, end-to-end 프로토타이핑의 프레임, 줄어든 반복(iterations), 모션 디자인과 같은 요소들을 사용하여 고성능(high-fidelity)의 프로토타입을 가능하게 한다는 것이다. 좋은 고성능(hi-fi)의 프로토타입은 사람들이 디자인에 대해 더 신날 수 있게 해주고, 이는 본 뼈대만 가진 프로토타입이나 파워포인트 프레젠테이션만으로는 할 수 없는 것이다. 보여주고 말하기 - 프로토타입을 통해 보여주고 스토리텔링을 통해 이야기하는 방식이 가장 좋다. 무엇보다 ‘보여주기’에 대한 것이다.

'실제 상황'이 차이점을 만든다

우리가 진행했던 TurboTax의 콘셉트 테스팅를 위해 한 디자이너가 OmniGraffle을 이용한 아름답지만 가짜 데이터(dummy data)와 긍정적인 경험위주의 방향성을 이용해 고정된 시나리오 프로토타입을 만든 적이 있다. 우리가 그 콘셉트를 테스트할 때는 아무 문제가 보이지 않았다. 사용자는 가장 긍정적인 리뷰만을 주었고, 모든 것이 잘 되는 듯했다. 그 다음 같은 디자인으로 '실제 사용자 데이터'를 가지고 다시 테스트해보았다. 실험 단계의 데이터와는 다르게 테스터들은 자신의 자신의 실제 재정 정보를 입력해야 하고 질문에 답해야 한다는 것을 깨달았다. 놀랍게도 우리는 정말 다른 결과물을 얻게 되었다. 그것도 아주 나쁜 결과물 말이다. 테스트 도중 한 사용자는 갑자기 절망에 빠져 울기도 했다. 이전에는 굉장히 긍정적인 피드백을 받았던 테스트가 이제는 혼란스러움을 초래하게 되었다. 우리가 배운 것은 정말 분명했다: 실제 사용자 데이터를 고성능(hi-fi) 프로토타입에 넣는 것이 더 의미 있는 피드백을 만들어낸다는 것이다. 이런 경험을 겪고 나서 우리는 이제 프로젝트가 많이 진행되기 전에 다양한 변동 사항을 테스트한다.

출저: http://uxmag.com/articles/hi-fi-prototyping

End-to-End 접근법

End-to-end 프로토타이핑은 초기 단계에 디자인 결정이 어떻게 사용자 행동에 영향을 미칠지, 또 다른 팀과의 갭 때문에 생긴 어색한 흐름이 있는지를 테스트해볼 수 있게 해준다. 우리가 했던 ‘세금 준비’ 시나리오를 다시 예로 들자면 end-to-end 프로토타이핑은 테스터와 리뷰어가 함께 처음 소득 정보를 입력하는 과정부터 소득 신고서를 작성하는 과정까지의 전체 사용자 경험을 같이 겪어볼 수 있게 한다. 이런 과정은 더욱더 고성능의 프로토타입을 위한 풍부하고 전체적인 피드백을 받을 수 있을 뿐만 아니라 유저들이 실제 세금을 내는 경험을 생각해내 실제 상황을 구현 가능하게 한다. 이러한 사용자들이 경험을 통한 감정 변화를 관찰할 수 있게 하고, 또 목표점으로 도착하게 하는데에 있는 장애물들을 포착할 수 있게 만들기도 한다.     

모션을 통한 디자인

당신의 팀에 모션 디자이너가 없더라도 고성능(hi-fi) 프로토타이핑에는 모션을 추가할 수가 있다. 모션은 사용자 행동을 시스템 결과와 연결시켜 명확성을 제공한다. 모션은 그 서비스에 특정 순간순간을 극적으로 만드는 데에 훌륭한 도구이다. 모션은 정말 유저가 무슨 일이 벌어지고 있는지에 대해 더 이해할 수 있게 도와줄까? 알맞은 행동 유도성과 다음 스텝에 대한 정보를 잘 알려줄까? 아니면 더 손에 잡히지 않아 잡히지 않는 방해 요소가 될까? 이런 질문들은 빠르지만 고성능(hi-fi) 프로토타입이 답해줄 수 있다. 물론 그다음에는 코드를 통해 정확한 모션 스펙을 개선해나갈 수 있다. 이런 방법을 통해 개발자들은 지속시간(duration), 완화(easing), 순서(sequencing)와 같은 것들을 더 이상 ‘추측’ 하지 않아도 된다.           

                

가끔은 기술적 제한 안에서 모션을 구현하기 위해서는 창의적이어야 할 필요가 있다. 예로서 Apple Watch에 TurboTax 앱을 론칭할 때 우리는 단순하게 코드를 통한 애니메이션 프로토타입을 디자인해 보았다. 우리가 그때 깨닫지 못한 것은 iOS 앱과는 다르게 Apple Watch 에서에 애니메이션을 만들기 위해서는 키 프레임, 그리고 시리즈의 이미지들을 사용해야 했다. 코드를 통한 이미지 옮기기나 페이딩 효과는 불가능이었다. 더한 것은 우리는 30분 안에 개발팀에게 넘겨서 애플 스토어에 런치 해야 하는 상황이었다.

우리는 이러한 프로토타입을 스크린샷(일정한 시간에 작동하는) 기능을 통해 해결할 수 있었다.  그리고 우리는 프로토타입의 스피드를 낮춰 1초에 30개의 프레임을 만드는 애니메이션을 캡처할 수 있었고, 결국 코드 된 프로토타입과 똑같아 보이는 결과를 만들어낼 수 있었다. 기술적 제한은 극복되었고, 데드라인이 지켜졌고, 미션을 완료했다.

프로토타이핑 마음가짐이란?

프로토타이핑은 그저 역할이 아닌 마음가짐이다. 프로타이퍼들은 지름길, 빠르고 더러운 해킹의 마스터들이다. 우리는 어떻게 하면 전체 길고 방대한 코딩 없이 해결법을 빠르게 코드 하는지 알고 있다. 심지어 우리 프로토타이퍼의 모토는 “페이크 쳐도 괜찮아- 아무도 몰라”일 수도. 프로토타입 코드를 개발자들이 실행 가능하고, 명확하고, 재활용 가능하고, 버그가 없는 코드를 구현하기 위한 “아이디어 보드”라고 생각해라. 다른 말로 하면 프로토타입의 초고의 최종안이라고 생각하면 된다.

이는 주로 개발 세계에서의 도구를 빌려 다른 방식으로 사용하는 것을 의미한다. 우리 사례를 예로 들자면, 우리는 사용자가 W-2 소득 전표를 사진 찍는 것을 과정의 처음 부분에 넣어야 할지 마지막 부분에 넣어야 할지에 테스트를 위한 프레임워크가 필요했다. 우리는 결국 AngularJS라는 오픈소스 웹 앱 프레임워크를 사용했는데, 프로토타입 반복을 빠르게 했고, 테스팅 순서를 바꿨으며, 많은 코드 없이도 실제 데이터를 기반으로 테스트할 수 있게 하는 결정적인 요소였다. 마지막으로 우리는 HTML, CSS, JS에 대한 지식이 없는 유저들이 테스팅 프레임워크를 사용할 수 있게 만들 수 있었다. 이는 결과적으로 인터렉션 디자이너들과 프로덕트 관리자 PM들 프로토타입에 더 많이 기여할 수 있게 만들었다. AngularJS을 다른 방법으로 프로토타이핑에 재사용함을 통해서 우리가 지난 2년간 사용한 프레임워크를 세울 수 있게 되었다.

프로토타이퍼는 프런트 엔드 개발자가 아니라는 것을 기억하길 바란다. Intuit에서는 프로토타이퍼들의 60%는 디자이너이며 40%는 개발자이다. 프로토타이퍼는 디자인을 생산 가능하고 방대한 프로덕트로 만들기 전에 디자인 의도를 소개하는 데에 집중한다. 코딩에 너무 치중해 실제 테스트 가능한 프로토타이핑보다 생산 가능한 코드에 집중하는 경험 디자이너들을 가끔 이런 분명한 차이를 잊는 것을 종종 본다.

 

 

디자인과 엔지니어링 사이의 다리

프로토타이핑은 디자인과 엔지니어링 사이의 연결점의 역할을 한다. 우리는 두 언어를 하고 두 관점을 모두 존중한다. 가능한 한 언제든지 우리는 기술적인 문제들에 있어서 원래 디자인 의도를 보존하면서도 엔지니어들이 그 의도를 쉽게 이해할 수 있도록 창의적인 해결방법을 찾으려고 노력한다. 그러기 위해서 우리는 좋은 참조를 위해서는 가끔 개발자와 같이 자바스크립트 애니메이션 라이브러리를 사용하기도 한다.

하지만 다시 말하자면, 프로토타이핑은 재활용 가능한 코드라던가 프로덕트가 다양한 브라우저와 플랫폼에서 제대로 실행 가능할지에 대한 것보다는 결국 ‘스피드’에 대한 것이다. 사실 우린 최대한 빠르게 소통할 수 있게 하는 형식의 디자인을 사용하는 단순한 방법을 쓰는 것이다. 프로토타이핑은 빠른 반복과 빠른 실패 (빠른 배움도)를 실험할 수 있게 해 주고, 전체 프로덕트 팀의 기술적 한계에 도전하게 해준다. 개발자들이 고성능(hi-fi) 프로토타입에 임할 때에는 프로토타입을 코드의 시작점이 아닌 디자인 의도의 표현방식으로 취급해야 한다. 개발자들은 시스템의 한계에 대해서 새로운 출발을 한다는 마음가짐을 가지고 있어야 한다. 하지만만 약 프로토타이핑 팀이 역할을 잘 해냈다면, 프로토타이핑이 없을 때와는 다르게 개발자도 무엇을 전달할지에 대한 정확한 이해를 가지게 될 것이고, 결국 더 짧은 시간에 깔끔한 코드를 생산할 수 있게 될 것이다. 코드는 우리의 꼭 필요한 도구이지만 신은 아니다. 우리에게 노력할 영감을 주는 것은 디자인이다.