구성요소 설계-스토리보드 작성

스토리보드 작성

스토리보드 개념

 

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

스토리보드  작성 

 

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

표지

 

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

개정이력

 

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

 서비스 흐름도(flow chart)

 

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

 화면 설계

 

화면 설계 페이지는 크게 세 가지 영역으로 구분할 수 있으며, 표준화된 규격이 없기 때
문에 작성자나 업체에 따라 조금씩 차이를 보인다.

 

    
• 페이지 정보 영역-
  주로 페이지 상단에 위치하며, 프로젝트명, 화면 이름 및 파일명에 해당하는 화면 ID,
  화면 경로 등 문서에 관련된 전반적 정보 등을 명시하는 영역이다.

• 화면 설계 영역-
  각 페이지의 화면 구조, 내비게이션 구성과 위치, 시각 인터페이스 요소별 기능, 이미
  지나 아이콘, 텍스트와 같은 콘텐츠 요소 등에 대하여 상세하게 묘사하는 영역이다.

 

 
• 화면 설명 영역-
  화면 설계 영역에서 표현하지 못한 내용이나 상세 기능 및 동작 방식, 요구 사항 등을
  글로 상세하게 명시하는 영역으로 디자이너 및 개발자의 이해를 도울 수 있다

 

• 하단 영역-
  문서 작성자와 회사명, 페이지 숫자 등을 기입한다