본문 바로가기

웹 페이지 기획서인 스토리보드 제작하는 순서, 방법 -스토리보드-

by 머니해커_개발자 2020. 1. 17.

안녕하세요. thinkinfactory입니다.

제가 개발자로서 개발 강의만 쭉 작성을 하다가, 프로젝트의 첫 순서인 기획 작업을 어떻게 하는가에 대한 질문에 답을 드리기 위해 기획 카테고리를 만들어서 강의를 작성하게 되었습니다.

먼저, 스토리보드는 하나의 프로젝트를 수행하기 위해 구현 목적과 목표에 따라 설계를 제시하는 일입니다.

개발하는 분들은 개발 작업 시작에 스토리보드를 전달받고 거기에 맞게 소프트웨어 혹은 모듈을 구현하기 시작하는데 다음 과정을 통해서 어떻게 만드는지 알아보겠습니다.

1. 표지 제작

유니드림 스토리보드의 표지

유니드림 스토리보드의 표지를 제작한 부분인데, 웹사이트 이용자화면 화면정의서라는 이름으로 스토리보드를 개괄합니다.

2. 작업 히스토리 제작

작업 히스토리

작업 히스토리를 표시하는 일은 팀과 공동으로 작업을 하면서 필요한 부분입니다. 누가 어떤 작업에 참여했는지 히스토리를 작성해서 책임을 나누고 기여자를 기록하는 것입니다.

3. 사이트맵(Sitemap) 제작

유니드림의 사이트맵

어떤 화면에 어떤 서비스가 들어갈지 사이트의 화면을 매핑합니다. 전체적인 부분을 제공한 뒤에 디테일을 제공해야 개발하기가 수월하고, 이해하기도 편합니다.

4. 각 화면 설명 제작

화면 소개
좌. 화면 기획. 우. 디스크립션

일반적으로 스토리보드는 좌측에 화면에 대한 대략적인 드로우가 있고, 우측에는 설명(Description)이 있습니다. 객체 하나하나에 어떤 이벤트가 존재하는지 설명 부분에 적어주어야 합니다.

본문 내용의 데이터 테이블 제시

가끔씩 화면에서 고정적인 값들을 제공하기 위해서는 데이터 테이블을 설명 텍스트에 적어주는 방법을 이용합니다. 예를 들어서, 오른쪽 퍼블리싱 플랫폼을 보시면 다음과 같습니다.

퍼블리싱 플랫폼
  A. 안드로이드 앱
  i. 네이티브 앱
  ii. 하이브리드 앱

  B. iOS
  i. 네이티브 앱
  ii. 하이브리드 앱

  C. 웹앱
  i. PC 호환 웹앱
  ii. 반응형 웹앱
  iii. 모바일 웹앱

  D. 윈도우앱
  E. 서버
  F. 기타

저는 개발자이기 때문에 데이터 테이블이나 ENUM 이렇게 이야기를 하는데, 기획자분들은 고정값들에 대한 설명을 어떤 용어로 표현하는지 잘 모르겠습니다. 아시는 분 있으시면 덧글 남겨주시면 공부하도록 하겠습니다!

위와 같은 방법을 통해서 사이트맵에 제시된 화면을 하나하나 제작하다보면 기획서가 완성이 됩니다. 개인적으로 기획은 아직 흥미가 붙지 못했지만, 익숙해지면 상당히 창조적인 일이라고 생각합니다.

간단히 스트레칭한다는 생각으로 포스트를 작성했고, 다음에는 더 좋은 퀄리티로 찾아뵙겠습니다. 유투브 영상도 촬영했으니 따라하면서 배우시면 더 수월할 것 같습니다.

 

읽어주셔서 감사합니다.

댓글

최신글 전체

이미지
제목
글쓴이
등록일