와이어프레임 VS 목업

출처 : https://www.aha.io/roadmapping/guide/product-management/wireframe-mockup-prototype

와이어프레임(wireframe) - 인터페이스 구성요소 (레이아웃, UI 등의 뼈대)

와이어프레임은 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.

기획단계에서 주로 제작되는 것으로, 제품의 모양, 혹은 웹페이지의 개략적인 레이아웃과 UI 요소등에 대한 뼈대를 의미합니다. 인터페이스 디자인을 위한 기본적인 비주얼 가이드. 여기에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 됩니다. 

 

스토리보드(Story Board) - 구성요소, 기능, 콘텐츠, 이동 흐름

웹서비스의 각 페이지 구성요소나 컨텐츠의 설명 및 페이지간의 이동 흐름 등을 기술한 문서를 말합니다.

 

목업(Mockup) - 평가를 위한 정적 모형

목업은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.

디자인, 사용 방법 설명, 데모 시연, 평가를 위한 실제품의 정적인 모형으로 일반적으로 실제품의 기능까지는 제공하지는 않으며, 최소한의 기능을 부분적으로 제공하여 테스트가 가능하면 프로토타입이 됩니다.

 

프로토타입(prototype) - 사용성 테스트를 위한 동적 모형

제품에 대한 기능 및 사용성 등의 테스트를 위해 제작하는 동적인 모형으로 제한적인 기능을 구현하여 사용성 테스트에 사용됩니다.