와이어프레임.

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

이 와이어 프레임을 표현할때의 품질 수준을 fidelity, 피델리티라고 표현하며 3가지 레벨으로 나누게 된다.

Lo-Fi Wireframe

Low Fidelity, 손으로 빠르게 그린 수준의 와이어 프레임을 의미한다.
작성하는데 시간이 많이 들지 않아 수정하기에 용이하므로
아이디어를 구체화시키며 큰 그림을 잡는 과정에 주로 사용된다.

Mid-Fi Wireframe

Middel Fidelity, Lo-Fi 와이어프레임에서 아이디어가 구체화, 확정된 후
보기 좋게 다듬어준다면 Mid-Fi 와이어프레임이 되는데,
이 단계에서는 와이어 프레임을 봤을 때, 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.

Hi-Fi Wireframe

와이어프레임을 완성본의 형태로 작성한것을 Hi-Fi 와이어프레임이라고 하는데,
와이어프레임보다는 목업에 가까운 형태로서, 작성하는데 시간이 많이 걸리고,
수정도 어려워 지기 때문에 Hi-Fi 수준까지 와이어 프레임을 작성하는 경우는 많지 않다.

Prototype

프로토타입은 실제와 가깝게 구현한 것으로, 실제와 유사하게 페이지이동, 상호작용등이 가능하다.
본격적으로 개발에 들어가기 전 단계에, UI의 상호작용을 시뮬레이션 하는것에 목적이 있다.

Lo-Fi Prototype

구체적인 내용이 작성되어있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입을 Lo-Fi 프로토타입이라고 합니다. User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있습니다.

Mid-Fi Prototype

Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입을 Mid-Fi 프로토타입이라고 합니다. 사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주는 것이 좋습니다.

Hi-Fi Prototype

최종 결과물과 거의 유사한 수준으로 만든 프로토타입을 Hi-Fi 프로토타입이라고 합니다. 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능합니다. 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있습니다.

Wireframe 과 Prototype의 차이점

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 직전 단계
작성 목적	화면의 구조 설계	UI 상호작용의 시뮬레이션
특징	정적	동적
피델리티 수준	Low~Middle	Middle~ High