프로토타이핑

프로토타이핑의 효과

플로차트를 작성하고 프로토타이핑 테스트를 하는 것처럼 와이어 프레임을 작성한 후에도 프로토타이핑해 보는 것이 좋다. 프로토타이핑 Prototyping은 사전적으로 원형이나 견본을 의미하는데, 앱 개발에서는 실제 원하는 방식으로 서비스가 작동하고 구현되는지 테스트하는 과정을 말한다. 프로토타이핑하면 코딩하지 않고도 앱을 테스트할 수 있으므로 디자이너와 개발자가 서로 이해하면서 원활하게 의사소통을 할 수 있다. 또한, 성능과 구현 가능성 등을 시험하기 위해 전체 기능을 간편하게 만들어 보기 때문에 시행착오를 줄일 수 있다.

프로토타이핑 방법

1. 종이 프로토타이핑
일반적으로 제품이나 서비스가 동작하는 방식을 보여 주는 가장 빠른 방법은 종이 위에 디자인의 특정한 순간을 담아 스케치하고 숫자를 작성한 후 숫자 순서대로 프로토타입 Prototype을 넘기면서 세부 페이지를 테스트하는 것이다. 프로토타입은 최종 제품이 아니므로 테스트하면서 발견한 오류를 피드백하고 수정하기 쉽다.
종이 프로토타이핑을 쉽게 시작하려면 우선 사용자의 수행 목록을 작성해야 한다. 즉, 수행에 필요한 버튼이나 메뉴 같은 화면 세트를 스케치해 사용자가 수행 목록에 따라 다음 페이지로 진행할 수 있도록 하는 것이다. 스케치가 어렵다면 유사한 스크린 캡처를 인쇄해서 사용해도 된다. 그런 다음 구성 요소를 조각으로 나누고 메인 화면에 위치시켜 동료와 함께 사용자의 역할과 스마트폰의 역할을 나누어 화면 메뉴의 인터페이스를 수행 순서에 따라 변경해 진행한다. 

사용자가 할 수 있는 중요한 수행 목록을 작성한다.
수행에 필요한 버튼, 메뉴와 같은 화면 세트를 스케치한다.
스케치가 어렵다면 유사한 스크린 캡처를 인쇄해 사용한다.
구성 요소를 조각으로 나누고, 메인 화면에 위치시킨다.
동료와 사용자 역할, 컴퓨터 역할을 나누어 화면 메뉴의 인터페이스를 바꾼다.

2. 디지털 프로토타이핑
과거에는 비용과 시간이 많이 든다는 이유로 종이 프로토타이핑을 진행하거나 클라이언트의 요구에 따라 파워포인트 등으로 최소한의 기능만 구현하기도 했다. 하지만 최근에는 프로토타입을 테스트할 수 있는 도구가 많이 나와 있다. 프로토타입 도구를 이용해 디지털 프로토타이핑을 진행하면 앱을 실제로 실행한 것처럼 다양한 동작을 테스트할 수 있다.
디지털 프로토타이핑은 종이 프로토타이핑과 달리 상호작용이 가능한 것이 가장 큰 장점이다. 테스트하는 동안 사용자는 시스템과 상호작용하면서 최종 제품에서 얻을 수 있는 사용자 경험을 할 수 있다. 정교하게 디자인해 프로토타입을 작성하면 최종 결과물을 테스트하는 듯한 착각이 들 수도 있다.

3. 와이어 프레임 도구와 프로토타이핑 도구

- 파워목업 Power Mock up
파워목업은 설치 후 파워포인트에서 사용한다. 목업은 와이어 프레임과 유사하거나 같은 의미로 사용되곤 하는데, 파워목업을 설치하고 파워포인트를 실행하면 파워포인트에 메뉴가 생성된다. 파워목업을 이용하면 미리 제작해 놓은 레이아웃이나 컴포넌트 등을 드래그해 사용하거나 파워포인트에서 직접 그려서 사용할 수 있다. 파워목업은 윈도에서만 실행할 수 있으며 유료이다. 공식사이트에서는 무료 시험 버전도 제공한다.
공식사이트_http://www.powermockup.com

