간단한 이미지로 전체 흐름을 보는 기획서, 와이어 프레임

웹과 앱을 만들 때 기획서를 보고 제작을 한다고 알려드렸어요. 이번에는 기획서 중에서 '와이어 프레임(Wireframe)'에 대해 알아보겠습니다.

와이어 프레임은 화면을 간단하게 그린 것을 말합니다. 전체 흐름을 그림을 통해 빠르게 알 수 있어요.

저번에 스토리보드(화면설계서)는 그림과 설명 글로 이루어졌다고 했어요. 와이어프레임은 그림 위주로 만들어져 더 빠르게 작업할 수 있어요.

초반에 기획을 잡는 과정에서 수정하는 일이 생기기도 하고 전체 흐름을 빨리 볼 수 있기에 와이어 프레임 작업을 먼저 하게 됩니다. 와이어 프레임은 손그림 스케치 수준으로 그리기도 하고 (초급) 흑백 선으로 표현는 경우 (중급), 좀더 디테일하게 그리는 단계(고급)까지 다양하게 표현할 수 있습니다.

프로젝트 진행 단계, 경우에 따라 필요한 수준으로 작업합니다. 또 이해를 돕기 위해 버튼을 눌렀을 때 어떤 페이지로 이동하는지 선으로 연결하여 표현하기도 합니다.

작업에 따라 내부에 기획자, 디자이너, 개발자가...