스토리 보드라,,, 요즘 갑자기 많이 듣는 말이다.
하기사 이제는 하나의 사이트를 만들기 위해 먼가 체계적인 게 필요한 시기인 것 같다.
요사이 홈페이지를 만든다는 자체, 구현하는 기술 자체는 별 의미없지 않은가?
만들어서 어떻하겠다는 건지 클라이언트도 모르고 제작 일시에 맞춰 구현에 급급한 디자이너도 모른다. 그 와중에 생각있는 디자이너, 남들보다 조금 더 체계적일려고 노력하는 디자이너들은 스토리 보드란 것에 관심을 가지고 작업을 할려고 한다. 그러고보니 올해 봄부터 스토리 보드를 어떻게 만드냐고 묻는 후배들이 부쩍 늘었다,,,-.-;;
스토리 보드 자체는 단순하게 말해 일종의 계획이라고 표현하면 될까?
사이트를 만드는 일종의 설계도 같은 스토리 보드는 크게는 사이트 구축을 위한 전반적인 기획부터 시작해서 전체 설계를 말하는 것이고 협의의 의미로는 제작을 위한 사이트 페이지를 설계하는 것을 의미한다.
보통의 경우 기획이나 방향이 잡혀야 스토리 보드 작업을 시작할 수 있다. 그 방향에 맞게 유저들을 유도하고 어떤식으로 보이게해야할지 설계해야 하니깐,,
그래서 간단하게나마 기획 부분부터 언급하고자 한다.
1) 자료조사 및 벤치 마킹
일단 자신이 만들고자 하는 사이트와 생각이나 컨텐츠(컨텐츠:가치있게 정보를 정리해 놓은 것)가 유사 사이트를 돌아다녀야 한다.
아주 많이 돌아다닐수록 좋은데 이때 주의점은 대책없이 돌아다니지 말고 생각이란 걸 하면서 돌아다녀야 한다는 것이다.
서핑을 하다보면 서핑 자체를 즐기는 서핑족이 아닐 바에는 무엇인가를 얻기위해 다니는 것과 단순한 서핑은 엄연한 차이가 있다. 각 사이트의 좋은 점과 나쁜 점을 나름대로 판단해 좋은 점은 받아들이고 나쁜 점은 이렇게 안 해야지 하는 생각들을 꼭 기억해두자.
2) 사이트 목표설정 - 멀 보여줄 것 인가
벤치마킹을 통한 자료조사가 끝나면 사이트 맵(메뉴 구성도)을 만들기 전에 숨을 돌리고 명상의 시간을 갖도록 한다. 왜냐하면 이때 다짜고짜 사이트 맵을 짜버리면 벤치마킹에서 좋은 점을 무조건 차용하고 나쁜 점은 절대로 안 써버리게 된다. 이건 절대로 좋은 습관이 아니다.
웹을 정보의 쓰레기라고 하는 사람들은 이런 정보를 보고 하는 말일 것이다.
다른 사이트의 좋은 점을 무조건 차용하고 이리저리 섞어서 그럴싸하게 만든 사이트는 겉만 번지르하고 절대로 쿨 사이트가 되기 어려운 법이다.
생각의 카피는 이미지나 정보의 카피보다 더 무서운 법이다. 그래서 정보를 추린 다음에는 넉넉한 시간을 갖고 자신이 구현하고자 하는 사이트의 목적성을 크게 잡고 그것에 부합되도록 다른 사이트에는 좋은 점이라도 사이트의 목적에 맞게 과감히 쳐낼 수 있는 결단력이 필요하다.
3) 사이트 맵 만들기 (스토리 보드 1단계)
사이트 맵은 전반적인 메뉴 구성도를 말하는 것인데 (2)번에서 사이트 전반에 대한 무엇을 보여주고 이런 것이 나타낸다고 결정이 되면 그것을 나타내기 위한 메뉴의 순서와 구성단계, 적절한 용어 정립이 필요하다.
예를 들어 똑같은 'Q&A'라도 교육 사이트에서는 용어가 '상담하기'가 되기도 하고 어떤 곳에서는 '고객 서비스'가 되기도 한다. 이런 용어들은 똑같은 구현 방식이라도 색다른 맛을 주거나 사이트의 방향을 일관화시키는데 한 몫을 한다.
용어뿐아니라 메뉴의 순서도 중요하다. 쇼핑몰의 경우 '회사소개'란 메뉴가 제품보다 먼저 나오는 경우가 드물고 회사 홍보용 홈페이지에선 무엇보다 우선되어서 '회사소개' 메뉴가 띄워지게 된다
4) 스타일 정하기 (스토리 보드 2단계)
변화하는 페이지 사이에서 대응하기 위해서 레이아웃이나 서체, 색상, 그래픽에서의 일관성 유지해주어야한다.
일단, 정해놓고 작업에 들어가는 것이 혼선을 줄여주겠지. ^^;; 나중에 헷갈리면 안되니깐 기본 문서를 하나 만들거나 스타일 시트(CSS)를 만들어 링크해 수정시 링크된 CSS 파일만을 간편히 수정하는 것도 좋은 방법이다.
기본적인 웹페이지에서 링크색(LINK)은 파랑색, 갔다 온 링크색(VLINK)은 보라색으로 되어있어 예전에는 사람들이 링크를 못 찾을까봐 이 색을 고수하기를 바랬지만 요즘은 플래쉬나 다양한 동적인 화면들, 알록달록한 디자인 색감 때문에 이 색을 고수하는 것이 무의미하고 튀는 디자인과 어울리는 색이나 사람들이 쉽게 찾을 수 있는 색으로 링크를 넣도록 한다. 텍스트 색보다 유저들이 찾기쉽도록 링크색이 튀어야하는 것은 당연하겠지~~
5) 설계하기 (스토리 보드 3단계)
이 부분은 협의의 의미로 스토리 보드단계라고 말하면 될 거 같다
화면에 보여지는 시각적인 디자인 컨셉을 잡는 단계라고 볼 수 있는데 웹디자인을 할 때 가장 창조적인 단계라고 보여진다. 웹디자이너들의 창조적인 발상과 넘치는 끼 등이 여기서 나온다.
어떻게 하면 가장 효율적으로 시각화 할 수 있을지 고민하는 단계인데 하는 방법은 여러 사람이 전반적인 얘기를 하면서 그 중 한 사람이 보드(칠판이나 화이트 보드)에 회의의 내용을 기입하고 나머지 한 사람은 노트에 정리를 한다. 그리고 나머진 팀원들은 자유롭게 브레인 스토밍(브레인 스토밍 : 회의를 하는 방식 중의 하나로 생각나는 것을 여과없이 말하고 팀장이라 할지라도 반론을 제기하지 않고 개인의 의견을 자유롭게 표출하고 수용하는 회의 방식) 방식으로 이런저런 아이디어를 내보면 되는 것이다.
예를 들어 어떤 페이지에 어느 부분에 동적인 것이 들어간다면 어떤 방식으로 들어가고 그 방식이 만일 플래쉬라면 플래쉬가 어떤 식으로 보여지고 어떤 색감의, 어떤 색의, 몇프레임정도의 속도가 어느정도 나오게되며 모뎀 사용자에게 몇초만에 뜨게..되는지까지 계산되어야 하며 작업에 필요한 자원을 어디서 얻어야 하는지까지 나올 수 있어야 한다.
또한 그 페이지가 어떤 페이지로 연결되고 거기서 나갈 수 있는 페이지들을 연결해보고 연결 후 뜨는 화면이 어떤 식으로 나열되는지를 1안 이상씩 내보며 1안과 2안의 좋은 점과 나쁜 점 등을 열거해 보면서 비교해 보는 방식도 좋다.
스토리 보드는 크게는 일련의 사이트 분석, 기획부터해서 그 기획에 맞는 이미지 작업, 개발, 완료후 수정후 최종확인의 작업에 이르는 사이트의 시작과 끝의 전 프로세스를 제작하기 위한 설계도를 말한다
그래서 실제 제작을 맡은 팀원끼리 구축시 문제시 되는 여러가지 제반사항이나 사이트의 연결고리, 스타일 시트, 자료 구성을 열거해보는 단계에서 사이트 전반에 대해 이해로 업무의 효율을 높이고 빠르게 접근하기 위해서 꼭 필요한 단계이다.
스토리 보드란 것이 설계하는 것(5)에만 국한된 작업이 아니라 기획부터 작업과 연결된 상황등을 이해해야만 할 수 있는 작업이라 스토리 보드의 중요성과 상세한 설계의 중요도는 더욱 큰거 같다
또한 사이트 제작 시 단순히 보여진다는 것은 의미가 없다는 것, 어떻게 구현되어야하는지 알아야 된다는 것, 먼가를 만드는게 아니라 만들어가는 과정에 더 큰 의미를 두어야 한다는 걸 우린 스토리 보드 작업을 통해 배워야한다.
By 김수민
