# 스토리보드란?
# 스토리보드를 작성하기 전에
# 스토리보드 작성하기

■ 스토리보드란?

웹사이트 개발에 있어서 스토리보드는 개발의 설계도이며 작업 지침서라 할 수 있다.
스토리보드 속에는 웹사이트의 전체적인 흐름과 더불어
텍스트와 이미지, 소리, 애니메이션 등의 데이타가 어떻게 조합되어
어떻게 보여지게 될 것인지의 세부적이고 구체적인 사항들이 모두 담기게 된다.
대체로 기획자에 의해 스토리보드가 작성되어지면,
디자이너는 스토리보드를 보고 디자인을 하고,
프로그래머는 스토리보드를 보고 프로그램을 설계하고 코딩하게 된다.
따라서 스토리보드가 잘못되면 잘못된 디자인, 잘못된 프로그램이 나올 수 있으며,
수정을 위해 상당한 시간과 노력을 더 들여야 하는 일이 발생하게 된다.
스토리보드는 정확하고 상세하여야 하며, 제대로된 스토리보드는
제대로된 웹사이트를 개발하기 위한 기본이라 할 수 있겠다.

▶ 스토리보드는 왜 필요한가?

스토리보드의 필요성에 대해서 간략하고 재미있게 표현한 글이 있어 갖고 왔다.
출처가 정확하게 기억이 안 나지만 아마도 영진출판사에서 나온
'멀티미디어 컨텐츠 기획'이란 책에서 본 것 같다.

◇ 일류 요리집은 메뉴판만 보면 코스별로 나오는 요리가 일목요연하게 나타나 있다.
◇ 100명의 요리사라도 요리의 재료별, 조리 순서와 계획이 총망라된
  요리책 하나만 있으면 일심동체로 하나의 요리를 만들 수 있다.
◇ 1명의 요리사가 요리를 해도 잘 만들어진 요리책이 없다면,
  매번 만들 때마다 다른 요리가 된다.

스토리보드를 작성하는 것은 생각보다 참 귀찮은 일이다.
하지만 필요성은 누구나 인정하고 있다고 여겨지며, 이것을 인정한다면
이왕 만드는 것인데, 보기도 좋고 이해하기도 쉽고 상세하고 정확하게 잘 만드는 것이
좋겠단 생각을 하게 된다. 하지만 어떻게 해야 그런 스토리보드가 나올 수 있는지는
아직도 잘 모르겠다.

■ 스토리보드를 작성하기 전에

실제로 스토리보드를 직접 툴을 써서 만드는데 투자하는 시간보다는 스토리보드를 쓰기 전에
고민하고 찾고 부딪히는 시간에 더 많은 투자를 하는 것이 맞다고 생각한다. 똑같은 결과물이 나오더라도 결과물이 있기까지의 고민과 분석 등의 과정이 있느냐 없느냐..그리고 어느 정도로 분석하고 고민하느냐에 따라 그 결과물이 가지는 깊이는 다르다고 생각한다. 

스토리보드를 작성하기 전에 고민해 보아야 할 내용들에 대해 나름대로 정리를 해 보았다.

1. 웹사이트 구축의 목적과 목표에 따라 설계, 개발되어야 한다.

웹사이트를 구축하고자 하는 사람들 대부분에게는 어떤 목적이 존재한다. 물건을 판매하여 돈을 벌려고 한다든지, 고객 서비스를 한다든지, 기업을 홍보하고자 한다든지, 공급자 관리를 한다든지, 교육을 한다든지, 정보를 제공하려고 한다든지, 친구들끼리 소식을 전하고자 한다든지 하는 목적을 지니고 있다. 웹사이트를 구축하고자 한다면 가장 먼저 이러한 목적을 분명히 정리함으로써 웹의 모습을 결정하기 위한 기초를 세워야 한다.
목적과 목표를 정립하는 과정에서 반드시 생각해야 할 문제는 웹사이트를 통하여 고객에게 제공하는 가장 중요한 가치가 무엇인지를 분명히 정의해야 하며, 이 가치는 웹사이트를 구축하는 전반적인 과정에서 충분히 반영되도록 해야 할 것이다.

