웹페이지 스토리보드 작성법

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

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

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

그럼 웹사이트로 다시 돌아와서, 인터넷 사이트는 기존의 텍스트환경의 네트워크를 탈피하여, 웹을 기반으로 시각, 청각등의 모든 멀티미디어가 표현가능한 종합예술(?)로서의 기능을 가지고 있는 바, 일반적인 말로서의 설명과 구조적인 설명만을 가지고, 아직 제작이 되지 않은 사이트를 설명하기가 힘들어 졌습니다.

또한 어느정도의 규모만 되어도 적어도 기획자, 디자이너, 프로그래머 이 세그룹이 힘을 합해 한가지 작품을 만들어야 하며, 의뢰자의 기존 생각과도 일치 하도록 만들어야 합니다.

다시 말씀드리면 의뢰자, 기획자, 프로그래머, 디자이너, 이렇게 4가지 부류의 사람들이 아직 제작되지 않은 작품에 대해 동일한 컨셉과 이미지를 가지고 제작이 시작되어야 한다는 점입니다. 

현재 웹기획자들은 여러분야에서 다른 전공을 가지고 일을 하다가 전업을 하게된 경우가 많습니다.
그중의 한분야가 CF나 기타 영상메체의 프로듀서를 하시던 분들입니다. 어찌되었던 만들어지는 표현의 차이일 뿐 전체를 프로듀싱한다는 점에서는 같으니 말이죠..

이런분야에서 전업하신 기획자님들의 사이트는 그래픽이 섬세하고, 기능적인 부분에 치우치는 경우가 가끔 있다는 단점이 있기는 하지만 이분들이 스토리보드라는 개념들도 같이 가지고 들어오셔서 웹기획일에 또 한가지 중요한 툴을 갖추게 되었죠. 

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

스토리 보드의 제작시점은 사이트의 초기 기획서와 견적서가 제출되고, 계약이 이루어지고, 본격적으로 일이 시작되는 시점에 가장 먼저 그리고 가장 중요한 작업이 됩니다. 
스토리 보드가 제작되면 의뢰자에서 승인을 받아야 하는 경우도 있고, 스토리 보드 조차도 잘 이해 못하는 의뢰자라면 디자이너가 먼저 중요페이지를 보여주는 부분만 제작하여 승인을 받는 경우도 있습니다. 


■ 스토리보드의 제작(1) 

스토리보드의 제작은 사이트의 기획과 제작을 이끌어나가는 기획자의 성향에 따라 매우 다양한 방법으로 진행되고, 표현방법도 아주 다양합니다.

아직 적립되지 않은 툴이라 모든 기획자가 나름대로 스토리 보드를 제작하고 있고, 모든 기획자가 다 다르다고 봐도 과언을 아닐 듯합니다.

이 이야기는 제가 지금부터 설명드릴 스토리보드 제작에 대한 방법 또한 일반적인 툴이 아니라는 말씀입니다.

사실은 저만의 방법이었으며, 저는 앞에서 말씀드린 것 처럼 방송쪽의 프로듀서나 CF계통 출신이 아닌 만큼 원래의 스토리보드는 본 적도 없습니다.

제 나름으로 사이트를 제작하기 전에 어떻게 하면 좀 더 모든 사람들이 제작완료 단계의 사이트를 상상할 수 있는 설계도를 작성할 수 있을까? 그리고, 어떻게 하면 이문서를 보고 OK한 사람이 다 만들어진 사이트를 보고 [아니 처음 말한것과 왜 다르냐]는 말을 안나오게 정확한 표현이 가능할 까를 연구한 끝에, 그리고 사이트 제작을 한건, 두건 진행하면서 쌓아온 나만의 방법입니다. 

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



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

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

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

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

▶ 2단계. 사이트 맵 작성 

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

사이트 맵이 완성되면 그 사이트의 규모나 구조등이 완전히 결정이 되게 됩니다. 항상 반복해서 말씀드리지만 한단계 한단계를 의뢰자의 승인과 함께 같이 프로젝트에 참여하는 모든 사람들의 동의를 얻으십시오.

