[UX UI Project] 앱 디자인 기획 - 스토리보드에 대하여 + AI 활용하기

앱 기획을 시각화하여 보여주는 첫 단추, 스토리보드

앱 제작 과정에서 스토리보드(Storyboard)는 추상적인 아이디어를 눈에 보이는 구체적인 상황 설정과 함께 스마트폰 화면으로 전환하는 첫 단추 역할을 한다. 현재 진행 중인 과제 프로젝트를 진행하며 구직 관리 앱 기획을 구체화하는 현시점에서, 스토리보드의 위치와 역할, 그리고 제작 방식들을 논리적인 근거를 바탕으로 단계별로 정리해 보고 내가 사용한 툴도 같이 설명하려고 한다.  

1. 앱 제작 단계에서 스토리보드의 위치

앱 개발의 전체 라이프사이클을 순서대로 나열하고 스토리보드는 기획(1~2단계)과 본격적인 시각 디자인 및 개발(4~5단계)을 이어주는 핵심적인 다리 역할을 한다. 

• 1단계: 아이디어 도출 및 UX 리서치 (사용자 pain 포인트 분석)
• 2단계: 요구사항 정의 및 기능 명세 (구직 앱의 원클릭 데이터 캡처 기능 정의 등)
• 3단계: 스토리보드 및 와이어프레임 (Lo-fi), Information Architecture 제작 (화면 구조와 흐름 시각화)
• 4단계: 하이파이(Hi-Fi) UI 디자인 (타이포그래피, 컬러, 아이콘 등 시각 요소 적용)
• 5단계: 개발 및 코딩
• 6단계: 테스트 및 출시

2. 스토리보드가 필수적인 논리적 이유

스토리보드 작성은 귀찮은 문서, 드로잉 작업이 아니라 프로젝트의 성공 확률을 높이는 가장 합리적인 투자라고 할 수 있다. 대부분 시장에 출시 전 서비스라면 진짜 유저를 찾기는 쉽지 않기 때문이다.

• 비용과 시간의 극적인 절약: 고해상도 디자인을 완성하거나 개발 코드를 짜기 전에 화면 전환의 논리적 오류를 어느정도 초기에 미리 발견할 수 있다. 뼈대 단계에서 구조를 수정하는 것이 이후 완성 단계에서 뜯어고치는 것보다 비용 측면에서 압도적으로 효율적이다.
• 이해관계자 간의 완벽한 의사소통: 텍스트로만 쓰인 기획서는 읽는 사람마다 다른 결과물을 상상하게 만든다. 시각적인 스토리보드를 통해 디자이너, 개발자, 클라이언트 모두가 동일한 화면 흐름을 보고 명확하게 의견을 조율할 수 있다.
• 사용자 흐름(User Flow)의 논리적 검증: 버튼을 눌렀을 때 다음 화면으로 어떻게 넘어가는지 직접 그려보면서, 사용자가 목적을 달성하는 과정에 막다른 길(Dead End)이나 불필요한 단계가 없는지 선제적으로 점검할 수 있다.

3. 스토리보드를 제작하는 다양한 방식

프로젝트의 성격과 팀의 협업 방식에 따라 스토리보드를 그리는 방법은 여러 가지로 나뉜다.

