와이어프레임
- 와이어프레임은 와이어로 프레임을 만든다는 뜻입니다. 상품 기획 단계페이지 구성 방법 구조를 유지하기 위한 용도로 제작되었습니다.
- 와이어프레임을 표현할 때 품질의 정도는 기술적으로 충실도로 표현되며 3단계로 나뉩니다.
- 저충실도 와이어프레임(Lo-Fi 와이어프레임)
- 손으로 그린 레벨 와이어프레임을 Lo-Fi 와이어프레임이라고 합니다.
- 중간 충실도 와이어프레임(Mid-Fi Wireframe)
- Lo-Fi 와이어프레임을 그리면서 아이디어가 구체화되고 어느 정도 확정된 후에 잘 보이도록 다듬으면 Mid-Fi 와이어프레임이 됩니다.
- 고충실도 와이어프레임(Hi-Fi 와이어프레임)
- 완제품에 가까운 와이어프레임을 Hi-Fi 와이어프레임이라고 합니다.
- 제작에 시간이 많이 걸리고 수정이 어렵기 때문에 와이어프레임 제작 목적에 맞지 않아 하이파이 수준으로 만드는 경우는 드물다.
- 저충실도 와이어프레임(Lo-Fi 와이어프레임)
원기
- 프로토타입은 실제 제품과 매우 흡사하게 구현한 것으로, 페이지를 이동하고 상호 작용할 수 있습니다.
- 진지하게 개발 전 단계쓰여진, UI 상호 작용 시뮬레이션목적은
- 완성품과 유사하게 만들어졌는지 여부에 따라 충실도가 나뉩니다.
- 저충실도 프로토타입(Lo-Fi 프로토타입)
- 상호작용과 페이지 이동만 테스트할 수 있는 프로토타입을 Lo-Fi 프로토타입이라고 합니다.
- 고충실도 프로토타입(Hi-Fi 프로토타입)
- 최종 제품과 거의 유사한 수준으로 제작된 시제품을 Hi-Fi 시제품이라고 합니다.
- 중간 충실도 프로토타입(Mid-Fi Prototype)
- Lo-Fi 프로토타입보다 최종 결과에 가까운 프로토타입을 Mid-Fi 프로토타입이라고 합니다.
- 저충실도 프로토타입(Lo-Fi 프로토타입)
와이어프레임 및 프로토타입 차이점
와이어프레임 프로토타입
| 쓸 때 | 기획 단계 | 사전 개발 |
| 글을 쓰는 목적 | 화면 구조 디자인 | UI 상호 작용 시뮬레이션 |
| 특성 | 고요 | 동적 |
| 충실도 | 낮음에서 중간(높음은 거의 쓰지 않음) | 중간에서 높음(낮음은 테스트에 적합하지 않음) |
- 좋은 프로토타입을 작성하더라도 화면 구성과 사용자 흐름을 개선하여 좋은 UI와 좋은 UX를 디자인할 수 있으므로 최종 제품의 완성도를 높일 수 있습니다.
- 프로젝트 기획 내용을 직관적으로 전달할 수 있어 내부 담당자는 물론 외부 프로젝트 담당자와의 커뮤니케이션에도 도움이 됩니다.