1.Design Pattern(설계패턴)?

소프트웨어 공학에서 패턴이란 용어는 근/현대에서 각종 소프트웨어/시스템을 구축하면서 직면했던 대표적인 주요 문제점들의 해결책으로 서의 설계방법들을 유형별로 정리해 둔 것입니다.
좀 풀어 이야기하면 소프트웨어 개발의 주요 목적인 현실세계의 다양한 문제점들을 해결하기 위한 수단으로서 각종 S/W 개발작업을 진행할 때 직면했던 크고 작은 문제들 중에서 대표적이고 유사한 문제점들에 대한 해결방법들을 정리한 것입니다.
이렇게 정리된 각종 해결방안들은 이후 개발 세대들이 시행착오를 덜 격고 동일하고 유사한 문제들을 보다 빨리 정확하게 해결할 수 있는 방법론으로 사용되어지고 있습니다.  
일명 디자인 패턴(Design Pattern)이라고도 하고요. 
일종의 S/W업계에서 사용되는 의사의 감기약 처방전(코감기엔 코감기약, 목감기엔 목감기약..)과 같은것이며  다양한 업종에서 사용되는 사고대응,문제해결 매뉴얼과도 같은 것입니다.

2.UI Design Pattern(UI 설계 패턴)?
간단한 홈페이지를 보더라도 내부적으로는 웹 브라우저의 화면(HTML)을 통해 사용자가 데이터를 하나 입력하면 해당 데이터는 인터넷망을 통해 서버라는 컴퓨터내의 웹서버 S/W에 전달되고 웹서버 내 각종 웹 어플리케이션의 특정 웹페이지 또는 컨트롤러를 통해 전달된 데이터가 최종적으로 DB에 저장되고 관리되어 집니다.
상기 프로세스에서 사용자와 직접적으로 인터랙션하는 주체는 웹 브라우저내의 웹페이지(HTML)입니다.
사용자와 직접 상호작용하며 데이터를 입력받거나 DB로부터 가져온 데이터를 출력해서 확인할 수 있게 해주고 다양한 UI컨트롤을 통해 사용자와 직접 상호 작용하는 부분들을 보통 UI(User Interface) 또는 UX(User Experience)라고 합니다.
개발과 관련한 다양한 계층 중에서 UI계층에 포커싱되어 UI를 개발할 때 보다 효율적으로 개발할 수 있게 각종 UI 설계방법들을 정리해 둔 것들을 UI설계패턴, 즉 UI Design Pattern이라고 합니다.

3.주요 UI Design Pattern
주요 UI Design Pattern 사용되는 MVC,MVP,MVVM UI Design Pattern들에 대해 알아보고 어떤 장단점들을 가지고 있는지 알아 봅니다.
그리고 각각의 UI Pattern들이 실질적으로 요즘 어떤 UI 기술들과 결합되어 사용되고 있는지도 함께 알아보겠습니다.

1)MVC(Model,View,Controller) UI Pattern

ㅁModel
-데이터 구조 표현 및 데이터의 전달 과 처리를 담당하는 영역.
-ORM(Object Realtion Mapping) 기술을 주로 활용.
-컨트롤러에서 주로 호출되며 Database를 주로 관리한다.

ㅁView
-UI(User Interface=화면)를 표현하다.
-UI내 각종 컨트롤을 통해 사용자와 상호작용(UX)한다.
-컨트롤러에 의해 호출되며 호출 시 데이터가 담긴 모델을 전달받는다.
-컨트롤러에 의해 호출된 뷰는 바로 사용자에게 전달되거나 또는 컨트롤러에 의해 호출 시 전달받은 데이터모델을 기반으로 뷰엔진 기술을 이용해 화면요소(HTML)를 변경한 후 그 결과를 사용자에게 전달한다.

ㅁController
-라우팅 기술을 통해 사용자 요청 및 응답을 주로 처리한다.
-모델과 뷰를 제어하여 데이터(JSON,XML) 또는 뷰(HTML,ETC)를 사용자에게 전달한다.