• 스케치 기반 스토리보드 (Thumbnail Sketching): 가장 빠르고 고전적인 방법이다. 종이와 펜만 사용하여 만화 칸처럼 화면의 대략적인 구도를 연속적으로 그린다. 아이디어를 빠르게 발산하고 여러 대안을 비교 평가할 때 가장 적합하다. 
• 시나리오 기반 스토리보드 (Scenario-based Storyboard): 앱 화면의 세부 요소보다는 사용자가 앱을 사용하는 구체적인 상황과 맥락에 초점을 맞춘다. 예를 들어, 구직자가 버스 안에서 한 손으로 앱을 켜서 면접 일정을 확인하는 장면 등을 만화처럼 묘사한다. 이는 디자인 원칙 중 하나인 사용자에 대한 공감(Empathy)을 형성하는 데 매우 유용하다. 쉽게 생각하면 영화 시놉시스 그리는 과정이랑 비슷하다고 할 수 있다. 특히 드로잉을 잘하는 디자이너라면 훨씬 유리하다. 
• 와이어플로우 (Wireflow): 화면의 구조를 나타내는 와이어프레임(Wireframe)과 화면 간의 이동 경로를 나타내는 플로우차트(Flowchart)를 결합한 방식이다. 어떤 버튼을 누르면 어떤 조건에 따라 다음 화면으로 넘어가는지 논리적인 알고리즘을 화살표로 명확히 시각화하므로 개발자와 협업할 때 가장 실용적이다. Lo-fi 디자인에서 Hi-fi 디자인으로 넘어가는 중간 형태라고도 볼 수 있다. 
• 디지털 툴을 활용한 스토리보드: 피그마(Figma)나 발사믹(Balsamiq) 같은 전문 도구를 사용하여 그리는 방식이다. 물리적인 종이와 달리 수정이 매우 간편하고, 그려둔 화면들을 링크로 연결하여 클릭 가능한 기초적인 프로토타입으로 즉각 전환할 수 있다는 기술적 장점이 있다. 그러나 툴 사용이 익숙한 디자이너들이 모여있는 그룹이라면 소화 가능하겠지만 실제 사용 중 맥락적인 포인트를 찾아내기에는 조금 부족한 면이 있을 것이다. 

4. 현재 진행중인 앱 기획에서 선택한 툴

과제이다 보니 앱 아이디어 기획 후 Lo-fi 앱 화면 드로잉도 이전 과제에 있었고, 단순히 '스토리보드를 만들어 와라'라고 해서 첫 학기 수강 중인 나와 같은 친구들은 많이 혼란스러워했다. 앞서 찾아봤듯 스토리보드 제작 방식도 다양하니 무엇을 골라야 할지 난감하고, 이전 아이디어 단계와 이후 Hi-fi 화면 디자인으로 넘어가는 중간 단계이니 어떤 것이 효과적일지 고민이 되기 때문이다. 우리 팀은 회의 끝에 시나리오 기반 스토리 보드를 선택했다. 그리고 찾아보니 'Story Tribe' 라는 스토리보드 장면을 제작 가능한 사이트가 있었다.

이 사이트를 제작하신 분과 전혀 연결점이 없지만, 그래도 느낌상 사용해 보니 캐릭터 이름이라던지 폰트가 한국어에서 많이 온 것으로 보아 한국인 디자이너분께서 같이 메인으로 참여하여 제작하지 않았나 싶다. 그리고 한국인 특유의 배려심이 돋는 부분도 스토리보드 만들면서 많이 느껴졌다. 그리고 AI 기능이 더해져서 앱 기획의도와 앱의 주요 기능들을 먼저 작성하니 어느 정도 시나리오 스크립트는 가이드가 자동으로 만들어졌다. 자세한 부분은 그림을 그려가며 (정확히는 아바타를 이리저리 클릭하여 배치하는 과정) 조정하니 생각보다 쉽게 스토리보드가 만들어졌다. 

 

UX 스토리보드 예시

 

다시 보게 된 스토리보드 단계의 위상

사실 디자이너로서 조금 부끄러운 얘기지만 스토리보드가 유치한 만화같기도 하고 어쩌면 좀 뻔한 이야기를 글로 쓴 걸 보면 되는데 굳이 그림으로 그려가며 볼 필요가 있을까 싶은 생각이 처음에는 있었다. 과제를 위해 어쩔 수 없이 만들어야지라고만 생각했는데, 막상 제작해 보니 내가 중요하게 생각한 기능들이 여러 가지가 있었는데 어떤 상황적인 맥락에서 진짜 중요한지 우선순위(priority)가 바로 그려졌다. 사용자가 '이런 순간에 이 앱을 더 써보겠구나' 하는 부분도 더 그려져서 다른 팀원들을 설득하기도 편했다. 그래서 아마도 개발자들이나 마케팅 등 다른 분야의 협업 순간에도 몇십 장짜리 기획서보다 더 힘을 발휘하겠구나 하는 생각이 들었다.