2. 철저한 분석단계가 필요하다.

·과제 분석 / 사용자 분석 / 내용 분석 / 그리고 기타 분석
서적, 논문, CD-ROM, 타사이트 등에서 관련된 내용 추출, 분석

# 프로젝트1 의 예 :
1) 구성주의 이론, STS 이론 등을 기반으로 전체적인 틀을 잡음.
2) 학생, 교사 설문조사, 교사 인터뷰 등 주사용자층을 대상으로 한 조사 결과를 사이트 세부
  내용 구성시 참고로 함.
3) 타사이트와 CD-ROM 등의 분석을 통해 사이트의 전반적인 구성, 진행 과정을 잡아 나감.
4) 서적 등을 분석, 컨텐츠 내용을 어떻게 꾸려나갈 것인지에 대한 검토를 함.

3. 항상 누구를 위한 사이트인가를 염두해 두어야 한다.

웹사이트에서 사용자(고객)를 누구로 정의하느냐는 웹사이트의 전반적인 모습을 규정하는 중요한 요소이다. 사용자가 누구인가에 따라 웹사이트의 이미지와 컨텐츠가 달라질 것이며, 컨텐츠 표현 형태나 사용되는 단어도 달라질 수밖에 없다. 만일 유아기를 막 벗어난 어린이를 대상으로 한 것이라면 오브젝트가 많은 복잡한 그래픽 디자인은 금물이다. 너무 단순하다고 생각할 정도로 한 오브젝트를 부각시켜야 한다. 또 유아들은 집중시간이 짧기 때문에 글자만 많이 나오는 것은 피해야 하고 간간이 흥미를 끌만한 애니메이션을 넣는 것이 중요하다.

# 프로젝트1 의 예 :
초등학생, 중학생을 위한 사이트 -> 교수님들의 집필원고를 초등학교 교사 등의 집필진이 여러 번 검토하여 수정한 후 검토진 선생님들에게 또다시 확인받는 작업을 거침. 용어하나 하나에 다 세심한 주의가 필요하다.

4. 편리성이나 디자인 등이 사용자의 입장에서 만들어지도록 해야 한다.이 부분은 다 아는 내용이면서도 쉽게 간과하는 부분이기도 한 것 같다. 최대한 개발자가 아닌 사용자의 입장에서 만들어질 수 있도록 늘 세심한 신경을 써야겠다.

# 프로젝트1 의 예 :
초등학생, 중학생에 대한 분석 -> 너무 많은 내용은 금물 / 한번에 집중해서 학습할 수 있는 시간 (30-40분) 고려 / 길을 잃지 않도록 어디서나 길을 찾을 수 있도록 배려 / 사실적인 이미지와 사실적인 소리, 동영상 사용 / 흥미를 끌 수 있는 다양한 방법들을 사용.

5. 웹사이트 구조 설계
웹사이트 구조란 웹사이트를 구성하는 각종 컨텐츠가 정리되어 있는 체계라 할 수 있다. 이러한 체계는 처음 사용자들이 웹사이트를 방문했을 때 웹사이트에 대해 이해하는 전반적인 틀로 웹사이트의 활용을 위한 출발점이 된다고 하겠다. 이러한 의미에서 잘 정립된 체계를 지닌 웹사이트는 사용자들로 하여금 자신이 원하는 정보에 쉽게 접근할 수 있도록 함으로써 편안한 상태에서 웹사이트를 마음껏 이용할 수 있도록 지원한다. 웹사이트를 방문하는 사람들이 혼란을 적게 느끼도록 만들어 최소한 불편해서 웹사이트를 방문하기 싫어지는 것은 예방할 수 있게 하는 것이다. 웹사이트의 구조를 정립한다고 하면 무엇보다 먼저 웹사이트에서 제공할 컨텐츠에 대한 분류로부터 시작할 것이다. 웹사이트는 크기가 크든 작든 관계없이 다양한 종류의 정보를 제공하는데 이들 정보를 사용자가 가장 인식하기 쉽게 카테고리로 묶어 정리할 필요가 있는 것이다.

