앱과 웹사이트를 개발 시 스토리보드는 작성 이유와 PPT, 피그마, 어도비XD가 기획툴이 된 이유

앱과 웹 개발 프로젝트에 참여해 보면 기획자들이 스토리보드를 작성하는 것을 보게 됩니다. 기업에 따라 PPT, 피그마, 엑슈어, 어도비 XD 등 서로 다른 툴로 작성을 요구하기도 합니다. 또 이렇게 다른 툴로 작성된 스토리보드는 조금씩 다르다는 점을 느낄 것입니다.

 

앱이나 웹을 개발하는데 설계가 아니고 왜 화면을 그리는 스토리보드를 가지고 프로그래머나 디자이너가 작업을 하는지 궁금해질 수 있습니다.

 

더해서 왜 서로 다른 작성 툴을 요구하는 것인지 궁금할 수 있습니다. 일단 스토리보드가 개발자를 위해 제공된다는 점에서 이런 툴들이 개발자가 익숙한 것은 안닙니다.

 

게다가 피그마나 어도비 XD의 경우는 기본적으로 디자인 툴이기도 합니다. 피그마는 최근 기획을 위한 기능을 추가하기는 했지만, 기본은 디자인 툴이라는 점은 변하지 않습니다.

 

또한 이러한 툴들이 개발된 나라에서 나오는 최신 앱/웹 기획 방법론은 이런 툴의 사용을 지향하는 방향으로 흐르고 있기도 합니다. 

 

물론 수많은 개발자들이 서로 다른 곳에서 작업하는 경우는 프로젝트 관리 차원에서 필요할 수도 있겠지만, 앱/웹 개발을 위한 기획의 본질이 툴이 아니라는 점은 알 수 있습니다.

 

그렇다면 왜 기획자는 스토리보드를 작성하는 것이고, 요즘 들어 국내 개발 프로젝트에서 본질적으로 디자인 툴인 도구로 스토리보드를 작성하는 일이 늘어나고 있는 것일까요? 그리고 비용 규모가 있는 앱/웹 개발 프로젝트에서는 여전히 PPT 스토리보드를 유지하는 것일까요?

 

이에 대한 대답을 짧고 빠르게 정리해 보겠습니다.

 

 

앱과 웹 개발에서 스토리보드를 만드는 이유

이 부분을 이해하기 위해서는 앱 또는 웹 사이트가 기업에서 어떤 과정을 거쳐 개발하게 되는지 알아야 합니다.

 

일단 경영진의 사업 관련 의사결정이 있어야 합니다. 앱과 웹 사이트를 개발하고 운영하는 것은 기업 입장에서 상당한 투자 비용이 들어가는 의사 결정 사항입니다.

 

이러한 비용이 큰 결정은 기업의 미래 안정성에 위험이 될 수도 있습니다. 그러기 때문에 기업은 하나의 앱을 개발하는 것에 대해서도 상당한 조사와 경영 시뮬레이션 등을 통해 앱이 가져올 미래 수익을 추정합니다.

 

그래서 비용 투자 대비 충분한 매출이 예상되는 상황일 때 개발을 승인하게 됩니다.

 

• 앱/웹 관련 경영 의사 결정

지금까지 앱/웹 개발을 진행하기 위한 의사 결정에 앱/웹 개발과 관련된 정보는 상대적으로 미미하게 포함됩니다. 오리혀 재무적, 전략적 고려 요인의 영향이 큽니다.

 

한마디로 앱/웹을 개발할지, 말지 결정, 투자 비용에 대한 결정 등은 기술적 의사 결정이라기보다는 경영 의사 결정이라 할 수 있습니다.

 

• 경영 의사 결정 내용을 개발자가 이해할 수 있도록 인터프리터

경영자가 IT 기술을 온전히 다 이해하기 어려운 것처럼, 개발자도 경영 결정 사항을 온전히 다 이해하기 어렵습니다.

 

한 마디로 '그래서 어떤 앱/웹을 개발하라는 것인데?'라는 의문을 가질 수밖에 없습니다.

경영 의사 결정은 스마트폰 쇼핑 앱 시장에 진입하자는 형태로 이루어집니다. 하지만 개발자가 개발할 수 있는 쇼핑 앱은 수 십 가지가 넘습니다. 아무리 예산과 기간이 길어도 이 개발 가능한 스마트폰 쇼핑 앱을 아우르는 앱을 개발하는 것은 불가능합니다. 

 

