✔ Wireframe

선으로 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 화면 구조를 잡기위한 목적으로 만든다.

• Low Fidelity Wireframe (Lo-Fi Wireframe)
  
  손으로 빠르게 그린 수준, 아이디어를 구체화 시키며 큰 그림을 잡을 때 좋다.

• Middle Fidelity Wireframe (Mid-Fi Wireframe)
  
  Lo-Fi Wireframe의 다음 단계, 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.

• High Fidelity Wireframe (Hi-Fi Wireframe)
  
  목업에 가까운 형태, 와이어프레임을 작성하는 목적과는 맞지 않아 Hi-Fi한 수준까지 만드는 경우는 거의 없다.

• 주로 Low ~ Middle 단계 작성

✔ Prototype

실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능하다.

개발에 들어가기 전 단계에서 UI의 상호 작용을 시뮬레이션하는 것을 목적으로 작성한다.

• Low Fidelity Prototype (Lo-Fi Prototype)
  
  구체적인 내용 x, 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입으로, User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있으며, 사용성 테스트에는 적합하지 않다.

• High Fidelity Prototype (Hi-Fi Prototype)
  
  최종 결과물과 거의 유사한 수준으로 만든 프로토타입으로, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능하다. 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있다.

• Middle Fidelity Prototype (Mid-Fi Prototype)
  
  Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입으로, 사용성 테스트가 가능하다.

• 주로 Middle ~ High 단계 작성

Reference: 코드스테이츠