앱이나 웹 개발 과정 중 기획 단계에서 화면 설계가 마지막인 이유

실무에서 가장 많은 기획자 유형은 화면 설계 기획자입니다. 구조적 이유에 대해서는 여러 번 이야기를 했으므로 여기서는 이 화면 설계가 전체 앱/웹 기획 설계 과정 중 가장 마지막 단계인 이유에 대해서만 설명하겠습니다. 이 이유는 제 경험과 프로젝트 진행 사항을 분석한 것에 바탕을 둔 것입니다.

 

 

 

화면 설계란?

 

스마트폰 앱이나 웹 사이트의 사용자가 보게 될 부분을 설계하는 것을 화면 설계라 부릅니다. 그러므로 기본적으로 화면 설계는 사용자 이용 중심으로 설계/기획됩니다. 

 

이런 이유로 UI 설계/기획이라고 하기도 합니다. 하지만 프로젝트에서 화면 설계가 개발에 이용되는 과정을 볼 때는 UI를 포함한 개발될 앱과 웹의 이용되는 전체 화면을 설계하는 것이라 하는 것이 더 적절할 것 같습니다.

 

화면 설계는 향후 사용자가 이용할 앱/웹 전체 화면에 대한 것이라는 점에서 IA(메뉴)를 기준으로 연결되는 화면들을 나열하고 설계/기획 되게 됩니다. 그리고 앱/웹 개발 후 보이는 실제 화면과 기획/설계 화면은 1대 1로 대응되게 됩니다.

 

 

 

화면 설계의 앱/웹 개발에서 포지션

 

화면 설계는 기획자가 앞으로 개발 완료된 후 앱과 웹을 이용할 사용자가 보게 될 화면을 기획/설계하는 것이라 했습니다. 

 

이 설계 개념을 좁게 보면 사용자가 이용하게 될 화면의 UI와 구성 등을 기획하는 것이 됩니다. 이 경우 디자인/퍼블리싱적으로 유용하나, 프런트 개발적으로는 제한적 설계가 됩니다.

 

사용자와 상호 작용(인터페이스) 내용은 정의될 수 있지만, 서버와 상호 작용(인터페이스) 내용은 부실할 수 있기 때문입니다. 

 

이로 인해 화면 설계만을 기준으로 개발된 형태는 목업 앱/웹에 가깝습니다. 실제로 화면 설계를 프로토타이핑/목업 툴에서 작업하는 이유도 여기에 있다 생각합니다.

 

이 목업/프로토타이핑 앱/웹은 서버에서의 작동이 개발되기 전 미리 사용자가 이용하게 될 앱/웹의 화면 모습을 체크하는데 활용됩니다. 이를 통해 UI나 화면 컴포넌트, 구성(메뉴를 포함한), 이용 흐름에 대한 검토를 할 수 있게 됩니다.

 

시간 된 충분하다면 기능 프로세스 및 정의를 프로토타이핑/목업 툴에 추가하여 UI 뿐 아니라 UX적 측면을 미리 검토할 수 있습니다.

 

문제는 제목에서처럼 화면 설계가 앱/웹 프로젝트의 가장 마지막 작업이라는 사실입니다. 

 

실질적으로 프로토타이핑/목업 앱/웹이 아니더라도 기능 프로세스 및 정의를 검토할 수 있는 방법은 있습니다. 이러한 작업이 바로 앞 단계의 기획/설계입니다.

 

그리고 서버와 상호 작용(인터페이스) 설계 없이 화면 설계만으로 개발이 진행될 수 있는 이유는 앞 단계에서 기획/설계 자료가 있기 때문입니다.

 

반대로 없다면 개발적으로 작동되는 앱과 웹은 어려워질 것입니다.

 

 

 

개발 측면의 화면 설계

 

앱/웹 개발 시 원하는 것은 작동되는 앱과 웹입니다. 그러나 일반인 또는 사업가 등 대부분은 앱이나 웹이 작동되는 코드를 알지 못합니다. 이런 이유로 개발 진행 사항과 내용을 눈으로 확인할 수 있는 디자인적 측면으로 나타내게 됩니다.

 

바로 이 문서가 화면 설계서인 것입니다.

 

화면 설계서는 실제 앱/웹의 디자인이 적용되기 전에 문서화 한 개발될 앱과 웹에 대해 코드를 몰라도 직관적으로 알 수 있게 디자인적으로 표현된 문서인 것입니다.

 

이런 이유로 화면 설계서는 주로 디자이너나 퍼블리셔, 제한적으로 프런트 개발자가 활용하게 됩니다.

 

서버 개발자도 개발에 이용할 수는 있겠으나 이를 위해서는 인터페이스 정의와 관련한 내용과 기능 정의와 관련한 자료가 추가되어 있어야 합니다. 물론 복잡하지 않은 앱과 웹의 경우 이런 문서 없이 일반적인 인터페이스 또는 기능 정의를 바탕으로 연동을 추정하여 개발할 수는 있습니다.

 

현재 국내에서 화면 설계 시 어도비 대항 웹 디자인 툴인 피그마를 종종 작업 툴로 선정하는 이유가 여기에 있는 것입니다.

 

그러므로 복잡한 앱/웹 개발의 경우 화면 설계를 바탕으로 개발자는 개발 설계를 해야 온전한 개발을 할 수 있게 됩니다.

 

여기서 또 문제는 개발자가 개발 설계를 할 때 앱/웹 비즈니스/서비스적인 정책/기능, 프로세스 등에 대한 정의를 바탕으로 해야 온전한 목적한 앱과 웹에 타당한 개발 설계가 가능하다는 것입니다.  

 

원칙적으로 개발자가 하는 개발 설계는 정해진 앱과 웹을 개발 위한 목적의 개발 설계입니다. 설계라는 같은 단어가 붙어 있어도 앱/웹 개발 단계에서 서로 다른 설계인 것입니다.

 

이는 화면 설계, 개발 설계와 또 다른 앱과 웹 개발 시 설계를 의미합니다.

 

이 과정의 기획 작업은 주로 분석/설계라 합니다. 이는 어떤 앱/웹 개발 해야 할지 파악하여 정의하는 작업을 의미합니다. 이때 흔히 말하는 비즈니스적으로 구현하려는 앱/웹 사용자 경험의 내용과 과정을 설계하게 됩니다. 그리고 여기에 앱/웹 정책과 정의들이 붙어서 개발 지향점인 앱과 웹이 확정됩니다. 

 

이 확정된 앱/웹의 화면 부분을 설계하는 것이 화면 설계입니다. 개발자는 이 확정된 기획 자료와 화면 설계서를 바탕으로 개발을 하게 됩니다.

 

특히 사용자에게 보일, 실제로는 외주 개발 시 고객에서 미리 보여 줄 앱과 웹의 모습을 개발하고, 확정되면 서비스와 연동 완료 합니다.