그런데 경영 의사 결정의 이런 개발 요구는 대부분 제한된 비용 예산과 기간을 조건으로 합니다. 결국 구체적으로 어떤 앱/웹을 개발해야 하는가가 개발적으로 중요한 이슈가 되는 것입니다.

 

여기서 앱/웹 개발 프로젝트에 참여하는 기획자가 경영 언어를 개발 언어로 변경하는 작업을 하게 되는 것입니다. 이를 보통 스토리보드라 합니다.

 

스토리보드는 앱 또는 웹 사이트의 이용 흐름을 기반으로 작성되는 때문에 이렇게 이름 붙여졌다 할 수 있습니다.

 

다른 의견으로는 영화, 광고 등 이야기 흐름을 가지고 있는 콘텐츠를 개발할 때, 개발의 방향성을 잡기 위해 상황 이미지와 함께 설명을 곁들인 문서를 활용합니다. 이 문서를 스트리보드 또는 스토리북이라 합니다. 앱과 웹도 사용자의 이용 흐름이 있고, 화면을 통해 사용자의 기능의 사용이 이루어진다는 점에서 일종의 스토리 콘텐츠라 할 수 있습니다. 그래서 앱/웹 기획 문서를 스토리보드라 부른다는 의견도 있습니다.

 

물론 모두 제가 추정한 것이기는 합니다. 앱/웹 기획 방법론은 경험 기반 방법론 이외 학문적으로나 이론적 관점에서 정리된 것은 아직 찾지 못했습니다.

저 역시 마케팅, 경영 등의 학문에서 배운 기획 방법론을 바탕으로 과거 여러 앱/웹 개발 프로젝트 상황에서 겪었던 일을 참고로 앱/웹 기획 법을 정리하고 있는 것입니다.     

 

 

스토리보드를  PPT로 작업하는 이유

과거 앱이나 웹 화면의 모습을 용이하게 표현할 수 있는 문서 툴로는 PPT가 대중적이었습니다. 여기서 대중적의 의미는 기업 내에서 보고를 위한 활용이 용이하다는 의미이기도 합니다.

 

이런 생각을 할 수도 있을 것 같습니다. '그냥 화면을 디자인해서 PPT에 붙이면 되지 않느냐'입니다.

 

여기서 기획과 작업의 개념 구분이 등장합니다.

 

기획은 작업을 위한 전 과정입니다. 그런데 디자인해서 PPT에 붙인다는 것은 이미 작업을 했다는 것이 됩니다. 기획과 작업 전후가 뒤바뀐 것뿐 아니라 작업을 반복해야 하는 일이 생기에 굅니다. 문제는 이런 반복 비용이 매우 크다는 점입니다. 이는 마치 지도 없이 일단 산 정상에 올랐더니 그 산이 올라야 하는 산이 아니라서 내려와 다시 산을 오르는 것과 같습니다. 물론 두 번째 오른 산이 올라야 하는 산이라는 보장은 없습니다.

 

앱/웹 개발자를 크게는 프로그래머와 디자이너로 구분할 수 있습니다. 스토리보드는 프로그래머의 코딩뿐 아니라 디자이너가 디자인 개발 작업을 위한 가이드 문서입니다. 

 

프로그래머는 앱/웹 사업 기획을 바탕으로 바로 설계 후 코딩하고, 디자이너는 앱/웹 디자인을 진행할 수도 있습니다. 이를 위해서는 프로그래머와 디자이너가 어느 정도 기획 사고를 가지고 있어야 합니다. 그리고 이에 대한 정리도 해야 합니다. 

 

제가 찾아본 자료에 의하면, 해외에서는 국내와 같은 역할의 기획자는 없었습니다. 단지 앱/웹 사업 기획자, 온라인 마케팅 기획자가 우리와 같은 기획자 역할을 일정 부분 하고, 또 일부분은 개발자와 디자이너가 하고 있었습니다. 그래서 애플의 조나단 아이브 같은 디자이너도 나올 수 있는 것입니다. 

 