- 정보 분류 체계
컨텐츠의 정보 분류는 웹사이트를 유지하는 사람이 아닌 사용자의 입장에서 이루어져야 하며, 사용자들이 이 정보를 쉽게 찾을 수 있도록 해야 한다.

비슷한 부류의 사용자라 할지라도 생각하는 방식이 다른 경우도 많이 있다. 어떤 사람은 이 정보가 A라는 카테고리에 속한다고 보겠지만 다른 사람은 B라는 카테고리에 속한다고 볼 수 있는 것이다.

웹은 기본적으로 웹사이트를 만드는 사람이 사용자를 도와줄 수 있는 환경이 아니다. 사용자가 스스로 판단해서 이용하는 것이다. 따라서 이러한 경우 두 사람의 견해를 동시에 만족시킬 필요성이 있다. (야후의 네트워크형 디렉토리: 말단에 있는 디렉토리가 하나의 상위 디렉토리를 갖지 않고 여러 개의 상위 디렉토리를 가짐.)

; 가나다순 분류(사전, 백과사전, 전화번호부...) / 시간에 따른 분류(역사책, 잡지...) / 지역에 따른 분류(여행정보, 정치·경제·사회적인 이슈를 분류할 때) / 주제에 따른 분류.....

- 정보 조직화 체계
웹사이트 조직화 체계란 웹사이트에서 제공하는 컨텐츠를 구조화한 틀을 말한다. 특히, 웹사이트이 조직화 구조에서 다루는 문제는 컨텐츠 페이지들을 어떻게 분류하고 사용자들이 접근할 수 있도록 지원하는가에 초점을 맞추고 있다.

; 리니어구조: 웹사이트에서 제공하는 정보를 순차적으로 활용할 수 있도록 만들어진 구조. 파일의 크기가 큰 논문, 프레젠테이션 등....

; 네트워크 구조: 웹의 하이퍼텍스트 기능을 이용하여 보완적인 글들에 링크를 제공함으로써 점진적으로 지식을 확장시켜 나갈 수 있도록 만들어진 구조. 이러한 구조하에서는 많은 페이지들이 수평적으로 얽혀 있는 형태로 교육용사이트에서 많이 사용된다.

; 계층 구조: 카테고리별로 사이트가 점진적으로 세분화되어가는 형태의 구조이다. 사람들이 일반적으로 정보를 체계적으로 이해하고자 할 때 계층 구조적 사고를 전개하므로 웹사이트를 구축할 때 뼈대를 형성하는 기본적인 틀로써 가장 널리 사용되는 구조이다.

; 관계형 DB에 기초한 구조: 관계형 데이터베이스가 각종 정보를 관계형 데이터베이스로 모델링하여 정리한 후, 서치 기능을 주로 사용하여 정보를 검색할 수 있도록 하는 형태의 구조이다. 이러한 구조는 전체 사이트의 하부 사이트나 정보들이 잘 구조화되고 비슷한 형태로 정보를 제공하는 사이트에서 많이 사용된다.

; 웹사이트를 구축하고자 할 때 가장 일반적으로 사용되는 구조는 계층구조이며, 계층구조는 정보간의 통합도를 높이고, 사용을 보다 쉽게 하기 위하여 리니어 구조나 네트워크 구조, 관계형 DB에 기초한 구조를 통하여 보완하는 형태를 사용한다.

