와이어프레임 / 스토리보드

와이어프레임 vs 스토리보드

	와이어프레임 Wireframe	스토리보드 Storyboard
	웹사이트나 앱의 레이아웃과 구조를 설계하기 위한 초안	서비스의 전체 흐름과 화면 간 상호작용을 설명
목적	화면의 구성요소인 버튼, 텍스트, 이미지 등 위치와 배치를 시각적으로 표현	화면 전환, 사용자 동작인 클릭, 스와이프 등 기능 연결을 시각적으로 표현
특징	- 디자인보다 기능과 구조에 초점	- 와이어프레임 기반, 사용자 행동과 화면 간 연결성을 추가적으로 설명
	- 색상, 이미지 등 디테일 없이 단순 선과 상자로 표현	- 전체 프로젝트의 사용자 경험(UX) 설계
비고	와이어프레임은 어떤 레이아웃을 구성할 것인지, 포함되는 주요 기능은 무엇인지 등 최대한 단순하게 확인하고 의견을 나눌 수 있는 기준이 되기도 한다.

 

와이어프레임 vs 목업

와이어프레임	제품 기획 단계에서 페이지를 어떻게 구성을 하는지에 대한 시각적 가이드
목업	실제 최종 프로덕트가 시각적으로 어떻게 보이는지에 대한 정적 화면

 

gpt로 그린 와이어프레임과 스토리보드 예 

(좌) 와이어프레임 / (우) 스토리보드