앱과 웹 기획 화면 정의서와 스토리보드 작성 방법

일반적으로 앱과 웹 개발을 위한 스토리보드는 메뉴와 메뉴에 달리는 화면들로 작성되고는 합니다. 이때 수 십 페이지에서 수백 페이지에 달하는 페이지를 직접 작업하는 경우 기획자는 개별 화면의 연결이나 구성이 헷갈리게 됩니다. 이는 스토리보드 흐름의 오류를 발생시킵니다. 화면 정의서는 이를 방지해 줍니다.

 

 

기획에서 화면 정의 역할

앱이나 웹 사이트를 개발하는데 화면 정의는 IA를 기준으로 각 메뉴에 속하는 화면들을 한눈에 파악할 수 있게 정리하는 문서를 의미합니다. 

 

아래의 그림과 같이 화면 정의는 실제 사용자가 이용하게 될 앱/웹 화면의 구성을 나타납니다. 그리고 이 화면들을 어떻게 개발할 지에 대한 간단한 예시입니다.

 

화면 정의서와 웹 사이트 화면 예시

 

위의 그림에서 알 수 있듯이 화면 정의서는 실제 개발하여 사용자가 이용하게 될 앱/웹 화면 구조를 나타냅니다. 여기에 사용자가 이용하게 될 화면의 기능과 구조, UI 등 화면 설계에 필요한 주요 정보를 기입합니다.

 

이러한 화면 구조와 화면 정보는 요구 사항에 기반해야 합니다. 요구 사항에 없는 사항이 화면 구성을 위해 필요한 경우 고객에게 요청하여 협의를 진행합니다.

 

종종 일부 기획자는 화면 정의를 기획자 개인적 취향을 바탕으로 하는 경우가 있습니다. 이렇게 해서는 안됩니다. 이는 화면 정의를 디자인적 창의성과 착각하기 때문입니다. 그리고 앱/웹 기획을 요구 사항 기반 설계가 아니라 개인적 작업으로 인식하고 있기 때문입니다.

 

화면 정의는 디자인이 아닙니다. 철저히 객관적으로 요구 사항을 바탕으로 앱/웹 화면 구조를 정리하고, 각 메뉴에 종속되는 화면의 내용을 정리해야 합니다. 

 

추후 화면 정의를 바탕으로 정리되는 스토리보드를 보고 디자이너가 독창적이고 차별적이면서 세련된 화면의 모습을 뽑아낼 것입니다. 기획자는 이런 디자이너 작업에 필요한 정보를 제공하는 역할입니다.

 

    

화면 정의와 스토리보드

화면 정의서를 통해 개발되어야 할 앱/웹의 모든 화면을 한눈에 볼 수 있기는 하지만, 이 성질 때문에 화면에 대한 세부 정보를 다 담기에는 한계가 있습니다.

 

반대로 스토리보드는 전체 앱/웹의 구조를 한눈에 볼 수 없지만 각 세부 화면에 대한 많은 정보를 담고 있습니다. 스토리보드 역시 이 성질 때문에 문제가 발생합니다. 작업을 하다 보면 기획자가 앱/웹 화면 흐름(스토리)의 길을 잃게 되는 것입니다.

 

이는 마치 울창한 숲을 지나는 방법을 지도로 보거나 헬리콥터를 타고 하늘에서 보면 간단해 보이지만, 실제 숲 속에서 산길을 걷다 보면 쉽게 방향 감각을 상실하게 되고 길을 잃는 현상과 비슷합니다.

 

위의 두 현상은 뇌의 몰입 및 주의라는 작동으로 이론적 설명이 가능합니다. 

 

그러므로 결론은 커다란 앱/웹이라는 숲을 스토리보드라는 앱과 웹의 스토리(메뉴의 길)를 기획자가 이동하는데 화면 정의라는 지도가 필요하다 하다 말할 수 있는 것입니다.

 

이런 이유로 스토리보드는 화면 정의서와 매칭되게 작업합니다. 이에 대한 예시 화면은 아래와 같습니다.

 

스토리보드 작성 예시

 

위 앱/웹 스토리보드 예시에서 상단 빨간 테두리 영역이 화면 정의서와 연결되는 부분을 표시한 것입니다. 여기서 화면 경로는 어떤 경로를 거쳐 스토리보드를 작성해야 할 화면이 나타나는지 표시하는 항목입니다. 그 옆의 화면 번호는 화면 정의서에 표시되는 화면 번호를 의미합니다.

 

이런 과정으로 앱/웹 기획을 진행하다 보면, 화면이 빠지거나 화면과 화면의 연결이 부실해지는 현상을 방지할 수 있습니다. 화면 정의서를 바탕으로 스토리보드를 작성하게 되므로 작업 시간을 단축할 수 있습니다. 또한 초급 기획자도 쉽게 질 높은 스토리보드 작성이 가능하게 됩니다.

 

 

화면 정의 기반 스토리보드의 한계

세상 모든 일이 그렀듯 화면 정의 기반 스토리보드 작성이 확실한 장점이 있는 반면 한계도 분명합니다. 화면 정의 기반 스토리보드는 크게 2개의 특성을 가지고 있습니다.

 

• 앱/웹 사용자의 이용 화면을 표현한다
• 디자인 공수를 확인하기 쉽다

   

이러한 사용자 이용 화면을 표현한다는 특성은 사용자가 앱/웹 화면을 이용할 때 서버에서 작동되는 로직에 대한 부실로 이어질 수 있습니다.

 

또한 디자인 공수를 파악하지 쉽다는 특징은 개발 공수는 파악하기 어렵다는 문제를 야기할 수 있습니다. 디자인적으로 간단한 화면도 기능 개발 측면에서는 복잡할 수 있기 때문입니다. 화면 정의 기반 스토리보드는 코딩과 처리에 대한 설명이 부족할 수 있습니다.

 

그러므로 보통 화면 정의 기반 스토리보드는 기능 개발 공수는 적으나 화면 구조와 구성이 중요한 앱/웹 개발 프로젝트나, 일부 핵심 기능을 기반으로 사용자 뷰를 통한 이용 촉진을 유도하는 프로젝트에 효과적입니다.

 

다수의 기능과 개발해야 하는 기능 자체가 복잡하다면 화면 정의 기반 스토리보드로는 개발에 한계가 있을 수 있습니다.

 

특히 요즘 앱/웹 개발이 자체에서 처리하는 로직뿐이 아니라 API를 통해 외부 시스템과 연동해서 로직을 처리하는 작업을 해야 하는 경우도 많기 때문에 이에 대한 보완 문서도 추가로 필요합니다.