신규 사업을 준비하거나, 기존 사업의 확장을 위해 앱제작 카드를 만지는 회사들이 많은데요. 내부에 개발 부서가 없는 회사들은 무엇을 어떻게 준비해야 할지 막막함부터 엄습하곤 합니다. 이럴 때에는 어떤 도구들로 머릿속 아이디어를 표현할 수 있는지 알아두는 것만으로 어느 정도 마음에 안식을 찾을 수 있는데요. 딱 그런 도구들이 바로 스토리보드와 화면 설계, 와이어프레임 제작을 돕는 도구들입니다.
아래 대표적인 도구들을 하나씩 간단히 소개해 드릴게요.
✍️ 이 글의 순서
• 스토리보드 사이트 4선
• 화면 설계와 와이어프레임 도구 추천
스토리보드 사이트 4선
명확한 목적을 가지는 앱제작 프로젝트일수록 사용자 경험이 중요해요. 앱이 어떻게 사용될 것인지 명확히 설계하는 것을 ‘앱 스토리보드’라고 하는데요. 아래에서 앱 스토리보드 제작에 도움이 되는 기초 사이트를 확인하실 수 있어요.
Uxpressia
✔️ 고객 여정 매핑 도구
✔️ 1개 프로젝트 무료, 이후 유료
고객 여정이란, 사용자가 구매를 결정하기까지의 고객 경험을 의미하는데요. 애플리케이션이 좋은 성과를 거두기 위해서는 고객 여정에 대한 이해가 반드시 필요해요. Uxpressia는 고객 여정의 모든 단계에서 고객 경험을 관리하는 데에 특화되어 있어요. 사용자의 페르소나를 정의하고, 그에 따른 사용자 경험을 예측해 볼 수 있습니다.
Whimsical
✔️ 플로우 차트, 와이어 프레임, 스티커 노트
✔️ 4개 프로젝트 무료, 이후 유료
여러 명의 아이디어를 한 곳에 보관할 수 있다면 어떨까요? 또한 그 아이디어를 시각화하여 보다 명확하게 사용할 수 있다면 기획 과정에서 효율이 더 높아지겠죠? Whimsical은 앱의 플로우차트를 작성할 수 있는 도구인데요. 다양한 소스를 포함하고 있어서 보다 상세한 기획이 가능해요. 기클라우드 형식의 웹 서비스기 때문에, 동시에 여러 명이 함께 작업할 수 있다는 장점도 있어요.
Userbit
✔️ UX 기획 및 리서치에 필요한 템플릿
✔️ 5개 프로젝트 무료, 이후 유료
기획이나 리서치를 할 때는 방대한 자료들을 일목요연하게 정리하는 것이 중요한데요. Userbit은 인터뷰 양식이나 리서치 결과, 피드백 등의 자료를 템플릿화할 수 있게 하는 툴입니다. 이외에도 사용자 페르소나를 작성하거나 사이트맵을 작성할 수 있는 기능도 포함하고 있는데요. 앱 스토리보드 제작을 처음 시작할 때 범용적으로 사용하기 좋은 도구로 불리고 있어요.
Gloo maps
✔️ 온라인 기반 초보자 특화 도구
✔️ 완전 무료
Gloo maps는 사이트맵 작업에 특화된 툴이에요. 다양한 형태의 맵핑이 제공되는 것은 아니지만, 핵심적으로 필요한 Map, Matrix, Outline 형태로 시각화가 가능해요. 유료 결제가 없이도 xml, png, pdf 파일로 추출도 가능하고, UI도 간편하고 명확하여 초심자들에게 추천하는 도구입니다. 특히 서비스 기획 초기 단계에서 부담 없이 사용할 수 있다는 장점이 있어요.
Gloo maps 예시 이미지
화면 설계, 와이어프레임 도구 추천
보통 화면 설계를 진행할 때 파워포인트를 많이 활용하는데요. 한정된 화면에서 소스를 추가하거나 텍스트가 늘어나면 전체 페이지를 수정해야 한다는 불편함이 있죠. 원래 사용하던 도구에서 한 단계만 더 성장하면 훨씬 더 편하고, 세련되게 기획을 시작할 수 있어요. 여기서는 ‘초보자를 위한’ 화면 설계, 와이어프레임 툴에 대해 추천해 드릴게요.
파워 목업 (Power Mockup)
✔️ 파워포인트 화면 설계 시간을 단축시켜주는 라이선스
✔️ 개인 $59.99 (한화 약 70,000원)
파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴입니다. 템플릿 형식으로 제작된 레이아웃과 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있어요. 파워포인트에서 화면 설계 작업을 단축시켜주는 도구입니다.
발사믹 목업 (Balsamiq Mockups)
✔️ 빠른 아이디어 스케치
✔️ 개인 $89 (한화 약 104,000원)
심플하게 서비스 컨셉을 전달하고 싶을 때, 간단한 스케치 기능이 필요할 때 파워포인트보다 빠르게 사용할 수 있어요. 윈도우와 맥, 웹 브라우저 모두 사용이 가능하다는 장점이 있어요. 디테일한 화면 구성보다는 번뜩이는 아이디어를 시각화하여 전달이 필요할 때 유용해요.
카카오 오븐 (Oven)
✔️ 간단한 서비스 컨셉 공유 및 테스트
✔️ 무료
직관적인 인터페이스로 구성되어 있어 화면 설계가 처음인 사용자도 쉽게 사용할 수 있어요. 온라인으로 제작한 화면을 QR코드나 단축 URL로 공유할 수 있어 전달도 용이하죠. 디테일한 설계보다는 간단한 서비스 컨셉을 공유하기에 편리해요. 디자인 시안 이미지를 업로드해서 모바일 등의 디바이스에서 테스트할 수도 있어요.
카카오 오픈 예시 이미지
인비전 (Invision)
✔️ 포토샵 작업물을 연결해 인터랙션 테스트까지
✔️ 프로페셔널 버전 월정액 $22 (한화 약 25,000원)
포토샵이나 스케치 등으로 디자이너가 작업한 결과물을 실제로 적용했을 때 모습을 볼 수 있어요. 프로젝트 참여자 간에 다양한 형태로 피드백을 주고 받을 수 있어, 프로젝트 기간 동안 효율적인 커뮤니케이션을 할 수 있답니다. 학습 난이도도 쉬운 편이라 프로토 타이핑이 필요한 초보 기업에게 많은 도움이 될 수 있어요.
픽사에이트 (Pixate)
✔️ 디테일한 인터랙션이지만 적당한 난이도
✔️ 무료
모바일 앱 프로토 타이핑에 최적화된 도구로, 아마존과 애플, 페이스북과 구글 등 다양한 글로벌 IT 기업에서 사용하고 있습니다. 위에서 설명했던 도구들보다 디테일한 인터랙션을 테스트해 볼 수 있는데요. 처음 사용 방법이 어렵다고 느껴지실 수 있지만 익숙해지면 다른 툴을 사용하는 것보다 훨씬 더 효과적입니다.
여기까지 앱 제작 과정에서 필요한 스토리보드, 화면 설계, 와이어프레임 도구들을 추천해 드렸는데요. 앱 제작 과정은 온전히 업체에 모든 것을 일임할 수는 없어요. 어떤 식으로 앱을 기획하고 제작할 것인지 기획과 구상의 단계가 필요하죠. 우리가 익히 알고, 많이 사용하는 위대한 앱들도 처음에는 스케치 단계에서 시작했습니다. 시작이 절반이라는 말도 있잖아요?
다음 스텝으로 믿을 만한 협업 개발 회사를 찾을 때에는 위시켓을 방문해 보세요. 이미 수많은 기업들이 멋진 위시켓을 통해 앱제작 프로젝트를 진행했습니다. 아래 참고할 만한 정보도 함께 남겨뒀으니, 관심이 있다면 확인해 보세요.
💡 about 위시켓 : 2012년 설립된 위시켓은 지금까지 ‘세상이 일하는 방식을 더 행복하게’ 만들기 위해 IT 아웃소싱 시장에 혁신을 만들어가고 있습니다. 현재까지 97,569개의 기업이 누적 7,519억 원 이상의 프로젝트를 믿고 맡겨주셨습니다.
🔖 함께 보면 도움되는 글
첫 앱개발 외주, 어떻게 진행해야 할까? 실패 없는 가이드라인
