스토리보드 제작하기

스토리보드 제작하기

1-1. 와이어 프레임 작성

• 인터페이스(interface) 필요 요소와 항목들을 분석하여 요소별 적용할수 있다.

와이어 프레임 작성을 위한 도구

1. 핸드 드로잉
   종이와 펜을 이용하여 손으로 자유롭게 그린다. 종이는 무선 노트를 이용할 수도 있지만, 가로세로 격자선이 그어진 모눈종이를 사용하는 것이 레이아웃을 잡거나 구성 요소를 배
   치하기에 편리하다. 최근에는 웹 브라우저와 모바일 기기 프레임이 프린트되어 있는 스케치 노트, 다양한 기 능 버튼이 새겨진 모바일 기기별 스텐실(stencil), 픽셀 자 등이 출시되어 더욱 편리하게 핸드 드로잉을 할 수 있다. 최근에는 웹 브라우저와 모바일 기기 프레임이 프린트되어 있 는 스케치 노트, 다양한 기능 버튼이 새겨진 모바일 기기별 스텐실(stencil), 픽셀 자 등이 출시되어 더욱 편리하게 핸드 드로잉을 할 수 있다.

1. 모크업 툴
   와이어 프레임을 위한 모크업 툴은 웹뿐만 아니라 태블릿 PC, 모바일의 화면 비율을 제공 하기 때문에, 다양한 시각 인터페이스 환경에 맞게 와이어 프레임을 작성할 수 있다. 와이 어 프레임 전용 모크업 툴을 이용하거나, 문서 작성 툴에서 제공하는 모크업 기능을 이용 하여 작성할 수 있다.

1. 기타
   이 밖에도 벡터 전용 프로그램이나 문서 전용 프로그램 등 자신이 생각하는 아이디어를 적절히 구현할 수 있는 프로그램을 이용하여 와이어 프레임을 제작해도 무방하다.

1-2. 스토리보드 작성

• 프로젝트 관련된 전체적인 정보설계를 구성할 수 있다.
• 와이어프레임와이어 프레임(Wwire Fframe)에 기반을 두어 표현되는 정보와 기능에 따른 상세 스토리 보드 흐름(Fflow)을 기획할 수 있다.

스토리보드

웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침 서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토 대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부 적인 코딩을 진행하게 된다.

스토리보드 작성

스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 규모 등에 따라 세부적 내용은 변경될 수 있다.

1. 표지
   제작하는 웹이나 애플리케이션의 프로젝트의 이름과 문서명, 작성자 이름, 문서 버전, 작 성일, 최종 수정일, 결재 영역 등으로 구성된다.
   

   

 

1. 개정 이력
   성공적인 웹·애플리케이션 개발을 위해서는 기획자와 디자이너, 개발자, 클라이언트 등 다양한 구성원 간의 협업이 중요하며, 끊임없는 커뮤니케이션을 통하여 제작 과정과 내용 등을 수정한다. 개정 이력에는 프로젝트 개발에 참여하는 구성원들이 수정된 내용을 한눈 에 알아볼 수 있도록 수정된 날짜와 상세 내용, 수정 버전 등을 작성한다.
   

   

 

1. 정보 구조도
   서비스 흐름도는 각 메뉴와 주요 기능별 프로세스 흐름을 한눈에 파악할 수 있도록 도와 준다.

   

 

1. 서비스 흐름도(flow chart)
   성공적인 웹·애플리케이션 개발을 위해서는 기획자와 디자이너, 개발자, 클라이언트 등 다양한 구성원 간의 협업이 중요하며, 끊임없는 커뮤니케이션을 통하여 제작 과정과 내용 등을 수정한다. 개정 이력에는 프로젝트 개발에 참여하는 구성원들이 수정된 내용을 한눈 에 알아볼 수 있도록 수정된 날짜와 상세 내용, 수정 버전 등을 작성한다.
   

   

 

1. 화면 설계
   
   화면 설계 페이지는 크게 세 가지 영역으로 구분할 수 있으며, 표준화된 규격이 없기 때 문에 작성자나 업체에 따라 조금씩 차이를 보인다.
   
   (1) 페이지 정보 영역
   주로 페이지 상단에 위치하며, 프로젝트명, 화면 이름 및 파일명에 해당하는 화면 ID, 화면 경로 등 문서에 관련된 전반적 정보 등을 명시하는 영역이다.
   
   (2) 화면 설계 영역
   각 페이지의 화면 구조, 내비게이션 구성과 위치, 시각 인터페이스 요소별 기능, 이미 지나 아이콘, 텍스트와 같은 콘텐츠 요소 등에 대하여 상세하게 묘사하는 영역이다.
   
   (3) 화면 설명 영역
   화면 설계 영역에서 표현하지 못한 내용이나 상세 기능 및 동작 방식, 요구 사항 등을 글로 상세하게 명시하는 영역으로 디자이너 및 개발자의 이해를 도울 수 있다.
   
   (4) 하단 영역
   문서 작성자와 회사명, 페이지 숫자 등을 기입한다