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