<주간 UIUX 디자인 : ui storyboard>

일잘러가 되고 싶은 UI 디자이너를 위한 ui 스토리보드
(ui storyboard) 작성 노하우 (예시/툴/실무 프로세스)

제로베이스 UIUX 디자인 스쿨

ui ux에서의 스토리보드(ui storyboard)란?

일반적으로 스토리보드(Storyboard)는 애니메이션이나 영화, 광고 등을 실제로 제작하기에 앞서 이해를 돕기 위해 주요 장면을 정리한 것을 가리킵니다. 아래의 봉준호 감독님의 영화 <기생충>의 스토리보드처럼 그림으로 인물의 상황과 배경에 대해 묘사하고 옆에 대사 혹은 연출 사항에 대한 부연 설명을 붙입니다. 카메라 감독, 연출, 미술 독, 작가 등이 모여 하나의 작품을 만들기 위해서는 그에 대한 깊은 이해와 공감이 필요하기 때문이에요.

앱이나 웹 서비스를 만드는 것 역시 마찬가지입니다. 기획자, UI 디자이너, 개발자 등 서로 다른 포지션들이 오해 없이 함께 서비스를 만들기 위해서는 이들을 안내하는 가이드가 필요하겠죠. 작은 규모의 스타트업이라면 스토리보드(ui storyboard)를 문서화하는 일은 생략하기도 하지만 팀의 규모가 커질수록 의사소통이 어려워지기 때문에 훨씬 중요하답니다. 사용자 경험을 고려하는 UI 디자이너가 되고 싶으신 분들은 오늘 글 꼭 읽어보세요!

ui 스토리보드(ui storyboard)를 그리기 전 이거 먼저 해야 해요! - ui 스토리보드 프로세스

ui 스토리보드(ui storyboard)는 세부 기획까지 완료하고 디자인과 개발이 착수되기 전에 진행해요. 따라서 스토리보드 작업에 앞서 서비스의 굵직한 구조는 정보구조도(IA)로, 필요한 기능 정의는 제품 요구 문서(product requirement document 혹은 prd)로, 마지막으로 사용자의 플로우는 플로우차트로 정리하는 것이 명확해요.

1) 정보구조도 (IA) 작성

먼저 IA는 전체 서비스 내에 필요한 기능과 정보를 트리 형태로 정리하는 일입니다. 이때 그룹화를 통해 연관된 정보나 기능들은 엮어서 서비스의 굵직한 갈래를 확인할 수 있죠. 이 작업을 제대로 해두어야 ui의 내비게이션을 효과적으로 구성할 수 있어요.

2) 제품요구문서 (Product requirement document) 작성

제품요구문서(이하 prd)는 기획하는 서비스에 포함되는 기능을 나열한 리스트를 말합니다. 디자인과 개발 없이 기획을 실체화할 수는 없겠죠. 그렇기에 상세기획을 하기 전에 어떤 기능과 스펙이 필요한지 미리 합의를 보는 과정이 필요해요. 보통 서비스의 목적, 이를 위해 필요한 기능, 기능에 대한 설명, 가능 여부, 소요 기간, 우선 순위 등의 정보를 포함합니다.

3) 플로우차트 (Flow chart) 정리

마지막으로 플로우차트는 서비스의 흐름을 보여주는 표예요. 사용자가 서비스에서 목적을 달성하기 위해 어떤 흐름을 거치는지 경우의 수를 파악하기에 적합해요. 놓치는 케이스 없이 전부 고려해야 하기 때문에 꼭 차트 형태로 시각화해볼 것을 추천드려요.

ui 스토리보드(ui storyboard)는 이렇게 그려요! - ui 스토리보드 예시

이제 드디어 ui 스토리보드(ui storyboard)를 그릴 차례예요. 스토리보드는 위에서 보여준 영화 스토리보드의 형식과 크게 다르지 않아요. 장면 그림 대신 UI 와이어프레임을, 대사나 지문 대신 화면에 대한 설명을 적으면 되죠.

화면에 대한 설명을 적을 때는 각 컴포넌트가 어떤 작용을 하는지 전(디폴트), 중(사용자가 어떤 액션을 취할 때), 후(어떤 결과를 낳는지)로 구분해 기록하는 편이 정확해요. 화면은 정적인 것이 아니라 사용자와 상호작용하니까요. 정보의 표현 방식 역시 마찬가지예요. 예를 들어 리스트의 경우 디폴트로 어떤 순서로 정보가 나열될지, sorting 혹은 filter 기능이 있는지, 있다면 어떤 기준으로 가능하게 할지 명시해줘야 하죠.

그렇다면 현업 ux 디자이너들에게 가장 많은 사랑을 받고 있는 ux 스케치(Sketch) 툴에 대해 좀 더 자세히 알아볼까요?

스케치(Sketch) 툴의 장점

1) 커뮤니케이션 팁

친절과 정확도를 위해 챙기면 좋은 요소들입니다:

(1) 목차: 목차를 맨 앞에 넣어주세요. 보통 차례는 서비스의 구조에 따라 1 depth에서 점차 하위로 기술해요.
(2) 기호, 약식 부호 정리: 스토리보드에서 스크롤, 클릭 등의 사용자 액션을 기호로 표현했다면 사용한 기호들은 차례 다음 장에 정리해주세요.
(3) 버전 관리: ‘과제 파일명.최종, 최최종, 진짜최종’처럼 기획 문서도 계속 변경하고 추가되는 경우가 빈번해요. 꼭 버전을 기록하고 해당 버전에서 어떤 변경 사항들이 있었는지 기록해주세요. 해당 페이지에서는 딱지를 붙이거나 글자 색상을 바꿔 변경된 부분을 강조하는 것도 좋은 방법이에요.

2) 스토리보드(ui storyboard) 툴

그 다음으로 중요한 것이 효율성이에요. 매번 모두가 아는 것을 설명해주는 것은 쓰는 사람에게도 읽는 사람에게도 피로한 일이겠죠. 반복되는 프로세스는 최소화하는 가장 큰 팁은! 스토리보드 툴을 잘 활용하는 것이에요.

저는 회사에서 기획부터 디자인까지 같이 담당했는데요, 피그마 툴 하나로 전부 소화했어요. 피그마의 가장 큰 장점은 심볼화예요. 주로 쓰이는 컴포넌트는 물론 화면 역시 심볼화하면, 자잘한 변경 사항이 있어도 메인 심볼에서 한 번만 업데이트하면 되기 때문에 빠트릴 일 없이 쉽고 정확하게 문서를 관리할 수 있었어요.

뭐든 첫 단추를 잘 꿰야 다음 단계로 나아갈 수 있듯이 ui 스토리보드는 열심히 기획한 서비스가 제대로 구현되기 위해 전제되는 과정이에요. 기획자가 아니더라도 ux 관심이 많거나 이해도를 높이고 싶은 ui 디자이너, 개발자, PM이라면 ui 스토리보드(ui storyboard) 제작에 참여해보실 것을 추천드려요!

논리적인 ui ux 디자인을 위해 반드시 필요한 과정, ui 스토리보드(ui storyboard) 작성하기! 물론 비전공자 분들에게는 이러한 실무 과정이 어렵게 느껴지실 수 있을 것 같은데요. UIUX 디자인 스쿨에서는 이를 포함한 실무 프로세스를 경험할 수 있습니다. 혼자하는 취업 준비, 너무 막막할 땐? UIUX 디자인 스쿨과 함께해 보세요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