본문 바로가기
앱기획 웹기획

앱과 웹 기획 시 분석, 설계와 화면 설계 차이

by 애플_피시 2024. 5. 23.

개발 프로젝트를 하다 보면 고급 경력자임에도 전체 앱/웹 분석/설계와 화면 설계를 구분하지 못하는 경우를 보게 됩니다. 이는 공정 단위 기획을 했을 뿐 전체 앱/웹 시스템의 기획을 해본 적이 없기 때문입니다. 이 때문에 화면 설계에 있는 설계라는 단어를 앱/웹 설계와 같은 것으로 인식하는 것입니다. 

 

 

 

앱과 웹 개발 공정 

 

앱과 웹의 개발이 진행되기 위해서는 의도한 앱/웹 관련 비즈니스에 적합한 사용자 경험을 형성할 수 있는 시스템이 먼저 정의되어야 합니다.

 

사용자는 앱 스토어와 인터넷에서 수많은 유사 앱과 웹 사이트를 만나게 됩니다. 이들 속에서 경쟁을 통해 더 나은 서비스를 제공할 수 있을 때 앱과 웹을 운영하는 기업은 돈을 벌게 될 것입니다. 

 

지금 시작되는 앱/웹 개발 프로젝트는 바로 기업이 돈을 벌기 위한 것이기에 비즈니스에 적합한 사용자 경험을 형성할 시스템이 먼저 정의되어야 하는 것입니다. 이에 대해서는 이 블로그의 여러 글에서 다루었습니다. 또한 시각화된 도표로 프로세스도 정리하였기에 이 글에서는 간단히 넘어가도록 하겠습니다.

 

목적한 앱/웹 시스템이 정의되면 개발적으로 이를 어떻게 구현할지 계획해야 합니다. 이를 앱/웹 분석/설계라 합니다. 그리고 이 분석/설계의 사용자 경험을 제공할 기능과 이 기능의 UI와 화면 구성을 정의하기 위한 기획자가 투입되기도 합니다.

 

여기서 투입되기도 한다고 한 것은 앱/웹 시스템에 특성상 흔히 기획자라 부르는 인력이 투입되는 것이 아닌 개발자 중 설계를 담당하는 인력이 분석/설계를 하기도 하기 때문입니다.

 

아무튼 이렇게 정리된 앱/웹의 분석/설계 내용은 해당 프로젝트가 개발해야 할 구체적인 앱과 웹의 내용이 됩니다. 이를 기반으로 어떻게 개발할지가 정해 집니다.

 

이 공정이 정확히 어디서 어디까지라고 분명하게 자르기는 어렵습니다. 프로젝트 설계/관리에 따라 앱/웹 시스템의 하드웨어적, 소프트웨어적 구성과 사용자 이용 구성으로 하기도 합니다. 또는 개발 프레임워크나 데이터 구조, 코딩 설계까지 포함시킬 수도 있습니다.

 

일반적으로 우리가 아는 개발자나 기획자 1차 대량 투입되는 시기는 이 분석/설계 다음 시기입니다. (물론 프로젝트 관리 설계에 따라 분석/설계와 해당 공정 과정은 섞일 수도 있습니다) 일반적으로 앱/웹 개발에서 기획자 역할의 인력은 이 시기에 대부분 투입됩니다. 

 

이후 진행되는 공정은 일반적으로 앱/웹 개발이라 부르는 공정에 해당합니다. 기능 설계를 하고 화면 설계를 하는 과정이 진행되는 것입니다.

 

이제 화면 설계라 부르는 기획 업무가 진행됩니다.

 

화면 설계 또한 설계 작업입니다. 그러나 전체 앱/웹 개발을 위한 분석/설계 과정 중 가장 마지막에 해당하는 공정의 설계 작업이라 할 수 있습니다.

 

그러기에 화면 설계가 끝나면 바로 코딩과 디자인, 퍼블리싱 작업이 진행됩니다. 그러기에 화면 설계 완료 시점을 기해서 2차 대량의 개발 인력이 투입되게 됩니다.    

 

이제 본격적인 개발이 진행되는 것입니다.

 

 

 

앱/웹 설계와 화면 설계 차이

 

앱과 웹 개발에 있어 설계 과정을 구분할 수 있는 단위 공정으로 구분하면 이해가 쉽습니다.

 

먼저, 화면 설계로 앱/웹을 개발할 수 있는가라는 질문을 통해 차이를 구분할 수 있습니다. 이는 다시 역기획 또는 벤치마킹 기획으로 기업이 앱/웹 비즈니스를 하는 목적을 달성할 수 있느냐에 대한 대답이 될 것입니다.

 

이 질문에 대한 저의 대답은 나중에 다른 글로 정리해 보고, 다음으로는 앱/웹 설계와 화면 설계를 위해서는 어떤 역량 차이가 있는지 바로 이야기하겠습니다. 이를 통해 각자가 답을 형성할 수 있을 것입니다.

 

 

 

앱/웹 설계를 위한 역량

 

앱/웹 설계를 위해서는 시스템 및 사용자 가치와 이를 형성하는 프로세스 로직(흔히 알고리즘이라고도 하는)에 대한 지식과 경험이 있어야 합니다.

   

