[개발/기획] 스토리보드(Storyboard)란

스토리보드(Storyboard)란?

 

스토리보드는 멀티미디어 타이틀 개발의 설계도이며 구체적인 작업 지침서이다. 즉 멀티미디어 설계 단계의 최종 목표를 달성하기 위한 내용을 컴퓨터 화면상에 맞도록 종이 위에 구성화한 형태이다. 즉, 애니메이션과 비디오가 음악과 결합하여 어떻게 진행되는지를 명확하게 보여주기 위해 사용된다. 개발 기획서가 멀티미디어 타이틀 개발의 청사진이라면 플로우 차트는 타이틀의 인터랙션을 나타내는 것이고, 스토리보드는 멀티미디어 타이틀 개발의 설계도이며, 구체적인 작업 지침서이다.

스토리보드가 완성되면, 디자이너는 스토리보드에 명시된 내용을 가지고, 화면 디자인부터 시작하여 각각의 일러스트 데이터를 그린다. 프로그래머는 스토리보드를 보고 프로그램 설계를 하고 각 세부 로직을 프로그램 코딩하게 된다. 그러므로 스토리보드가 완성되면 타이틀 개발의 기획이 완성되었다고 말할 수 있으며 구체적인 데이터 제작만이 남게 된다. 만일 스토리보드가 잘못되어 있거나 불충분하여 중간에 개념과 로직이 바뀌면 어떤 일이 벌어질까? 그것은 말할 필요도 없이 프로그램과 그림 데이터가 그려진 것 만큼 손해를 입게 된다. 프로그램은 다시 작업을 하여야 하며, 그래픽 데이터는 사이즈와 내용이 맞지 않아 전혀 쓸모없는 것이 되어버리고 일정은 완전히 망가지게 된다.

잘못된 설계도를 가지고 작업하면 완전히 잘못된 개념의 집을 짓게 되어 기초가 무너지게 되는 것과 같다. 그러므로 스토리보드는 치밀하고 정확하게 작성되어야 한다.

 

스토리보드 작성시 체크 포인트

 

(1)    스토리보드는 누가 보아도 프로그램의 흐름과 내용을 쉽게 이해할 수 있도록 표현하는 것이 중요하다.

(2)    기술해야 할 내용은 많고 지면은 한정되어 있는 관계로 가능한 체계적이고 간략한 기호(영문 알파벳)를 써서 표현의 간결함을 꾀해야 한다.

(3)    프로젝트의 성격에 따라 효율적인 S/B 양식을 만들어 사용하는 것이 효과적이다. (예를들면 비디오가 없는 프로젝트의 경우 비디오난은 의미가 없으므로 당연히 삭제하는 것이 적당하다.또 애니메이션이 복잡한 프로젝트의 경우 칸을 넓혀 주는 것이 당연하다.)

(4)    화면 플로우차트는 화면의 전개 순서와 로직을 정확하게 이해할 수 있도록 표현하며 시작과 끝이 정확하게 표현되어야 한다.

(5)    S/B는 가능한 모듈별로 작성하여 이해의 간결성을 도모하는 것이 좋다.

(6)    각 요소는 파일의 종류에 따라 통일적이고 체계적으로 일련번호를 부여하여 전체작업의 효율성을 기하는 것이 좋다.

(7)    위치와 크기, 시간 등을 보여 주거나 실행 특성을 명기하는 것이 좋다.

(8)    스토리보드 양식자의 크기는여유있고 알기쉽게 표현하기 위해서는 A3용지가 좋으나 제작과 정상 프로그래머용, 디자이너용, 일러스트용, 원고 필자용 사운드 작업용 등이 필요하며 디버깅의 효율성을 취해서도 다량의 복사본이 필요하게 되므로 관리상 A4용지가 좋다.

(9)    계속되는 수정사항이 발견되면서, 항상 버전관리를 신속히 하기 위해서 컴퓨터상의 양식으로 만들어 관리하는 것이 편리하다.

스토리보드 작성법

 

Project:  (1)

