와이어프레임 & 프로토타입

걸음걸음·2023년 2월 16일
0

와이어프레임(wireframe)

제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 제작

피델리티(fidelity) 레벨

와이어프레임의 품질 수준

Low Fidelity Wireframe(Lo-Fi Wireframe)

손으로 빠르게 그린 수준
아이디어를 구체화 시키며 큰 그림을 잡을 때 사용

Middle Fidelity Wireframe(Mid-Fi Wireframe)

Lo-Fi 와이어프레임으로 아이디어가 어느정도 구체화 되고 확정 된 후 보기 좋게 다듬은 수준
와이어프레임을 봤을 때 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있음

Hight Fidelity Wireframe(Hi-Fi Wireframe)

완성본에 가깝게 작성한 것
목업에 가까운 형태이며, 작성하는데 시간이 많이 걸리고 수정이 어려운 등 와이어프레임의 목적과 맞지 않아 여기까지 제작하는 경우는 많지 않음

프로토타입(prototype)

실제 제품과 흡사하게 구현한 것
페이지 이동과 상호 작용이 가능
본격적으로 개발에 들어가기 전 단계
UI의 상호 작용을 시뮬레이션 하는 목적

피델리티 레벨

Low Fidelity Prototype(Lo-Fi Prototype)

구체적인 내용 작성 X
간단한 상호 작용과 페이지 이동 정도만 테스트 가능한 수준
User flow에서 빠지거나 어색한 부분이 없는지 검토 가능

Hight Fidelity Prototype(Hi-Fi Prototype)

최종 결과물과 유사한 수준
디자인을 거의 확정, 실제 제품과 거의 같게 작동 => 사용성 테스트가 가능
UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과 있음

Middle Fidelity Prototype(Mid-Fi Prototype)

Lo-Fi와 Hi-Fi 사이의 단계
사용성 테스트를 하기 위해 최저한 요구되는 단계

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

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

0개의 댓글