지난 2012년 02월 29일, Windows 8 Consumer Preview 와 Visual Studio 11 Beta 버전이 공개가 되었습니다. 그 중 Windows 8 의 가장 큰 특징이라고 하면 WinRT(Windows Runtime)을 이용하여 Metro 응용 프로그램을 만들 수 있는 것이죠. 이전 Windows 7까지 Win32 API 를 이용하여 데스크탑 응용 프로그램을 만들었습니다만, Windows 8 에 와서는 이전 Win32 환경과 새로운 WinRT 환경에서 개발을 할 수 있습니다.

   

더 자세한 정보를 원하시면 다음의 MSDN 링크를 통해 확인하시기 바랍니다.

http://msdn.microsoft.com/en-us/library/bb386063(v=vs.110).aspx

   

쉽게 WinRT는 Metro Style App를 구동하기 위한 API 집합들이며, Win32의 Function APIs 가 아닌, 좀 더 세련되고 객체지향적으로 다듬은 차세대 윈도우 런타임이라고 생각하셔도 됩니다.

   

   

Visual Studio 11 은 Windows 8 의 Metro Style App 을 개발하기 위해 개발 템플릿을 지원해 줍니다. (프로젝트 템플릿 같은 그런 것들이죠). 그럼 Visual Studio 11 에서 제공하는 Metro Style App 의 템플릿은 어떤 것을 지원하는지 한번 볼까요?

   

분할 응용 프로그램

분할 응용 프로그램 템플릿은 사용자 지정하여 2열 보기에서 항목과 항목 세부 정보로 된 목록을 보기 위한 앱을 만들 수 있는 Metro 스타일 앱의 주요 기반이 됩니다. 이 보기에서 사용자는 항목 간에 빠르게 전환할 수 있으며 목록을 동적으로 업데이트할 수도 있습니다. 예를 들어 뉴스 읽기 프로그램, 스포츠 득점 앱, 전자 메일 앱 등이 있습니다. 이 프로젝트 템플릿은 Metro 스타일 앱에 권장되는 탐색 모델을 사용합니다.

표 형태 응용 프로그램

표 형태 응용 프로그램 템플릿을 사용하여 Metro 스타일 앱을 만드는 것이 좋습니다. 이 템플릿을 사용자 지정하여 사용자가 범주 검색을 통해 완전히 빠져드는 콘텐츠를 찾는 앱을 만들 수 있습니다. 예를 들면 쇼핑 앱, 뉴스 앱, 사진 또는 동영상 앱이 있습니다. 이 프로젝트 템플릿은 Metro 스타일 앱에 권장되는 탐색 모델을 사용합니다.

탐색 응용 프로그램

이 JavaScript 템플릿에는 기본 탐색, 앱 바탕 화면 도구 모음(앱 바) 및 표 형태 응용 프로그램과 분할 응용 프로그램 템플릿에서 사용되는 미디어 모드 기반 레이아웃이 제공됩니다. 탐색 템플릿에는 최소 페이지 조각 하나만 포함되어 있으며, 페이지 조각을 손쉽게 추가할 수 있습니다. 그런 다음 콘텐츠를 추가할 수 있습니다. 이 프로젝트 템플릿은 Metro 스타일 앱에 권장되는 탐색 모델을 사용합니다.

고정 레이아웃 응용 프로그램

이 JavaScript 템플릿은 콘텐츠가 고정 뷰포트에 맞게 되어 있다는 점을 제외하고 빈 응용 프로그램 템플릿과 동일한 최소한의 Metro 스타일 앱을 제공합니다. JavaScript에서 개발하는 대부분의 게임 앱에 이 프로젝트 템플릿을 권장합니다

DirectX 응용 프로그램

이 C++ 템플릿은 Metro 스타일 게임 개발에 사용할 수 있습니다.

   

Visual Studio 11 C# 언어에서 제공하는 Metro Style App 템플릿

   

Visual Studio 11 JavaScript 언어로 제공되는 Metro Style App 템플릿

특이하게도 JavaScript 언어로 제공되는 템플릿에만 고정 레이아웃(Fixed Layout) 템플릿을 지원하는군요.

   