그런데 이 기획 작업이 코딩과 디자인과 또 다른 것이라는 점입니다. 때문에 프로그래머와 디자이너의 다른 종류의 업무가 늘어나게 됩니다. 국내 개발 여건 상 그렇다고 추가 보상이나 작업 기간을 늘려주는 것도 아닙니다. 

 

결국 쉽게 확인할 수 있으면서 기업 내 보고용으로 사용할 수 있는 문서 툴로 경영 의사 결정을 개발자가 개발할 수 있게 변환시켜 줄 사람이 필요했던 것입니다. 이는 상대적으로 기술이 약한 경영진, 기획력이 약한 개발자 입장에서 수고를 덜어 줄 수 있는 것이 됩니다.

 

반드시 PPT여야 하는 이유는 경영진에게 보고할 내부 보고용 산출물의 의미도 있습니다. 사장님이나 이사님에게 어도바나 피그마를 열고 확인하시라 할 수는 없기 때문입니다.

 

특히 대기업의 경우 수 십 페이지 보고서도 1~2장으로 요약해 보고해야 하는 상황에서 어도비나 피그마를 보라고 하는 것은 알 필요 없다고 사장이나 이사에게 통보하는 것과 같다고 봅니다.

 

일반적으로 보고 시 스토리보드는 첨부 자료이고 실제 보고 1~2장을 요약된 자료로 합니다. 여기에 추가로 메인 화면 디자인 한 장을 추가하여 경영진이 앱/웹을 직관적으로 이해할 수 있도록 보여주는 방식으로 이루어집니다.  

 

 

왜 디자인 툴이 스토리보드 작성 툴이 되었을까?

그런데 왜 최근 PPT가 아닌 피그마나 어도비 XD 같은 디자인 툴로 스토리보드를 작성하는 일이 늘어나는 것일까요?

 

그동안 많이 기획 툴로 사용되면 PPT는 어려 문제가 있었습니다. 몇 가지 PPT 스토리보드 문서 문제를 적어 보겠습니다.

 

• 수정 관리가 어려움
• 페이지가 많아질 때 개발할 내용을 확인하기 어려워 짐
• 화면과 서버에서 이루어지는 작업이 함께 정리되기 어려움
• 문서 복잡성으로 인해 앱/웹의 설계 자료로 이용하는 데 한계가 있음  

  

일단 생각나는 문제를 적어보면 위와 같습니다.

 

PPT는 기본적으로 오프라인 문서이면서, 페이지 단위로 작성되는 문서 툴입니다.

 

이러한 특성은 일부분 수정 사항에 대한 관리가 쉽지 않습니다. 기능이나 화면 연동/연결될 때 이를 설명하는 것도 페이지가 많아질수록 쉽지 않아 집니다. 앱/웹 화면에 많은 정보가 있거나 길게 내려오는 화면의 경우 PPT 표현은 한계가 있게 됩니다.

 

이에 반해 온라인 기반 디자인 툴은 아무리 복잡한 화면이라도 표현이 가능하며, 수정 관리도 용이합니다. 수정 내용이 작업과 함께 저장되기 때문입니다.

 

PPT의 특성상 기본적으로 많은 정보를 담는 것은 어렵습니다. PPT라는 툴이 간단한 화면으로 임팩트를 주는 프레젠테이션 툴이기 때문입니다. 그러므로 스토리보드와 같이 복잡한 화면 구성과 설명을 포함하는 문서를 만드는 것은 적합하지 않은 툴이기는 합니다.

 

그럼에도 PPT가 스토리보드 작성 툴로 활용되었던 것은 누구나 문서를 확인할 수 있다는 장점과 함께 산출물 제출의 용도 때문입니다.

 

• PPT는 대부분 기업 컴퓨터에는 MS 오피스가 깔려 있어 문서 확인 가능
• 어도비나 피그마 확인 시 라이선스 필요  
• PPT는 산출물 제출 시 문서 및 USB 저장 제출 용이
• 어도비나 피그마의 경우 출력 후 제출 시 A4 사이즈에 최적화되어 있지 않고, 이미지 저장으로 전달해야 함

 

위의 이런 점들이 그간 PPT가 스토리보드 기획 툴로 결정되는 이유였습니다.

 

그런데 만약 기획서를 오피스로 확인하지 않아도 된다와 굳이 출력해서 제출할 필요가 없다면, 또 굳이 PPT로 스토리보드를 작성할 이유는 없게 됩니다.

 

