앱기획 스토리보드 도구서비스 추천 5가지

IT 기초 개념 정리
2024-09-20

앱 개발 업체들이 입을 모아 이야기하는 강조하는 이야기가 바로 ‘기획’의 중요성입니다. 실제 필드에서 앱 기획자들은 기획에 엄청난 공을 들이고, 앱 개발자들 역시 작성된 앱 기획서를 검토하는 데 오랜 시간을 쓰곤 하죠. 이때 앱 기획서의 중심 축을 이루는 ‘앱을 이용하는 전반적인 경험’을 녹인 파트가 바로 ‘앱 스토리보드’인데요. 오늘은 이 앱의 스토리보드를 쓰는 이유부터 초보자도 어려움 없이 잘 쓸 수 있도록 돕는 도구와 팁 몇 가지를 공유해 드립니다.

✍️ 이 글의 순서

• 앱 만들 때, ‘스토리보드’ 왜 중요할까?
• 스토리보드 짤 때 주로 쓰는 도구 2가지
• 스토리보드 작성을 도와주는 서비스 3가지
• 위시켓에서 앱 기획 스토리보드를 앱으로 만들어 보세요

앱 만들 때, ‘스토리보드’ 왜 중요할까?

앱 기획서는 여러 문서가 혼합된 형태로 정리됩니다. 앱의 핵심적인 기능을 기술한 ‘요구사항 정의서’, 앱의 기능을 위계와 구조에 따라 표시한 ‘정보 구조도(IA)’, 이를 화면 형태로 나타낸 ‘와이어 프레임’ 등이 대표적입니다. 앱 스토리보드 역시 이 기획서에 속한 문서 중 하나인데, 사용자들이 앱을 이용하는 경로를 시나리오 형태로 작성한 문서입니다. ​

앱 스토리보드가 중요한 까닭은 기획자, 디자이너, 개발자, 퍼블리셔가 모두 동일하게 읽고 이해하는, 또 동일하게 해석해야 하는 문서이기 때문입니다. 예를 들어 요구사항 정의서나 정보 구조도는 주로 개발자가 읽고 이해합니다. 어떤 기능을 ‘개발’할지에 대해 서술한 문서이기 때문이죠.(반면 와이어 프레임은 주로 디자이너가 읽고 해석하며, 앱 기획안의 꽃인 화면 설계서는 개발자와 디자이너에겐 중요하지만, 퍼블리셔에게는 그다지 중요도가 높지 않습니다) ​

이와 달리 앱 스토리보드는 앱 개발에 참여하는 모든 관여자에게 아주 중요한 역할을 수행합니다. 앱의 기획 목적과 구성 요소, 디자인, 사용자 경험, 사용 경로, 예상되는 문제점 등 앱을 제작하기 전 ‘전반적인 경험’을 제공하는 문서이니까요. 사실상 앱의 ‘미리보기’에 해당하는 셈입니다. 따라서 스토리보드는 기획자가 작성하지만, 모든 관계자와 충분히 협의해야 합니다. 그만큼 중요한 문서라고 할 수 있겠죠. ​

스토리보드 짤 때 주로 쓰는 도구 2가지

앱 스토리보드는 도구(tool) 선택도 신중하게 해야 합니다. 모든 관계자에게 익숙한 전통적인 툴을 사용할 수도 있고, 편리하고 쉽게 새로운 툴을 사용할 수도 있는데요. 두 가지 방식 모두 살펴보겠습니다. ​

전통적인 방식 = MS PPT

MS PPT 혹은 이와 매우 유사한 Google Slides는 전통적인 앱 스토리보드 작성 툴입니다. 사실 실제 기업에서는 절대다수가 PPT를 사용하고 있습니다. 직장인이라면 거의 모든 사람이 사용할 줄 알며, 익숙하고 보안 관리 부분에서도 훌륭한 모습을 보입니다. ​

다만 PPT나 Slides는 ‘발표(presentation)’를 위한 툴인만큼, 앱 스토리보드를 위한 전문 프로그램이라 보기 어렵습니다. 특히 가로로 긴 형태를 기본 서식으로 하기 때문에, 모바일 앱 설계에 최적화되어 있다고 평가하긴 힘들죠. ​

