IT업계에서 말하는 스토리보드는 앱에서 제공하는 서비스의 일련의 흐름을 뜻합니다. 단순 기능 위주의 서술이 아니라 사용자의 입장에서 ‘어떻게’ 사용하게 되는지 서술한다는 점에서, 모바일 앱개발 스토리보드는 기획자와 개발자가 소통하는 데 중요한 역할을 하는 문서입니다.
이처럼 모바일 앱개발 과정에서 빼놓을 수 없는 스토리보드, 어떻게 작성해야 하고 어떤 도구를 이용하면 좋을까요? 앱 서비스를 개발할 때의 스토리보드 작성법과 대중적인 도구 소개까지 차례로 소개해 드립니다.
✍️ 이 글의 순서
• 스토리보드, 어떻게 만들면 좋을까?
• 스토리보드 만들 때 활용하기 좋은 도구들
• 스토리보드 작성, 어렵다면 ‘위시켓’
![앱개발을-위한-스토리보드-작성-메뉴얼](https://blog.wishket.com/wp-content/uploads/2024/05/모바일앱개발-스토리보드-작성방법-쓰는법-예시-사례-도구툴-추천-위시켓.webp)
모바일 앱개발 스토리보드, 어떻게 쓸까?
1. 작업 이력과 목차 페이지를 보여 줍니다.
스토리보드는 여러 사람이 보는 문서이기 때문에 어떻게 수정되었는지를 요약한 ‘작업 이력’과 내용을 한눈에 볼 수 있는 ‘목차’ 페이지가 필수적입니다. 작업 이력에는 ‘업데이트한 날짜, 내용, 수정한 사람’이 포함되어야 합니다. 목차는 하이퍼링크 기능을 이용해 해당 페이지 또는 파일과 연결합니다.
2. 개요
개발하려는 앱이 제공하는 서비스나 개발 목적, 주요 기능 등을 개괄적으로 작성합니다. 처음 보는 사용자들도 이해할 수 있도록 쉽고 간결하게 작성해야 합니다.
3. 화면
ID 앱에서 각각의 페이지에 별도의 ID를 부여한 목록입니다. 예를 들어 앱에서 로그인 화면이 총 2개의 페이지로 이루어져 있다면 [M-1], [M-2]와 같은 ID를 부여합니다. 화면 ID를 사용할 경우 중간에 페이지를 수정하거나 추가해도 ID만 추가하면 되므로 편리합니다.
4. 메뉴 구조도(Menu Structure)
메뉴 구조도는 앱 서비스의 메뉴 또는 기능을 뜻합니다. 요구사항정의서를 작성할 경우 이 부분은 아주 간략하게 작성해도 되지만, 요구사항정의서를 작성하지 않는다면 화면 ID와 더불어 기능, 형태, 디자인, 퍼블리싱 여부 등을 자세히 서술해야 합니다.
![모바일-앱개발-스토리보드-어떻게-쓸까](https://blog.wishket.com/wp-content/uploads/2024/05/모바일앱개발-스토리보드-작성방법-쓰는법-예시-사례-도구툴-추천-위시켓2.webp)
5. UI 플로우 차트(Flow Chart)
UI 플로우 차트란 화면의 전환과 흐름을 나타내는 것으로, 사용자가 어떻게 페이지를 이동하게 되는지 묘사한 것입니다.
6. 정책
스토리보드에서 말하는 정책이란 기획자/개발자가 모두 공유해야 하는 내부적/외부적 정책을 말합니다.
① 내부적 정책
: 사용자에게 보여줄 정보나 화면을 어떻게 제한하거나 확장할 것인지 다룹니다. 예를 들어 VIP 회원에게만 노출되는 특별 카테고리 등이 있을 수 있습니다.
② 외부적 정책
: 준법 사항을 의미합니다. 예컨대 금융 앱이라면 금융감독원의 요구사항을, 운송 앱이라면 국토교통부의 관련 법령을 추가할 수 있겠죠.
![UI-플로우-차트-정책](https://blog.wishket.com/wp-content/uploads/2024/05/모바일앱개발-스토리보드-작성방법-쓰는법-예시-사례-도구툴-추천-위시켓3.webp)
스토리보드 만들 때 활용하기 좋은 도구들
Microsoft PPT / Google Slides
과거 스토리보드의 절대 강자는 MS의 파워포인트(PPT)였습니다. 보통 PPT로 스토리보드를 만들고, 엑셀로 요구사항정의서를 작성하였죠. 하지만 최근에는 온라인 협업 툴이 생겼고, 가장 간단한 협업 툴 중 하나는 바로 구글의 슬라이드입니다.
슬라이드는 MS의 PPT와 유사한 UI, 기능, 단축키 등을 갖고 있어 PPT에 익숙한 사람이라면 금방 익힐 수 있으며, 온라인으로 실시간 협업이 가능하다는 장점이 있습니다. 무엇보다 무료 툴이기 때문에 구글 계정만 있다면 언제 어디서든 작업할 수 있습니다. 시시때때로 추가/수정사항을 공유해야 하는 기획자 및 개발자에게 적합한 도구입니다.
Figma
주로 개발 분야의 기획자들이 이용하는 툴입니다. 비교적 최근에 만들어진 도구입니다. 피그마의 장점은 앱 서비스 개발에 최적화되어 있다는 것. 일일이 장표를 만들고 수정해야 하며 작성할 수 있는 공간이 제한적인 PPT나 Slides와 달리, 피그마는 하나의 거대한 평면 공간에서 작업하기 때문에 편리합니다.
실시간 공유도 가능하며, 디자이너와 개발자가 곧바로 수정하거나 수정을 반영할 수 있다는 장점이 있습니다. 다만 아직까지 널리 알려진 툴이 아니고, (PPT에 비해) 자세히 서술하거나 묘사하기 어렵다는 단점도 있죠.
![스토리보드-만들-때-좋은-도구들](https://blog.wishket.com/wp-content/uploads/2024/05/모바일앱개발-스토리보드-작성방법-쓰는법-예시-사례-도구툴-추천-위시켓4.webp)
스토리보드 작성, 어렵다면 ‘위시켓’
해 본 입장에서는 쉽게 말하지만, 해 본 적 없는 사람 입장에서는 어려울 수밖에 없는 게 이 스토리보드 작성입니다. 만약 혼자서 혹은 회사 내부에서 소화가 어렵다면 주변 전문가에게 도움을 구해야 합니다. 마땅한 라인이 없다면, 위시켓에 프로젝트를 공유해 보시기 바랍니다.
위시켓에서는 스토리보드를 함께 작성할 수많은 기획자와 개발자들이 연결되어 있는 국내 1위 IT 아웃소싱 플랫폼입니다. 한 번의 프로젝트 등록으로 여러 전문가들의 지원과 견적서를 동시에 받아 볼 수 있습니다. 또 프로젝트마다 담당 매니저가 배정되어 프로덕트 완성까지 여러분의 입장에서 다양한 지원을 아끼지 않습니다. 구체적인 지원과 혜택은 아래 링크를 참고하세요.
🔖 함께 보면 도움되는 글
앱개발 비용에 ‘유지 보수’ 견적 잘 녹이는 방법 (산정 기준)