MixedCode

안녕하세요. 믹스드코드 운영자 강창훈입니다.
지금부터 금번 마이크로소프트 자마린 스터디와 관련한  "MVVM in Xamarin" Section의 Session1 주제인  MVVM 의 역사와  UI 디자인 패턴비교 에 대해 하나씩 알아가보도록 하겠습니다.

Session1. MVVM as a UI Design Pattern 
-History of MVVM UI Pattern
-Comparation of UI Design Pattern(MVC,MVP,MVVM)

1.1 History of MVVM Pattern
MVVM 에 대한 이해을 돕기위해 왜? 무엇때문에 MVVM이 만들어졌고 전체적인 MVVM과 관련된 기술들의 흐름들을 2017년도 기준으로 알아보겠습니다.

먼저 MVVM은 UI Design Pattern의 한종류입니다.
믹스드코드는 융합기술정보제공 플랫폼을 지향하기에 다양한 분야의 사용자층들이 이용하고 계십니다.
따라서 어느정도 경력있는 S/W 개발자라면 Design Pattern에 대한 개념을 이해하시겠지만  다른분야 사용자분들을 위해 디자인 패턴에 대한 소개부터 진행하겠습니다.

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이라고 합니다.

참고로 믹스드코드에 아키텍쳐 서비스 카테고리가 있는데 관련한 글이 등록된게 없어 이번에 기회가 된듯하여 작심하고 체계적으로 정리해 공유하려하오니 너무 자마린 주제와 멀어진다고 생각하시거나 불필요하다고 생각하시면 스킵하셔도 좋을듯 합니다. ^^
참고자료: http://mixedcode.com/Article/Index?aidx=1065

3)History of MVVM Pattern
MVVM UI Pattern의 태생부터 2017년 현재 어떤 기술에서 해당 패턴들이 사용되고 있는지 확인해보도록 하겠습니다.

ㅁ2004년 - Presentation Model(PM) Pattern
- Martin Fowler이 처음 해당 패턴을 소개했습니다.
- 뷰(화면=UI)을 프리젠테이션 로직으로부터 분리
- 추상화를 통한 UI를 쉽게 테스트할수 있게 설계
- 프리젠테이션 로직을 다양한 UI및 UI기술에서  재사용가능하도록 설계
- UI와 다른코드간 결합도를 줄이는것.
- UI 디자이너들이 좀더 독립적으로 작업할수 있는환경 제공

ㅁ2005년 - MVVM Pattern
- 2005년마이크로소프트 John Gossman S/W 아키텍트가 PM패턴을 특화시킨 패턴으로 처음 소개함.
- 윈도우 기반 데스크톱 개발 UI기술인 WPF와 웹브라우저기반 ActiveX플러그인인 Silverlight에 적합하도록 설계함.
- Model,View,ViewModel로 구성됨.
- Model은 업무(도메인)를 나타내는 EntityModel을 말하며 단순 모델로서의 기능보다는 해당 업무나 데이터 처리와 관련된 모든 기능,프로세스를 모두 포괄합니다.
- View는 모델의 데이터를 화면상에 표기하기 위한 컨트롤들로 구성되어 있으며 뷰는 WPF,Silverlight,Xamarin.Forms,UWP등의 화면을 구성하는 XAML 요소들의 집합입니다.  보통 그용도와 구조, 사용방법이 비슷한 HTML과 유사한 XAML(재믈,재므얼)이라는 XML기반의 마크업 언어로 표기합니다.
- ViewModel은 뷰에 대한  데이터처리 및 데이터 상태관리,UI로직 처리를 위해 설계된 특수한 뷰전용 모델입니다.
  뷰모델에서는 UI(Presentation) Logic을 구현하거나 데이터바인딩 엔진기반으로 뷰에 뷰모델 데이터의 변경사실을 알리고 뷰의 데이터가 자동 갱신될수 있게해주는 데이터 바인딩 기법을 사용해 데이터의 변경관리를 수행하며 Command방식을 통해 뷰에서 뷰모델로의 명령을 실행할수 있습니다.
- MVVM 패턴의 주요 장점으로는 PM패턴을 특화시킨 패턴이기에 PM패턴의 장점들을 기본적으로 제공하며 전통적인 MVC,MVP 패턴보다 획기적으로 UI 관련 코딩량을 줄일수있고 UI에 대한 테스트가 용이하며 UX(XAML)디자이너와 개발자간 개발 및 작업환경을 분리하여 원할한 협업환경 제공이 가능합니다.