➕ 전통적인 방식의 보완: PowerMockup은 어떨까?

앱 스토리보드에 PPT를 이용하는 일이 많다 보니, 앱 스토리보드용 템플릿을 제공하는 서비스도 생겨났습니다. 바로 PowerMockup이라는 툴인데요. 이 툴을 설치하면 다양한 앱 기획용 리소스를 가져올 수 있어 편리하게 작업할 수 있습니다. 특히, 라이선스를 구매한 뒤 그저 파워포인트에 추가하면 끝이기 때문에 간편하게 사용할 수 있다는 게 장점입니다. ​

새로운 방식 = Figma

최근 각광받는 새로운 앱 스토리보드 작성 툴로는 Figma를 꼽을 수 있습니다. 디자이너나 스타트업에서는 Figma를 주로 사용하는 편인데요. Figma는 UX/UI 디자인 협업 툴인만큼 앱 스토리보드 작성에 최적화되어 있으며, 공유와 협업이 매우 편리합니다.

다만 Figma를 사용하는 사람은 사회 전체를 모수로 봤을 때 그렇게 많은 사람들이 쓰는 범용적인 도구하고 보기 어렵습니다. 개발자들을 위한 설명을 서술하기에는 조금 부적합하다는 의견도 있고요. 따라서 Figma를 도입하기 전, 필수적으로 직원들에게 Figma 툴 사용법을 익히도록 해야 하고 개발자용 설명 문서를 따로 준비하는 게 현명한 시작 방법이라고 볼 수 있겠습니다. ​

스토리보드 작성을 도와주는 서비스 3가지

만약 앱 기획 스토리보드 작성이 처음이거나 앱 스토리보드를 조금 더 정확하게, 그리고 효율적으로 작성하고 싶다면 아래 사이트를 이용하는 것도 한 방법입니다. 참고하세요. ​

GlooMaps

마인드맵을 그릴 수 있는 사이트로, 웹 형태이기 때문에 협업 및 공유가 편리합니다. 전문 툴이나 서비스에 비하면 기능이 조금 부족할 수 있지만, 기본적인 기능을 충실히 제공하므로 그렇게 부족한 느낌이 들지 않습니다. Map, Outline, Matrix의 형태로 시각화할 수 있고, xml, png, pdf 파일로 출력할 수 있습니다. ​

Uxpressia

사용자 페르소나를 정하고, 고객 여정을 그려 사용자 경험을 디자인하는 과업에 특화된 사이트입니다. 말하자면 UX 전문 툴이라고 할 수 있는데요. 무료 버전에서는 1개 프로젝트만 생성할 수 있지만, 전문 UX 디자이너가 아닌 이상 1개 프로젝트로도 충분합니다. ​

Whimsical

앱의 플로우차트를 그릴 수 있는 사이트로, 와이어 프레임과 스티커노트 서비스를 제공하기 때문에 효과적으로 앱 스토리보드를 작성할 수 있습니다. 무료로 4개의 프로젝트를 생성할 수 있습니다. ​

시작부터 남다르게, ‘위시켓’으로 ​

앱 기획과 스토리보드 작성은 보는 것과 실제 만드는 것에 격차가 큰 업무 중 하나입니다. 만들 때 보이지 않던 차이가 개발&디자인 실무에나 들어가서야 드러나는 경우가 많죠. 그래서 시작부터 경험 많은 전문가와 제대로 정리하는 게 시간과 비용을 줄일 수 있는 유일한 방법입니다. ​

그래서 아는 사람들은 위시켓을 활용합니다. 위시켓은 2012년부터 운영되어 온 국내 1위 IT 전문 아웃소싱 플랫폼입니다. 일반 플랫폼처럼 외주 업체와의 매칭만 돕는 플랫폼이 아닙니다, 프로젝트의 시작부터 마무리까지 실무를 세밀하게 돕는다는 점이 특징입니다. 이를 위해 프로젝트마다 1:1로 전담 매니저가 붙어 함께 움직이죠. 자세한 내용은 아래 배너를 눌러 확인하실 수 있습니다.

🔖 함께 보면 도움되는 글

앱개발 비용 예상, 계산할 때 자주 빼먹는 비용 4가지

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

모바일 앱개발의 꽃, 기획서에 빠지면 안 되는 항목