Visual Studio 11 C++ 언어에서 제공하는 Metro Style App 템플릿

   

   

템플릿 샘플

각각 템플릿이 어떻게 구성되었는지 보기로 한 참에, 각 언어별로 제공되는 템플릿을 생성하여 Windows 8 에서 실행해 보았습니다.

   

JavaScript 템플릿으로 만든 Metro Style App Sample

   

   

C# 템플릿으로 만든 Metro Style App Sample

   

   

C++ 템플릿으로 만든 Metro Style App Sample

   


Metro Style App 성능 및 품질 관리

Visual Studio 2005부터 최상위 버전에서 제공하는 기능 중에 하나가 바로 Profile 기능입니다. Visual Studio Profile 기능은 Performance, Memory, Thread 와 같이 눈으로 보거나 사람이 오감을 이용하여 측정할 수 없는 부분을 정교하게 측정할 수 있습니다. Metro Style App 도 이런 Performance 를 측정하고 Code Analysis 로 코드의 품질을 관리할 수 있게 되었네요.

   

Metro Style App을 Profile하기 위해서는 디버깅 상태를 Local Machine으로 변경을 해야 합니다. 그리고 Analyze 메뉴에서 Launch Performance Wizard 를 선택하여 단계별로 원하는 Profile 단계를 선택하면 됩니다. Visual Studio를 이용하여 .NET 응용 프로그램 Profile을 해보신 분이라면 편하신 대로 Profile Windows에서 시작하셔도 됩니다.

   

Metro Style App의 어떤 Performance를 측정할지 정하였다면 아래의 Profile 방법을 하나 선택하시면 됩니다. 다만, Metro Style App 의 Profile 을 몇 가지 제한이 있네요.

CPU Sampling 의 경우 C#, C++, JavaScript Metro Style App 모두 Profile이 가능합니다. 다만, Instrumentation의 계측 형태의 Profile은 JavaScript Metro Style App만 지원을 합니다. 물론 .NET 응용 프로그램인 경우 모든 Profile을 모두 지원해 줍니다.

   

CPU Sampling 을 할 Metro Style App을 선택하고, 쭉 쭉 다음 단계로 이동하면 바로 Profile 을 시작할 수 있습니다. CPU Sampling 을 하려는 응용 프로그램의 모든 기능을 동작시키면 됩니다. 만들어 놓은 기능을 선택도 해보고, 쿡쿡 클릭도 해보고 하신 후, Stop Profile을 클릭하여 성능 측정을 마무리 합니다.

   

그럼, Profile 보고서가 완성이 되면 CPU Sampling 결과를 보여줍니다. 아래와 같은 보고서는 의외로 성능 지표를 분석할 때 중요한 정보를 줍니다. 아래의 Inclusive, Exclusive 등 성능 지표 결과를 보시기 어려우시다면, 꼭 Visual Studio 2010 의 성능 프로파일 MSDN 문서를 확인해보세요.

꾸준히 성능 관리를 하여 샘플링을 떠 놓으면 나중에 얼마나 성능이 좋아지고, CPU 리소스를 덜 차지하는지 비교도 해보고 하시면 Visual Studio 의 막강한 기능에 대해 다시 한번 놀라실 겁니다.

   

Visual Studio Profile 에 대한 자세한 내용은 다음의 링크를 참고 하십시오.

http://msdn.microsoft.com/ko-kr/library/z9z62c29.aspx

   

   

Metro Style App의 Profile이 완료가 되면, 아래의 그림과 같이 성능 보고서를 보여줍니다. 상단의 영역은 CPU Sampling 결과를 그래프로 보여주며, 하단은 구간별로 CPU에 가장 많이 부하를 주는 구간을 리스트업 합니다.

   

CPU Sampling 결과를 다차원으로 분석하기 위해 Current View 영역에서 항목을 선택하시면 됩니다. 프로세스별로 분석하거나 모듈, 클래스, 메서드 등의 단위로 세밀하게 분석할 수 있는 지표를 제공해 줍니다.

   