- 오븐 Oven
오븐은 별도의 설치 없이 온라인에서 사용할 수 있는 도구이다. 로그인하면 공유할 수 있고, 결과물은 로그인하지 않아도 볼 수 있다. QR 코드와 단축 URL을 통한 공유도 가능하다. 직관적인 UI와 다양한 컴포넌트를 사용해 프로토타입을 테스트할 수 있다. 무료라는 장점이 있지만, 최신 기능으로 업데이트가 안 된다는 단점도 있다.
공식사이트_https://ovenapp.io

-발사믹 Balsamiq
발사믹은 핸드 드로잉한 느낌으로 UI를 디자인할 수 있는 프로그램이다. 꼼꼼한 화면을 구성하기에는 무리가 있고 종이 프로토타이핑을 위해 러프 스케치하는 정도로 사용할 수 있다. 배우고 사용하기 쉽지만, 유료이고 저렴하지 않다. 윈도와 맥에서 모두 사용할 수 있고 발사믹 사이트에서 무료 시험 버전도 제공한다.
공식사이트_https://balsamiq.com

-인비전 Invision
인비전은 쉽게 배울 수 있고 협업을 위한 공유 기능을 제공하기 때문에 간단한 프로토타이핑 용도로 사용하기에 좋다. 웹 화면에서 구현할 수 있고 간단한 상호작용도 제공한다. 단, 여러 화면을 연결해서 보려면 모든 화면을 제작해야 해서 번거롭다. 인비전 웹 사이트에서는 무료 엔터프라이즈 시험 버전을 제공한다.
공식사이트_https://www.invisionapp.com

-UX 핀 
UX 핀은 웹 브라우저에서 구동할 수 있고 와이어 프레임과 프로토타이핑 작업에 모두 사용할 수 있다. 월 정액제로 지급해야 하지만 시험 버전은 무료로 사용해 볼 수 있다. 사이트 디자인 패턴과 다양한 컴포넌트를 제공하며 유료 버전을 사용하면 UX-Book을 제공한다.
공식사이트_https://www.uxpin.com

-액슈어 Axure
액슈어는 와이어 프레임은 물론 프로토타이핑 작업에도 사용할 수 있고 팀원 간의 공유 기능도 제공한다. 윈도와 맥 버전이 모두 있고 매월 내거나 일시불로 구매할 수 있다. 다양한 애니메이션 기능이 있어 전문가 집단에서 많이 사용한다.
공식사이트_https://www.axure.com

-스케치 Sketch
스케치는 해외에서 가장 많이 사용하는 프로토타이핑 도구다. 돈을 내면 내려받아 설치할 수 있다. 플러그인을 사용하면 디자인 가이드라인도 자동으로 생성되지만, 맥 버전만 있고 윈도 버전은 따로 제공하지 않는다.
공식사이트_https://www.sketchapp.com

-어도비 XD Adobe XD
어도비 XD는 어도비사에서 스케치에 대응하기 위해 만든 프로그램으로 와이어 프레임은 물론 인터랙티브Interactive한 프로토타입까지 테스트해 볼 수 있다. 벡터와 래스터 아트워크를 그리거나 재사용하는 것도 가능하다. 윈도와 맥에서 모두 사용할 수 있으며, 현재는 어도비 크리에이티브 클라우드 Adobe Creative Cloud 요금제와 별도로 무료로 내려받을 수 있다. 최근 클라우드를 통한 업데이트가 수시로 이루어지고 있고, 제플린을 사용할 수 있게 되면서 점차 사용자가 늘고 있다.
공식사이트_https://www.adobe.com/kr/products/experience-design.html

2023.04.09 - [UXUI 디자인] - 모바일 UI/UX 디자인의 종류

모바일 UI/UX 디자인의 종류

2023.04.08 - [UXUI 디자인] - 정보 구조 설계 플로차트 와이어프레임

정보 구조 설계 플로차트 와이어프레임