와이어프레임

: wire 선으로 frame 틀을 잡는다는 의미.

• 기획단계에서 구조를 잡는 과정

fidelity 피델리티

품질 수준을 나타내는 3가지(Low, Middle, High)의 레벨

1. Lo-Fi Wireframe (Low Fidelity Wireframe)

스케치로 만든 수준

• 수정하기에 용이하며 아이디어를 구체화할 때 사용한다.

2. Mid-Fi Wireframe (Middle Fidelity Wireframe)

보기 좋게 다듬은 수준

• 레이아웃, 글자 크기, 이미지 위치 등 조정한 것
• 해당 페이지의 작동을 예상할 수 있다.

3. Hi-Fi Wireframe (High Fidelity Wireframe)

완성본, 목업에 가까운 수준

• 시간소요가 많이 되고 수정이 어려워 Hi-Fi한 수준까지 만드는 경우는 거의 없다.

프로토타입

실제 제품과 흡사하게 구현하여 페이지이동과 상호작용이 가능.

• 개발 전 단계에서 UI 상호작용을 시뮬레이션 하는 것이 목적

1. Lo-Fi Prototype (Low Fidelity Prototype)

간단한 상호작용, 페이지 이동을 테스트해볼 수 있는 수준

• user flow 상에서 어색한 기능, 페이지가 있는지 검토

2. Hi-Fi Prototype (High Fidelity Prototype)

최종 결과물과 비슷한 수준

• 디자인을 거의 확정
• 실제제품과 거의 동일하게 작동하므로 사용성 테스트 가능
• 개발 전 테스트를 통해 UI/UX 문제를 발견하기때문에 개발 비용 절감 효과 있음

3. Mid-Fi Prototype (Middle Fidelity Prototype)

Lo-Fi 프로토타입보다는 최종 결과물에 가까운 수준

• 사용성 테스트를 위해선 Mid-Fi 수준까지 만드는 것이 바람직

차이점

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시뮬레이션
특징	정적	동적
피델리티	Low ~ Middle (High는 거의 작성하지 않음)	Middle ~ High (Low는 테스트에 적합하지 않음)