화면정의서는 어떤 문서이고 어떻게 작성할 것인가?

화면정의서에서 중요한 것은 문서 양식이 아니고 어디에, 어떻게 쓸 것인가에 적합하게 작성되었느냐입니다. 그러므로 화면정의서를 작성하기 전에 그 쓰임과 용도를 확인할  필요가 있습니다. 우리는 먼저 가장 일반적인 화면정의서 용도를 정의한 후 글을 이어가도록 하겠습니다.

일반적인 화면정의서 용도

 

화면정의서라는 이름 같이 개발할 화면을 정의하는 용도의 문서가 화면정의서입니다. 그러나 화면을 정의하는 문서 중에는 와이어프레임 및 스토리보드 등도 있습니다. 이중 화면 설계서라고 하면 보통은 스토리보드를 지칭하고는 합니다.

 

그리고 화면과 관련한 문서 중에는 IA가 있습니다. 인포메이션 아키텍처로 화면 구조를 통해 개발될 앱 또는 웹의 사용자 뷰 또는 이용 경로 등을 한눈에 보기 좋게 정리한 문서라 할 수 있습니다.

 

화면정의서는 IA와 유사하게 보일 수도 있지만 좀 더 상세합니다. IA가 카테고리 중심으로 정리되어 설명되어 있다면 화면정의서는 이 카테고리에 붙은 각 화면들과 이 화면들의 특징 및 구성에 대한 정보가 모두 들어가 있습니다.

 

한 마디로 화면정의서는 개발될 앱/웹의 모든 화면을 사용자가 어떻게 도달하게 되고, 그 화면이 어떤 정보 또는 기능을 담당하고 있는지를 정리한 문서라 할 수 있는 것입니다.

 

이 화면정의서를 기준으로 각 화면의 세부 구조를 정리한 문서가 와이어프레임입니다. 각 와이어프레임 화면을 화면정의서의 연결구조에 맞추어 정리하게 되면 사용자의 앱/웹 이용 경로가 정리되게 됩니다. 하지만 아직 와이어프레임은 구조 또는 기능, 그리고 배치 등의 화면에 대해 세밀하지는 않은 대략적인 모습을 가지고 있게 됩니다. 그래서 와이어프레임을 화면설계서라고 하지는 않습니다.

  

IA, 화면정의서, 와이어프레임까지 작성했다면 전체 앱/웹의 화면 구조와 내용, 주요 화면의 대략 구조에 대한 설계가 완성된 것입니다. 이를 기반으로 화면설계서인 스토리보드를 작업하게 됩니다.

 

앱 웹 서비스 개발 기획 산출물 정리

 

 

 

화면정의서 작성 방법

 

일반적으로 화면정의서는 댑스 기반 트리구조로 작성됩니다. 트리는 뿌리에서 줄기, 나뭇잎에 이르는 단계를 댑스로 표시합니다. 그리고 각 줄기에 붙어있는 나뭇잎이 앱/웹의 화면에 해당하게 됩니다.

 

화면정의서는 모든 앱과 웹의 화면의 경로를 표시하고 그 화면의 주요한 내용을 적어 완성합니다. 경로만 보면 내비게이션이 되고, 화면 내용만 보면 화면을 설계할 때 기준이 되는 내용들이 들어 있게 됩니다.

 

그러나 이러한 내용이 문자로만 이루어져 있다는 것이 정보 전달의 한계로 작용하기도 합니다. 그래서 이를 보완하기 위해 와이어프레임을 작성하는 것입니다.

 

그럼 이런 작업을 바로 스토리보드로 하면 되지 않느냐는 생각을 할 수 있을 것 같습니다. 물론 구조가 간단한 앱/웹의 경우 바로 스토리보드 작업을 해도 문제가 되지 않습니다. 오히려 업무 시간은 단축할 수 있을 것입니다. 그러나 복잡한 앱/웹의 경우 상당히 비효율적 결과를 가져오게 됩니다.

 

그 이유는 사람의 사고 특성 때문입니다.

 

스토리보드는 각 화면을 세부적으로 정리하면서 진해되는 문서입니다. 그러므로 스트로보드 한 장에 많은 정보를 담게 됩니다. 그리고 스토리보드를 만드는 데 사용되는 툴인 마이크로소프트의 오피스 파워포인트는 특정 장면 중심의 표현 툴입니다. 그리고 최근 많이 사용되는 피그마는 근본적으로 디자인 툴입니다. 그러므로 일정 연결성을 지원하기는 하지만 장면 중심이 될 수밖에 없습니다. 아니 사용자의 인지 시스템의 작용이 장면에 포커스 될 수밖에 없는 툴인 것입니다.

 

이런 이유로 복잡한 앱/웹의 경우 바로 스토리보드 작업을 할 경우 개발 화면은 섬세하게 작업될 수 있지만, 각 화면들의 연결과 내비게이션의 연결성은 부실해질 수 있습니다.

 

이를 보완하기 위해 스토리보드 작업 전에 화면정의서가 작성되는 것입니다. 그렇다면 화면정의서는 사용자가 이용할 최종 화면의 내비게이션과 각 화면의 연결 구조에 대한 정보를 한눈에 보일 수 있도록 작성되어야 한다는 사실을 알 수 있게 됩니다.  

 

 

 

화면정의서는 꼭 필요할까?

 

개인적으로 MVP 개발이나 애자일/린 개발의 경우 화면정의서가 반드시 필요하지는 않다고 생각합니다. 그러나 일반적인 SI, 웹에이전시 등 외주 개발사가 투입되는 30억 이상 앱/웹 개발 프로젝트의 경우 화면정의서를 작성하는 것이 좋다고 생각합니다. 

 

보통 화면정의서는 IA를 잡으면서 진행됩니다. 그리고 와이프레임 작업과 함께 진행하면 도움이 많이 될 것입니다. 

 

이유는 개발할 앱/웹이 복잡하기 때문입니다.

 

흔히 계획도시에서 길을 찾는 경우와 옛날 도시에서 길을 찾는 것의 차이라 할 수 있습니다. 계획도시의 경우 여행자가 목적지를 찾아가는 것이 쉽습니다. 그러나 자연 형성 및 확장되어 온 옛날 도시의 길이 복잡하고 작은 길과 샛길이 많아 목적지를 찾아가기 어려운 경우가 많습니다. 

 

IA와 화면정의서는 복잡한 앱/웹의 쉬운 길 찾기 지도 같은 것이라 할 수 있습니다. 이는 사용자가 앱/웹을 이용할 때뿐 아니라 개발을 할 때도 적용됩니다.