ㅁ2006년 -.NET Framework 3.0 출시
-2006년 MS는 기존 Winform과는 다른  새로운 윈도우 데스크톱 Application 개발 기술인 WPF(Windows Presentation Foundation)를 포함해 메시지-통신 개발
프레임워크인 WCF(Windows Communication Foundation), 워크플로우 기능을제공을 위한 WF(Windows Workflow Foundation) 기능등을 포함한 새로운  .NET Framework 3.0 버전을 출시했습니다.
-WPF UI기술은 기존 Winform(MVP패턴) 데스크톱 어플리케이션 UI기술을 보완하거나 대체할수 있는 다양한 차별화된 신규 기능들이 제공되었습니다.
(XAML을 통한 UI를 마크업 언어로 표기하거나 벡터방식과 다양한 해상도를 지원하거나 MVVM 패턴 적용을 통한 디자인과 개발작업 환경의 분리 및 획기적 코딩량을 줄여 개발효율성 극대화등...)


ㅁ2016년 2월 - Cross Platform Native App 개발기술 Xamarin MS인수
자마린은 Mono 프로젝트로 잘 알려져 있는 .NET 호환 개발환경 및 도구등을 개발하는 오픈소스를 만드는 개발자들로부터 시작한 네이티브 앱 크로스 플랫폼 개발기술로 2016년 02월 마이크로소프트에 인수되면서 Microsoft의 Mobile First,닷넷 오픈소스&이중화 전략과 함께 많은 변화와  발전을 거듭해오고 있습니다.
자마린의 주요 특징으로는 Windows 및 MAC O/S환경에서 각각 Visual Studio 2017 과 Visual Studio for Mac 이라는 유.무료(Community Edition) 개발툴을 이용해 C# 언어기반에서  네이티브 크로스 플랫폼 앱(IOS,Android,Windows10용앱(UWP))을 개발할수 있습니다.

-Windows Universal:  C#과 XAML을 이용해 Windows 10 용 전용앱인 UWP(Universal Windows Platform)를 개발.
-Xamarin.Android : C#을 이용해 안드로이드 전용 네이티브 앱 개발
-Xamarin.IOS : C#을 이용해 IOS 전용 네이티브앱 개발
-Xamarin.Forms : C#과 XAML을 이용해 UWP,Android,IOS 앱을 동시 개발(One-Source Multi Mobile OS & Service )

특히 Xamarin.Forms 와 UWP 전용앱 의 UI를 표현하기 위한 기술로 XAML이라는 XML기반의 마크업 언어가 사용되고 있는데요.
해당 XAML은 윈도우 데스크톱 개발기술중의 하나인 WPF의 UI표현기술 언어로도 이미 사용되고 있습니다.
그리고 Xamarin.Forms와 UWP 전용앱 개발시 WPF와 동일하게 MVVM UI Pattern 사용이 가능합니다.

참고로 Xamarin.Forms 와 UWP 의 XAML은 2017년 05월 현재 기준 표준화 작업이 진행중이기  때문에 그 사용법 및 컨트롤의 종류가 상이해 상호간 XAML의 재사용이 불가합니다. 물론 WPF의 XAML 문법 및 컨트롤도 사용법이 다소 상이하며 상호 재사용이 불가능합니다.

ㅁ2017년 5월: XAML Standard 1.0 과 .NET Standard 2.0 발표
금번 Build 2017 행사에서 새롭게 소개된 XAML Standard 1.0 과 .NET Standard 2.0 기술을 이용하면 빠르면 2017년도말 부터는 C# 과 Visual Studio 2017(or for Mac) 개발툴을 이용 Xamarin.Forms와 UWP 개발시 표준화된 XAML 과 .NET 코딩 방법을 통해 상호 재사용 가능한 방식으로 UI 개발이 이루어질것으로 예상됩니다.

-XAML Standard 1.0 : XAML을 사용하는 UWP 와 Xamarin.Form의 XAML 스펙을 표준화하여 향후 자마린 크로스플랫폼에서의 단일화되고 통합된 UI 표현기술(언어)로 XAML을 사용할수 있을것으로 기대됩니다.

-.NET Standard 2.0 : 현재 윈도우즈 전용 .NET Framework 4.6 버전 과 MAC,Linux,Windows 크로스플랫폼용.NET 버전인 .NET Core ,Xamarin&Mono 용 .Net버전 등 총 3개 버전으로 나뉘어 있는 .NET을 주요 핵심기능들만 추출하여 표준화한 .NET Standard 를 이용하면 Windows,MAC,Linux 모든 O/S에서 Visual Studio 2017,Visual Studio for Mac, Visual Studio Code등 다양한 개발툴 과 C#을 통해 단일화된 방식으로 각종 .NET기반 Application개발(Windows,Web,App)이 가능해질것으로 예상됩니다.
 

간단히 MVVM의 역사를 알아보았구요.
다음시간에는 MVP,MVC,MVVM UI 디자인 패턴비교를 통해 MVVM패턴의 장단점에 대해 알아보도록 하겠습니다.
감사합니다.