본 글을 월간 마이크로소프트 2012년 5월호 특집 기사로 다루어진 내용입니다. Visual Studio 11이 Visual Studio 2012로 변경됨에 따라 본문의 내용을 일부 수정하였습니다.

 

본 글 이외에 Visual Studio 팀원의 강보람 MVP님의 "Welcome to Metro User Interface" 컬럼과 남정현 MVP님의 "Windows Server 8 미리 보기" 컬럼은 필자의 블로그에 기재하지 않은 점 또한 참고하기 바라며, 저작자의 동의하에 추후에 공개가 될 수 있습니다.

 

 

시대가 바뀌면서 Windows도 전통적인 모습에서 벗어나서 새로운 흐름을 만들고자 하는 노력이 시작된 것 같다. 물론 기존의 데스크 탑은 여전히 널리 사용될 것이다. 일상적인 업무에서 사용하는 응용 프로그램이 굳이 메트로 사용자 인터페이스 형태를 띌 필요는 전혀 없을 테니 말이다. 그리고 앞으로도 계속해서 기존의 데스크 탑을 타겟으로 하는 윈폼이나, WPF의 개발도 지속될 것이다. 하지만, 새로운 기회는 작은 틈에서 나오는 것이니 이 틈새를 잘 이해하기 위해서는 Windows 8의 메트로 환경을 잘 이해할 필요가 있다.

 

Windows 8과 Visual Studio 2012은 그야말로 N스크린에 감히 필수적인 환경이라고 말하고 싶다. 그 어떤 플랫폼도 데스크 탑과 테블릿, 모바일 등의 모든 기기와 환경 모두를 지원하는 것은 매우 어려운 일이다. 일반 사용자가 기기마다 사용하는 용도와 스타일이 다르고, 모바일 기기마다 해상도와 특징이 다르기 때문이기도 하지만, 하나의 개발 도구로 모든 상황을 대응할 수 있는 통합 개발 도구가 없는 것도 한 몫을 한다. 아니라고 말하는 독자도 있겠지만, 필자는 데스크 탑 환경까지 확장하는 N스크린을 말하는 것이고, 모든 N개의 스크린에서 똑같은 사용자 경험을 제공하는 것을 말한다. 이런 관점에서 Windows 8과 Visual Studio 2012은 그 해답을 제시하고 있으며, 충분히 가치 있고, 도전해 볼만하다. 이런 이유로 벌써부터 필자는 매우 흥분이 된다.

 

그리고 이 글에서 모두 소개하기는 어려웠지만, Windows Server 8은 그 동안의 Windows 운영 체제가 보여주었던 정적인 모습을 탈피하여 대규모 데이터 센터가 아닌 비용 문제 때문에 고민이 많은 수 많은 중소 규모의 IT 인프라에서도 효율적으로 시스템을 운영하고 애플리케이션 개발자들이 핵심에만 접근할 수 있도록 도와줄 방법을 제공하고 있다. 또한 메트로 스타일의 앱은 단순히 사용자 인터페이스에 관한 새로운 접근일 뿐만 아니라 데스크톱 가상화나 서버 관리자를 위한 새로운 종류의 서비스로 자리잡을 수 있다. 여전히 Charm Bar의 기능은 유용하게 사용할 수 있으며, Application Contract를 정확하게 지원하는 서버용 메트로 앱을 만들어 서버 관리자의 일을 덜어내거나 전혀 새로운 경험의 터치 기반 KIOSK를 손쉽게 만들 수도 있을 것이다. 이것은 전적으로 여러분의 선택에 달려있는 일이 될 것이다. 더 나아가서, Windows Server 8의 여러 기술들이 각종 호스팅 환경은 물론 Windows Azure나 Amazon과 같은 Public Cloud Computing 환경에도 전면적으로 도입이 된다면 더 멋지고 유용한 서비스들이 대거 등장하지 않겠는가 하는 것이 개인적인 생각이다.

 

참고 자료

지난 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 이미지, 그리고 앱의 호환 정보, 장치 정보를 설정하면 됩니다.