화면주제	(3)		화면ID	(4)	화면경로	(5)		page	(2)
화면구성   (6)					화면설명 (7)
					F/C & Logic (8)
Graphic		Text	Anim./Video		Music	Effect	Narration	Function Key
(9)		(10)	(11)		(12)	(12)	(12)	(13)

 항목 설명 

(1)프로젝트 명

타이틀 또는 프로젝트 명(or 사이트 url)을 기입한다. 

(2)Page 번호

Page번호는 스토리보드의 단순한 일련 번호이다. 하지만 외형상 그리 중요한 의미를 갖지 않는 것처럼 보이는데 반해, 수많은 스토리보드 속에서 특정한 위치를 찾아가기 위해서나 분실시에 쉽게 번호를 체크할 수 있기 때문에 Page 번호는 빠질 수 없는 요소이다 또한, 화면 플로우차트에도 화면전환 표시로 이 Page번호를 사용한다. 이것은 흐름을 쉽게 이해하고 찾아가기 위해서다. 

(3)화면 주제

해당 화면의 내용, 용도를 이해하기 쉽게 기획자가 명기한다. 예를 들면 표지 타이틀, 메인 메뉴, 회사역사, 만든 사람들, 끝내기 등 개발 참여자 모두가 쉽게 이해할 수 있는 이름으로 짓는 것이 좋다. 

(4)화면 ID

이 화면에 해당하는 코드명이다. 플로우챠트의 프레임 명으로 표기되며, 해당 프레임의 배경 그래픽 파일명과도 동일하게 쓰인다. 예) about.html

(5)화면 경로

처음 시작되는 화면에서 현재 화면에 오기까지의 경로를 코드명으로 표시한다. 예를 들어 타이틀로그. 인트로 무비/ 메인 메뉴의 코드 순으로 표시하며, 구조가 복잡할 경우 KEY 프레임이나 현재화면이 분지되어 나온 주 메뉴화면부터 표기하여도 무방하다. 예) 홈/회사소개/회사연혁

(6)화면 구성

각 작업자가 화면의 내용과 구성을 시각적으로 쉽게 이해하도록 스케치로 표현한다. 선택 가능한 아이콘의 개수 구성물의 위치, 애니메이션이 이루어지는 지점 등을 가능한 한 정확히 묘사해야 디자이너와 일러스트레이터가 작업할 때 쉽게 이해하고 불필요한 작업상의 손실을 막을 수 있다. 

(7)화면 설명

그림이나 플로우차트로 표현하기 어려운 화면 분위기 ? 요구 사항을 글로 설명하는 부분이다. 특별히 강조되는 기획의도를 디자이너와 프로그래머에게 각인시킬 필요에서 명기하는 것이다. 애니메이션의 순서나 화면이 뜨는 순서, 특정한 부분에 대해 설명한다. 

(8)Flow Chart 와 Logic

화면 내에서 이루어지는 인터렉션을 표시한다. 화면의 시작에서 다음 화면으로 연결되는 흐름을 논리적으로 정확하게 표현한다. 사용자가 요구하는 의도에 따라 제시되는 화면의 순서나 강제적으로 표현되는 미디어들, 화면을 움직이는 조직, 연결되는 프레임을 명확히 기록한다. 

(9)그래픽

그래픽 요소는 실제로 작업에 들어가는 그래픽 데이터를 표현하는 곳이다. 배경그림, 캐릭터, 아이콘, 버튼 등 그래픽 요소를 디자이너가 작업할 수 있도록 명확히 설명하고 작업을 요구하는 곳이다. 요소의 이름은 이미 약속된 코드체제에 의해 표기되어지고, 코드명 중 중복되는 부분은 생략하여 표기하여도 좋다. 

(10)텍스트

화면에 나타나는 텍스트 내용을 적는 곳이다. 그래픽으로 처리된 제목이나 글씨는 제외하고 텍스트로서 편집 가능한 데이터는 모두 적는다 폰트의 사이즈와 내용의 길이를 고려하여 한 화면에 표현될 수 없다면 어떤 인터렉션에 의해 나타내 줄 것인지는 FlowChart에 표시되어져야 한다. 