ㅁ장점:  UI 패턴 중  구현이 가장 쉽다.
ㅁ단점:  View와 Model 간 의존성이 크고 UI 로직이 복잡한 경우 적절치 않다.
ㅁ적용 분야

-주로 대부분의 현대적 Web Application(FrontEnd & Server Side) 개발 시  관련 개발언어와 개발 프레임워크 환경에서 지원됨.
-C# ASP.NET MVC5 Framework, JAVA Spring MVC Framework,
-Python Django/Flask Framework
-PHP7 Laravel/CodeIgniter Framework
-Node.js Express Framework

2) MVP(Model,View,Presenter) UI Pattern

ㅁModel
-데이터 구조 표현 및 데이터의 전달 과 처리를 담당하는 영역.
-ORM(Object Realtion Mapping) 기술을 주로 활용.
-Presenter 에서 주로 호출되며 Database를 주로 관리한다.

ㅁView
-UI를 표현한다(HTML, Activity ).
-UI 이벤트를 Presenter에게 전달한다

ㅁPresenter
-뷰에서 발생하는 이벤트를 처리한다.
-뷰를 직접적으로 제어 업데이트 하며 UI로직 처리를 담당한다.
-주로 뷰와 1:1로 매칭된다.
-모델 및 데이터 변경상태에 맞게 뷰에 데이터를 제공한다.

ㅁ장점:  View와 Model간의 의존성이 제거된다.
ㅁ단점:  View와 Presenter가 1:1 관계로 뷰 의존성이 커 뷰 중심적으로 설계된다.(다양한 뷰에 대한 Presenter 기능의 재사용이 어렵다. )
ㅁ적용 분야
-Windows Desktop 개발 기술 : Winform,WPF
-Mobile App 기존 개발기술 : 전통적인 IOS, Anroid Native App 개발 시 사용되어옴
-Jquery,Javascript기반의 전통적인 프론트 엔드 개발 기술

3)MVVM(Model,View,ViewModel) UI Pattern

ㅁModel
-데이터 구조 표현 및 데이터의 전달 과 처리를 담당하는 영역.
-ORM(Object Realtion Mapping) 기술을 주로 활용.
-Presenter 에서 주로 호출되며 Database를 주로 관리한다.

ㅁView
-UI(User Interface=화면)를 표현하다.
-UI내 각종 컨트롤을 통해 사용자와 상호작용(UX)한다.
-뷰모델과의 느슨한 결합을 통해 데이터를 표현한다.

ㅁViewModel
-뷰를 위한 뷰 전용 데이터 모델이다.
-View 와 뷰모델과 데이터 바인딩을 통해 상호 상태 변경을 인식하고 데이터를 자동 갱신한다.
-데이터 바인딩 매커니즘을 통해 사용자와의 상호작용을 통해 뷰의 내용이 바뀌면 바인딩된 데이터 소스인 뷰모델의 데이터가 자동으로 바뀌고 뷰모델 데이터 소스가 바뀌면 자동으로 바인딩된 뷰의 값이 변경된다.
-데이터 바인딩 기술로 인한 UI요소에 대한 데이터 처리 코딩량이 획기적으로 줄어들어 개발 생산성이 향상된다.  

ㅁ장점 
-View가 완전한 Model 및 ViewModel의 의존성에서 벗어난다. 
-다양한 View에서의 코드 재사용이 가능하다.
-UI 레이어 개발 생산성이 좋아질수 있다
ㅁ단점: MVVM 패턴에 대한 이해가 필요하다. 뷰모델 설계 능력이 필요하다.
ㅁ적용분야
-최근 다양한  Appication 개발분야에서 MVVM UI Pattern 지원이 늘어나고 있습니다.
-Windows Desktop : WPF MVVM
-Web Frontend Frameworks: React.js, Vue.js, Angular.js
-Mobile: Xamarin, React Native, Swift for IOS,Kotlin for Android