와이어프레임(wireframe)
- 와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다.
- 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눈다.
1. Low Fidelity Wireframe (Lo-Fi Wireframe)
- 손으로 빠르게 그린 수준의 와이어프레임을
Lo-Fi 와이어프레임이라고 한다.
- 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다.
- 아이디어를 구체화시키며 큰 그림을 잡을 때 좋습니다.
2. Middle Fidelity Wireframe (Mid-Fi Wireframe)
Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면Mid-Fi 와이어프레임이 된다.
Mid-Fi수준에서는 와이어프레임을 봤을 때 해당 페이지가 어떻게 작동하게 될지 예상할 수 있다.
3. High Fidelity Wireframe (Hi-Fi Wireframe)
- 와이어프레임을 완성본에 가깝게 작성한 것을
Hi-Fi 와이어프레임이라고 한다.
- 와이어프레임이라기보다는 목업에 가까운 형태이며, 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않아
Hi-Fi한 수준까지 만드는 경우는 거의 없다.
프로토타입(prototype)
- 프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능하다.
- 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적이다.
프로토타입 역시 얼마나 최종 결과물과 흡사하게 만들었는지에 따라서 피델리티 레벨이 나뉜다.
1. Low Fidelity Prototype (Lo-Fi Prototype)
- 구체적인 내용이 작성되어 있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준의 프로토타입을
Lo-Fi 프로토타입이라고 한다.
User flow상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있다.
2. Middle Fidelity Prototype (Mid-Fi Prototype)
Hi-Fi 프로토타입처럼 완성도가 높지는 않지만,Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입을Mid-Fi 프로토타입이라고 한다.
- 사용성 테스트를 하기위해서는 적어도
Mid-Fi수준의 프로토타입을 작성해주는 것이 좋다.
3. High Fidelity Prototype (Hi-Fi Prototype)
- 최종 결과물과 거의 유사한 수준으로 만든 프로토타입을
Hi-Fi 프로토타입이라고 한다.
- 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능하다.
테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있다.
차이점 정리
| 와이어프레임 | 프로토타입 | |
|---|---|---|
| 작성 시기 | 기획 단계 | 개발 전 단계 |
| 작성 목적 | 화면 구조 설계 | UI 상호작용 시뮬레이션 |
| 특징 | 정적 | 동적 |
| 피델리티 | Low ~ Middle (High는 거의 작성하지 않음) | Middle ~ High (Low는 테스트에 적합하지 않음) |
- 프로토타입만 잘 작성해도 화면 구성과 사용자 흐름(
user flow)을 개선함으로써 좋은UI, 좋은UX를 디자인할 수 있어 최종 결과물의 완성도를 향상시킬 수 있다.
- 또한 프로젝트 기획 내용을 직관적으로 전달할 수 있어 내부 인원은 물론 프로젝트 외부 인원과의 소통에도 큰 도움이 된다.
