.svg)
.svg)
웹사이트나 앱을 기획할 때 빠지지 않고 등장하는 단어 중 하나죠. 오늘의 주제는 바로 '스토리보드'입니다. 정확한 정의부터 필요한 이유, 구성 요소, 제작 방법까지 자세히 알아보겠습니다.
✍️ 목차
스토리보드란 앱이나 웹사이트가 어떻게 작동할지를 ‘그림’이나 ‘화면 구성’으로 미리 정리해 보는 설계도입니다. 쉽게 말해, 사용자가 어떤 순서로 어떤 화면을 보게 될지 미리 그려보는 도구라고 할 수 있습니다. 마치 건축을 할 때 도면을 먼저 그리는 것처럼, 디지털 서비스를 만들 때도 화면을 미리 계획해 보는 게 바로 스토리보드입니다.
예를 들어, 병원 예약 앱을 만든다고 가정해 봅시다. 사용자가 앱을 실행하면 가장 먼저 로그인 화면이 나타나고, 로그인을 하면 진료 과목을 선택하는 화면이 나오며, 이후에는 날짜와 시간을 고르고, 마지막으로 예약 내용을 확인하는 화면이 나옵겠죠. 이처럼 사용자 입장에서 어떤 화면을 먼저 보고, 어떤 버튼을 누르면 다음 화면으로 넘어가는지를 단계별로 정리한 것이라고 할 수 있습니다.
서비스를 만드는 과정에는 기획자, 디자이너, 개발자 등 다양한 역할이 참여합니다. 이들은 각자의 관점에서 서비스를 바라보기 때문에, 생각하는 바가 다를 수밖에 없습니다.
이때 스토리보드는 모든 팀원이 동일한 화면 구조와 흐름을 공유하게 해줍니다. 덕분에 '이 화면에는 어떤 기능이 들어가는지', '버튼을 누르면 어디로 이동해야 하는지' 등을 누구나 같은 기준으로 이해하도록 돕고, 덕분에 소통에서 생길 수 있는 오해를 줄일 수 있습니다.
스토리보드를 작성하면 전체 흐름이 눈에 보이기 때문에, 기능이 빠져 있거나 UX에 문제가 있는 부분을 개발 전에 찾아낼 수 있습니다. 예를 들어 회원가입을 마친 후 이동할 화면이 빠져 있거나, 사용자의 행동 흐름이 끊기는 구간이 있는지를 시각적으로 점검할 수 있습니다.
실제 개발이 시작된 후에 이런 문제를 발견하게 되면 수정 비용이 크게 증가하므로, 스토리보드를 통해 미리 점검하는 것이 효율적입니다.
스토리보드는 화면 간의 흐름을 보여주기 때문에, 사용자가 앱이나 웹사이트를 이용하면서 어떤 경로로 이동하고, 어떤 버튼을 누르게 되는지 쉽게 파악할 수 있습니다. 이를 통해 사용자가 얼마나 편리하게 서비스를 이용할 수 있는지를 사전에 검토할 수 있으며, 필요하다면 흐름을 더 직관적으로 개선할 수 있습니다.
스토리보드는 단순한 그림이 아니라, 각 화면의 구조와 기능, 화면 간 흐름을 구체적으로 담고 있어야 제대로 된 역할을 할 수 있습니다. 그렇기 때문에 몇 가지 꼭 포함해야 할 핵심 구성 요소가 있습니다.
스토리보드에는 각 화면에 고유한 번호와 이름을 붙입니다. 예를 들어 로그인 화면은 “01. 로그인”, 회원가입 화면은 “02. 회원가입” 식으로 표기합니다. 이렇게 하면 팀원들끼리 특정 화면에 대해 이야기할 때 혼동 없이 빠르게 소통할 수 있습니다.
각 화면이 어떻게 생겼는지 간단히 그려 넣습니다. 이때 꼭 정밀하게 디자인할 필요는 없고, 어떤 요소가 어디에 배치될지를 대략적으로 표현하면 충분합니다. 예를 들어 상단에는 로고, 중간엔 로그인 폼, 하단엔 ‘비밀번호 찾기’ 링크가 있다는 식으로 스케치합니다. 이걸 와이어프레임이라고도 부릅니다.
화면에 어떤 기능 요소가 있는지도 표시해야 합니다. 예를 들어 로그인 화면이라면, 이메일 입력창, 비밀번호 입력창, 로그인 버튼이 있을 겁니다. 버튼을 누르면 어떤 반응이 일어나는지도 함께 기재해두면, 기능 기획을 보다 명확히 할 수 있습니다.
사용자가 특정 버튼이나 링크를 클릭했을 때 어떤 화면으로 이동하는지를 화살표나 설명으로 연결합니다. 예를 들어 “로그인 버튼 → 03. 메인 홈화면”이라는 식으로 흐름을 시각적으로 보여줍니다. 이 흐름을 통해 전체 사용자 경험(UX)의 구조가 잘 짜여졌는지 확인할 수 있습니다.
각 화면 아래에는 기획자의 의도를 적는 설명란이 있을 수 있습니다. 예를 들어 '이 화면에서는 신규 사용자 유입을 고려해 SNS 간편 로그인도 함께 배치함'과 같이, 왜 이 화면이 필요한지, 어떤 전략적 의도가 있는지를 정리합니다. 특히 개발자나 디자이너가 참고하기 좋습니다.
스토리보드를 만드는 방법은 다양합니다. 간편하게는 A4 용지에 직접 손으로 쓸 수도 있고, 다양한 디지털 툴을 이용할 수도 있죠. 일반적으로 다양한 관계자와 협업할 때는 많이 쓰이는 툴을 활용합니다. 제작이 훨씬 효율적이고 공유도 쉬워지기 때문이죠. 스토리보드를 제작할 때 주로 쓰이는 툴을 소개해 드릴게요.
피그마는 누구나 한 번쯤 들어봤을 정도로 대중적인 디자인 툴입니다. 일반적인 디자인 프로그램과 달리, 프로그램 설치 없이 웹에서 바로 사용할 수 있고, 실시간으로 여러 명이 동시에 작업할 수 있다는 점에서 특히 기획자, 디자이너, 개발자 간 협업에 강점을 가지고 있습니다.
스토리보드를 만들 때 Figma를 사용하면, 각 화면을 실제 앱처럼 구성하면서 동시에 그 화면들이 어떻게 연결되는지를 직관적으로 표현할 수 있습니다. 예를 들어 로그인 화면, 메인 화면, 설정 화면 등 각 페이지를 개별적으로 그리고, 버튼이나 링크를 클릭했을 때 어떤 화면으로 넘어가는지를 선으로 연결해 흐름을 보여줄 수 있습니다. 이 기능을 통해 화면 간 이동 동선을 명확하게 전달할 수 있어, 스토리보드와 와이어프레임, UX 플로우 차트를 한 번에 정리하는 데 매우 유리합니다.
또한 Figma는 템플릿이나 디자인 키트도 잘 갖춰져 있어, 초보자도 부담 없이 시작할 수 있습니다. 기본적인 도형만으로도 간단한 스토리보드를 만들 수 있고, 더 나아가 실제 앱에 가까운 시안을 만들 수도 있습니다. 기획자가 만든 구조를 디자이너가 바로 다듬거나, 개발자가 그 구조를 참고해 실제 구현을 시작하는 것도 수월합니다.
Miro는 온라인에서 사용할 수 있는 협업용 화이트보드 툴로, 무한한 캔버스 위에 텍스트, 도형, 이미지, 포스트잇 등을 자유롭게 배치할 수 있습니다. 스토리보드를 만들 때는 각 화면을 네모 박스로 그려 놓고, 그 안에 버튼이나 텍스트 설명을 넣은 뒤, 사용자의 흐름을 화살표로 연결하는 식으로 구성할 수 있습니다.
특히 Miro는 실시간으로 여러 사람이 동시에 작업할 수 있어서, 기획자와 디자이너, 개발자가 함께 브레인스토밍을 하거나 의견을 주고받기에도 적합합니다. 복잡한 와이어프레임 툴 없이도 아이디어를 빠르게 정리하고 공유하고 싶을 때 유용한 도구입니다.
이미 익숙한 도구를 활용하고 싶다면 PowerPoint나 Keynote처럼 발표용 슬라이드 툴을 활용해 스토리보드를 제작하는 것도 좋은 방법입니다. 별도의 디자인 프로그램을 배울 필요 없이, 각 슬라이드를 하나의 화면으로 생각하고 구성하면 됩니다.
예를 들어 첫 번째 슬라이드에 로그인 화면을 넣고, 두 번째 슬라이드에 회원가입 화면을 넣는 식입니다. 각 화면에는 버튼, 입력창, 안내 문구 등을 도형과 텍스트 상자를 이용해 간단하게 구성할 수 있고, 슬라이드 간 전환을 애니메이션처럼 보여줄 수도 있어 클라이언트에게 보여주기에도 좋습니다.
특히 PowerPoint나 Keynote는 대부분의 사람에게 익숙하기 때문에 사용하기 편하고, 개발이나 디자인 툴에 익숙하지 않은 기획자들도 부담 없이 사용할 수 있는 장점이 있습니다.
앱이나 웹 개발을 준비하면서 스토리보드까지 직접 그려보셨다면, 이미 중요한 첫 단계를 잘 밟고 계신 겁니다. 하지만 그다음 단계, 실제 개발로 넘어갈 때는 혼자 고민하지 않아도 됩니다.
위시켓에서는 단순히 개발만 하는 것이 아니라, 기획부터 함께 고민해 주는 실력 있는 개발 회사들을 만날 수 있습니다. 화면 구성, 사용자 흐름, 필요한 기능까지 함께 정리해 주고, 더 나은 방향을 제안해주는 파트너와 함께하면 개발이 훨씬 수월해집니다.
지금 국내 1위 IT 파트너 매칭 플랫폼 위시켓에서 내 서비스에 딱 맞는 개발 회사를 찾아보세요!
함께 읽으면 좋은 콘텐츠
.svg)
