어떤 일을 시작하든 그 첫 단추를 잘 끼워야 깔끔한 마무리가 가능합니다. 웹사이트를 제작하는 데 있어서 첫 단추는 웹 기획 단계이죠. 튼튼한 건축물을 짓기 위해서는 구체적인 설계도면이 있어야 하듯이 웹 혹은 모바일 역시 웹사이트 제작에 앞서 설계작업이 필요합니다. 이를 화면 설계서라고 하며, 와이어 프레임, 스토리보드, 프로토타입으로 구분하고 있습니다.
IT 업계에 종사하고 있다면 누구나 들어보았을 단어, 와이어프레임, 스토리보드, 프로토타입. 각각 어떤 차이가 있는지 알고 계신가요? 저희 바름이 알기 쉽게 소개해드리겠습니다.
와이어 프레임(WireFrame)이란?
화면 단위의 레이아웃을 설계하는 작업인데요, 각 페이지의 레이아웃과 서비스의 간략한 흐름을 공유하기 위한 작업입니다. 말 그대로 기반을 대략 잡아보는 단계이기 때문에 포토샵, 일러스트와 같은 그래픽 툴을 사용하지 않더라도 손 그림으로 다소 러프하게 제작이 가능합니다.
스토리보드(Storyboard)란?
디자이너와 개발자가 참고하기 위한 기획 단계의 최종적인 산출물을 스토리보드라고 합니다. 정책, 프로세스, 콘텐츠 구성, 앞서 작업한 와이어 프레임의 기능 정의, 데이터베이스 연동 등 사이트를 구축하는데 필요한 모든 정보가 담겨있기 때문에 일반적으로 이 문서를 통해 업체와의 커뮤니케이션을 진행하게 됩니다.
프로토타입(Prototype)이란?
실제로 구현될 사이트와 흡사한 화면을 만들어보는 작업입니다. 카카오 오븐과 같은 다양한 프로토타이핑 툴을 사용해 제작 가능하며 스토리보드를 바탕으로 동적인 기능을 시뮬레이션 해보고 미리 사용자 경험을 테스트 해볼 수 있습니다. 그래서 설계 단계의 리스크를 사전에 예방할 수 있다는 장점이 있죠.
이렇듯 각 단계가 중요한 역할을 가지고 있지만, 실무를 경험하다 보면 프로젝트의 규모에 따라서 화면설계의 단계를 줄이는 경우도 필요하게 됩니다. 이때 화면설계서로서 중요한 역할을 하는 것이 바로 스토리보드!
바름에서도 웹사이트 제작 서비스를 시작하면서부터 좀 더 형식에 맞게, 효율적으로 사용할 수 있는 스토리보드를 고민해왔습니다. 그 결과 바름은 거듭된 고민을 거쳐 개선된 스토리보드를 제작하고, 좀 더 나은 방향을 찾기 위해 항상 노력하고 있습니다.
저희 바름에서는 클라이언트가 접근하기 쉽고 친숙한 제작 프로그램을 사용해 활용도가 높고, 주간/월간 미팅에서 직접 눈으로 보며 설명이 가능하도록 정책, 프로세스, 콘텐츠 구성, 와이어 프레임의 기능 정의, 데이터베이스 연동 등을 보기 쉽게 정리한 스토리보드 양식을 구성하여 기획이 탄탄한 홈페이지 제작을 도와드리고 있습니다.
