웹 기획 :: 웹 화면 설계 스토리보드(Storyboard) 툴 소개

웹 기획 :: 웹 화면 설계 스토리보드(Storyboard) 툴 소개

안녕하세요. JungGun 입니다. 오늘 웹기획 / 구축함에 있어서 많이 활용되는 "스토리보드"에 대해서 소개하려고 합니다. 스토리보드 문서 양식을 통해서 웹 사이트 개발을 위하여 디자이너와 개발자에게 전달하여 웹 사이트에 기획의도, 구성요소, 디자인적인 요소에 대한 꼼꼼하게 작성하는 것이 중요합니다. 보통 PPT로 작성하는 경우가 많지만, 오늘은 스토리보드(Storyboard) 작성에 활용되는 대표적인 툴 몇개를 공유하도록 하겠습니다.

1. Power Mockup  

링크 :: http://www.powermockup.com

"Power mockup"은 MS사의 파워포인트 프로그램 내부의 추가 플러그인 형태로 사용할 수 있습니다. 홈페이지에 들어가보시면 기능이 제한되어 있는 체험판(TRIAL)을 설치할 수 있는데요. 설치 후 파워포인트를 실행하여 새로운 기능을 활용하여 웹 스토리보드(StoryBoard)를 작성 할 수 있습니다. 다양한 User Interface 요소로 화면을 구성 할 수 있도록 구현 되어 있습니다. 

Storyboard Power Mockup

Storyboard Power Mockup

Storyboard Power Mockup

JungGun

2. Fluidui

링크 :: https://www.fluidui.com

웹 기반에 모바일 목업 디자인 툴 "Fluidui" 입니다. 간단한 드래그앤드롭 형식으로 원하는 페이지를 구성해볼 수 있습니다. 가장 큰 특징은 제스처, 애니메이션 효과가 가능하며 URL, QR코드를 사용하여 쉽게 공유할 수 있다는 점입니다.  유료서비스이긴 하지만 무료서비스도 제한적으로 사용이 가능합니다. 

Storyboard - Fluidui

Storyboard - Fluidui

  

3. Balsamiq mockups  

링크 :: https://balsamiq.com/

웹 기획자로 일을 시작하기 전에 제일 먼저 사용해본 툴 "Balsamiq mockups". 다른 툴과의 차이점이라면 스케치한 느낌의 감성적인 아이콘들 입니다. 위에 있는 툴과 비슷하게 역시나 드래그앤드롭 방식으로 손쉽게 제작이 가능합니다. 맥과 윈도우에 설치가 가능하며 웹과 앱으로도 서비스를 제공 하고 있습니다. 30일 간 무료로 사용이 가능하며, 그 이후에는 유료로 전환을 해야합니다. Storyboard - Balsamiq Mockups

JungGun

Storyboard - Balsamiq Mockups

추가적으로 제가 사용하는 Storyboard ppt 양식도 함께 공유하도록하겠습니다. 필요하시분들은 다운받아서 사용하세요~

웹 기획 스토리보드 양식.pptx

제가 모르는 다른 툴들 알고 계시면, 댓글로 정보 공유도 부탁드립니다^^ 좋은하루 보내세요!