천객만래 [千客萬來] (It has an interminable succession of visitors)

프로젝트를 진행하기 위해서 기획단계에서부터 구현이전단계까지 스토리보드라는 것이 만들어집니다.

그러면, 이 스토리라는 것은 무엇이고 스토리보드에 필요한 것은 무엇인지 알아보자.

스토리보드란 프로젝트를 설계하는 디자인 설명서입니다. 개발 기획서가 프로젝트 개발의 청사진이라면 플로우차트는 타이틀의 인터랙션을 나타내는 것이고 스토리보드는 설계도이자 구체적인 작업지침서입니다.
스토리보드가 완성되면 디자이너는 스토리보드에 명시된 내용에 따라 화면 디자인을 하고 일러스트를 제작합니다.
프로그래머는 스토리보드를 보고 프로그램 설계를 하고 각 세부 로직을 프로그래밍하게 됩니다.
스토리보드는 프로젝트 기획이 완성되었다고 할 수 있는 산출물이며 설계 및 구현을 위한 리소스라고 할 수 있습니다.

스토리보드에 대한 더 자세한 설명이 아래 사이트에 있으니 참조하기 바랍니다.

링크 http://blog.naver.com/jooshe12/100051451581

아래 링크에는 스토리보드 작성법이 설명되어 있습니다.
링크 http://blog.naver.com/jooshe12/100051451534



쌈꼬쪼려 소백촌닭
Posted by SB패밀리

PDF 화일입니다.


출처 : (주)네트로21 이해석님 글


좋은 정보 감사합니다.
쌈꼬쪼려 소백촌닭
Posted by SB패밀리

