Wireframes vs Mockups

Wireframe은 주로 회색조로 표현되는 시각적 표현으로, 시각적 디자인과 콘텐츠가 추가되기 전에 웹페이지 또는 모바일 애플리케이션의 구조와 기능을 개요합니다.

Wireframe은 기본 레이아웃과 사용자 경험을 확립하여 사용성과 탐색에 초점을 맞추는 데 사용됩니다.

Wireframe은 디자인 초기 단계에서 사용되어 프로젝트가 합의된 목표에 따라 발전하고 사용의 용이성 및 미래의 콘텐츠 성장을 용이하게 하도록 합니다.

Wireframe을 만드는 데 가장 일반적으로 사용되는 도구 중 하나는 Figma입니다.

Mockup은 제품의 정적인 표현으로, 제품 디자인과 개발에서 최종 제품이 어떻게 보이고 사용될지 보여주는 데 자주 사용됩니다.

최종 사용자 경험의 일부인 타이포그래피, 로고, 이미지, 색상 구성표 및 탐색 시각 요소를 포함합니다.

Mockup은 디자인 개념, UI 및 UX를 제시하고 평가하기 위해 사용되며, 제품이 완전히 개발되기 전에 피드백과 반복을 위해 사용됩니다.