서두
스토리보드는 보통 미디어 매체 만화나 웹툰, 드라마, 영화 혹은 애니메이션에서 스테프와 연기자들간 의사 소통 화면에 어떻게 보여지는지를 간단하게 글과 그림으로 설명한 매체물이다
스토리보드와 소프트웨어 개발의 연관 관계
이전에 있던 업체중에 스마트팩토리 솔루션을 공급 개발하는 업체가 있었다
그 회사 대표는 대시보드가 혈안에 있었고 대시보드를 개발하기 위해
시나리오와 스토리보드를 그려보라고 하였는데 그것을 제시할 수 있는 사람은 당시 아무도 없었다
어떤 상황에 어떤 데이터를 어떻게 보여줄 것인가?
6H원칙에 의거하여 무엇을 만들지 알 수 없으면 구현도 할 수 없다
이것이 이 문서에서 스토리보드를 다루어 보려는 이유이며
영상매체에서 말하는 스토리보드가 아닌 개발자의 스토리보드를 의미한다
스토리보드란 무엇인가?
1) 스토리보드의 개념
- 스토리보드는 디자이너와 개발자가 최종적으로 참고하는
설계 산출 문서이다 (영상물의 스토리보드와 다르다) - 정책, 프로세스 및 콘텐츠의 구성, 와이어프레임, UI/UX,
기능 정의 데이터베이스 연동 등 서비스 구축을 위한 대부분의 정보가 수록되어 있다
용어 정리
-
콘텐츠
웹 사이트에서 디지털 형태로 제공하는 모든 정보
-
와이어프래임 (Wireframe)
웹이나 모바일 웹 개발 중
레이아웃 및 전체 뼈대를 만들고 수정하는 단계
이해 관계자들과 의사소통을 위해서
혹은 제공할 서비스를 간략하게 볼 수 있게
화면의 레이아웃을 설계하는 작업 -
프로토타입 (Prototype)
스토리보드 또는 와이어프레임의 정적인 화면을
임시적으로 동작할 수 있도록 구현한 것이다
실제로 구현되지 않았지만
실제 구현한 것 처럼 UI를 테스트 해볼 수 있다
스토리 보드의 도구
- 손글씨
- 파워 포인트
- 키노트
- 스케치
- 포토샵
프로토 타입의 도구
- HTML / CSS
- 프로토 나우 (필수 도구가 아니므로 유행에 따라 변화할 수 있음)
- 카카오 오븐 (필수 도구가 아니므로 유행에 따라 변화할 수 있음)
2) 스토리보드의 작성 절차
① 메뉴 구성도 만들기
- 메뉴의 순서와 구성 단계를 정의한다
- 전체적인 메뉴 구성도를 작성한다
- 동일한 용어들을 하나로 정의한다
② 스타일 확정하기
- 레이아웃이나 글자 모양, 크기, 색상, 그래픽을 확정한다
- 일관성을 유지한다
③ 설계하기
- 화면에 보여지는 시작적인 디자인의 방향을 확보하여 설계한다
후기
스토리보드 그리고 시나리오
상단의 있는 내용은 스토리보드의 개념적인 정의의 지나지 않는다
실무나 현업에서 스토리보드가 왜 필요한지 이해하지 못한다면
이 내용은 아무 의미가 없을 것이다
내용만 정리하고 끝난다면 위키 백과사전에 있는 내용이나 다른 사람들이 더 잘 정리한 기고문을 그대록 복사 붙여넣기 해서 넣는 것이 내용적인 측면에서 더 풍부하고 볼만한 내용이었을 것이다개발 업무를 진행하면서
개발 산출믈을 작성해야 하는 경우가 많았다
프로젝트 기간 내 실제 개발을 마치려면
개발산출물은 개발이 끝나고
막바지에 거의 가라로 작성하거나
이전 프로젝트 내용물을
적당히 짜집기 하고 지나가서
처음부터 진중하게 화면 설계를 거쳐서
개발한 적은 거의 없었던 것 같다
신규 화면을 개발하는 경우도 있었지만
적당한 손그림이 전부였다
시나리오, 스토리보드, 와이어프레임 작성은 해본 적도 없었다
개발을 진행하게 되면 사용자에 대한 생각은 안중에도 없었고
납기일 내에 개발하는데 정신이 팔려 어떻게 사용할지는 고려하지 않았다
나 개발하기 편하고자 내 편한 방식으로 구현해서 사용자에게 전달하였다
내용을 적다 보니 통렬한 자기비판이 되고 있는데
스토리보드 없이 코딩만 하는 개발이 당연히 좋은 결과가 나오지 않았고 새로운 것을 만들어 낼 수 없었다
매번 적고 있는 내용이지만
머리 보다 손가락이 먼저 움직인다는 점에서
5년간 개발자로써 헛수고했다는 생각이 든다
그간의 경력이 아무런 의미가 없다고는 할 수 없겠지만
속된말로 짬밥을 똥구멍으로 먹었다는 표현이 떠오른다
이런 문제점에 봉착하게 되어 때 아닌
자아비판을 하고 있던 개발자가
부디 나만이 아니었기를 간절히 바랄 뿐이다
