앱, 웹 스토리보드를 작성하는 두 가지 방법

앱이나 웹을 개발할 때 가장 먼저 스토리보드를 작성합니다. 이러한 작업을 화면 설계라고 합니다. 화면 설계는 앱/웹을 개발하기 위한 설계의 한 부류이면서, 어떤 앱/웹을 개발할지에 대한 것을 최종 사용자 관점에서 정리한다는 점에서 의의가 있습니다.

 

 

스토리보드 작업의 의미

 

스토리보드, 즉 화면 설계는 개발할 수 있는 여러 앱/웹 중 지금 프로젝트 팀이 개발해야 하는 앱/웹을 특정하는 역할을 합니다. 

 

지금 우리가 어떤 앱/웹을 개발해야 하는지 투입된 개발자들에게 구체적으로 알려줍니다. 그리고 이는 최종 사용자 관점에서 이야기합니다. 그래서 여러 앱/웹 설계 작업 중 화면 설계에는 항상 UI/UX라는 말이 따라붙게 되는 것입니다.

 

은행 앱 또는 쇼핑 앱을 사용하다 보면 사용하는 기능이 비슷하다는 것을 느끼실 것입니다. 그렇다고 서로 다른 은행 앱, 쇼핑 앱이 모두 같다고 느껴지시지는 않을 것입니다. 바로 각 앱의 이용 방법, 이용 시 느낌(경험)의 차이는 개발되는 디테일의 차이에서 발생하는 것입니다.

 

이 개발 디테일의 차이를 사용자 관점에서 정리한 문서가 바로 스토리보드라 할 수 있는 것입니다.

 

 

화면 정의에서 시작되는 화면 중심 스토리보드 작성

 

화면 설계라는 말에서 알 수 있듯이 대표적인 스토리보드 작성 방법은 개발해야 할 앱/웹의 화면을 중심으로 스토리보드를 구성하는 것입니다.

 

앱/웹 개발에서 뿐 아니라 흐름이 있는 콘텐츠를 개발할 때 스토리보드는 활용됩니다. 단지 개발해야 할 콘텐츠가 어떤 종류이냐에 따라 구체적인 스토리보드 양식이 달라지는 것일 뿐입니다.

 

앱이나 웹을 사용자의 반응이 즉각적으로 나타나는 인터렉티브 콘텐츠라고 한다면, 앱/웹의 화면은 사용자가 인터렉티브 콘텐츠를 즐기는 윈도우가 됩니다. 이 화면을 통해 앱/웹을 작동하는 방법을 정의한 것을 UI라 할 수 있고, 각 화면을 즐기면서 받게 되는 느낌의 방향성 유도를 정의하는 것을 UX라 할 수 있습니다.

 

이렇게 직접적인 앱/웹 화면을 토대로 스토리보드를 작성하는 방법은 개발될 전체 앱/웹의 화면을 모두 표현한다는 점에서 의미가 있습니다. 

 

스토리보드 만으로 전체 앱/웹의 화면 구조와 구성을 파악할 수 있게 되는 것입니다.

 

하지만 화면 중심 스토리보드 작성 방법은 앱/웹의 화면 구성이 복잡할 때 사람의 뇌의 연산 한계로 인해 표현의 한계를 가지게 됩니다. 또한 화면에서 화면으로 전환되는데 필요한 서버 연산은 표현되지 않는다는 한계도 있습니다.

 

그러므로 화면 중심 스토리보드에서는 화면과 화면을 이어주는 서버 연산 설계를 할 개발자의 역할이 앱/웹 개발에 중요하니다.

 

그리고 개발자의 이 작업 또한 화면이 많은 복잡한 앱/웹에서는 파악의 어려움이 형성될 수 있습니다.

 

 

기능 정의에서 시작되는 사용자 플로우 중심 스토리보드 작성

 

물론 이 스토리보드 작성에는 기능 정의 외에 프로세스 설계가 있어야 효율성이 높아지기는 합니다.

 

그런데 보통 요구 사항 또는 요건 정리에서 기능 정의는 뽑아질 수 있지만, 프로세스 설계가 작성되기에는 한계가 있는 것이 사실입니다. 그래서 많은 경우 프로세스 설계는 개발자가 하기도 합니다.

 

여기서도 문제는 있습니다. 앞서 제목에서도 알 수 있듯이 이 스토리보드 사용자 플로우 중심입니다. 그러므로 이 스토리보드 작성에서 필요한 프로세스는 비즈니스 로직에 해당합니다. 그러나 개발자가 작성하는 프로세스는 연산 처리 로직에 가깝습니다.

 

이 때문에 개발자가 작성하는 프로세스 설계를 통한 스토리보드 작성은 한계가 있습니다.

 

보통의 경우 이 스토리보드를 통한 개발은 비즈니스 또는 UX 플로우가 작성되면, 이를 바탕으로 개발자가 이 플로우를 구현한 연산 플로우(로직)를 설계하고 이에 따라 코딩하는 형식으로 진행됩니다.

 

더해서 기능 플로우 중심 스토리보드는 개발자가 이해하기 상대적으로 좋다는 장점에도 불구, 앱/웹의 전체 화면이 실제 사용자가 이용할 앱/웹처럼 표현은 안된다는 한계도 있습니다.

 

아이러니하지만 사용자 플로우를 기반으로 해서, 실제 개발 완료된 앱/웹 화면 구성과는 표현 형태가 달라질 수 있게 되는 것입니다.

 

그래서 이를 보완하기 위해 화면 정의서에 스토리보드 작성 화면을 표시하게 됩니다. 

 

실제 개발된 앱/웹 화면은 화면 정의서를 통해 확인하고, 또 특별한 기능은 없지만 앱/웹에 포함되는 화면이 스토리보드에 빠지지 않게 크로스 체크하는 것입니다.