모바일 앱개발 스토리보드 쉽게 만드는 팁 (도구)

2024.05.28

|

240

IT업계에서 말하는 스토리보드는 앱에서 제공하는 서비스의 일련의 흐름을 뜻합니다. 단순 기능 위주의 서술이 아니라 사용자의 입장에서 ‘어떻게’ 사용하게 되는지 서술한다는 점에서, 모바일 앱개발 스토리보드는 기획자와 개발자가 소통하는 데 중요한 역할을 하는 문서입니다. ​

이처럼 모바일 앱개발 과정에서 빼놓을 수 없는 스토리보드, 어떻게 작성해야 하고 어떤 도구를 이용하면 좋을까요? 앱 서비스를 개발할 때의 스토리보드 작성법과 대중적인 도구 소개까지 차례로 소개해 드립니다. ​

✍️ 이 글의 순서

• 스토리보드, 어떻게 만들면 좋을까?
• 스토리보드 만들 때 활용하기 좋은 도구들
• 스토리보드 작성, 어렵다면 ‘위시켓’ ​

앱개발을-위한-스토리보드-작성-메뉴얼

모바일 앱개발 스토리보드, 어떻게 쓸까? ​

1. 작업 이력과 목차 페이지를 보여 줍니다.

스토리보드는 여러 사람이 보는 문서이기 때문에 어떻게 수정되었는지를 요약한 ‘작업 이력’과 내용을 한눈에 볼 수 있는 ‘목차’ 페이지가 필수적입니다. 작업 이력에는 ‘업데이트한 날짜, 내용, 수정한 사람’이 포함되어야 합니다. 목차는 하이퍼링크 기능을 이용해 해당 페이지 또는 파일과 연결합니다. ​

2. 개요

개발하려는 앱이 제공하는 서비스나 개발 목적, 주요 기능 등을 개괄적으로 작성합니다. 처음 보는 사용자들도 이해할 수 있도록 쉽고 간결하게 작성해야 합니다. ​

3. 화면

ID 앱에서 각각의 페이지에 별도의 ID를 부여한 목록입니다. 예를 들어 앱에서 로그인 화면이 총 2개의 페이지로 이루어져 있다면 [M-1], [M-2]와 같은 ID를 부여합니다. 화면 ID를 사용할 경우 중간에 페이지를 수정하거나 추가해도 ID만 추가하면 되므로 편리합니다. ​

4. 메뉴 구조도(Menu Structure)

메뉴 구조도는 앱 서비스의 메뉴 또는 기능을 뜻합니다. 요구사항정의서를 작성할 경우 이 부분은 아주 간략하게 작성해도 되지만, 요구사항정의서를 작성하지 않는다면 화면 ID와 더불어 기능, 형태, 디자인, 퍼블리싱 여부 등을 자세히 서술해야 합니다. ​

💡요구사항정의서란 무엇일까?

모바일-앱개발-스토리보드-어떻게-쓸까

5. UI 플로우 차트(Flow Chart)

UI 플로우 차트란 화면의 전환과 흐름을 나타내는 것으로, 사용자가 어떻게 페이지를 이동하게 되는지 묘사한 것입니다. ​

6. 정책

스토리보드에서 말하는 정책이란 기획자/개발자가 모두 공유해야 하는 내부적/외부적 정책​​을 말합니다. ​

① 내부적 정책
: 사용자에게 보여줄 정보나 화면을 어떻게 제한하거나 확장할 것인지 다룹니다. 예를 들어 VIP 회원에게만 노출되는 특별 카테고리 등이 있을 수 있습니다.

② 외부적 정책
: 준법 사항을 의미합니다. 예컨대 금융 앱이라면 금융감독원의 요구사항을, 운송 앱이라면 국토교통부의 관련 법령을 추가할 수 있겠죠. ​

UI-플로우-차트-정책

스토리보드 만들 때 활용하기 좋은 도구들 ​

Microsoft PPT / Google Slides

과거 스토리보드의 절대 강자는 MS의 파워포인트(PPT)였습니다. 보통 PPT로 스토리보드를 만들고, 엑셀로 요구사항정의서를 작성하였죠. 하지만 최근에는 온라인 협업 툴이 생겼고, 가장 간단한 협업 툴 중 하나는 바로 구글의 슬라이드입니다. ​

슬라이드는 MS의 PPT와 유사한 UI, 기능, 단축키 등을 갖고 있어 PPT에 익숙한 사람이라면 금방 익힐 수 있으며, 온라인으로 실시간 협업이 가능하다는 장점이 있습니다. 무엇보다 무료 툴이기 때문에 구글 계정만 있다면 언제 어디서든 작업할 수 있습니다. 시시때때로 추가/수정사항을 공유해야 하는 기획자 및 개발자에게 적합한 도구입니다. ​

Figma

주로 개발 분야의 기획자들이 이용하는 툴입니다. 비교적 최근에 만들어진 도구입니다. 피그마의 장점은 앱 서비스 개발에 최적화되어 있다는 것. 일일이 장표를 만들고 수정해야 하며 작성할 수 있는 공간이 제한적인 PPT나 Slides와 달리, 피그마는 하나의 거대한 평면 공간에서 작업하기 때문에 편리합니다. ​

실시간 공유도 가능하며, 디자이너와 개발자가 곧바로 수정하거나 수정을 반영할 수 있다는 장점이 있습니다. 다만 아직까지 널리 알려진 툴이 아니고, (PPT에 비해) 자세히 서술하거나 묘사하기 어렵다는 단점도 있죠.

스토리보드-만들-때-좋은-도구들

스토리보드 작성, 어렵다면 ‘위시켓’ ​

해 본 입장에서는 쉽게 말하지만, 해 본 적 없는 사람 입장에서는 어려울 수밖에 없는 게 이 스토리보드 작성입니다. 만약 혼자서 혹은 회사 내부에서 소화가 어렵다면 주변 전문가에게 도움을 구해야 합니다. 마땅한 라인이 없다면, 위시켓에 프로젝트를 공유해 보시기 바랍니다. ​

위시켓에서는 스토리보드를 함께 작성할 수많은 기획자와 개발자들이 연결되어 있는 국내 1위 IT 아웃소싱 플랫폼입니다. 한 번의 프로젝트 등록으로 여러 전문가들의 지원과 견적서를 동시에 받아 볼 수 있습니다. 또 프로젝트마다 담당 매니저가 배정되어 프로덕트 완성까지 여러분의 입장에서 다양한 지원을 아끼지 않습니다. 구체적인 지원과 혜택은 아래 링크를 참고하세요. ​


🔖 함께 보면 도움되는 글

앱개발 비용 줄이는 방법, ‘기간’ 다이어트

앱개발 비용에 ‘유지 보수’ 견적 잘 녹이는 방법 (산정 기준)

견적서에 포함되지 않는 숨은 앱개발 비용 3가지


국내 1위 IT 아웃소싱 플랫폼 위시켓 >

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

모바일 앱개발모바일 앱개발 비용스토리보드스토리보드 PPT스토리보드 구글 슬라이드스토리보드 디자인스토리보드 목차스토리보드 양식스토리보드 예시스토리보드 피그마앱 스토리보드앱개발 스토리보드앱기획 스토리보드어플 스토리보드위시켓
다음 글

위시켓 블로그의 새로운 소식 받기