Dive Into UX(3) - Prototyping
프로토타이핑 해부하기 - Low fidelity
들어가며
이번 연초에 동계 HCI학회에 참석했었다. 국내 유수의 대학들과 기업들의 부스 전시들도 기억에 남았지만 가장 기억에 남았던 것은 Scott 교수의 강연이었다. 그 이유는 여러 가지가 있다. 그의 중후한 외모, 젠틀함과 적절한 유머를 겸비한 강연 실력 그리고 가장 중요한 강연 내용. (그는 다 가진 남자였다.) 그의 강연 내용을 한 문장으로 요약하면 다음과 같다.
강연 때의 모습
Whatever you'd like to make or design, Make a prototype first.
프로토타이핑은 완제품을 만들기 전에 시제품을 만들어보는 것이다. 프로토타입은 크게 3가지로 나뉜다. 각각 완성도 수준에 따라서 Low-fidelity(이하 로우 피델리티), Mid-Fidelity(이하 미드 피델리티), High-Fidelity(하이 피델리티)이다. fidelity는 묘사의 정확성을 나타내는 용어이다. 오늘은 앞서 말한 세 가지 프로토타입의 방법 중에 로우 피델리티에 대해 알아보려 한다.
Fidelity에 대해 조금 더 알아보자. NN/g(Norman Nelson Group)의 포스팅에 굉장히 설명되어 있다.
https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/ 그렇다고 포스팅 보고 참고하세요!라고 할 것은 아니니 안심하고 스크롤을 내려도 된다.
아래의 표는 해당 내용을 한국어로 번역해놓은 것이다.
Low-fidelity(로우-피델리티)
로우 피델리티는 낮은 수준의 프로토타이핑이다. 무엇의 수준이 낮다는 말인가? 앞서 말한 대로 묘사력이다. 애플리케이션을 디자인한다고 가정해보자, 로우 피델리티는 연습장의 스케치 정도이다. 처음 로우 피델리티를 교수님께 배웠을 때 이렇게 생각했었다. "에?" 그런데 이 로우 피델리티라는 친구는 의외로 굉장히 유용하다.
Low fidelity 예시 출처: https://www.flickr.com/photos/rosenfeldmedia/28376741725애플리케이션의 전반적인 프로세스를 사용자에게 보여주려는 경우를 생각해보자. 여기서 사용에게 얻고 싶은 피드백은 이 애플리케이션의 전반적인 프로세스가 편리한가? 인터렉션 중 이상한 것은 없는가? 정도이다. 그런데 이때 완성품 수준과 비슷한 수준의 시제품을 사용자에 보여준다면 대답은 이럴 가능성이 높다. "여기 색이 좀 이상한 것 같아요", "여기 폰트가 조금 이상한 것 같아요", "아이콘이 이상해요". 이러한 대답은 연구자가 얻고 싶은 대답이 아니다. UI와 관련된 정보를 얻고자 하는 것이 아니기 때문이다.
여기서 로우 피델리티가 존재감을 발휘한다. 스케치 수준의 제품을 볼 때, 사용자는 미관을 고려하지 않는다. 오히려 애플리케이션의 전반적인 프로세스를 보려 하며 어떤 인터렉션으로, 어떤 페이지로 넘어가게 되는지를 관찰한다. 비로소 사용자는 연구자의 질문에 바르게 답한다. 로우 피델리티를 진행하지 않고 바로 애플리케이션을 만드는 경우 시간을 절악할 수 있지만 사용성에 대한 피드백이 없이 진행되었기 때문에 불편함을 유발할 수 있다.
아래에는 로우 피델리티 프로토타입의 장점과 기준에 대한 설명이다.
출처: https://www.slideshare.net/hanspoldoja/user-interface-prototyping-techniques-low-fidelity
출처: http://slideplayer.com/slide/4319111/로우 피델리티의 또 하나의 장점은 디자이너가 아니어도 프로토타입을 만드는데 문제가 없다는 것이다. 높은 수준의 묘사가 필요하지 않기 때문에 굳이 아름다운 UI가 나올 필요도, 예쁘고 가독성이 좋은 폰트를 사용할 필요도 없다. 흰 종이에 펜 하나만 있어도 충분하다. 정확히 말하면 아름다운 UI가 나오지 않는 것이 좋다고 한다.
아래가 실제 작업할 때 나오는 로우 피델리티 프로토타이핑이다.
https://www.slideshare.net/hanspoldoja/user-interface-prototyping-techniques-low-fidelity-prototypin로우 피델리티와 하이 피델리티를 각각 Static Protytpe, Interactive (Clickable) Prototypes이라고도 한다. 아래 그림은 언제 Static Protytpe과 Interactive Protytpe을 사용하여하는지에 대한 가이드라인이다.
https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/Low fidelity 사용법(1)
NN/g의 자료를 번역한 글입니다.
Wizard of Oz
이 방법은 라이먼 랑크 바움의 유명한 책의 이름을 따서 지어졌다. 혹시 오즈의 마법사의 내용을 모르는 사람들을 위해 부연하자면 대마법사 오즈는 없고, 커튼 뒤에 가려진 서커스에서 마술을 하는 오스카 조로아스터가 그 정체였다는 이야기. 어찌 되었든 이 로우 피델리티 방법에서 디자어니는 ‘오즈’가 된다.'오즈’는 이제 커튼이 아니라 다른 방에서 직접 리모컨을 눌러서 사용자의 액션에 따라 다음 페이지를 보여준다. 하이 피델리티와 다른 점은 하이 피델리티에서는 사용자의 액션(버튼 누르기)등에 따라서 프로토타입이 직접 내부 알고리즘을 통하여 사용자에게 정보를 보여준다는 것. ‘오즈’는 이 방법이 행해지는 중간에 새로운 페이지를 만들어 사용자에게 보여줄 수도 있다. 사용자는 어떠한 페이지가 나올지 예상할 수 없다. 이 방법은 AI를 개발 하기 전에 이를 테스트하기 위해서 자주 사용하는 방법이다. 연구자들은 AI의 반응을 인간이 타고난 지능을 기반으로 실험한다.
Paper-Prototype “Computer.
이 디자인은 종이 위에 프로토타입을 그린다. 디자인을 잘 아는 사람이 컴퓨터의 역할을 하고 테이블 위에 프로토타입을 뿌린다. 여기서 중요한 것은 프로토타입이 뿌려질 테이블은 사용자의 시선에 들어오지 않으면서도 사용자와 가까워야 한다. 사용자들은 자신들 앞에 Screen 페이지를 개별적으로 받는다. 사용자가 Screen페이지 위에 있는 버튼 등을 누르면 컴퓨터 역할을 하는 연구자는 해당하는 페이지를 사용자에게 보여준다.
팁: 컴퓨터 역할을 하는 연구자는 페이지가 교체될 때마다 사용자에게 페이지 로딩이 끝났다고 말해주어야 한다. 그렇게 함으로써 사용자들은 로딩이 끝난 새로운 페이지와 인터렉션을 시작한다. 사실 말을 하는 것보다는 사전에 약속된 제스처를 취하는 것이 좋다.
Steal-the-Mouse “Computer.”
이 방법은 오즈의 마법사와 같은 방법이지만, 오즈와 사용자는 모두 같은 방에 있어야 한다. 또한 이 방법에는 도우미가 한 명 필요하다. 사용자는 컴퓨터 스크린에서 특정 버튼을 누르고 난 뒤에, 도우미는 사용자에게 모니터에서 시선을 돌리라고 말해준다. 그 후에 오즈는 다음에 나올 페이지를 선택한다. 페이지가 바뀐 즉시 사용자는 페이지를 본다. 이렇게 계속 진행한다.
Low fidelity 사용법(2)
사실 요즘에는 너무나 좋은 로우 피델리티 프로토타이핑 소프트웨어가 많이 나와있다. 그래서 그냥 아래의 소프트웨어로 만들고 사용성 조사를 한다.
Invision: 웹 기반의 프로그램으로 로우/하이 피델리티 소프트웨어. 포토샵만 쓸 줄 안다면 아주 간단.
Balsamiq: 로우 피델리티(와이어 프레이밍) 기반 소프트웨어.
Axure RP: 와이어 프레이밍 선두 소프트웨어
Marvel: 무료 와이어 프레이밍 소프트웨어
Pencil Proejct: 파이어폭스 확장 프로그램 혹은 소프트웨어로 위와 비슷하다.
UX pin
Mock Plus
Quick mockup
위의 소프트웨어는 구글링을 하면 즉시 찾을 수 있다.
