1. 와이어프레임
와이어 프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다.
1-1 Low Fidelity Wireframe (Lo-Fi Wireframe)
손으로 빠르게 스케치 한 정도의 와이어 프레임이다. 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다. 아이디어를 구체화시키며 큰 그림을 잡을 때 좋다.
1-2 Middle Fidelity Wireframe (Mid-Fi Wireframe)
Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi 와이어프레임이 된다. Mid-Fi 수준에서는 와이어프레임을 봤을때 해당 페이지가 어떻게 작동하게 될지 예상할 수 있다.
1-3 High Fidelity Wireframe (Hi-Fi Wireframe)
와이어프레임을 완성본에 가깝게 작성한 것을 Hi-Fi 와이어프레임이라고 한다. 와이어프레임이라기보다는 목업에 가ㄷ까운 형태이고, 작성하는데 시간도 많이 소모되고 수정도 어렵기 때문에 와이어프프레임의 목적과는 거리가 있어 Hi-Fi수준까지 만드는경우는 거의 없다.
2. 프로토타입
실제 제품과 거의 흡사하게 구현한 것으로 페이지 이동과 상호 작용이 가능하다. 본격적인 개발에 들어가기 전 단계에 작성하고 UI의 상호작용을 시뮬레이션 하는것이 목적이다.
2-1 Low Fidelity Wireframe (Lo-Fi Wireframe)
구체적인 내용이 작성되어 있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준으로 작성한다. User flow상에서 빠지거나 어색한 기능, 페이지가 없는지 등을 빠르게 검토할 수 있다.
2-2 High Fidelity Prototype (Hi-Fi Prototype)
최종 결과물과 거의 유사한 수준까지 만든 프로토타입이다. 이 단계에서는 디자인을 거의 확정하게 되고, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능하다. 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용절감 효과를 기대할 수 있다.
2-3 Middle Fidelity Prototype (Mid-Fi Prototype)
Hi-Fi 프로토타입처럼 완성도가 높진 않지만 Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입이다. 사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주는 것이 좋다.
