**와이어프레임(wireframe)**

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻

제품 기획 단계 에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적

와이어프레임을 표현할 때 3가지 레벨로 나뉨

**1. Low Fidelity Wireframe (Lo-Fi Wireframe)**

손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임

작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움

아이디어를 구체화 시키며 큰 그림을 잡을 때 좋음

**2. Middle Fidelity Wireframe (Mid-Fi Wireframe)**

Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi 와이어프레임이 됨

해당 페이지가 어떻게 작동하게 될 지 예상가능

**3. High Fidelity Wireframe (Hi-Fi Wireframe)**

와이어프레임을 완성본에 가깝게 작성한 것을 Hi-Fi 와이어프레임

와이어프레임이라기 보다는 목업에 가까운 형태이며, 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않음

**프로토타입(prototype)**

프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능

개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적

**1. Low Fidelity Prototype (Lo-Fi Prototype)**

구체적인 내용이 작성되어있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입

User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토가능

**2. High Fidelity Prototype (Hi-Fi Prototype)**

최종 결과물과 거의 유사한 수준으로 만든 프로토타입

이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능

**3. Middle Fidelity Prototype (Mid-Fi Prototype)**

Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입