[기획] 프리랜서의 스토리보드 화면 설계 과정

안녕하세요. 프리모아입니다.

오늘은 웹기획의 꽃이라고 할 수 있는 스토리보드의 화면설계 작성에 대해서 알려드리고자 합니다.프리모아와 웹기획자 노노니가 갈쳐드리는 웹 기획서 화면설계, 지금 바로 작성하러 가보실까요? 

프리랜서 기획자의 스토리보드 화면설계 방법

[웹 기획자의 덫]

스토리보드의 화면설계는 실제 웹페이지를 만들듯이 구체적으로 표현할 수록 좋다. 기획자는 머리속의 웹 기획에 대해서 개발자에게 명확하게 설명하고, 전달할 의무가 있다. 기획자의 가장 큰 위험은 스스로의 덫에 빠지는 것이다. 자신만 이해하고, 상대방은 이해를 못할때, 스스로가 생각했을 때 기획이 완벽하다고 생각할 때, 여러분은 다시 한번 주관성을 버리고 객관적인 입장에서 바라볼 필요가 있다. 

그렇다면 스토리보드는 디자인까지 다 입혀야 하는 것인가? 라고 물으면 디자이너가 입히는 것이라 말한다. 스토리보드는 디자인을 위한 레이아웃 시안이 아니며, 페이지 내 노출된 정보, 주요한 구성요소가 표현되어야 하고, 라인, 박스, 탭, 위치, 크기, 색상과 같은 디자인 요소는 디자인 스타일 가이드의 기준에 따라 디자인 영역에서 체계를 따라 제작되어야 하므로 스토리보드에 표현되지 않은 요소이다. 

[웹 기획의 시작은 메뉴 구성도]

오늘 예제는 사이트 내 채용 섹션 스토리보드이다. 대부분의 회사소개 홈페이지를 보면 회사 소개등의 간략한 기본 정보에 채용관련 페이지가 많이 붙어있는 편이다. 떄문에 먼저 채용 사이트를 어떤 메뉴로 구성하여 어떤 페이지 흐름으로 만들지 메뉴구성도를 제작했다. 

IA는 (Information Architecture)의 약자로 사이트 내 정보의 구성에 대해서 알려준다. 회색 음영은 프로그래메 의해 동일한 페이지를 가지고 반복 사용하게 되므로 작업량에서는 뺏다. 전체 페이지 수는 45, 실 작업 페이지 수는 23이 된다. 

채용 메뉴는 사이트 내 후원센터 메뉴 중 하나로 채용만을 다루는 작은 서비스 영역이므로 마스터 페이지를 대 메뉴에 따라 3개만 추가 작성했다. 채용 섹션에서는 인재채용 부분만 사용할 것이며 후원센터 전체 스토리보드를 제작시 메뉴에 따라 3가지를 사용할 것이다. 서브메뉴는 마스터 페이지를 적용하지 않을 것이며 절대 메뉴 추가, 삭제는 없으리라는 전제하에 진행하였다. 

[스토리보드 화면설계의 사례] 

마스터로 적용한 것은 상단 헤드영역, 하단 푸터영역 뿐이다. 페이지 스크롤이 생기지 않도록 메인페이지는 스토리보드 상 1 페이지를 넘지 않도록 구성한다. 메인 페이지는 맨 마지막에 구성되지만 하위 스토리보드를 구성하다 중요한 내용으로 메인페이지에 넣고자 할 경우 메인페이지를 채워나갈 수 있다.

인재상 페이지는 인재상, 급여 및 복지와 같은 내용의 1 page 소개 이므로 내용이 전달되지 않은 경우 영역만 잡아놓는다. 그리고 해당 내용을 만들 주체가 다른 부서이거나 자료를 받아야 하는 경우 '내용필요'라고 표시해놓고 콘텐츠를 요청하도록 합니다. 

인재채용 > 상시채용 > 리스트 페이지 에서 채용부분은 채용기능과 채용 단계에 따라서 리스트에 노출되는 정보와 클릭시 보여지는 페이지 내용이 틀려지므로 서비스 프로세스를 제시하는 것이 좋습니다. 

서비스 프로세스는 채용기간 노출될 정보와 이동 페이지 정보를 담은 서비스 프로세스이다.

스토리보드는 화면설계와 설명(description)부분이 중요하다. 샐렉트 창이 있으면 샐렉트 클릭시 노출될 정보가 무엇인지 표시해야 하며, 버튼의 경우 버튼 클릭시 페이지가 이동되는지 필요하다. 이 때 정보는 저장되는지, 삭제하는지, 삭제전에 확인 알림창을 띄워서 최종삭제를 할 것인지 최대한 구체적인 정보를 화면설명으로 넣어줘야 한다. 화면설명만으로 설명이 되지 않을 경우, 알림창의 종류가 많아 로직이 복잡할 경우 별도의 서비스 프로세스 페이지가 필요하다.

[깔끔한 스토리 보드 작성 TIP]

1, 화면에 안내선(그리드) 표시를 잘 이용한다

2. 파워포인트에도 그래픽 프로그램처럼 그리드 기능이 있다. 

3. 파워포인트 2012 부터 객체의 각 모소리 중앙에 자동으로 맞춰주는 기능이 있다. 

4. 안내선으로 웹 스토리보드 템플릿을 만들었으면 마스터로 들어가 설정을 백그라운드로 등록해준다.

5. 마지막으로 파워포인트가 범용성 측면에서 많이들 사용하지만, 스토리보드 도구들도 많이 있으니 활용해보는 것도 나쁘지 않다. 

이상 온라인 아웃소싱 프리모아 였습니다.

해당 컨텐츠에 사용된 스토리보드 화면설계는 

노노니님의 블로그에 가시면 다운로드 가능합니다.

(http://durandot.blog.me)

프리랜서라면 프리모아를 통해 다양한 프로젝트를 찾아보세요.