Template10을 이용해서 UWP 앱 개발하기 Part1

UWP 앱을 처음 개발하려고, 비주얼 스튜디오를 설치하고, 새 프로젝트 만들기를 하면 Blank App (Universal Windows) 하나만 보입니다. Hello World 앱 만드는데는 문제가 없지만...진짜 앱을 만들기 위해서는 너무나도 빈약 합니다.

간단한 햄버거 메뉴를 하나 만들려고 해도 해야할일이 참~ 많습니다. 그래서, 이런 문제를 해결하기 위한 방법으로  Template 10이라는 UWP 앱 템플릿을 소개하려고 합니다.

1. Template 10

Microsoft Jerry Nixon이라는 UWP 앱 교육 비디오에 자주 출연하는 멋진 분이 만들어서 공개한 템플릿으로, 앱을 쉽게 만들 수 있도록 Navigation, Suspension, Hamburger control, PageHeader 등의 내용들로 구성 되어 있으며, 이 내용들을 이용한다면 더 쉽게 앱을 만들 수 있습니다.

동영상 강좌를 보면 더 쉽게 이용할 수 있습니다.

Microsoft Virtual Academy Template 10 Training Videos.

2. Template 10에 적용된 규칙 일부 입니다.

1) MVVM 패턴이 기본적으로 적용되어 있습니다. 그래서, Views 폴더에 XAML 파일일 들어가 있습니다.

2) 한개의 뷰에 한개의 뷰모델이 존재합니다.

3) View-model은 ViewModels 폴더에 들어가 있습니다.

4) View-model에서 OnNavigatedTo를 사용할 수 있습니다.

5) Model은 Models 폴더에 들어가 있습니다.

6) NavigationService를 이용해서 navigate를 실행할 수 있습니다.

7) Messenger와 커뮤니케이션 할 수 있습니다.

8) Dependency Injection을 좋아합니다.

3. Template 10에서는 MVVM이 필수 인가요?

MVVM 패턴을 반드시 사용하도록 요구하지는 않지만, 대부분의 XAML app에서 사용하기 때문에 사용하는 것을 권장합니다. 그래서, 다른 MVVM 프레임웍과도 호환이 되도록 만들어져 있습니다.

4. 어떻게 사용할 수 있나요?

Visual Studio 2015를 실행 -> Tools -> Extensions and Updates -> Online -> template 입력 ->

Template 10 Template Pack version : 1.19를 선택 -> Install 클릭

설치하는데 약간 시간이 걸릴 수 있습니다. 완료될 때까지 기다려 주세요~ 이전 버전인 1.18은 템플릿을 만든 후 추가 작업을 해야 했는데..바로 어제 버전이 1.19로 올라가면서 모든 문제가 해결되었습니다.

5. 어떤 템플릿을 만들 수 있나요?

File -> New -> Project를 선택하면, 아래와 같이 3가지 템플릿이 추가된 것을 확인할 수 있습니다.

** 만약 한글 Visual Studio 2015를 사용한다면, 영문으로 Windows라고 되어있는 곳에서 찾아 보아야 합니다.

(1.19에서 수정이 되었는지 여부는 확인을 못했습니다.)

6. Hello Template 10을 만들어 보겠습니다.

Visual Studio 2015 실행 후

File -> New -> Project -> Blank (Template 10) 선택 -> 이름은 HelloT10을 입력하고 OK를 클릭합니다.

아래와 같이 Target Version과 Minimum Version을 선택하는 화면이 나옵니다.

여기서 Windows 10 Anniversary Edition (10.0; Build 14393)이 나오지 않으면, 현재 윈도우 버전이 최신 버전이 아니고, SDK가 설치되어 있지 않기 때문입니다.

포스트를 계속 보시기 위해서는 반드시 최신 윈도우 버전 1607(OS Build 14393.xxx)

Programs and Features에는

Windows Software Development Kit - Windows 10.0.14393.33

Windows Software Development Kit - Windows 10.0.10586.212

이 설치되어있는지 확인하시면 됩니다.

Windows 10 SDK

프로젝트가 만들어지면, F6 키를 눌러서 Build를 한번 꼭 해줍니다.

오른쪽 Solution Explorer에서 References를 확장해서 보았을 때 아래와 같이 나오지 않는다면, Visual Studio를 종료한 후 다시 실행해서 새로 만든 프로젝트를 불러오면 아래와 같이 보일 것입니다.

MainPage.xaml을 더블클릭하면 디자인 화면을 볼 수 있습니다.

디자인 화면이 아래와 같이 나오는지 확인해 주세요~ 화면이 아래와 같이 나오지 않는다면~

Task Manager를 열고, Details 탭을 선택하고, XDesProc.exe를 선택 한 후 End task를 클릭해서, 프로세스를 죽이고 디자인 화면을 다시 열면 잘 보일 것으로 생각됩니다~

MainPage.xaml

<TextBlock .. />을 찾아서 Text 부분을 Hello T10 World를 변경 합니다.

디자인 화면만 보이고, XAML 코드가 보이지 않는다면, 빨간 테두리가 있는 곳에 - 아이콘을 눌러서 화면을 나누어 주시면 코드를 직접 입력할 수 있습니다.

F5를 눌러서 실행 합니다.

이렇게해서 Template 10을 이용해서 UWP 앱을 만드는 과정을 간단하게 살펴 보았습니다.

요즘 계속해서 사용하고 있는데, 상단히 마음에 드는 템플릿입니다. 시간을 내서 후속 포스트를 작성해야하는데..어떻게 될지는 잘 모르겠네요..

좋아요~팍팍 눌러주시면..열심히 작성해 보겠습니다.~~~