Codestates SEB FE 42기/정리노트

S3 unit2 | 와이어프레임 & 프로토타입 차이점과 쓰임새

2realzoo 2022. 12. 27. 15:06

📌 와이어프레임 (Wireframe)

: 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지의 구조를 잡기 위한 목적으로 만듭니다.

 

피델리티(fidelity)

:와이어프레임, 프로토타입의 품질 수준을 전문용어로 표현한 것이며 3가지 레벨로 나뉩니다.

 

1. Low Fidelity Wireframe(Lo-Fi Wireframe)

: 손으로 빠르게 그린 수준의 와이어프레임

  • 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움
  • 아이디어 구체화, 큰 그림을 잡을 때 유리

 

2. Middle Fidelity Wireframe(Mid-Fi Wireframe)

: Lo-Fi 와이어프레임을 그리며 아이디어 구체화하고 확정된 후에 보기 좋게 다듬은 와이어프레임

  • 와이어프레임을 봤을 때 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있음

 

3. High Fidelity Wireframe(Hi-Fi Wireframe)

: 완성본에 가깝게 작성된 와이어프레임

  • 와이어프레임보다는 목업에 가까운 형태
  • 작성 시간이 오래 걸리고 수정이 어려움
  • 와이어프레임 작성 목적에 맞지 않아 Hi-Fi 수준까지는 거의 만들지 않음

 

📌 프로토타입 (Prototype)

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

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

 

1. Low Fidelity Prototype(Lo-Fi Prototype)

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

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

 

2. Middle Fidelity Prototype(Mid-Fi Prototype)

: Lo-Fi와 Hi-Fi의 중간 수준 프로토타입

  • 사용성 테스트를 하기 위한 최소 수준

 

3. High Fidelity Prototype(Hi-Fi Prototype)

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

  • 디자인 거의 확정
  • 실제 제품과 거의 다름없이 작동하므로 사용성 테스트 가능
  • 테스트를 통해 개발 비용이 들어가기 전에 UI/UX 문제 발견 및 수정 가능 => 비용 절감 효과

 

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