기획자가 프로그램, 디자인, 기획등 모든 일에 완벽하게 다 알고 있다면 몰라도, 기획자는 신이 아닙니다. 귀를 열고 많은 부분을 받아들이고, 그 다음에 주관을 가지고 결정하신 후 의뢰자의 승인을 받으세요.. 많은 부분들을 설득시키기도 하셔야 할 거고, 새로 추가되어야 하는 내용들도 많이 있을 겁니다. 처음에 완벽한 설계도 작성의 추후에 업무량을 많이 줄여 줍니다(경험). 

많은 사이트들이 사이트 맵을 보여주고 있습니다. 이용자들의 편의를 고려하고, 이용자들이 이 사이트에서 제공하는 부분을 가장 쉽게 알 수 있는 페이지 이지요.. 여기서 만드는 사이트 맵은 일반 사이트에서 보여주는 사이트 맵과는 조금은 차이가 있습니다.

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

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



■ 스토리보드의 제작 (2) 

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

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

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

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

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

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

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

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

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

스크립트 기능을 사용하는 경우, ASP나 PHP등의 프로그램을 사용하는 경우 DB를 오픈하고 쿼리를 사용하는 경우등을 표시하고, 그 기능을 적어줍니다. 
그리고 기타로 꼭 설명이 필요한 것을 적습니다. 어떤 부분을 작업할 때 유의해야 할 부분이나, 꼭 신경써서 만들어야 할 부분등 프로그래머나 디자이너에게 알려줘야 할 부분을 적어 줍니다. 
이 정도면 어느정도 스토리 보드에 들어갈 부분이 정리가 되는 듯 하네요.. 
그럼 이런 많은 정보를 어떻게 하면 모든 사람이 쉽게 볼 수 있고, 스토리보드를 그리기 쉽게 할 수 있을 까요? 기획자마다 아직은 여러가지 스타일로 만들고 있습니다. 기획자 자신과 또 같이 일을 하는 팀원이 잘 이해할 수 있고, 사이트 제작을 의뢰한 의뢰자가 납득하기 쉬운 폼이라면 어떤 폼이라도 관계없겠지요? 그럼 그런 방법을 한번 알아보겠습니다. 물론 제방법이지만요. 



■ 스토리보드의 제작 (3) 

이제 화면에다 스토리보드를 그려보도록 하겠습니다. 
회원님들의 요청에 의해 지금 자료실에다 스토리보드 예제를 올려 놓았습니다. 
필요하신분은 그 화일을 받아 프린트하신후 보시면서 글을 읽으시면 좀 더 쉽게 이해하실 수 있을 듯 하네요. 화일은 엑셀로 되어있는 데 이건 제가 엑셀을 잘 다루고 익숙해져서 그렇구요. 파워포인트나 다른 어떤 툴로 작업을 하셔도 아님 손으로 그리셔도 됩니다. 

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


1.화면 제일 좌측상단에 Name란에는 화일이름을 표시하구요.. 

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

2. 고 바로옆에 Floder를 적는 란을 마련했습니다. 

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

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

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

4. 화면의 좌측하단에 보시면 Link정보라는 란을 마련해 두었습니다. 

