와이어프레임(wireframe)
와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다.
와이어프레임을 표현할 때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눈다.
Low fidelity Wireframe(Lo-Fi Wireframe)
손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다.
수정하거나 새로운 의견을 반영하기 쉽다.
Middle Fidelity Wireframe(Mid-Fi Wireframe)
Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi 와이어프레임이 된다. 해당페이지가 어떻게 작동하게 되는지 예상할 수 있다.
High Fidelity Wireframe(Hi-Fi Wireframe)
완성본에 가장 가깝게 작성한 것이다. 작성하는데 시간이 많이 들고, 수정하기 어려워서 Hi-Fi한 수준까지 만드는 경우는 거의 없다.
프로토타입
프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호작용이 가능하다.
본격적으로 개발에 들어가기 전 단계에 작성하고, UI의 상호 작용을 시뮬레이션하는 것이 목표이다.
Low Fidelity Prototype(Lo-Fi Prototype)
구체적으로 작성되어 있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준의 프로토타입이다.
High Fidelity Prototype(Hi-Fi Prototype)
최종 결과물과 거의 유사한 수준으로 만든 프로토타입이다. 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능하다.
Middle Fidelity Prototype(Mid-Fi Prototype)
Hi-Fi보다는 완성도가 덜 하지만, Lo-Fi보다는 최종에 가까운 프로토타입이다.
사용성 테스트를 하기 위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해 주는 것이 좋다.
