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