설계 패턴이란?
프로그래밍에서 패턴이라는 용어는 각종 소프트웨어 및 시스템을 구축하면서 직면했던 주요 문제점들의 해결책으로서의 설계 방식들을 유형별로 정리해 둔 것입니다.
다시 말해, 소프트웨어 개발의 주요 목적인 현실세계의 다양한 문제점들을 해결하기 위한 한 가지 수단으로서, 각종 소프트웨어 개발 작업이나, 프로젝트들을 진행 할 때 직면 할 수 있었던 크고 작은 문제점들 중에서 대표적이면서도 비슷한 문제점들에 대한 해결 방법들을 정리해 둔 것인데요, 이렇게 정리된 각종 해결 방안들은 이후의 개발 세대에 있어 시행 착오를 덜 하고, 유사한 문제점들을 보다 정확하면서도 간단하게 해결할 수 있는 방법론으로 사용되고 있습니다.
소프트웨어 업계에서 사용되는 일종의 처방전으로 비유할 수 있으면서도, 다양한 업종에서 사용되는 사고 대응 및 문제 해결을 위한 지침서로 볼 수 있습니다.
UI 디자인 패턴.
간단하게 제작된 웹 사이트로 예를 들면, 내부적으로는 웹 브라우저의 화면 (HTML) 을 통해 사용자가 어떠한 데이터를 입력하면 해당 데이터는 인터넷 망을 통해 서버라는 웹 서버 안의 소프트웨어에 전달되고, 웹 서버의 각종 웹 앱의 특정 웹 페이지 혹은 컨트롤러를 통해 전달된 데이터가 최종적으로 데이터베이스 (Database) 에 저장되고 관리되어 집니다. 상기 프로세스에서 사용자와 직접적으로 소통하는 주체는 웹 브라우저 (Web-browser) 내의 웹 페이지 (HTML) 입니다.
사용자와 직접 상호작용하며 데이터를 입력받거나, 데이터베이스 (Database) 단으로부터 가져온 데이터를 표시해서 확인할 수 있게 해 주면서도 다양한 UI 를 제어함으로서, 사용자와 직접 상호 작용하는 부분들을 보통 UI (User Interface) 또는 UX (User Experience) 라고 합니다.
개발과 관련한 다양한 계층 중에서도 UI 계층에 집중되어 UI 를 개발할 때 보다 효율적으로 개발할 수 있도록 각종 UI 설계 방식들을 정리해 둔 문서나 자료를 일반적으로는 UI 설계 패턴, 즉 UI 디자인 패턴 이라 합니다.
주요 UI 디자인 패턴
주요 UI Design Pattern 에 사용되는 MVVM, MVC, MVP 방식의 UI 디자인 패턴들에 대해 알아보고 각 패턴들이 어떠한 장단점들을 가지고 있는지에 대해 알아봅시다. 그리고 각각의 UI Pattern 들이 실질적으로 근래의 어떠한 UI 기술들과 어우러져 함께 사용되고 있는지도 함께 분석해보도록 하겠습니다.
MVVM (Model, View, View Model) UI 패턴
Model
데이터의 구조를 표현하고, 데이터의 전달과 처리를 담당하는 영역으로 구성되어 있습니다.
MVVM 패턴 구현에 ORM (Object Relation Mapping) 기술이 주로 활용됩니다.
Presenter (프레젠터) 단에서 주로 호출되며 데이터베이스 (Database) 를 주로 관리합니다.
View
UI (User Interface, 화면의 구성) 을 표현합니다.
UI 내 각종 요소를 통해 사용자와 상호작용 합니다.
View Model 과의 느슨한 결합을 통해 데이터를 표현합니다.
View Model
View 와 더불어 View Model 과 데이터 바인딩을 통해 상호 상태 변경을 인식하고 데이터를 자동 갱신합니다.
데이터 바인딩 구조를 통해 사용자와의 상호작용으로 View 의 내용이 바뀌면 바인딩된 데이터 소스인 View Model 의 데이터가 자동으로 변경되고 View Model 데이터 소스가 변경되면 자동으로 바인딩된 View 의 값이 변경됩니다.
데이터 바인딩 기술로 인한 UI 요소에 대한 데이터 처리 코딩량이 획기적으로 감소함으로서, 개발 생산성이 향상됩니다.
정리
장점
View 가 Model 및 View Model 의 의존성에서 완전히 벗어날 수 있습니다.
다양한 View 에서의 코드 재사용이 가능합니다.
UI 레이어 개발 생산성이 좋아질 수 있습니다.
단점
MVVM 패턴에 대한 이해가 필요하며, ViewModel 설계 능력도 필요합니다.
적용분야
최근 MVVM 패턴을 지원하는 다양한 앱 개발 분야가 꾸준히 늘어나고 있는 추세입니다.
Windows Desktop : WPF (MVVM), UWP
Web Front-end Frameworks : React.JS, Vue.JS, Angular.JS
Mobile : Xamarin, React Native, Swift for iOS, Kotlin for Android
MVC (Model, View, Controller) UI 패턴
Model
데이터 구조 표현 및 데이터의 전달과 처리를 담당하는 영역으로 구성됩니다.
ORM (Object Relation Mapping) 기술이 주로 활용됩니다.
컨트롤러 단에서 주로 호출되며 데이터베이스 (Database) 를 주로 관리합니다.
View
UI (User Interface) 화면을 표현합니다.
UI 내 각종 요소를 통해 사용자와 상호작용 합니다.
컨트롤러 (Controller) 에 의해 호출되며, 호출될 경우 데이터가 포함된 모델을 전달받습니다.
컨트롤러 (Controller) 에 의해 호출된 View 는 직접적으로 사용자에게 전달되거나, 또는 컨트롤러에 의해 호출될 경우 전달받은 데이터 모델을 기반으로 View 엔진 기술을 이용해 화면요소를 변경한 후 해당 결과를 사용자에게 전달합니다.
Controller
라우팅 (Routing) 기술을 통해 사용자 요청 및 응답을 주로 처리합니다.
Model 과 View 를 제어하여 데이터 (JSON, XML) 또는 View (HTML, ETC) 를 사용자에게 전달합니다.
정리
장점
UI 패턴 중에서도 가장 쉽게 구현할 수 있습니다.
단점
View 와 Model 간의 의존성이 크고 UI 쪽 로직이 복잡하게 구현되어야 하는 경우에는 적절하지 않은 방식입니다.
적용 분야
대부분의 현대적 웹 앱 혹은 데스크톱 앱 개발 시 관련 개발 언어와 개발 프레임워크 환경에서 지원됩니다.
Windows Desktop 개발 기술 : WinForm
C# ASP.NET MVC 5 Framework, JAVA Spring MVC Framework
Python Django / Flask Framework
PHP7 Laravel / Codelgniter Framework
Node.js Express Framework
MVP (Model, View, Presenter) UI 패턴
Model
데이터 구조 표현 및 데이터의 전달과 처리를 담당하는 영역으로 이루어져 있습니다.
ORM (Object Relation Mapping) 기술이 주로 활용됩니다.
프레젠터 (Presenter) 단에서 주로 호출되며, 데이터베이스 (Database) 를 주로 관리합니다.
View
UI 를 표현합니다. (HTML 혹은 Activity).
생성된 UI 관련 이벤트들을 Presenter (프레젠터) 단에 전달합니다.
Presenter
View 에서 발생하는 이벤트를 처리합니다.
View 를 직접적으로 제어하거나 업데이트하며 UI 단의 로직 처리를 담당합니다.
주로 View 와 1 대 1 로 매칭됩니다.
모델 및 데이터 변경상황에 맞게 View 에 데이터를 제공합니다.
정리
장점
View 와 Model 간의 의존성이 제거됩니다.
단점
View 와 Presenter 가 1 대 1 관계로 매칭됨에 따라, View 쪽의 의존성이 증가함으로서, View 쪽 중심적으로 설계될 수 밖에 없어짐으로서, 다양한 View 에 대한 Presenter 기능의 재사용이 힘들어집니다.
적용분야
Windows Desktop 개발 기술 : WinForm, WPF
Mobile App 기존 개발 기술 : 전통적인 iOS, Android Native App 개발 시 사용되어오고 있습니다.
Jquery, Javascript 기반의 전통적인 Front-end 개발 기술입니다.
Create the Future 