덧붙여 Metro Style App의 Profile 기능은 Visual Studio가 설치된 환경 뿐만 아니라, Visual Studio 가 설치되지 않은 환경에서도 Profile 기능을 제공 합니다. 다음의 문서에서 자세한 내용을 확인해보세요.

http://msdn.microsoft.com/en-us/library/hh696636(v=vs.110).aspx

   

   

Metro Style App 의 코드 분석

Visual Studio의 Code Analysis를 효과적으로 사용하신 분이라면 좋아할 듯 합니다. Metro Style App에서도 Code Analysis기능을 그대로 적용할 수 있습니다. 개발 초기부터 Globalization, Performance를 염두 해두신다면 Code Analysis가 큰 도움이 될 겁니다.

   

Code Analysis에 대한 자세한 내용은 다음의 링크에서 확인하십시오.

[Better Code]Visual Studio 2010 Code Analysis Enhancements - 1.개요 http://vsts2010.net/39

[Better Code]Visual Studio 2010 Code Analysis Enhancements - 2. Rule Sets Feature http://vsts2010.net/41

   


Metro Style App 디버깅

C#이나 C++, VB.NET 으로 한번쯤 디버깅을 해본 분이라면 Metro Style App 디버깅도 같은 방식으로 디버깅이 가능합니다. 기존의 .NET 응용 프로그램 디버깅 방식과 별 차이가 없기 때문에, 디버깅 경험 그대로 사용하셔도 됩니다.

   

   

Simulator 로 디버깅

Visual Studio 11에서는 WinRT 디버깅 환경은 일반적으로 Local Machine 디버깅과 Simulator 디버깅, Remote Machine 디버깅이 있습니다. 그 중 Simulator 디버깅 부분의 디버깅 환경이 굉장히 잘 되어있네요. 마치 ARM 코어가 탑재된 테블릿을 조작하는 느낌까지 듭니다. Simulator 디버깅은 시스템이 부팅된 후 Windows 8 구동에서 사용자 로그인까지 그대로 재현이 됩니다.

아래의 그림과 같이 디버깅 툴바 영역에서 Simulator 디버깅을 선택하고 디버깅을 시작하면 Simulator 가 구동이 됩니다.

Simulator 디버깅에 대해 더 자세한 내용은 다음의 링크를 참고하십시오.
http://msdn.microsoft.com/en-us/library/hh441475(v=vs.110).aspx

   

   

Simulator를 선택한 후 디버깅을 시작하면 아래의 그림과 같이 테블릿을 연상케 하는 Simulator 창이 뜹니다. 필자의 집 네트워크 환경은 Active Directory로 묶여 도메인으로 관리를 하고 있는데, Simulator의 사용자 로그인도 마찬가지로 도메인 로그인 되는 것을 확인할 수 있습니다.


Simulator를 통해 WinRT 샘플이 잘 동작하는 것이 확인되는군요.

   

혹시나 싶어 Simulator 디버깅 중에 Metro 바탕 화면에서 데스크탑 바탕화면으로 이동해 보았습니다. 제 로컬 컴퓨터 환경이 그대로 재현이 되네요.

Simulator 우측 패널에 터치 방식을 선택하거나 해상도를 조절하거나 테블릿을 회전시키는 조작을 하는 아이콘들이 있습니다.

   


Metro Style App 배포

Metro Style App 템플릿을 사용하여 프로젝트를 생성하면 모든 형태의 Metro 응용 프로그램의 프로젝트에는 Package.appmanafest 파일이 존재합니다. 이 파일은 Windows Store 에 앱을 배포할 때 앱 정보를 가지고 있는 파일입니다.

자세한 Metro Style App 의 배포에 대한 내용은 다음의 링크를 참고하십시오.
http://msdn.microsoft.com/en-us/library/hh454036(v=vs.110).aspx  

   

   

Metro Style App 프로젝트의 속성 페이지로 이동하면 아래의 그림과 같이 속성 페이지로 이동합니다. 이곳에서 앱의 이름과 Rotaions 타입, 전경색과 배경색 및 Splash 이미지, 그리고 앱의 호환 정보, 장치 정보를 설정하면 됩니다.