(11)애니메이션/비디오

애니메이션과 비디오를 표시하는 곳이다. 보통 애니메이션과 비디오는 사운드와 텍스트를 포함하고 있다. 이 경우 제작하는 화면의 성격을 명확히 하고 하나의 파일로 묶어서 처리하는 것이 좋다. 비디오는 디스플레이되는 위치, 사이즈를 고려해야 한다. 애니메이션이 긴 경우 지면 관계상 다 설명할 수 없기 때문에 영역별 파일을 따로 만들기도 한다. 자세한 그래픽의 묘사는 애니메이션의 순서 등을 표기하는 경우가 있는데 될 수 있으면 최대한의 공간을 활용하여 한 페이지 안에 모든 화면 요소를 기입하는 것이 바람직하다. 

(12)사운드

사운드는 성격상 뮤직(Music), 효과음(Effect), 나레이션(Narration) 등으로 나눌 수 있다. 세가지 요소는 모두 소리라는 점에서는 동일 하지만 제작 공정에서 서로 다른 특징을 가지고 있기 때문에 서로 나누어서 표시하는 것이 좋다. 뮤직은 배경 음악과 실제 상황에서 나가는 주제곡이 있다. 음악은 작곡과 연주 과정을 거쳐 생성된다. 라이센스가 보장되면 분위기에 어울리는 음악을 선곡하여 사용하여도 된다. 효과음은 실제로 내용과 상황에 어울리는 자연음을 만들어 내는 것이 가장 좋은 방법이지만 많은 돈과 연출력이 요구되는 분야이다. 보통은 스튜디오에서 효과음 라이브러리를 활용하여 편집하거나 신디사이즈로 합성하여 만들어 사용한다. 나레이션은 대사 내용으로 스튜디오에서 성우의 목소리와 연출로 생성된다. 

(13)기능키 정의

기능키는 현재의 화면에 사용되는 특수한 목적에 쓰여지는 키를 정의하는 곳이다. 한 화면에서 특정한 키에 기능을 부여하려면 여기에 명시하면 된다. 

(14)로직(logic)

특히 게임류의 타이틀에 필요한 요소로서 게임 진행시 획득되는 점수나 보상 등의 인터렉션을 표시한다.

(15) 작성자 : 해당 페이지 스토리보드의 분식을 막고, 화면전환 표시로 사용한다.
 

라. 스토리보드의 예

 

(1) 아동용 타이틀의 예

 

Project 명:

화면주제	메인메뉴		화면ID		MA	화면경로	LG/IN/MA			page	3
화면구성 화면 이미지						화면설명 기본 언어는 영어 처음 화면이 뜨면 캐릭터 해리가 나타나서 도움말을 주면서 손을 좌우로 흔들면서 선택을 대기한다.
						FlowChart   플로우차트 그림
Graphic		Text		Anim/Video		Music		Effect	Narration	FunctionKey
MAG01 배경 펼친책 그림 아이콘 포함		English Spanish Japanese		MAC01 해리 캐릭터		MAA01 배경음악으로 앙증맞고 귀여운 춤곡		MAE01 마우스클릭시 효과음	MAN01 안녕 나는 해리야, 나하고 놀자	ESC: 프로그램 종료 F1: 도움말

 

 

(2) 어학용 타이틀 스토리보드 예

 

Project 명 :

화면주제	UNIT 16 CG1 : 연주회	화면 ID	U16C1
화면경로	메인-D서브-unit16드라마-CG1	화면설명  준식과 경미가 피아노 연주회에 가서 나란히 앉아 있는 모습. 준식과 경미만 밝게 처리되어 있고 다른 청중들은 선으로만 표현되어 있다. 대화가 시작되기 전 클래식 음악이 잠깐 나오는데, 준식은 졸고 있다. 준식의 콧방울이 터진다. 반면 경미는 초롱초롱 열심히 듣고 있다. 대사가 끝나고 나면 준식의 얼굴은 빨개진다.
배경id	ACGBAK.gif
화면구성 만화화면 TEXT
		F/C
