[사용자 친화 웹] 와이어프레임, 프로토타입

Yuhallo·2023년 2월 16일

🧡 와이어프레임(wireframe)

🔍 와이어 프레임이란?
와이어프레임(Wireframe)은 디지털 제품 디자인의 초기 단계에서 사용되는 도면이나 모형으로, 웹 사이트, 앱, 소프트웨어 등의 인터페이스를 설계할 때 사용됩니다. 디자이너가 어떤 요소를 어디에 위치시킬지, 어떤 기능을 갖출지 등을 정리하는 작업을 수행할 때 사용됩니다.
일반적으로는 모노크롬이나 회색조의 선으로 이루어진 단순한 디자인을 사용하며, 대략적인 디자인 구조를 나타내기 때문에 빠르게 구조적인 문제점을 파악하고 수정할 수 있습니다. 와이어프레임은 설계의 단계에 따라서 여러 가지 종류로 구분됩니다. 예를 들면, 초안(wireframe), 상세디자인(detailed wireframe), 인터랙티브 웨어프레임(interactive wireframe) 등이 있습니다.
와이어프레임은 인터페이스 구조와 기능에 대한 이해를 높이고, 디자인 변경의 시간과 비용을 절약하는 데 도움이 됩니다. 또한, 다른 디자이너, 개발자, 클라이언트 등과 의사소통하기 위한 기본 도구로 사용될 수 있습니다.

제품 기획단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듭니다. 표현 시 품질 수준을 피델리티로 표현하며 3가지 레벨이 있습니다.

Low Fidelity Wireframe (Lo-Fi Wireframe)
손으로 빠르게 그린 수준의 와이어프레임을 말합니다. 시간이 적게 들고, 수정하거나 새 의견을 반영하기 쉬워 아이디어를 구체화 시키며 큰 그림을 잡을 때 좋습니다.
Middle Fidelity Wireframe (Mid-Fi Wireframe)
아이디어가 어느정도 구체화되고 화정된 후에 보기 좋게 다듬어 줍니다. 해당 페이지가 어떻게 작동될 지 예상할 수 있습니다.
High Fidelity Wireframe (Hi-Fi Wireframe)
완성본에 가깝게 작성한 와이어프레임을 말합니다. 목업에 가까운 형태이며 시간도 많이들고 수정도 어려워 와이어프레임의 작성 목적과 맞지 않습니다.

🧡 프로토타입

실제 제춤과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호작용이 가능합니다. 본격적으로 개발에 들어가기 전에 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 수준의 프로토타입을 작성해주는 것이 좋습니다.