앱/웹 시스템에 대한 지식과 경험을 직접적인 코딩이나 프로그래밍 언어 사용 능력과 바로 연결할 필요까지는 없습니다. 기획 측면에서는 협업 능력과 협업 경험이 더 중요합니다.

 

즉, 앱/웹 시스템에 대한 지식과 경험은 개발자와 앱/웹 개발을 함께 진행할 수 있는가에 대한 역량이라 할 수 있습니다.

 

앱/웹 사용자 가치와 이를 형성하는 프로세스 로직에 대한 지식과 경험은 한마디로 앱/웹에서의 UX 설계 및 형성 역량을 의미합니다.

 

앞의 글에서 알 수 있듯이 UX는 앱/웹 사용자 가치에 대한 기획을 의미하므로 사용자 인지 시스템과 수요/공급, 경쟁, 서비스에 대한 사용자 태도와 반응 기재 등에 대한 이해가 필요합니다

 

앱/웹 설계를 위한 기획 역량에 대하여 정리하면,

앱/웹 시스템 설계를 하는 기획자는 자신의 개발자와의 협업 경험과 지식을 바탕으로 해당 기업의 앱/웹 비즈니스 의도에 맞는 사용자 가치가 형성될 수 있는 시스템을 설계하는 작업을 할 수 있는 역량이 필요합니다.  

 

 

 

화면 설계를 위한 역량

 

일반적으로 화면 설계라 하면 사용자가 이용 시 보게 되는 앱과 웹 화면의 설계를 의미합니다. 이 화면을 앱/웹의 작동 측면에서 본다면 UI가 중요하게 됩니다. 그리고 화면을 사용자가 앱과 웹을 편하고 재밌게 이용할 수 있는 관점에서 본다면 내비게이션과 콘텐츠가 중요하게 됩니다.

 

화면 설계는 이 두 가지 측면을 고려하여 기획되게 됩니다.

 

이때 내비게이션 측면에서 IA/메뉴 작업이 진행되고, 콘텐츠 측면에서는 화면 구조나 피드백 내용 등을 고려하게 됩니다. 비슷한 앱/웹들의 카테고리가 서비스가 진행될수록 달라지는 것도, 같은 기능인데도 진행 시 사용자에게 보이는 피드백 내용이 다른 이유도 바로 이 기획의 차이 때문에 나타나는 것입니다.    

 

이에 반하여 UI는 앱/웹의 이용이라는 측면에서 기획됩니다. 때문에 앱/웹 디자인이나 트렌드 인식에 더 비중을 두고 평가되는 경향이 있습니다. 개인적으로는 여기에 서버와 인터페이스 되는 화면 컴포넌트에 대한 이해가 있다면 더 좋다고 생각합니다.

 

화면 설계를 위한 역량에 대해 정리하면,

  • 사용자와 앱/웹 정보에서의 편리한 이용을 위한 정보 카테고리화 능력과 화면 구성 능력 등 정보화에 대한 역량 
  • 사용자가 이용하는 앱/웹의 UI 구성 역량

이 두 가지의 교집합과 차집합이 있는 역량이 화면 기획을 위해 필요합니다.

 

화면 설계 역량에서 굳이 두 가지로 나눈 것이 이 두 역량이 잘하기 위한 근본적으로는 다른 기술적 베이스와 창의력 범위에 속하기 때문입니다. 보통 수준의 퍼포먼스를 바란다면 크게 구분할 필요한 없기는 합니다.  

 

 

 

앱/웹 설계와 화면 설계 차이 정리

 

지금까지 내용을 앱/웹 개발 프로젝트에서 기획자들이 자주 하는 UI/UX 개념으로 정리해 보겠습니다.

 

앱/웹 설계는 기업이 비즈니스를 통해 수익을 올리기 위한 앱/웹 시스템 개발을 위해 진행됩니다. 기획자는 여기서 수익성 있는 사용자 경험이 이루어질 앱/웹 설계를 담당합니다. 이를 UX(유저/사용자 경험)라고 합니다. 

 

화면 설계는 이 앱/웹 시스템에서 사용자와 접하는 부분의 설계를 의미합니다. 사용자라는 지점에서 UX를 위한 앱/웹의 이용 방식/방법이 적용되어야 합니다. 이를 넓은 의미의 UI(유저/사용자 인터페이스)라고 합니다. (UI는 한쪽으로는 사용자와 접하지만, 다른 한쪽은 서버와도 접해 있습니다. 그래서 화면 설계가 됩니다) 

 

즉, UX는 가치라는 추상적 대상에 대한 앱/웹 기획을 의미하고, UI는 디자인이나 화면 컴포넌트라는 명확한 대상에 대한 앱/웹 기획을 의미하는 것입니다. 

 

앱/웹 개발자(여기서는 좁은 의미로 프로그래머나 코더만을 지칭)가 아닌 기획자의 경우 앱/웹 비즈니스 목적을 달성할 수 있는 앱/웹에서의 추상적 UX의 기획을 합니다. 이를 앱/웹 시스템과 연결시켜서 이 추상성이 수익성이 될 수 있도록 기획/설계하는 것입니다.

 

앱/웹 기획자가 설계를 통해 UX를 시스템과 연결하면, 화면 설계 기획자는 이를 더 구체적으로 사용자와 인터페이스 되는 사항으로 발전시킵니다. 

    

 

댓글