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

 

와이어 프레임의 예시

 

 

1. 와이어 프레임 ( Wire-frame ) 이란?

 

 

웹페이지의 구성이나 레이아웃을 대략적으로 표시한 그림이다.
예를 들자면 웹페이지 전체 중에서 듬성듬성 대략적으로 표시를 해 중요한 플랫폼만 볼 수 있게끔 하는 것이다.
더 쉬운 예를 들자면 사이트 상의 로고디자인이나 아니면 비가 내린다는 등의 효과가 있다면

그러한 세부적인 디자인을 표시하지 않는것이다.
더 간단히 말하자면 스토리 보드를 만들기전 그리는 간단한 그림이다.

ex) 손그림 파워포인트,키노트,스케치,일러스트,포토샵 등

 

 

- 와이어 프레임(Wire-frame) 이 필요한 이유 ?

 

 

개발하는 사람들의 입장에서도
사진이나 이미지 구성을 구체화하는데 폼이 있으니 그 폼을 토대로 

다음 작업을 이어서 하면 굉장히 편리한 것이다.

또한 우리가 취업을 하는 데 있어서도 홈페이지를 만들 때 
내가 그려놓은 폼대로 하면 크게 벗어나지 않고
나중에 디자인적 요소나 수정 보완을 하면 되는 것이니 훨씬 편하다.

 

2. 스토리 보드 ( Story board ) 란?

 

디자이너 /개발자가 참고하는 최종적인 산출 문서로써 정책, 프로세스,
데이터 베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 문서로 
실제 콘텐츠를 넣거나 개발하는 방식으로 와이어 프레임보다 좀 더 디테일하게
작업하는 문서이다 

ex) 파워포인트, 키노트, 스케치, Axure 등

 

 

- 스토리 보드(Story board)가 필요한 이유?

 

 

스토리보드는 어떻게 설계를 할지 계획을 하고 실제 소비자가 어떠한 화면으로
볼지에 대해서 나타나기 때문에 홈페이지를 기획하는 단계에서는 반드시 
필요로 한다 일반적으로 이문서를 통해 업체와의 커뮤니케이션을 진행하게 된다.