앱과 웹 화면 설계 기획 와이어프레임과 스토리보드

앱 화면 설계 : 스토리보드, 와이어프레임, 스토리보드


1. 스토리보드


스토리보드는 디자이너와 개발자가 참고하는 최종적인 산출문서라고 볼 수 있습니다. 

다시 따져보면 웹 또는 앱 서비스의 각 페이지 구성요소나 컨텐츠의 설명 및 페이지간의 이동 흐름등을 기술한 문서라고 볼 수 있는데요 

스토리보드에는 정책, 프로세스, 콘텐츠구성, 와이어프레임(UI/UX), 기능 정의, 데이터베이스 연동등 서비스 구축을 위한 모든 정보가 담겨있는데요 

해당 문서를 통해서 커뮤니케이션을 하는것이 중요합니다


2. 와이어프레임(Wireframe) 


와이어프레임은 화면 단위의 레이아웃을 설계하는 작업으로, UI, UX 설계에 집중되어 있습니다.  앱의 한 화면에서 구성되는 요소들을 모두 그린 화면 단위의 레이아웃입니다.

기획단계에서 주로 제작되는 것으로, 제품의 모양, 혹은 웹, 앱 페이지의 개략적인 레이아웃, UI 요소등에 대한 뼈대를 이야기합니다.

스토리보드 툴을 이용해 그리는것이 편합니다.
그것은 실제로 앱이 구현되는 시뮬레이션 구현 가능하기 때문이죠. (프로토타입)


3. 프로토타입 (Prototype)


프로토타입은 실제 서비스와 흡사한 모형을 만드는 것으로. 사용성 테스트를 위한 동적모형이라고 볼 수 있습니다.

정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용하는 것으로 단시간에 툴을 활용해 구현하여 실제 서비스(제품)을 테스트해볼 수 있다는 장점이 있습니다.

이에는 평가를 위한 정적 모형인 목업도 있는데요, 목업의 경우에는 디자인, 사용방법 설명, 데모시연, 평가를 위한 실제품의 정적인 모형으로, 일반적으로 실제품의 기능까지는 제공하지 않는 경우라고 보실 수 있습니다. 여기에 최소한의 기능을 부분적으로 제공하는 경우에는 프로토 타입이 됩니다.



댓글 쓰기

0 댓글

페이지