개발 자체만 보면 PPT 보다 온라인 기획 툴이 기획 내용의 공유와 수정 반영에 유리하기 때문입니다. 그런데 왜 굳이 엑슈어와 같은 기획 툴이 아니고 피그마나 어도비 XD 같은 디자인 툴인 가는 생각할 필요가 있습니다.

 

이 경우 디자인과 스토리보드의 구분이 거의 없게 됩니다.

 

실제 제가 기획서 정리를 위해 개발 기간 후반 투입된 프로젝트는 스토리보드는 완성되지 않았는데 디자인 화면은 다 나와 있었던 경우도 있었습니다. 기획 PL은 스토리보드를 디자인 파일을 복사하여 PPT에 붙여 작성하고 있기도 했습니다.

 

물론 고객은 기획서를 컨펌하고 디자인 컨펌을 진행하는데, 스토리보드 컨펌이 없었으므로 디자인 컨펌도 없는 상태였습니다. 저는 후반에 투입되어 스토리보드와 디자인, 코딩까지 거의 완료된 상태라 통보받고 기획서 정리를 위해 투입되었으므로 왜 이렇게 된 것인지는 알 수 없었습니다.

 

하지만 만약 고객이 어도비 XD나 피그마에 작성된 화면으로 스토리보드를 갈음하겠다고 하면 위의 케이스와 같은 문제는 없을 수도 있습니다.

 

그리고 스토리보드가 끝나는 순간 디자인도 끝날 수 있게 됩니다. 더하여 이렇게 작성된 파일을 조금만 추가 작업하면, 마치 실제 앱/웹이 작동하는 화면을 확인할 수도 있습니다.

 

물론 이렇게 작동되는 것은 서버 로직과 데이터 처리는 없지만, 고객 입장에서 화면과 클릭 시 이동을 실제 앱과 웹 사이트와 매우 유사하게 확인할 수 있게 됩니다. 그래서 이를 프로토타이핑 툴이라고도 합니다.

 

그런데 이것이 디자인과 다른 것이 무엇인가에 대한 의문은 남습니다.

 

앞서 해외 사례를 언급했든이 디자이너가 기획력을 갖추어 프로그래머가 작업할 내용을 여기에 정리해 놓았다면 문제가 없을 수도 있습니다. 그러나 대부분 이런 경우 디지인적 요인만 적용됩니다.

 

일부 이렇게 진행된 프로젝트에서는 화면 설계를 끝내고, 고객에게 컨펌받고 기획자들이 전부 철수한 후 개발자들이 들어와 코딩을 위해 스토리보드를 보고는 대부분 프로젝트를 떠났다고 합니다. 이 프로젝트를 담당했던 PM분에 저에게 하소연하기도 했습니다.

 

결국 스토리보드는 어떤 툴을 사용하는 것이 중요한 것이 아니라, 앱/웹 사업적 의사 결정 사항을 개발자(프로그래머, 디자이너)가 개발할 수 있게 변환 기획하여 전달하는 것이 1차로 중요합니다.

 

여기에 더해 수정 및 추가 개발 시, 기존 개발이 어떻게 되었는지 쉽게 파악할 수 있게 설계 내용이 들어 있으면 좋습니다.

 

그런데 특정 툴이 만들어지는 데는 그 이유가 분명히 있습니다. 그 툴도 개발을 통해 만들어졌고, 이때 툴의 목적성을 정리하는 기획이 있었을 것이기 때문입니다. 이는 마치 남자이면서 여자일 수 없고, 포유류이면서 파충류일 없는 것과 같습니다.

 

이를 기획에서는 처한 상황이 행동을 제한한다고 봅니다. 즉, 툴의 특성이 작업을 제한하게 되는 것입니다. 이를 넘어서기 위해서는 상당한 노력이 필요합니다.

 

물론 개발 프로젝트에서는 이런 노력 비용은 산정하지 않습니다. 그러므로 대부분 디자인 툴로 진행하는 기획은 디자인이 됩니다. 

 

그럼에도 바로 론칭될 앱/웹을 모습을 바로 확인할 수 있다는 매력이 디자인 툴로 기획하는 것을 자극하고 있지는 않을까 생각합니다.