와이어프레임 & 프로토타입

와이어프레임

와이어프레임이란??

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듭니다.

와이어프레임 단계

와이어프레임은 3가지 레벨로 나뉜다.

1. Low Fidelity Wireframe(Lo-Fi Wireframe)
   : 손으로 빠르게 그린 수준의 와이어프레임이다.

2. Middle Fidelity Wireframe(Mid-Fi Wireframe)
   : Lo-Fi 단계에서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-fi단계가 된다. 이 단계에서는 해당 페이지가 어떻게 작동하는지 예상할 수 있다.

3. High Fidelity Wireframe(Hi-Fi Wireframe)
   : 완성본에 가깝게 작성된 상태로, 와이어프레임 보다는 목업에 가까운 형태이다.
   작성하는데 시간도 많이 들고 수정도 어렵기 때문에 이 수준까지 만드는 경우는 거의 없다.

프로토타입

프로토타입이란??

실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능하다. 본격적으로 개발에 들어가기 전 단계이며, UI의 상호 작용을 시뮬레이션하는 것이 목적이다.

프로토타입 단계

프로토타입도 완성정도에 따라서 나뉘게 된다.

1. Lo-Fi Prototype
   : 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준의 프로토타입

2. Mid-Fi Prototype
   : Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입을 Mid-Fi 프로토타입이라고 한다. 사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주는 것이 좋다.

3. Hi-Fi Prototype
   : 최종 결과물과 거의 유사한 수준으로 만든 프로토타입을 Hi-Fi 프로토타입이라고 한다. 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능하고 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있다.

와이어프레임과 프로토타입의 차이점