]UIUX[ 프로토타이핑 개념과 도구

프로토타이핑(시제품 시연)

 

개요

• 소비자가 우리 의도대로 반응해 준다면 바로 대박이다. 하지만 그런 경우는 몹시 한정적이다.
• 대신 우리쪽에서 실제 소비자들의 생각과 반응을 일찍 파악해야 한다.
• 시제품 시연은 자신의 아이디어를 일찍 평가 받는 방법이며, 개발 시간을 절약해 사용자 니즈를 충족할 제품으로 발전하게 한다.

시제품

• 제품 완성 이전 모형으로 특정 부분 혹은 기능을 테스트한다.

  ex) 비행기 모형 부력 테스트

• 프로토타입은 제품 초기 릴리즈가 아니다. 아이디어 검토를 위한 실험

• 백문이 불여일견

  실제 사용자가 몰입하여 제품과 아이디어를 테스트 해 줌

  프로젝트에 효과적인 도움을 줄 수 있음

프로토타이핑의 마인드

• 최소 노력과 비용으로 최대의 환상을 만들자
• 굳이 로직을 코딩할 것 까지도 없다
• 서비스가 움직이는 모습을 보이면 된다
• 단순해도 된다
• 테스트 할 일부분만 필요하다

방법론

• 최대한 빠른 시간 내로 구현하되 현실감 있는 경험을 제공하기

• 특정 시나리오에만 초점을 두기

• 단순화된 인터랙션을 제공하기

  ex) 로그인 화면에 미리 계정 입력해두기

• 확인하려는 사항을 사전정의 & 계획해야 함

완성도 (Fidelity)에 따른 구분

얼마나 사실적으로 제작할 것인가

• Paper Prototyping

  진입장벽이 낮고, 수정도 빠르다

  브레인스토밍 과정에서 유용하게 사용 가능하다

  아래에서 프로토타이핑용 종이를 다운 받을 수 있다!

  https://sneakpeekit.com

• Low-Fidelity Digital Prototyping

  종이에 그린 시제품을 카메라로 찍고

  링크 이동을 (솔루션을 사용해) 구현

  https://marvelapp.com/pop

• High-Fidelity Digital Prototyping

  최종 제품과 구분하기 어려운 수준으로 UI 완성도가 높다

  고급 도구와 고급 애셋을 사용한다

인터랙션에 따른 구분

• 수동 인터랙션

  정지 이미지, 동영상으로 퉁치기

  실제 제어에 관한 코드는 구현하지 않음

• 능동 인터랙션

  실제로 조작. 몰입되는 자연스러운 UX 제공

계획 수립하기

• 프로토타이핑은 실험이다

• 계획

  무엇을? 대상 사용자는? 시나리오는?

• 목표

  ex) 네비게이션이 명확한가?

• 대상 사용자

  실제 사용자 대상이면 하이-피델리티로 실험

  이 때 사용자가 친숙한 플랫폼과 작업을 제공해야 한다

• 시나리오

  사용자 행위 중 핵심이 되는 시나리오를 선정한다

• 수행방법

  1. 프로토타입 설계도 그리기

     개발 과정과 실험 결과 점검에 사용

  2. 사용자 경로 결정

     시나리오를 기반으로 이상적인 경로와 예외적인 경로를 예측. 이에 대비한다.

  3. 완성도 결정

 

프로토타이핑 도구

• 네비게이션 기반 Adobe XD

  • 앱의 특정 뷰를 보여주고 UI와 UI 제어 요소 사이의 전환을 시뮬레이션한다

  • 발생가능한 여러 상태를 보여주려면 중복된 뷰를 추가 준비 해야한다

• 타임라인 (애니메이션) 기반 Tumult Hype

  • HTML5 기반
  • 컨텐츠의 움직임을 애니메이션화하여 보여줌

• 구성 요소 연결 기반 Form (무료)

  https://prototypr.io/prototyping-tool/form/

  • 비주얼 프로그래밍 툴
  • Form과 관련된 인터랙션 요소 또는 논리적 요소를 연결한다
  • Form에서 각 요소의 동작 방식을 정의함

• 코드 기반 Framer (무료)

  https://www.framer.com

  • 스크립트 등 프로그래밍 언어를 사용
  • 유연하고 쉽게 하이-피델리티 프로토타입을 작성
  • 코드 말고도 드래그 앤 드롭 GUI로 충분히 시연을 할 수 있다
  • 팀 단위 생산성 앱이다