.svg)
.svg)
앱을 개발하기 전에 가장 먼저 해야 할 일은 기획을 시각화하는 것입니다. 이때 유용한 도구가 바로 ‘스토리보드’입니다. 화면 흐름과 기능 구성을 미리 설계해두면 개발 과정에서의 시행착오를 줄이고, 팀원 간 커뮤니케이션도 훨씬 수월해집니다. 오늘은 앱 기획 단계에서 스토리보드를 효과적으로 만들 수 있는 대표적인 도구·서비스 5가지를 소개합니다.
✍️ 이 글의 순서
• 앱 만들 때, ‘스토리보드’ 왜 중요할까?
• 스토리보드 짤 때 주로 쓰는 도구 2가지
• 스토리보드 작성을 도와주는 서비스 3가지
• 위시켓에서 앱 기획 스토리보드를 앱으로 만들어 보세요
앱 기획서는 여러 문서가 혼합된 형태로 정리됩니다. 앱의 핵심적인 기능을 기술한 ‘요구사항 정의서’, 앱의 기능을 위계와 구조에 따라 표시한 ‘정보 구조도(IA)’, 이를 화면 형태로 나타낸 ‘와이어 프레임’ 등이 대표적입니다. 앱 스토리보드 역시 이 기획서에 속한 문서 중 하나인데, 사용자들이 앱을 이용하는 경로를 시나리오 형태로 작성한 문서입니다.
앱 스토리보드가 중요한 까닭은 기획자, 디자이너, 개발자, 퍼블리셔가 모두 동일하게 읽고 이해하는, 또 동일하게 해석해야 하는 문서이기 때문입니다. 예를 들어 요구사항 정의서나 정보 구조도는 주로 개발자가 읽고 이해합니다. 어떤 기능을 ‘개발’할지에 대해 서술한 문서이기 때문이죠.(반면 와이어 프레임은 주로 디자이너가 읽고 해석하며, 앱 기획안의 꽃인 화면 설계서는 개발자와 디자이너에겐 중요하지만, 퍼블리셔에게는 그다지 중요도가 높지 않습니다)
이와 달리 앱 스토리보드는 앱 개발에 참여하는 모든 관여자에게 아주 중요한 역할을 수행합니다. 앱의 기획 목적과 구성 요소, 디자인, 사용자 경험, 사용 경로, 예상되는 문제점 등 앱을 제작하기 전 ‘전반적인 경험’을 제공하는 문서이니까요. 사실상 앱의 ‘미리보기’에 해당하는 셈입니다. 따라서 스토리보드는 기획자가 작성하지만, 모든 관계자와 충분히 협의해야 합니다. 그만큼 중요한 문서라고 할 수 있겠죠.
앱 스토리보드는 도구(tool) 선택도 신중하게 해야 합니다. 모든 관계자에게 익숙한 전통적인 툴을 사용할 수도 있고, 편리하고 쉽게 새로운 툴을 사용할 수도 있는데요. 두 가지 방식 모두 살펴보겠습니다.
MS PPT 혹은 이와 매우 유사한 Google Slides는 전통적인 앱 스토리보드 작성 툴입니다. 사실 실제 기업에서는 절대다수가 PPT를 사용하고 있습니다. 직장인이라면 거의 모든 사람이 사용할 줄 알며, 익숙하고 보안 관리 부분에서도 훌륭한 모습을 보입니다.
다만 PPT나 Slides는 ‘발표(presentation)’를 위한 툴인만큼, 앱 스토리보드를 위한 전문 프로그램이라 보기 어렵습니다. 특히 가로로 긴 형태를 기본 서식으로 하기 때문에, 모바일 앱 설계에 최적화되어 있다고 평가하긴 힘들죠.
➕ 전통적인 방식의 보완: PowerMockup은 어떨까?
앱 스토리보드에 PPT를 이용하는 일이 많다 보니, 앱 스토리보드용 템플릿을 제공하는 서비스도 생겨났습니다. 바로 PowerMockup이라는 툴인데요. 이 툴을 설치하면 다양한 앱 기획용 리소스를 가져올 수 있어 편리하게 작업할 수 있습니다. 특히, 라이선스를 구매한 뒤 그저 파워포인트에 추가하면 끝이기 때문에 간편하게 사용할 수 있다는 게 장점입니다.
최근 각광받는 새로운 앱 스토리보드 작성 툴로는 Figma를 꼽을 수 있습니다. 디자이너나 스타트업에서는 Figma를 주로 사용하는 편인데요. Figma는 UX/UI 디자인 협업 툴인만큼 앱 스토리보드 작성에 최적화되어 있으며, 공유와 협업이 매우 편리합니다.
다만 Figma를 사용하는 사람은 사회 전체를 모수로 봤을 때 그렇게 많은 사람들이 쓰는 범용적인 도구하고 보기 어렵습니다. 개발자들을 위한 설명을 서술하기에는 조금 부적합하다는 의견도 있고요. 따라서 Figma를 도입하기 전, 필수적으로 직원들에게 Figma 툴 사용법을 익히도록 해야 하고 개발자용 설명 문서를 따로 준비하는 게 현명한 시작 방법이라고 볼 수 있겠습니다.
만약 앱 기획 스토리보드 작성이 처음이거나 앱 스토리보드를 조금 더 정확하게, 그리고 효율적으로 작성하고 싶다면 아래 사이트를 이용하는 것도 한 방법입니다.
마인드맵을 그릴 수 있는 사이트로, 웹 형태이기 때문에 협업 및 공유가 편리합니다. 전문 툴이나 서비스에 비하면 기능이 조금 부족할 수 있지만, 기본적인 기능을 충실히 제공하므로 그렇게 부족한 느낌이 들지 않습니다. Map, Outline, Matrix의 형태로 시각화할 수 있고, xml, png, pdf 파일로 출력할 수 있습니다.
사용자 페르소나를 정하고, 고객 여정을 그려 사용자 경험을 디자인하는 과업에 특화된 사이트입니다. 말하자면 UX 전문 툴이라고 할 수 있는데요. 무료 버전에서는 1개 프로젝트만 생성할 수 있지만, 전문 UX 디자이너가 아닌 이상 1개 프로젝트로도 충분합니다.
앱의 플로우차트를 그릴 수 있는 사이트로, 와이어 프레임과 스티커노트 서비스를 제공하기 때문에 효과적으로 앱 스토리보드를 작성할 수 있습니다. 무료로 4개의 프로젝트를 생성할 수 있습니다.
앱이나 웹 개발을 준비하면서 스토리보드까지 직접 그려보셨다면, 이미 중요한 첫 단계를 잘 밟고 계신 겁니다. 하지만 그다음 단계, 실제 개발로 넘어갈 때는 혼자 고민하지 않아도 됩니다.
위시켓에서는 단순히 개발만 하는 것이 아니라, 기획부터 함께 고민해 주는 실력 있는 개발 회사들을 만날 수 있습니다. 화면 구성, 사용자 흐름, 필요한 기능까지 함께 정리해 주고, 더 나은 방향을 제안해주는 파트너와 함께하면 개발이 훨씬 수월해집니다.
지금 국내 1위 IT 파트너 매칭 플랫폼 위시켓에서 내 서비스에 딱 맞는 개발 회사를 찾아보세요!
🔖 함께 보면 도움되는 글
.svg)