스토리보드(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% 증가

 

 
 
출처 : 인터넷, 지식인
 
좋은 정보 감사합니다.
쌈꼬쪼려 소백촌닭
Posted by SB패밀리

작성 : 데브뱅크 운영자 skyoh

 

먼저 스토리보드가 무엇이며, 왜 웹사이트 제작에 스토리보드를 사용하게 되었는지 부터 말씀드리려고 합니다.

 

원래 스토리보드는 영화나 TV CF, 만화, 그림등의 영상물이나 창작물을 제작할 때 사용되었던 방법으로 의뢰자와 제작자가 작품을 제작하기 전에 제작 전반에 걸친 내용을 간단하게 여러 개의 화면에 전달하고 싶은 영상을 시간적 흐름에 따라 그림으로 표현한 것이었습니다.

 

보다 구체적으로 설명하자면 제작자 또는 의뢰자가 생각하는 이미지를 시각화하는 작업으로 영화나 CF 제작에 들어가기 전에 각 장면에 대한 카메라와 피사체의 움직임을 설명, 어떤 내용을 어떻게 찍을 것인가를 그림으로 표현, 촬영에 필요한 모든 것을 미리 파악하게 해주는 일종의 설계도와 같은 것입니다.

 

의뢰자는 스토리 보드를 보고 실제 작품이 만들어 졌을 때 어떤 내용과 이미지를 갖는지 사전에 확인할수 있고, 현재 제작하려는 작품이 과연 효과적인 안인가 아닌가를 검증해 볼 수가 있습니다. 특히 영상매체 제작에는 필수적인 항목이지요.

 

그럼 웹사이트로 다시 돌아와서, 인터넷 사이트는 기존의 텍스트환경의 네트워크를 탈피하여, 웹을 기반으로 시각, 청각등의 모든 멀티미디어가 표현가능한 종합예술(?)로서의 기능을 가지고 있는 바, 일반적인 말로서의 설명과 구조적인 설명만을 가지고, 아직 제작이 되지 않은 사이트를 설명하기가 힘들어 졌습니다. 또한 어느정도의 규모만 되어도 적어도 기획자, 디자이너, 프로그래머 이 세그룹이 힘을 합해 한가지 작품을 만들어야 하며, 의뢰자의 기존 생각과도 일치 하도록 만들어야 합니다. 다시 말씀드리면 의뢰자, 기획자, 프로그래머, 디자이너, 이렇게 4가지 부류의 사람들이 아직 제작되지 않은 작품에 대해 동일한 컨셉과 이미지를 가지고 제작이 시작되어야 한다는 점입니다.

 

현재 웹기획자들은 여러분야에서 다른 전공을 가지고 일을 하다가 전업을 하게된 경우가 많습니다. 그중의 한분야가 CF나 기타 영상메체의 프로듀서를 하시던 분들입니다. 어찌되었던 만들어지는 표현의 차이일 뿐 전체를 프로듀싱한다는 점에서는 같으니 말이죠.. 이런분야에서 전업하신 기획자님들의 사이트는 그래픽이 섬세하고, 기능적인 부분에 치우치는 경우가 가끔 있다는 단점이 있기는 하지만 이분들이 스토리보드라는 개념들도 같이 가지고 들어오셔서 웹기획일에 또 한가지 중요한 툴을 갖추게 되었죠.

 

어찌되었건 웹사이트 제작에 있어서 스토리보드의 역할은 의뢰자, 기획자, 디자이너, 프로그래머가 사이트를 제작하기 전에 미리 웹사이트의 조금은 디테일한 내용을 머리속에 같은 그림으로 그릴 수 있다는 점과, 사이트의 설계도로서의 역할을 한다는 것입니다.

 

스토리 보드의 제작시점은 사이트의 초기 기획서와 견적서가 제출되고, 계약이 이루어지고, 본격적으로 일이 시작되는 시점에 가장 먼저 그리고 가장 중요한 작업이 됩니다.

 

스토리 보드가 제작되면 의뢰자에서 승인을 받아야 하는 경우도 있고, 스토리 보드 조차도 잘 이해 못하는 의뢰자라면 디자이너가 먼저 중요페이지를 보여주는 부분만 제작하여 승인을 받는 경우도 있습니다. 

 

그럼 이제 스토리보드 제작의 방법에 대해 설명드리도록 하겠습니다.

 

스토리보드의 제작은 사이트의 기획과 제작을 이끌어나가는 기획자의 성향에 따라 매우 다양한 방법으로 진행되고, 표현방법 도 아주 다양합니다. 아직 적립되지 않은 툴이라 모든 기획자가 나름대로 스토리 보드를 제작하고 있고, 모든 기획자가 다 다르다고 봐도 과언을 아닐 듯합니다. 이 이야기는 제가 지금부터 설명드릴 스토리보드 제작에 대한 방법 또한 일반적인 툴이 아니라는 말씀입니다. 사실은 저만의 방법이었으며, 저는 앞에서 말씀드린 것 처럼 방송쪽의 프로듀서나 CF계통 출신이 아닌 만큼 원래의 스토리보드는 본 적도 없습니다. 제 나름으로 사이트를 제작하기 전에 어떻게 하면 좀 더 모든 사람들이 제작완료 단계의 사이트를 상상할 수 있는 설계도를 작성할 수 있을까? 그리고, 어떻게 하면 이문서를 보고 OK한 사람이 다 만들어진 사이트를 보고 [아니 처음 말한것과 왜 다르냐]는 말을 안나오게 정확한 표현이 가능할 까를 연구한 끝에, 그리고 사이트 제작을 한건, 두건 진행하면서 쌓아온 나만의 방법입니다.

 

자꾸 이런 말씀을 드리는 것은 개인의 취향에 따라 사이트가 다르게 나오듯이 자신에게 맞는 스토리보드 제작방법이 있으니 사이트 제작 경험을 쌓으시면서 자신만의 방법을 찾으시기를 바라는 때문이며, 저의 방법이 아직은 완벽하지 않음이 많이 있기 때문입니다.

 

  

1단계. 사이트구조도 작성..

 

먼저 사이트의 구성에 대한 구조가 확립되어야 합니다. 저의 방법은 의뢰자로부터 요청된 내용, 그리고 기획자의 아이디어, 그리고 벤치마킹을 통해 추가되어야 할 부분이라고 생각되는 내용, 또한 최근 인터넷의 흐름 등등 모든 기획적인 요소가 복합적으로 작성되어 사이트의 뼈대가 만들어 집니다.

 

일단 사이트에 들어가야할 모든 내용을 나열합니다. 그리고는 내용적으로 또는 기능적으로 유사내용끼리 묶음을 만들어 갑니다. 이것이 추후 사이트 메뉴의 기본 틀로 구성됩니다. 내용과 카테고리가 많은 경우 트리구조로 엮어지기도 합니다.

 

저의 경우 트리구조로 작성된 이 사이트 구조도를 의뢰자와 작업에 참여할 프로그램머, 디자이너와의 각각 상담을 통해 완성 짓고 결정짓습니다. 첫 단추에 승인을 받지 않고 넘어가면 추후 모든 작업을 다시 하거나 곤란에 봉착하는 일들이 많아지더군요..

 

2단계. 사이트 맵 작성

 

사이트구조도가 완성되면 좀더 자세히 사이트맵을 작성합니다. 이 사이트 맵은 추후 스토리보드의 목차역할을 할 뿐 아니라 사이트 제작의 근간이 되기도 합니다. 이 사이트 맵에는 사이트에 들어가는 모든 페이지가 보여져야 합니다.

 

사이트 맵이 완성되면 그 사이트의 규모나 구조등이 완전히 결정이 되게 됩니다. 항상 반복해서 말씀드리지만 한단계 한단계를 의뢰자의 승인과 함께 같이 프로젝트에 참여하는 모든 사람들의 동의를 얻으십시오. 기획자가 프로그램, 디자인, 기획등 모든 일에 완벽하게 다 알고 있다면 몰라도, 기획자는 신이 아닙니다. 귀를 열고 많은 부분을 받아들이고, 그 다음에 주관을 가지고 결정하신 후 의뢰자의 승인을 받으세요.. 많은 부분들을 설득시키기도 하셔야 할 거고, 새로 추가되어야 하는 내용들도 많이 있을 겁니다. 처음에 완벽한 설계도 작성의 추후에 업무량을 많이 줄여 줍니다(경험).

 

많은 사이트들이 사이트 맵을 보여주고 있습니다. 이용자들의 편의를 고려하고, 이용자들이 이 사이트에서 제공하는 부분을 가장 쉽게 알 수 있는 페이지 이지요.. 여기서 만드는 사이트 맵은 일반 사이트에서 보여주는 사이트 맵과는 조금은 차이가 있습니다. 모든 페이지가 다 들어있어야 하고, 각 페이지 마다 넘버링을 하여야 합니다. 모든 페이지에 대한 넘버링은 추후 스토리보드의 목차역할을 하게 되는 것입니다. 넘버링 하는 방법은 기획자의 재량이지만 이왕이면 넘버만 보고도 어느 부분에 속하는 페이지인지 알 수 있도록 하는 것이 유리하겠지요. 알파벳약자와 숫자를 섞어 쓰는 것이 좋습니다.

 

자 사이트 맵이 완성되셨으면 이제 스토리보드를 만드실 모든 준비를 하신 겁니다. 이제는 스토리보드를 한장 한장 그려보도록 하겠습니다

 

저는 스토리보드를 만들기 전에 사이트맵을 가지고 브레인스토밍을 합니다.

브레인스토밍이란 회의 참가자들이 이견을 제시하지 않고 생각나는 모든 아이디어를 추출하는 회의를 말합니다. 이건 회의시간도 단축되고, 많은 아이디어를 끌어모을 수 있는 아이디어회의 방법중에 하나지요.

 

프로젝트에 참여하는 기획자, 디자이너, 프로그래머가 모여 브레인스토밍을 한 후 거기서 나온 것을 스토리보드를 만들 때 많이 반영도록 합니다.

 

그럼 스토리보드에는 어떤 요소들이 들어가야 하는 지를 살펴보시죠.

 

우선 그 페이지의 구성이 들어가야 합니다.

프레임을 사용하는 지 아닌지, 메뉴의 구성이 상단에 있는 지 좌측에 있는 지 어느 곳에 어떤 내용을 보여 줄 것인지 등 전체적인 화면구성을 보여 주어야 합니다. 메뉴구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차지 하게 됩니다. 페이지 구성시 사용자 편의를 최우선으로 하시구요..

 

두번째로 그 페이지의 정보를 보여 줍니다.

지금 작성하고 있는 페이지의 정보를 간략하게 보여줍니다. 저장될 디렉토리, 화일이름, 페이지 title등을 기입하여 주는 것이 좋습니다. 사실 디자인을 하다보면 많은 페이지들을 카피해서 사용하게 되고 페이지의 제목(html코드상)에 소홀하게 되는 경우가 많이 있습니다. 하지만 검색엔진의 로보트가 들어온 경우 페이지의 제목이 아주 유용하게 사용됩니다. 메타네임등을 기입할 필요가 있으

면 이것도 적어 주시면 좋구요..

 

세번째로 링크정보를 보여줍니다.

페이지에 들어간 링크정보를 정리하여 적어 줍니다. 링크를 기입하는 방법은 각 페이지에 넘버를 설정하여 적어주는 경우도 있고 미리 화일네임과 디렉토리를 다 설정하여 적어주는 경우도 있습니다만 서로의 장단점이 있습니다. 물론 후자의 경우로 하는 것이 작업에 많은 도움을 줍니다만, 지면상 아주 협소해 지는 경우가 있으니 잘 생각하셔서 작업을 하세요..

 

네번째로 프로그램요소를 보여줍니다.

스크립트 기능을 사용하는 경우, ASP PHP등의 프로그램을 사용하는 경우 DB를 오픈하고 쿼리를 사용하는 경우등을 표시하고, 그 기능을 적어줍니다.

 

그리고 기타로 꼭 설명이 필요한 것을 적습니다. 어떤 부분을 작업할 때 유의해야 할 부분이나, 꼭 신경써서 만들어야 할 부분등 프로그래머나 디자이너에게 알려줘야 할 부분을 적어 줍니다.

 

이 정도면 어느정도 스토리 보드에 들어갈 부분이 정리가 되는 듯 하네요..

 

그럼 이런 많은 정보를 어떻게 하면 모든 사람이 쉽게 볼 수 있고, 스토리보드를 그리기 쉽게 할 수 있을 까요? 기획자마다 아직은 여러가지 스타일로 만들고 있습니다. 기획자 자신과 또 같이 일을 하는 팀원이 잘 이해할 수 있고, 사이트 제작을 의뢰한 의뢰자가 납득하기 쉬운 폼이라면 어떤 폼이라도 관계없겠지요? 그럼 그런 방법을 한번 알아보겠습니다. 물론 제방법이지만요.

  

 

이제 화면에다 스토리보드를 그려보도록 하겠습니다.

회원님들의 요청에 의해 지금 자료실에다 스토리보드 예제를 올려 놓았습니다.

필요하신분은 그 화일을 받아 프린트하신후 보시면서 글을 읽으시면 좀 더 쉽게 이해하실 수 있을 듯 하네요. 화일은 엑셀로 되어있는 데 이건 제가 엑셀을 잘 다루고 익숙해져서 그렇구요. 파워포인트나 다른 어떤 툴로 작업을 하셔도 아님 손으로 그리셔도 됩니다.

 

다들 잘 보이시나요? 잘 안보이신다구요.. 그럼 제가 대략적인 그림을 보여드릴께요.. 영차!!

 


 

그림이 좀 무겁네요.. 잘 보이시나요? 그래도 안보인다구요? 그럼 그림을 클릭하면 크게 보이실 거예요.. 전체창으로 보이니 불편하시죠? 그럼 그림을 오른쪽마우스로 클릭하시구요. 다른이름으로 대상저장을 누르셔서 화일을 저장하신 후보셔도 되구요.. 설명과 같이 보시려면 한장 프린트 하셔서 옆에 두고 보세요.

 

~ 자 그럼 이제 잘 보인다고 믿고 한가지씩 설명을 드리겠습니다.

 

1. 화면 제일 좌측상단에 Name란에는 화일이름을 표시하구요.. 사실 초기에 화일이름을 일일히 다 결정하지 않고 작업을 하는 경우에 페이지마다 넘버를 부여해서 사용하는 경우도 있습니다. 그런데 제가 작업을 해본 결과 화일네임을 앞장에서 말씀드렸던 사이트맵 작성하실 때 미리 다 만드시구요.. 화일네임으로 작업을 하시면 미리 링크를 걸수 있어서 좋습니다. 단지 제 방법이구요.. 편리하신 데로 하세요.

 

2. 고 바로옆에 Floder를 적는 란을 마련했습니다. 현재 작업하시는 파일의 디렉토리를 적어 주시면 됩니다. 링크를 걸 때 상대적인 주소를 사용하게 되는 경우는 이 화일이 있는 위치를 파악하고 있으 면 편리 하지요. 링크를 거는 사람에 대한 배려입니다요..

 

3. 우측상단에는 타이틀과 Meta라고 적혀있는 부분이 있지요?

Title에는 그 페이지의 제목을 적어 줍니다. html 페이지 상단에 title 코드를 넣게 되는 데 이곳에 제목을 넣게 되면 그 페이지를 열었을 때 모니터 하단에 창이 열렸다는 표시에도 표시가 되구요. 브라우저 제일위에도 보여주게 됩니다. 그리고 더 중요한 것은 메타정보들과 함께 타이틀을 가져가는 로보트들이 있습니다. 검색엔진에서 사용하는 로보트들이 사이트에 들어온 경우 모든 페이지를 읽어가서 자신의 검색사이트에 올리게 되는 데 이 때 타이틀에 제목을 안 적어 준 페이지는 제목없음으로 나오게 되지요.. 그리고 메타네임은 주로 메인페이지에 많이 적어주는 데 자세한 내용은 프로그래머나 디자이너에 맡기시구요. 메인페이지라면 적어도 메타 키워드하고 디스크립션 정도는 적어주십시오. 웹페이지들을 만들다보면 비슷한 페이지를 카피해서 사용하는 경우도 많구요. 제목에 소홀해 지는 경우가 많은 데 작은 곳에서 부터 마켓팅을 준비하시는 자세가 필요합니다.

 

아직 프린트 하신 거 가지고 계시죠? 무슨 프린트냐구요? 우쉬~

운영자(오종혁)가 스토리보드 예제 만들어 드린 거요.. 없으시면 스토리보드의 제작(5)에 가셔서 그림클릭하시고 한장 인쇄하세요. 그 거 보면서 설명 읽으시는 것이 훨씬 도움이 되실 거 같아요..

 

이 예제는 물론 눈치채셨겠지만 데브뱅크 사이트 입니다. 기존에 작업했던 거 가지고 사용할려고 했더니 보안이다 뭐다해서 공시할 수 있는 게 없네요. 사실 데브뱅크는 제가 기획, 프로그램, 디자인, 강좌 다 하거든요. 이럴때는 스토리 보드가 필요없답니다. 나 혼자하는 데 그게 왜 필요하겠어요? 머리속에 다 있고, 제 손발은 제 머리하고 연결되어 있거든요. 하지만 혼자 모든 일을 하게되는 일은 거의 없죠.. 의뢰자, 프로그래머, 디자이너와 공동컨셉을 가지고 작업을 해야되고, 사이트가 만들어지기 이전에 이미 모든 걸 공유하고, 승인이 나야 하니까요.. 그리고 만들면서도 설계도 역할을 하니 작업하면서 서로 군소리를 줄일 수 있고 작업효율도 향상되지요.

 

그래도 회원님들의 요청을 뿌리치지 못하고 운영자가 한장 그렸습니다. 그림솜씨는 없지만 예쁘게 봐 주세요..

어디까지 설명을 드렸더라? ! 메타네임.. 그럼 이번시간에는 아래부터 설명을 드리겠습니다. 페이지의 아래를 보세요.

 

4. 화면의 좌측하단에 보시면 Link정보라는 란을 마련해 두었습니다. 링크되는 곳과 링크페이지를 보여주어야 하는 데 화면에다가 다 적으면 여기저기 적다가 나중에 적을 곳이 없어서 선을 찍~빼서 적기도 하고 나중에 그것도 안되면, 문방구에 가게됩니다. 큰 종이사러~..

그래서 코드화 했습니다. 물론 제방법이지만 링크는 {}를 사용해서 Link에서 따온 약자 L을 넣고 일련번호를 넣었지요. {L01}, {L02}, {L03}이런 넘버들이 보이시죠.. 이 표시를 메인창 링크들어가는 곳에 넣으시고 그 정보는 하단에 적으시면 편리합니다. 중괄호 { 가 불편하시면 < # 등을 사용하시는 것도 좋구요. 링크정보를 적으실 때 디렉토리까지 적으시면 다른 페이지가 만들어지지 않

은 상황에서 미리 링크를 걸어 놓을 수 있지요. 하지만 미리 링크를 거신 경우에 끊어진 링크가 있는 지 수시로 확인하시고, 사이트가 다 만들어진 경우에 모두 클릭해 보시고 확인해 보셔야 합니다. 끊어진 링크는 사이트의 신뢰를 무지하게 떨어뜨리는 요인이 됩니다.

 

5. 다음은 페이지 우측하단인데요.. 요건 예전엔 안쓰다가 최근에 제가 좀 업데이트를 해서 사용하고 있는 부분입니다. Program란에는 이 페이지에 프로그램 요소가 들어있는 지 유무를 넣는 란이지요.. O, X로 넣기도 하구요. ASP, PHP로 넣기도 합니다.

그리고, DB Query란에는 이페이지에 DB에서 불러오거나 입력 또는 수정하거나 DB내용을 컨트롤 하는 쿼리를 사용하는 지 유무를 체크해 주는 란이구요..그리고 Script라고 써있는 부분은 자바스크립트나 VB스크립트가 이페이지에 사용되는지의 유무를 표시해 줍니다. 마지막으로 Image부분은 이페이지에 필요한 이미지 특히 새로 만들어야 하는 이미지의 숫자를 표시하고 있습니다.

요부분은 프로그래머나 디자이너가 스토리보드를 볼 때 이부분을 보면 대략적으로 이 페이지를 만들 때 어느 정도의 일을 해야하고 어떤 부분을 사용해야 하는지 보여주는 곳으로 일일히 내용을 읽지 않고도 어느 정도 알 수 있지요. 프로그래머나 디자이너들이 좋아하더라구요. 한번 사용해 보세요..

 

인쇄하신 스토리보드 종이 아직 버리지 마세요.. 만일 벌써 버리셨다면 스토리보드의 제작 (5)에 가셔서 또는 자료실에 가셔서 다시 한장 받아오시구요. 아참 아무리 운영자가 그림을 못그려도 그렇지 벌써 버리시다니..

 

6. 우측하단에 연결Table이란 곳이 보이시지요?

이부분은 Table기획이 끝나고 나서 스토리보드를 만드는 것이 좋다는 것을 미리 알려주고 있습니다. 프로그래머가 DB의 어떤 Table을 사용해야 하는 지를 보여주는 부분인 데, 어떤 분들은 이건 월권이다. DB설계는 프로그래머의 고유권한이다.. 라고 하시는 분들도 있을 지 모르겠습니다. 하지만 웹기획자는 사이트의 모든 부분을 기획하시는 것이 좋습니다. DB기획은 프로그램머와 같이 합니다. 사실 DB기획은 다른 강좌에서 자세하게 설명하겠지만 사이트가 성장(?)했을 때 엄청난 파급효과를 가져오는 부분으로 기획자가 미리 이 사이트가 테이블 별로 어느 시점에 어느 정도 성장할 지 각 테이블이 추후 어떻게 사용이 될지에 대한 정보를 프로그래머에게 주시고, 프로그래머와 잘 상의하셔서 Table에 대한 설계를 하셔야 합니다.

DB가 필요한 부분은 {D01}, {D02}, {D03}같은 코드를 저는 사용하고 있습니다. 메인창에 코드를 표시하고 이곳에다가 Table명을 기입하고 있지요. 프로그램작업하실 때 많이 편리하실 겁니다. 물론 사용하는 컬럼네임까지 적어주면 좋겠지만 지면 관계상 적지 않고 있습니다. DB가 중요한 사이트라면 항목을 한번 만들어 보시는 것도 좋겠네요..

 

7. 다음은 우측중간에 있는 내용입니다.

여기는 메모창입니다. 창에 각 요소마다 주석을 달아야하는 데 이곳에 적습니다. 저는 코드를 <A>, <B>, <C> 이런 형태로 사용하는 데 이건 좋으실 대로 하세요. 가나다를 쓰시던지 1234를 쓰시던지 말리지 않겠습니다. 주석을 적으실 때는 주석정보를 보실 분, 디자이너 또는 프로그래머에게 의사가 정확하게 전달될 수 있도록 하시고 간결하게 표현하시는 것이 좋습니다. 저의 경우 공간이 부족한 부분은 메인창 뿐아니라 어떤 곳이라도 테그를 달고 이곳에 적습니다. 사용하다보면 공간이 부족한 부분이 많이 생기실 겁니다. 지금 예제에도 메타 Description항목에 <J> 라는 코드가 붙어있고 그 내용이 내용의 <J>에 들어 있지요.. 이렇게 사용하시면 됩니다.

다시 한번 노파심에 말씀 드리지만 지금의 예제는 정형화 된 폼이 아닙니다. 이건 제가 사용하는 방법이구요. 이걸 힌트로 기획자님들 각자의 멋진 폼을 만드시고 같이 일하시는 프로그래머, 디자이너가 쉽게 모든 정보를 알 수 있도록 만드시면 됩니다. 그리고, 사이트의 문외한인 의뢰자가 보고도 그 페이지가 어떻게 구성될 지 알 수 있도록 하면서 빨리 작성할 수 있는 툴을 만드십시오.

 

프린트하신 페이지의 좌측 중앙부분의 넓은 창이 있지요

 

 이 곳에 이 페이지의 구성이 들어갑니다. 물론 제 방법이구요. 이곳에다가 상세한 디자인을 그리지는 않습니다. 다만 어떤 부분이 어느 곳에 들어갈지 전체 구성이 들어가지요. 디자인에 대한 컨셉을 설명하기는 하지만 실제 디자인 작업은 디자이너의 몫이라고 생각합니다.

자 그럼 하나씩 집어보면서 각 코드부분과 내용부분을 찾아 보시면 이해가 되실 듯 한데 먼저 메인창의 젤 위에 A라는 주석표시가 보이시죠. 이건 내용부분에 이에 대한 설명이 있다는 표시입니다. 내용에 보시면 A항목에 topmenu.asp삽입이라고 되어있지요.. 이 화일을 이곳에 삽입하라는 말이지요. 실제로 지금 데브뱅크 사이트의 상단 메뉴는 화일삽입으로 처리하고 있습니다. 제일 아래쪽에 주석I도 하단메뉴를 삽입하라는 내용임을 아시겠지요? 네 이렇게 표시하시는 겁니다. 쉽지요?

그리고 네모들이 보이시죠.. 작은 네모, 중간네모, 큰네모, 그건 내용을 구분해 주고 있구요. 페이지의 전반적인 구성도을 보여주고 있습니다. 이걸 토대로 디자이너는 html 테이블 설계를 하게되고 그안에 디자인들을 그리게 됩니다. 이 페이지에서는 작은 네모들은 제목들을 표시하고 있구요. 큰 네모들은 내용을 넣을 공간들을 표시해 주었습니다. 전 주로 이런 네모들을 사용하는 데 그림을 잘 그리시는 회원분들은 더 멋지게 그리시리라 생각되네요..

주석A 아래 작은 네모에 보면 주석B 표시가 있지요. ? 여기저기 많이 있네요. 주석B의 내용을 보니 배경에 이미지를 삽입하라는 내용입니다. 데브뱅크 메인페이지를 보면 제목을 보여주는 부분에 같은 이미지들이 여러개 보이죠? 바로 이것입니다. 배경으로 넣어주고 그위에 제목을 적고 있음을 알 수 있지요. 같은 내용의 주석은 이렇게 같은 주석으로 여러곳에 표시하시면 편리합니다.

지금처럼 데브뱅크 메인페이지를 보시면서, 스토리보드 예제를 보시면 좀 이해가 쉽지 않을까 하는 생각이 드네요. 이게 거기 거든요. 이 스토리보드가 실제로 어떻게 구현되는 지 한번 잘 살펴 보세요. 링크 주소들은 좀 달라지긴 했습니다만. 똑같습니다.

또 그림을 찬찬히 보시면 아까 설명드린 링크표시들 DB표시들도 보이시지요? 각 코드 번호에 해당되는 곳을 찾아가시면 사이트를 만드는 데 그 부분에서 참고해야할 내용들이 들어있지요. 함 잘 찾아 보시구요..

자 사이트에 대한 설계도 처럼 보이시나요? 이것만 보면 이 페이지가 어떻게 만들어 질 지가 보이시나요? 만일 그렇다면 전 성공한 거구요. 아니라면 이 페이지는 실패입니다.

아 그럼 간단하게(?) 스토리보드에 대한 장황한 설명을 일단 일단락 지을 시간이 된 것 같네요.. 더 발전되고 향상된 내용이 있으면 다시 올리도록 하겠습니다. 제가 스토리보드를 만드는 방법이 많이 미흡한 방법이지만 조금이나마 도움이 되셨으면 좋겠네요. 여러번 연습해 보시구요. 자신의 팀에 꼭 맞는 가장 좋은 툴을 찾아가시기를 바랍니다.


출처: 데브뱅크 대표이사 오종혁

좋은 정보 감사합니다.
쌈꼬쪼려 소백촌닭
Posted by SB패밀리