[웹기획서] 스토리보드 양식

안녕하세요

날라리기획자 입니다.

오늘은 웹/앱 화면의 스토리보드 기획서서식을 드리는 것으로 포스팅을 마치고자 합니다.

서식의 내용은 다음과 같습니다.

  - 웹/모바일 웹(앱)의 화면기획서 서식입니다.  

화면기획서 템플릿.pptx

중요한 몇몇 요소를 설명 드리겠습니다.

1. 일정계획

프로젝트의 전체 일정별 각 조직의 행동 내역을 계획한 문서입니다. 이 부분만 잘 이해하시고 정리하셔도 하나의 프로젝트의 주기를 꿰차실 수 있습니다.

본 페이지는 SI 및 에이전시의 프로젝트 제안서 및 PM의 구축 진행계획에 필요한 문서 항목입니다. 하지만 따로 PM이 없거나 내부 프로젝트 진행 시 기획자가 일정에 대한 부분을 요약할 때 필요한 항목입니다.

2. 요구사항 정의 및 메뉴

  - 요구사항 정의: 프로젝트가 요구하는(목표, 필요사항) 사항의 정리 및 충족 내역

  - Index: 개발하는 제품의 전체 메뉴 내용. (각 화면의 내용 및 화면단의 주요 기능 기입)

3. Process의 정의

각 화면 및 기능단의 전체 프로세스입니다.

  - 이 부분은 기입하는 성격에 따라 많은 차이가 있습니다. 가령 User의 동선을 기준으로 하느냐, 각 화면간의 연계를 기준으로 하느냐 등 여러가지 기준에 따라 달라지게 됩니다.

4. 개발요소 정의

개발하고자 하는 플랫폼 및 디바이스에 대한 정의를 내려 줍니다. 기획하고 개발하고자 하는 프로젝트의 가장 기초 (초석)이 되는 사항으로 이에 대한 정의가 충분해야 디자인, 개발 파트와의 커뮤니케이션을 원활하게 할 수 있습니다.

  - 기획자는 이 부분의 작성 시, 개발 및 디자인에 대한 기본 정보를 알고 있어야 합니다. 어떤 플랫폼 (모바일, 웹, 앱 등)으로 개발을 할 것인지, 대응해야하는 웹브라우저는 무엇인지, 폰트와 색체 기타 다양한 정보에 대해 알고 있어야 합니다. 이는 추후 기획수업에서 다루도록 하겠습니다.

5. 화면의 레이아웃

모바일 및 웹의 기본 레이아웃 설정입니다. 이는 디자인과 개발 시 기초가 되는 (흔히 와꾸를 잡는다고 하죠) 사항으로 정확한 수치를 필요로 합니다.

6. 기타 공통요소 정리

각 웹/앱의 화면들은 모두 공통의 요소를 가지고 있습니다. 예를 들어, 표, 네비게이션(메뉴 바), 팝업 등등을 말할 수 있습니다. 이를 공통적으로 묶어 설명하면 디자인, 개발 파트에서는 더 쉽게 받아들이고 구축할 수 있게 합니다.

7. 화면 그리기

실제 만들어질 화면에 대한 기획서 내용입니다. 중요한 것은 해당 영역 (현재는 Mobile이라 적힌 영역)이 실제 사용될 플랫폼과 동일한 비율으로 잡혀야 한다는 것입니다.

간단한 조작법을 설명드리면 640*960 픽셀의 사이즈는 PPT영역을 벗어나게 됩니다. 하지만 PPT의 원래 비율대로 줄이기 (영역클릭 후 Shift+마우스 조작 Drag)를 하면 최소한의 오류로 같은 비율의 영역을 PPT에 붙일 수가 있게 됩니다.

실제 구축될 제품의 영역 비율과 다르게 되면 추후 디자인 시 UI구조가 바뀌거나 엉키는 경우가 있으므로 주의해야 합니다.

  - 우측의 표는 화면영역의 자세한 설명을 작성하는 곳입니다.

  - PPT문서를 벗어난 영역은 스토리보드 제작 후 개정된 내역을 작성하는 곳입니다. (메모 이용)

이상으로 스토리보드 기획서식에 대한 설명이었습니다.