블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2019 5ring * LINE : kaki104 * facebook : https://www.facebook.com/kaki104 https://www.facebook.com/groups/w10app/ kaki104

카테고리

List All (550)
Xamarin Forms (4)
Bot Framework (18)
Azure (9)
Windows 10 (35)
Facebook News & Tips (158)
Windows App(Universa.. (83)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
WPF (1)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total519,091
Today55
Yesterday98

지난번 MS행사에서 발표한 내용중에 하나로 UWP앱을 좀더 쉽게 만들기 위해 발표된 템플릿입니다.

이제 버전도 정식 버전이고, 알려드릴 때가 된 것 같아서 포스트를 하게 되었습니다.

시작하기에 앞서서 먼저 어떤 녀석인지 살짝 화면을 보여드리면..

 

프로젝트 타입을 선택하는 화면 입니다.

 

 

선택한 프로젝트에 원하는 형태의 페이지를 추가하는 화면 입니다.

 

 

이렇게 프로젝트 타입과 페이지들을 마법사 화면으로 추가할 수 있도록 되어있는 템플릿입니다.

시작이 반이니 일단 멋진 UWP이 순식간에 만들어지니 개발 의욕이 쑥쑥~ 올라가겠죠?

 

 

1. 준비사항

 

기본준비는 이 페이지를 참고하세요 https://developer.microsoft.com/ko-kr/windows/downloads

 

* Visual Studio 2017 업데이트1 이상의 버전이 필요합니다.

* 윈도우 10 Creators Update SDK 또한 필요합니다.(version 10.0.15063.0 or later)

* 윈도우 버전 또한 Creators Update가 적용되어 있어야 합니다.(문서에는 없었지만..SDK버전에 맞는 윈도우가 필요할 것이라 생각됩니다.)

 

 

2. Windows Template Studio를 설치하기

비주얼 스튜디오를 실행하시고,

 

Tool -> Extensions and Updates -> Online -> template 혹은 Windows template를 입력해서 검색을 하신 후 Download를 선택하시면 됩니다.

 

 

비주얼 스튜디오 2017부터는 확장 기능은 비주얼 스튜디오를 종료해야 설치가 가능합니다. 그러니, 바로 종료를 해줍니다. 잠시만 기다리시면, 인스톨러가 실행되고, Modify를 선택해 줍니다. 설치가 완료되면 Close 버튼을 누른 후 비주얼 스튜디오를 다시 시작합니다.

 

 

 

3. 프로젝트 만들기

 

File -> New -> Project -> Windows Universal -> Windows Template Studio (Universal Windows)를 선택하시고

앱 이름을 입력하고 OK를 클릭합니다.

 

 

프로젝트 타입과 프레임웍을 선택하는 창이 출력됩니다. 오호~ 뭔가 있어 보입니다. 참고로, 번호는 세로 우선으로 이야기 합니다.

 

프로젝트 타입

1. 네비게이션 타입

2. 피벗과 탭 타입

3. 빈 화면

 

프레임웍

1. 코드 비하인드 : 일반적인 개발 방법인 이벤트 드리븐 방식으로 개발을 하고자 할 때 사용

2. MVVM Basic : 기본적인 MVVM 패턴을 이용하는 방법

3. MVVM Light : MVVMLight라는 프레임웍을 이용하는 방법

 

저는 1번과 2번을 선택하도록 하겠습니다.

 

페이지 종류가 나옵니다.

 

1. 빈페이지

2. 멀티미디어 플레이어

3. 차트

4. 설정

5. 마스터/디테일

6. 탭

7. 웹뷰

8. 그리드

9. 맵

 

상당히 여러 종류가 지원되네요 모두 하나씩 추가를 하도록 하겠습니다.

 

 

어플리케이션 라이프사이클

1. 설정 저장소

2. 서스팬드와 리줌

 

처음 만드는 프로젝트이니 이녀석들은 추가하지 않도록 하겠습니다.

 

 

백그라운드 워크

1. 백그라운드 테스크

 

백그라운드 테스크도 추가하지 않도록 하겠습니다.

 

 

사용자 인터렉션

1. 토스트 노티피케이션

2. 라이브 타일

3. 에저 노티피케이션

4. 퍼스트 런 프롬프트

5. 데브 센터 노티피게이션

6. 왔즈 뉴 프롬프트

 

이름만 봐서는 뭔지 모르겠는 녀석들도 있네요..음..대충봐도 알만한 토스트 노티피케이션과 라이블 타일을 추가하겠습니다.

 

모두 선택하신 후 Create 버튼을 눌러주시면 혼자서 프로젝트를 열심히 생성합니다.

 

 

4. 완성된 프로젝트 템플릿 살펴 보기

 

프로젝트가 완성되는데 한 2~3분 정도 소요된 것 같습니다. 솔루션 탐색기를 보니 폴더가 마니 생겼네요.

F5를 눌러 실행을 하도록 하겠습니다.

 

 

 

실행하는데 에러 발생하지 않고, 잘 실행됩니다. 하하..

* UWP 앱 프로젝트를 만드시면 윈도우 설정에 개발자 모드가 활성화 되어 있어야지만 만들 수 있습니다. 참고하세요

 

햄버거 버튼이 보이는 아주 기본적인 화면이네요 아까 추가한 8개의 페이지가 차례대로 표시되고 있습니다. 이정도에서 놀라면 앙되겠죠? 각 페이지를 자세히 살펴 보도록 하겠습니다.

 

 

미디어 플레이어 페이지를 선택하자마자 채널9인 동영상이 재생됩니다. 플레이어 모습도 Movie앱과 매우 유사한 것이 좋아 보이네요

 

차트 페이지 입니다.

간단한 바 차트가 출력됩니다. 음 아무래도 텔레릭 차트일 것 같은 느낌이 드네요

 

 

마스터 디테일 페이지 입니다.

 

왼쪽 아이템을 선택하면 오른쪽에 상세 데이터를 볼 수 있습니다. 그런데, 화면 사이즈를 줄이니...

 

 

깜찍하게 요렇게 변경됩니다. 여기서 아이템을 선택하면 상세 페이지가 출력됩니다. 그리고 원래 화면으로 돌아오려면 Back 키를 누르거나 <- 버튼을 눌러 줍니다. 이런게 코딩 하나 않하고 다 구현이 되어 있군요..후후

 

 

탭 화면 입니다.

 

 

웹뷰 페이지 입니다.

음..네이뻐 페이지로 가보고 싶은데..주소 입력하는 창이 업어서 못가겠네요..ㅎㅎ

 

 

그리드 페이지 입니다.

헉!!!! 대박이네요. 이건 완전 텔레릭 컨트롤인데요.. 그냥 사용이 가능한가봅니다. 뭐 물론 약간의 기능상 제약이 있을 것 같기는 하지만, 이정도만 해도 기본 앱 만드는데는 전혀 문제가 없어 보입니다.

 

 

맵 페이지 입니다.

제가 있는 동네를 표시하고 있습니다. 흐흐흐 지도 컨트롤에 한국 지도 나오는건 다들 알고 계시죠? 이제 적극 활용할 수 있을 것 같습니당~

 

 

설정 창입니다.

 

테마를 Light에서 Dark로 변경해 보았습니다. 잘되네요..후후후후

 

 

앱을 시작 페이지에 추가했더니, 라이브 타일이 변경되는 것을 볼 수 있었습니다.

 

 

토스트 노티피케이션은 앱이 시작할 때 발생합니다.

 

 

5. 이정도면 큰 힘들이지 않고도 간단한 앱은 만들 수 있을 것 같습니다.

 

 

Posted by MVP kaki104

티스토리 툴바