- 계층구조의 설계
사람들은 어떤 현상을 전반적으로 이해하기 위해서 일반적으로 정보를 몇 가지로 분류하고 체계화시키는 방식을 사용한다. 계층형 구조는 사람들의 이러한 인식 체계에 매우 적합한 정보 제공 구조이다. 따라서 웹사이트를 구축할 때 많은 사람들이 사용하는 구조가 바로 계층형 구조이다. 계층구조에서 카테고리는 상호 배타적인 요소와 공동으로 겹치는 부분에 대한 균형을 유지할 필요가 있다. 계층형 구조에서 특정 계층에 속한 카테고리의 수(Breadth)와 계층의 수(Depth)간의 균형을 유지할 필요가 있다. 너무 계층수가 많거나 한번에 선택할 수 있는 카테고리 수가 너무 많으면 네비게이션에 어려움이 있다. 인지심리학적 측면에서 한번에 제시되는 가장 이상적인 카테고리 수는 5-9개 정도이고, 10개가 넘으면 사용자로 하여금 당혹감을 느끼게 만들 수 있다. 계층의 수에 대해서는 보다 엄격할 필요가 있다. 사용자로 하여금 4-5번 이상을 클릭하여야 정보를 찾을 수 있는 경우에는 일반적으로 끝까지 찾아가기보다는 중간에서 포기하는 경향이 많기 때문이다.

6. 네비게이션 설계

네비게이션 체계를 잘 만들기 위해서는 무엇보다 먼저 웹에서 사용자들이 웹사이트 네비게이션을 위하여 사용 가능한 기능들에 대하여 잘 이해할 필요가 있다. 그리고 사용자가 가장 편한 방식으로 이들 옵션을 사용할 수 있도록 하는 것이 무엇보다 중요하다. 웹사이트에서 사용자들이 네비게이션을 위하여 널리 이용할 수 있는 것들로는 메뉴, 서치, 링크, 브라우저 기능이 있다.
(성공적인 네비게이션의 10가지 특징: 네비게이션이 쉽다. / 일관성을 유지한다. / 피드백이 빠르다. / 적절한 안내문구를 사용한다. / 다양한 사용자 환경을 고려한 대안 마련. / 짧고 경제적인 네비게이션 단계 제공 / 명확한 시각적 메시지를 제공한다. / 분명하고 이해하기 쉬운 라벨 사용 / 사이트 목적에 맞는 네비게이션으로 구성 / 고객맞춤형 서비스를 제공)

- 라벨링 체계:
웹사이트에서 라벨은 정보들의 집합을 표현하는 단어 또는 구라고 할 수 있다. 이러한 라벨은 사용자들이 웹사이트의 정보를 파악하고, 적절한 경로를 따라 네비게이션을 전개할 수 있도록 하는 중요한 역할을 수행한다. 라벨은 웹사이트를 서핑하는 사용자들이 얼마나 쉽게 웹사이트를 이용할 수 있도록 하느냐에 대단히 큰 영향을 미친다. 제대로 설정된 라벨은 이 라벨을 통하여 제공될 정보를 예측할 수 있도록 함으로써 보다 쉽게 사용자가 원하는 정보를 찾을 수 있게 한다.

라벨은 전체 사이트에 걸쳐 일관성을 지니고 있어야 한다. / 라벨은 라벨을 통하여 제공될 정보를 전반적으로 포괄하면서도 어떤 정보가 제공될 지에 대해 예측이 가능해야 한다. / 라벨을 결정할 때 향후에 첨가하게 될 정보도 충분히 감안해야 한다. / 메뉴형태로 제공되는 라벨들 간에는 균형이 맞추어져야 한다. 동일한 계층에서 표현되는 라벨간에 크기의 차이가 심하다면 사용자들에게 혼란을 초래할 가능성이 높기 때문이다. 라벨을 만들 때는 사용하는 단어 하나하나에 대하여 사용자 입장에서 신중히 검토함으로써 편안하고 체계적인 웹사이트 서핑이 이루어지도록 해야 할 것이다.

- 메뉴체계:
웹사이트를 계층적 구조로 구성했다고 했을 때 사용자는 웹사이트에서 제공되는 메뉴를 이용하여 정보를 찾게 된다. 메뉴는 웹사이트의 정보를 찾아가는 경로의 역할을 할 뿐 아니라 사용자에게 자신의 위치를 알 수 있도록 하는 나침반의 역할을 하기도 한다. 메뉴체계가 나침반 역할을 하기 위해서 전체 웹사이트에 대한 메뉴로부터 출발하여, 각 단계별로 현재의 페이지에 이르는 메뉴들의 리스트를 제공한다. 그리고 각 단계에서 선정되어야 할 메뉴를 강조하여 표현해 주거나, 각 단계에서 선정되어야 할 메뉴 항목을 순서대로 기술해 줌으로써 현재의 위치를 파악할 수 있도록 도와준다. 잘 구성된 메뉴 체계와 각 페이지에서 이들 메뉴를 표현하는 방식을 이렇게 웹사이트 이용자가 웹사이트에서 길을 잃지 않게 도와주게 되는 것이다. (나는 지금 무엇을 하기 위해 여기에 있는가 / 무엇을 할 수 있는가 / 어디로 갈 수 있는가)

