TIL) 와이어프레임과 프로토타입 공통점, 차이점

와이어프레임(wireframe) = 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다. (스켈레톤)

3가지 레벨의 피델리티(fidelity)

1. Lo-Fi Wireframe  (아이디어를 구체화 시키며 큰 그림을 잡을 때 좋다.)

2. Mid-Fi Wireframe (해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.)

3. Hi-Fi Wireframe (Hi-Fi한 수준까지 만드는 경우는 거의 없다.)

---

프로토타입(prototype) = 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적

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

 

3가지 레벨의 피델리티(fidelity)

1. Lo-Fi Wireframe  (User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있다.)

2. Mid-Fi Wireframe (사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주는 것이 좋다.)

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

 

---

와이어프레임과 프로토타입 공통점 

➥ 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것

---

와이어프레임과 프로토타입 차이점 

와이어프레임프로토타입

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