링크되는 곳과 링크페이지를 보여주어야 하는 데 화면에다가 다 적으면 여기저기 적다가 나중에 적을 곳이 없어서 선을 찍~빼서 적기도 하고 나중에 그것도 안되면, 문방구에 가게됩니다. 큰 종이사러~.. 
그래서 코드화 했습니다. 물론 제방법이지만 링크는 {}를 사용해서 Link에서 따온 약자 L을 넣고 일련번호를 넣었지요. {L01}, {L02}, {L03}이런 넘버들이 보이시죠.. 이 표시를 메인창 링크들어가는 곳에 넣으시고 그 정보는 하단에 적으시면 편리합니다. 중괄호 { 가 불편하시면 < 나 # 등을 사용하시는 것도 좋구요. 링크정보를 적으실 때 디렉토리까지 적으시면 다른 페이지가 만들어지지 않 
은 상황에서 미리 링크를 걸어 놓을 수 있지요. 하지만 미리 링크를 거신 경우에 끊어진 링크가 있는 지 수시로 확인하시고, 사이트가 다 만들어진 경우에 모두 클릭해 보시고 확인해 보셔야 합니다. 끊어진 링크는 사이트의 신뢰를 무지하게 떨어뜨리는 요인이 됩니다. 

5. 다음은 페이지 우측하단인데요.. 

요건 예전엔 안쓰다가 최근에 제가 좀 업데이트를 해서 사용하고 있는 부분입니다. Program란에는 이 페이지에 프로그램 요소가 들어있는 지 유무를 넣는 란이지요.. O, X로 넣기도 하구요. ASP, PHP로 넣기도 합니다. 
그리고, DB Query란에는 이페이지에 DB에서 불러오거나 입력 또는 수정하거나 DB내용을 컨트롤 하는 쿼리를 사용하는 지 유무를 체크해 주는 란이구요..그리고 Script라고 써있는 부분은 자바스크립트나 VB스크립트가 이페이지에 사용되는지의 유무를 표시해 줍니다. 마지막으로 Image부분은 이페이지에 필요한 이미지 특히 새로 만들어야 하는 이미지의 숫자를 표시하고 있습니다. 
요부분은 프로그래머나 디자이너가 스토리보드를 볼 때 이부분을 보면 대략적으로 이 페이지를 만들 때 어느 정도의 일을 해야하고 어떤 부분을 사용해야 하는지 보여주는 곳으로 일일히 내용을 읽지 않고도 어느 정도 알 수 있지요. 프로그래머나 디자이너들이 좋아하더라구요. 한번 사용해 보세요.. 

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

이부분은 Table기획이 끝나고 나서 스토리보드를 만드는 것이 좋다는 것을 미리 알려주고 있습니다. 프로그래머가 DB의 어떤 Table을 사용해야 하는 지를 보여주는 부분인 데, 어떤 분들은 이건 월권이다. DB설계는 프로그래머의 고유권한이다.. 라고 하시는 분들도 있을 지 모르겠습니다. 하지만 웹기획자는 사이트의 모든 부분을 기획하시는 것이 좋습니다. DB기획은 프로그램머와 같이 합니다. 
사실 DB기획은 다른 강좌에서 자세하게 설명하겠지만 사이트가 성장(?)했을 때 엄청난 파급효과를 가져오는 부분으로 기획자가 미리 이 사이트가 테이블 별로 어느 시점에 어느 정도 성장할 지 각 테이블이 추후 어떻게 사용이 될지에 대한 정보를 프로그래머에게 주시고, 프로그래머와 잘 상의하셔서 Table에 대한 설계를 하셔야 합니다. 
DB가 필요한 부분은 {D01}, {D02}, {D03}같은 코드를 저는 사용하고 있습니다. 메인창에 코드를 표시하고 이곳에다가 Table명을 기입하고 있지요. 프로그램작업하실 때 많이 편리하실 겁니다. 물론 사용하는 컬럼네임까지 적어주면 좋겠지만 지면 관계상 적지 않고 있습니다. DB가 중요한 사이트라면 항목을 한번 만들어 보시는 것도 좋겠네요.. 

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

여기는 메모창입니다. 창에 각 요소마다 주석을 달아야하는 데 이곳에 적습니다. 저는 코드를 <A>, <B>, <C> 이런 형태로 사용하는 데 이건 좋으실 대로 하세요. 가나다를 쓰시던지 1234를 쓰시던지 말리지 않겠습니다. 주석을 적으실 때는 주석정보를 보실 분, 디자이너 또는 프로그래머에게 의사가 정확하게 전달될 수 있도록 하시고 간결하게 표현하시는 것이 좋습니다. 저의 경우 공간이 부족한 부분은 메인창 뿐아니라 어떤 곳이라도 테그를 달고 이곳에 적습니다. 사용하다보면 공간이 부족한 부분이 많이 생기실 겁니다. 지금 예제에도 메타 De-scription항목에 <J> 라는 코드가 붙어있고 그 내용이 내용의 <J>에 들어 있지요.. 이렇게 사용하시면 됩니다. 
다시 한번 노파심에 말씀 드리지만 지금의 예제는 정형화 된 폼이 아닙니다. 이건 제가 사용하는 방법이구요. 이걸 힌트로 기획자님들 각자의 멋진 폼을 만드시고 같이 일하시는 프로그래머, 디자이너가 쉽게 모든 정보를 알 수 있도록 만드시면 됩니다. 그리고, 사이트의 문외한인 의뢰자가 보고도 그 페이지가 어떻게 구성될 지 알 수 있도록 하면서 빨리 작성할 수 있는 툴을 만드십시오. 그리고 좋은 방법이 있으면 저에게도 좀 알려주십시오.