- 검색:
웹사이트에서 검색 기능은 다양한 형태로 제시될 수 있다. 검색의 범위를 사전적으로 선정할 수 있도록 함으로써 전체 사이트 중 일부 영역만을 대상으로 검색하도록 지원할 수 있다. 또한 검색어를 선정하는데 있어서도 사용자가 자유롭게 검색어를 입력하여 검색하도록 할 수 있는 반면, 웹사이트에서 특정한 검색어를 사전적으로 선정하여 이들 검색어를 이용하여 검색할 수 있도록 할 수도 있다. 웹사이트의 상황에 따라 이들이 지닌 장단점을 비교 검토함으로써 적절한 검색 방법을 이용해야겠다. 검색 결과 제시에도 많은 주의를 기울여야 한다. 검색 조건을 함께 제시하고 검색물의 수, 어떤 순서로 제시되는지, 화면에 얼마나 표현하여 보여줄지 등에 대한 고려가 필요하다.

- 기타 네비게이션 지원방안
사이트맵 / 대문(개인화) / 안내(대형사이트의 경우)...

7. 기타

- 상식에 얽매이지 않는다.
- 아이디어가 곧 기획은 아니다.
- 개인화 방안 마련

# 프로젝트1의 예 : 로그인하면 사용자 이름과 사용자가 체험한 날짜, 주제 표시,
  개인의 관찰일지, 체험사진첩 제공
# 프로젝트2의 예 : 북마크 기능, 개인이 화면 편집

■ 스토리보드 작성하기

1. 코드화

- 코드화
각 화면마다 ID를 부여하고 이를 기본으로 파일명을 명명한다. 따라서 ID마다 이름의 체계를 정리하고, 확장명을 결정한다. 이 작업은 프로그래머와 함께 하는 것이 바람직하다.

- 코드화가 필요한 까닭은?
멀티미디어 시나리오 및 인터랙션 설계가 끝나면, 실제 제작에 들어가기 위한 준비를 하게 되는데 그 과정이 바로 플로우차트와 스토리보드 작성 과정이다. 이 과정은 전체 기획과정의 마무리 과정이면서 동시에 실제 제작을 성공적으로 시작하기 위한 첫 단추이기도 한다. 플로우차트와 스토리보드 작성을 하기 위해서는 전체 컨텐츠를 구성하는 메뉴항목 및 매체를 알기 쉽게 기호화하는 과정이 선행되어야 한다.
이렇게 모든 메뉴명과 매체별 파일명을 일관된 체제와 기호로 정의하는 것을 자료의 코드화라고 하는데, 이런 코드화 작업을 각 과정별 담당자들이 일관되게 수행함으로써, 제작 단계별 자료 관리와 의사전달에 큰 도움을 줄 수 있다.
이러한 코드화는 일정한 룰과 형식을 갖추고 만들어지며, 팀원들이 이해하기 좋고, 혼란을 주지 않는 약칭으로 표현되어야 한다.

- 코드화의 예 : HS_LM_03_G01 (대분류-중분류-소분류-세부파일명)

2. 플로우차트 (전체 구성도)

- 플로우차트
기획된 내용들의 전체 흐름도를 작성한다. 각 모듈과 모듈별, 개념과 개념과의 상관관계, 내용 구성의 로직을 한 눈에 볼 수 있도록 작성한다. 제작 단계의 플로우차트는 전체 타이틀의 인터렉션을 보여주는 것이기 때문에 정확하고 상세한 플로우차트를 작성해야 된다. 기획 단계의 플로우차트는 주요 모듈을 중심으로 한 장 안에 전체 흐름을 파악할 수 있게 하는 것이 좋다.

