[프리모아]스토리보드 기획 마스터 페이지 설정 방법

안녕하세요. 프리모아의 서비스 기획을 맡고 있는 Will 입니다. 오늘은 저번 스토리보드 화면설계에 이어서 기획서의 마스터페이지 설정방법에 대해서 알아보고자 합니다. 스토리보드의 구성은 표지, 개정이력, 화면설계로 이루어지며, 필요에 따라 서비스 프로세스와 화면정의서가 추가됩니다.

첫 번째, 스토리보드 기획서의 표지입니다. 유심히 봐야 할 부분은 기획서 업데이트 부분인데요. 프로젝트를 진행하다보면 웹기획서가 계속 업데이트 되기 때문에 몇월 몇일 누구로 인해서 업데이트가 되었는지, 그리고 개발팀과 디자인팀으로 전달은 되었는지를 입력합니다. 

(프로젝트 규모가 큰 경우일 수록 이런점이 중요해집니다. 프로젝트총괄, 메인기획자, 서브기획자 등 기획자도 여러명이고 개발과 디자인도 팀으로 운영되기 때문이지요)

기획서라는게 개발팀와 디자인팀 양쪽 모두의 지표가 되는 첫번째 문서이기 때문에 이러한 기획서 수정내역을 필수적으로 입력해야 기획의도에 맞는 작업산출물이 나온다고 볼 수 있습니다.

두 번째, 작업이력 부분입니다. 업데이트 이력과 마찬가지의 이유로 중요합니다.

세 번째, 본격적인 화면설계 부분입니다. 웹/앱 기획서는 전체화면의 2/3에 해당하는 오른쪽은 화면설계부분을 1/3부분에 해당하는 부분은 각 기능에 대한 디스크립션(썰명)을 해줍니다. 예를 들어 어떤 카테고리 또는 버튼을 눌렀을 때 어떻게 동작한다던가 이런 내용들이 들어있어야 개발지침이 명확합니다.

스토리보드는 적게는 몇십장에서 많게는 수백장의 분량으로 만들어집니다. 때문에 스토리보드 완성후 수정사항이 발생하였을 때 단순 수정 작업이 많이 발생하게 됩니다. 이 때 마스터페이지 설정해놓은 양식에서 수정을 하면 모든 페이지가 일괄 적용 되어 더욱 편리합니다. 

#마스터 페이지란?

PPT에서 전체에 적용되는 템플릿 폼을 만드는 것을 마스터 페이지라고 합니다. 마스터페이지를 쓰면 PPT작업에 있어 폼 변동과 일괄수정이 쉬워서 기획서 작성이 편리합니다. 모르시는 분들이 많은데요. 파워포인트 카테고리에서 검토 옆에 있는 보기를 보시면 슬라이드 마스터, 유인물 마스터, 슬라이드 노트 마스터 라는 내용을 확인할 수 있습니다.

저희가 쓰는 부분은 슬라이드 마스터입니다. PPT의 전체 템플릿 레이아웃을 만들고 마스터보기 닫기를 누르면 전체 PPT에 해당 양식이 적용됩니다. PPT 초보자분들 혹시 잘만들어진 PPT를 다운로드 받았는데 배경화면이 수정이 안되서 난감한적 있나요? 마스터 페이지 들어가시면 수정이 가능하답니다. 흐흐

프로젝트 규모에 따라서 효율적인 스토리보드 반복작업을 위한 마스터페이지도 늘어나게 됩니다. 포탈 사이트를 예로 들자면 네이버의 경우 각 서비스(뉴스,블로그,카페,포토,지도,해피빈 등)의 규모가 크기 때문에 서비스별로(네이버 블로그의 '프롤로그','블로그','포토로그','소셜게임' 등의 마스터페이지를 만들어야 합니다. 

하나의 서비스에 있어서 IA를 2뎁스를 기준으로 스토리 보드를 나눠 작성하는 경우도 있습니다.

실제 디자인, 개발 작업이 진행될 때 스토리보드 분할이 작업의 분량을 나눠주는 역할도 함께 하기 떄문입니다. 스토리보드를 작게 여러권으로 분장하였을 때 단점은 서비스 전체에 공통된 요소가 바뀌었을 때 분장한 스토리보드를 일일이 다 수정해 주는 점입니다.

 

이럴 때는 스토리보드 제작 시 하나의 파일로 만들고 스토리보드가 완성되면 서비스 단위 또는 메뉴 단위로 파일을 나누는 것도 하나의 방법이 될 수 있다.

[ 마스터 페이지 구성의 기본]

스토리보드 하나의 서비스 전체를 표현할 때 쓰는 마스터 페이지 방식은 아래와 같습니다. 마스터 페이지는 하위 마스터페이지 전체에 스타일을 적용시키는 상위 마스터 페이지가 있고, 그 하위로 후속 마스터 페이지로 이루어진다. 실제 페이지에 적용되는 레이아웃 스타일은 하위 마스터 페이지가 된다.

[실제로 적용된 사례]

간단하게 마스터페이지를 적용한 사례는 아래와 같습니다. 마스터 페이지에서 선, 색, 도형 등의 레이아웃을 잡아주면 전체 PPT에 적용이 됩니다. 사례에서는 마스터 페이지에서 선과 표를 설정해 주면 페이지에 일괄적으로 적용된 모습이 보입니다.

[화면설계 마스터 페이지 구성요소]

표지와 개정이력을 제외하면 스토리보드의 나머지 화면은 모두 화면설계로 구성됩니다. 디자인과 프로그래밍 작업이 화면설계를 기준으로 작업되기 때문에 화면설계의 기본구성은 IA와 매칭시킬 수 있도록 IA와 일치되는 CODE, 페이지명 그리고 URL도 스토리보드에 표기해야 합니다.

[화면설계의 마스터 페이지]

상단 좌측 첫째 줄에 화면용도(front/front_admin/admin), 화면명(IA의 페이지 명)

상단 좌측 둘째 줄에 Code(IA의 code), URL(만들어질 실제 페이지의 폴더와 페이지명 - 디자이너가 PSD작업파일명, 코더가 html페이지명, 개발자가 최종 URL을 입력하여 완성하기도 합니다.)

 

상단 우측 첫째 줄에 프로젝트 명

상단 우측 둘째 줄은 우측 영역이 화면설계 설명내용이 들어간 다는 것을 알리는 Description (화면설명) 타이틀이 들어갑니다.

 

하단 우측은 자동으로 스토리보드 각 장마다 페이지 번호가 들어가도록 <#>Page라는 파워포인트 페이징 코드가 들어갑니다.

 

기본적인 스토리보드 양식을 첨부하니 MS 파워포인트의 '보기 > 슬라이드 마스터'에서 마스터 페이지를 바꿔보고 화면설계 페이지에서 수정한 마스터 페이지를 적용해 보기 바랍니다.

이상 스토리보드 기획에 있어 마스터 페이지 설정방법에 대해서 알려드렸는데요. 이번 컨텐츠는 프리모아가 따로 코멘트 할 필요없이 원본 컨텐츠가 충분히 잘 설명이 되어있는 것 같습니다. 뿐만 아니라 노노니님의 블로그를 통해서 스토리보드 마스터 페이지가 적용된 예제 샘플을 받을 수 있으니 필요하신 분은 한번 찾아가 보는 것도 좋을 듯합니다. 

원문 출처: http://durandot.blog.me/220317781356

해당 컨텐츠는 프리모아에서 활동하시는 프리랜서 

노노니님의 허락을 받고 재가공한 컨텐츠 입니다.

감사합니다.