Video		Narration #1 (피아노 연주회장이다. 준식과 경미는 피아노 연주를 들으며 객석에 앉아 있다 연주가 진행되는 동안 준식은 몹시 따분해한다. 주위를 둘러보다가 손을 만지작거리다가 연신 하품을 해 댄다. 그러다가 결국 눈을 감고 잔다. 경미는 음악에 심취해 있어서 준식이 자는 것도 모른다.)   경미: (상기된 얼굴로) 준식씨, 음악회 어땠어요? 준식: (당황하면서) 아, 네. 너무 감동적이었어요/ 경미: (혼자 도취돼서) 전음반을 듣는 것보다 훨씬 좋아서 이런 데 자주 와요. 준식씨는 어떤 연주가 제일 마음에 들었어요? 준식: (팜플렛을 슬쩍 들여다보며) 전 라흐마니노프 3번이 제일 좋았어요. 제가 제일 좋아하는 작곡가가 라흐마니노프거든요. 아지 연주하기 어려운 곡인데 정말 잘하던데요. 경미: (의아해하며) 오늘 그 곡은 연주 안 했잖아요. 준식: (멋적어하며) 그랬나요? 사실 제가 어젯밤에 잠을 못자서……
Graphic U16CG101.gif: 어두운 연주회장에 앉아 있는 경미와 준식, 준식은 반쯤 졸린표정 02:  콧방울이 올라간다. 03: 준식이 얼굴이 빨개지는 표정
Effect   U16CG1E01.wav: 박수소리
Music  U16CG1S01 : 피아노 연주곡 (바이올린 곡)
화면이동 및 기능 가: 도움말            바: 메인 메뉴로 나: 드라마로          사: 서브메뉴로 다: 사전아: 종료      라: 한국의 문화 CG1     CG2 A:  text보이기(한국)  B: 번역(일어)

 

 

 (3) 에듀테인먼트 타이틀의 예

 

Project 명:

화면주제	스테이지1(연료실기)	화면ID : ST1FO    (스테이지1, 연료 실기를 의미)
화면경로	로고->Intro->메인메뉴->비쥬얼1->스테이지
화면내용	황량한 해왕성 지표면과 시커먼 하늘을 배경으로 아래쪽에 우주선이 있다. 앞쪽에 연료를 담은 드럼통이 늘어서있다 드럼통에는 각각의 숫자들이 찍혀있다. 마우스로 드럼퉁을 클릭하면 나레이션과 함께 드럼통이 확대되며 숫자에 대한 애니메이션이 나온다.	SCREEN    화면의 비쥬얼적인 부분을 표시
		Hypermedia 드럼통1 -1에 관한 애니메이션 드럼통 2-2에 관한 애니메이션 드럼통3에서 10까지 동일
Graphic/Video G01 : 배경화면으로 해왕성 지표면에 10개의 드럼통이 나열되어 있다. 각 드럼통마다 1부터 10까지 숫자가 적혀 있다. G02 : 연료 게이지		F/C
Effect S01 : 슈퍼빽이 날아올 때의 웅장한 굉음 S02 : 각 연료통을 클릭한 후 연료가 들어가는 소리 S03 : 연료를 채운 슈퍼빽이 이륙하는 소리
Back Ground Sound(배경음악) 우주여행을 나타내는 배경음악 (예 : 스타워즈 배경음악)		TEXT
Hyperlink(화면이동)   연료를 다 채우면 비주얼 2로 진행<현재 화면에서 이용 가능한 메뉴를 의미>   버튼 1 : 종료로   버튼 2 : 메인 메뉴로   버튼 3 : 도움말   버튼 4 : 풍선도움말		로직 및 수치변화      연료 게이지가 각 숫자를 클릭 할 때마다 10%씩 증가

 

 

 

출처 : 인터넷, 지식인

 

좋은 정보 감사합니다.

쌈꼬쪼려 소백촌닭