- 플로우차트를 만드는 이유
플로우차트란 프로그램의 전체적인 뼈대를 제공하는 흐름도로 프로그램을 시작한 후에 어떠한 과정을 거쳐서 설정된 목표를 달성하게 할 것인가에 관한 것을 한눈에 알 수 있게 해 준다. 스토리보드가 제작 과정상의 분업을 관리하고 효율적으로 진행하기 위한 작업 지침서라면, 플로우차트는 이러한 스토리보드의 핵심대화내용이라고 할 수 있다. 그러므로 개발에 참여하는 모든 제작진은 기본 교양으로 플로우차트를 이해하고 작성하는 법을 알고 있어야 한다. 물론 기획하는 과정에 필요한 플로우차트는 프로그래머가 프로그램을 짜는데 사용되는 플로우차트보다는 훨씬 심플하고 원칙적인 것이 된다. 그 이유는 이 과정에서 쓰여지는 플로우차트는 개념전달을 위한 것이지 세부 정밀 로직 구현은 아니기 때문이다. 그러나 이 말이 기획에서 쓰여지는 플로우차트가 대충 작성되어도 좋다는 말이 아니다. 개념에서는 정확하고 논리적 일관성을 가지고 만들어져야만 의사소통의 수단이 될 수 있다.

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

- 스토리보드는 누가 보아도 프로그램의 흐름과 내용을 쉽게 이해할 수 있도록 표현하는 것이 중요하다.
- 기술해야 할 내용은 많고 지면은 한정되어 있는 관계로 가능한 체계적이고 간략한 기호(영문 알파벳)를 써서 표현의 간결함을 꾀해야 한다.
- 프로젝트의 성격에 따라 효율적인 스토리보드 양식을 만들어 사용하는 것이 효과적이다. (예를 들면 비디오가 없는 프로젝트의 경우 비디오난은 의미가 없으므로 당연히 삭제하는 것이 적당하다. 또 애니메이션이 복잡한 프로젝트의 경우 칸을 넓혀주는 것이 당연하다.)
- 화면 플로우차트는 화면의 전개 순서와 로직을 정확하게 이해할 수 있도록 표현하며 시작과 끝이 정확하게 표현되어야 한다.
- 스토리보드는 가능한 모듈별로 작성하여 이해의 간결성을 도모하는 것이 좋다.
- 각 요소는 파일의 종류에 따라 통일적이고 체계적으로 일련 번호를 부여하여 전체 작업의 효율성을 기하는 것이 좋다.
- 위치와 크기, 시간 등을 보여 주거나 실행 특성을 명기하는 것이 좋다.
- 계속되는 수정사항이 발견되면서, 항상 버전관리를 신속히 하기 위해서 컴퓨터상의 양식으로 만들어 관리하는 것이 편리하다.

(이상, 영진출판사에서 나온 '멀티미디어 컨텐츠 기획'과 아이비즈넷에서 나온 '인터넷 비지니스' 글구 B&B PRESS에서 번역되어 나온 '이렇게 하자! 성공 웹사이트 설계' 등의 책을 좀 참고하고, 타 자료들 및 내 나름의 경험을 덧붙여서 정리해 보았다.)

4. 스토리보드 작성하기

스토리보드 작성에 특별히 정해진 표준이 있는 것은 아니다.
프로젝트의 특성에 따라, 작업 방식에 따라, 작업자에 따라, 그리고 그외 다른 요인들에 의해 스토리보드는 다른 방식으로 작성되어 질 수 있다.
스토리보드를 만드는 데 있어서 가장 중요한 것은 아마도 스토리보드를 가장 많이 보게 될 개발자들이 쉽게 이해하고, 이를 통해 제대로 된 사이트를 만들어낼 수 있도록 하는 것이 아닌가 여겨진다. 이를 위해 개발자들과 스토리보드의 형식에 대해서 논의를 하는 것도 필요할 것 같다.