[Blog] 와이어 프레임

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다.

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한 수준까지 만드는 경우는 거의 없습니다.

 

나는 Lo-Fi Wireframe 수준의 와이어프레임을 그려봤다.

이것을 토대로 피그마로 프로토타입을 만들어 보려고 한다.

 

다음에 블로그로 작성하겠지만,

프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능합니다. 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적입니다.