Silverlight 이용해 Windows Phone 7 App 개발하기 1

하승민 antasis9@gmail.com｜삼성전자 미디어 솔루션 센터에 근무하고 있으며 실버라이트를 이용한 RIA 프로그램 개발에 관심이 많다. 현재 실버라이트 코리아 운영진과 마이크로소프트 실버라이트 MVP로 활동 중이다. 저서로는 『실버라이트 3 : RIA Development Guide』가 있다.

 마이크로소프트는 오래전부터 윈도우 모바일이라는 모바일 플랫폼을 개발해 왔다. 하지만 애플의 아이폰, 구글의 안드로이드 그리고 삼성의 바다 등 성능과 UX가 뛰어난 스마트폰 플랫폼들이 빠르게 출시되면서 윈도우 모바일은 성능상의 문제와 다른 플랫폼에 비해 사용하기 어려운 UI 등으로 사용자들로부터 조금씩 외면을 받기 시작했다. 마이크로소프트는 이런 문제를 해결하기 위해 WP7을 출시했으며, 윈도우 모바일에서 윈도우 폰으로 이름을 바꿔 재탄생시켰다. 사용자 입장에서는 UI와 UX의 변화를 느낄 수 있고, 프로그래머 입장에서는 네이티브 언어(C, C++)로 개발하던 윈도우 모바일과는 다르게 매니지드 언어(C#)를 이용해 개발한다는 점에서 변화를 느낄 수 있다.

WP7 구조
WP7의 사용 방법이나 UI보다는 프로그래머 입장에서 WP7를 바라보려고 한다.

실버라이트와 XNA 소개
WP7에서 애플리케이션을 개발하기 위해 사용할 수 있는 플랫폼은 실버라이트와 XNA가 있다. 두 플랫폼 모두 .NET compact framework를 기반으로 하고 있다. 따라서 매니지드 코드인 C#을 지원하는 반면 네이티브 코드인 C나 C++은 지원하지 않는다. 기존의 윈도우 모바일에서는 네이티브 코드인 C나 C++을 메인 개발 플랫폼으로 지원하고 C#은 추가 개발 플랫폼으로 지원하는데, WP7에서는 C#을 전면적인 개발 플랫폼으로 내세우는 것이다.

실버라이트와 XNA는 새로운 기술이 아니다. 실버라이트는 RIA 개발을 위한 플랫폼이고, XNA는 게임 개발을 위한 플랫폼으로 이미 각각 웹과 데스크톱 및 X박스 시장에서 사용되고 있다. 덕분에 실버라이트나 XNA 개발 경험이 있다면 추가로 학습할 필요 없이 WP7용 애플리케이션을 개발할 수 있다.

WP7 프레임워크

<그림 1> WP7 프레임워크

앞서 언급한 것과 같이 실버라이트와 XNA는 .NET compact framework 위에서 매니지드 코드로 개발할 수 있다. .NET compact framework 위에서의 애플리케이션들은 샌드박스(Sandbox) 안에서 작동하기 때문에 시스템에 직접적인 영향을 미치지 않게 돼 시스템과 애플리케이션이 더욱 안정적으로 작동할 수 있도록 도와준다.

WP7은 <그림 1>과 같은 프레임워크 구조를 갖고 있다. 크게 네 가지 부분으로 나눠서 알아보자.

■ Common Base Class Library

애플리케이션을 개발하기 위해 .NET compact framework에서 제공하는 IO, 네트워크, 스레드 및 기본 API들이 포함돼 있다. 실버라이트와 XNA에서 공통으로 사용하는 라이브러리이다.

■ Silverlight Presentation and Media

실버라이트 애플리케이션을 개발하기 위해 제공되는 라이브러리이다. Silverlight for WP7은 실버라이트 3를 기본 바탕으로 하고 있기 때문에 실버라이트 3에서 제공하는 라이브러리와 비슷하다고 생각하면 된다.

■ XNA Frameworks

XNA 애플리케이션을 개발하기 위해 제공되는 라이브러리이다. 2D, 3D 게임을 개발하기 위해 필요한 소프트웨어, 서비스, 리소스 등을 제공한다.

■ Seonsors / Location

WP7에는 현재 자신의 위치를 알기 위해 사용할 수 있는 GPS와 사용자가 스마트폰에 특정 행동을 취하면 이에 대한 정보를 수집하기 위한 가속도 센서 등 다양한 하드웨어들이 탑재돼 있다. WP7에서는 이러한 하드웨어를 제어하기 위해 다양한 라이브러리를 제공한다.

하드웨어 최소 사양
WP7이 탑재되는 스마트폰은 다음과 같은  하드웨어 최소 사양을 지켜야한다.

화면 크기 : WVGA(800×480) 또는 HVGA(480×320)
멀티터치 : 4 포인트를 감지하는 멀티터치 스크린
CPU : 1㎓(ARM7 이상)
메모리 : 256MB 이상 램, 8GB 이상의 플래시 메모리
GPU : 다이렉트X 9 가속을 지원
카메라 : 500 메가픽셀 이상, 플래시 지원
센서 : GPS, Compass, Accelerometer, Light, Proximity
Etc : FM 라디오, 와이파이

프로그래머 입장에서 이와 같은 하드웨어 최소 사양이 의미하는 것은 무엇일까?

보통 스마트폰은 다양한 화면 크기를 갖게 된다. 또한 화면이 데스크톱에서 사용하는 모니터처럼 크지 않기 때문에 다양한 화면 사이즈에 최적화된 UI를 구성하기 쉽지 않다.

WP7에서는 화면 사이즈를 WVGA, HVGA 두 가지로 고정함으로써 프로그래머가 이 두 가지 화면 사이즈에 적합하게 UI를 구성하도록 한다. 화면 크기가 다른 디바이스마다 UI를 새롭게 구성해야 하는 수고를 덜게 된 셈이다.

또한 WP7에서 GPS, Compass, Accelerometer 센서가 의무적으로 지원되므로 프로그래머는 스마트폰에 이들 세 가지 센서가 탑재됐다고 가정하고 개발하면 된다. 만약 이런 하드웨어 사양이 없었다면 어떤 스마트폰에는 GPS가 없고 또 다른 스마트폰에는 Compass 센서가 없는 등 다양한 상황을 고려해 프로그래밍 해야 할 것이다. 이 부분 역시 프로그래머가 디바이스의 하드웨어 특성을 고려하지 않아도 되도록 도움을 준다. 

마지막으로 WP7은 외장 메모리를 지원하지 않는다. 때문에 내장 메모리는 다른 플랫폼의 디바이스보다 상대적으로 큰 8GB 이상을 지원하도록 하고 있다.

Silverlight for WP 7
이제 본격적으로 Silverlight for WP7에 대해 알아보자.

Silverlight for WP7은 이름이 의미하는 것처럼 WP7에서 작동하는 실버라이트를 의미한다. Silverlight for WP7은 기존 웹에서 사용하던 실버라이트 3를 기반으로 제작됐다. 즉, 실버라이트 3에서 지원하는 기능을 대부분 사용할 수 있다. 하지만 실버라이트 3는 웹을 타깃으로 개발됐고, Silverlight for WP7은 스마트폰을 타깃으로 개발됐기 때문에 몇 가지 차이점을 갖고 있다. 대표적인 차이점 몇 가지를 살펴보자.

어디에서 작동하는가
실버라이트 3는 다들 아는 것처럼 웹브라우저 안에서 작동한다(여기서는 Ouf of browser 기능은 예외로 처리한다). 하지만 Silverlight for WP7은 실버라이트 3와 달리 웹브라우저 안에서 작동하지 않고 일반 애플리케이션처럼 OS 위에서 바로 실행된다. 즉, 동일한 기술을 사용하되 애플리케이션이 작동하는 환경은 다른 것이다. 심지어는 WP7에 탑재된 인터넷 익스플로러를 이용해서는 실버라이트를 실행할 수 없다. WP7에서는 브라우저 안에서 실버라이트를 실행시킬 수 없다는 의미다.

이들 차이점 때문에 Silverlight for WP7에는 기존 실버라이트 3가 갖고 있던 브라우저 관련 API들이 제외돼 있다. 예를 들어, HTML DOM과 관련된 API나 자바스크립트와 관련된 API는 사용할 수 없다.

로컬 리소스에 접근하기
실버라이트 3에서는 애플리케이션에서 사용되는 데이터를 저장하기 위해 Isolated Storage를 제공한다. 이는 사용자의 시스템 리소스에 함부로 접근하지 못하도록 하기 위해 각 애플리케이션을 위한 가상의 논리적인 공간을 만들어 사용할 수 있도록 지원한다. 각 애플리케이션을 위해 제공되는 공간은 1MB이며, 사용자의 동의를 통해 그 이상의 용량으로 확장하는 것도 가능하다.

Silverlight for WP7에서도 마찬가지로 Isolated Storage가 제공된다. 하지만 실버라이트 3에서 제공되는 Isolated Storage와 공통점과 차이점을 동시에 갖고 있다.

공통점은 Silverlight for WP7 역시 사용자의 시스템 리소스를 보호하기 위해 각 애플리케이션을 위한 가상의 논리적인 공간을 제공한다는 점이다. 차이점은 실버라이트 3에서는 기본적으로 1MB의 공간이 주어지는 반면 Silverlight for WP7에서는 공간의 크기 제약이 없다는 것이다. 때문에 사용자들은 공간 확장을 위한 허가를 받지 않아도 시스템에 남아있는 공간을 자유롭게 사용할 수 있다(하지만 WP7 시스템 내부적으로 각 애플리케이션의 용량은 2GB를 넘지 못하도록 하고 있다. 이는 실버라이트의 제약이 아니라 WP7 플랫폼의 제약으로 보는 것이 옳다). 또한 가상의 논리적인 디렉토리이기 때문에 현재 디렉토리 경로를 구하는 ‘Environment.CurrentDirecty’나 ‘Environment.Get FolderPath’와 같은 프로퍼티나 메소드를 사용할 경우 에러가 발생된다.

Silverlight for WP7에서 Isolated Storage를 사용하는 방법은 다음 호에서 자세히 살펴볼 것이다.

멀티터치와 Manipulation 이벤트 처리
스마트폰에서는 웹에서와 달리 사용자의 손가락을 이용해 객체를 이동시킬 수 있고, 다수의 손가락으로 객체의 크기를 줄이거나 확대한다(예를 들어, 아이폰에서 지도를 확대하거나 축소하기 위해 두 손가락으로 제스처를 취하는 동작 등이다).

이러한 작업을 처리하기 위해 Silverlight for WP7에서는 Manipulation 이벤트를 제공한다. 프로그래머는 이 이벤트에 이벤트 핸들러를 연결해서 객체를 이동시키거나 확대·축소시킬 수 있다. 웹에서는 이러한 방식의 입력 방법이 적용되지 않기 때문에 이와 관련된 라이브러리는 Silverlight for WP7에서만 사용할 수 있다. 자세한 사용법 역시 다음 호에서 살펴보자.

네트워킹
실버라이트 3에서는 외부에 있는 데이터에 접근하기 위해 http, socket 그리고 web service 등의 네트워크 API를 제공한다. Silverlight for WP7에서도 네트워크 API를 제공하지만 실버라이트 3보다는 기능이 적다.

먼저 소켓 통신이 지원되지 않는다. 때문에 소켓을 이용한 채팅이나 파일 업로드 같은 서비스를 제공하기 어렵다. 필자가 가장 안타깝게 생각하는 부분이다. 소켓을 지원하지 않음으로써 기존 실버라이트 3에서 소켓 통신을 이용해 개발된 서버를 이용할 수 없게 되고, 소켓을 이용해 효과적으로 처리할 수 있는 로직을 다른 방법을 통해 해결해야 한다.

하지만 여전히 http를 이용한 서비스와 웹 서비스는 지원되기 때문에, 즉, 네트워크 기능을 전적으로 사용할 수 없는 것은 아니기 때문에 충분히 네트워크를 이용한 애플리케이션을 개발할 수 있다.

지금까지 알아본 차이점 외에도 실버라이트 3와 Silverlight for WP7은 수많은 차이점을 갖고 있다. 하지만 그 차이점이 플랫폼을 개발하는 방법을 바꿀만큼 커다란 이슈는 아니기 때문에 크게 걱정하지 않아도 된다. 기존에 웹용 실버라이트를 개발해 본 경험이 있다면 그 경험을 바탕으로 충분히 WP7용 애플리케이션을 개발할 수 있다.

더 자세한 차이점을 살펴보려면 마이크로소프트에서 제공하는 MSDN(http://msdn.microsoft.com/en-us/library/ff426930 (VS.95).aspx)을 살펴보길 바란다.

WP7 개발 환경 구성하기
WP7을 개발하기 위해서는 비주얼 스튜디오 2010, 윈도우 폰 에뮬레이터, Silverlight for WP, XNA 게임 스튜디오 4.0이 필요하며, 필수는 아니지만 윈도우 폰 애플리케이션을 개발할 때 디자인을 하기 위해 마이크로소프트 블랜드 4를 사용할 수 있다. 이 프로그램들 중 일부는 아직 정식 버전이 아닌 CTP 버전이다. 그리고 WP7용 애플리케이션을 개발하기 위해서는 윈도우 비스타나 윈도우 7 운영체제가 필요하다.

비주얼 스튜디오 2010 익스프레스 for WP7 설치하기
비주얼 스튜디오 2010 정식 버전이 없다면 마이크로소프트에서 무료로 제공하는 비주얼 스튜디오 2010 익스프레스(Express) 버전을 사용할 수 있다. 비주얼 스튜디오 2010, 윈도우 폰 에뮬레이터, Silverlight for WP, XNA 게임 스튜디오 4.0을 설치하기 위해 다음 주소로 접속한다. 

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=cabcd5ed-7dfc-4731-9d7e-3220603cad14

이 주소로 접속한 후 설치 프로그램을 다운받아 실행하면 WP7용 실버라이트 애플리케이션 개발을 위해 필요한 비주얼 스튜디오 2010 익스프레스 for WP7, WP7 에뮬레이터, Silverlight for WP, XNA 게임 스튜디오 4.0이 한 번에 설치된다.

<화면 1> 비주얼 스튜디오 2010 설치 확인 화면

설치가 완료되면 <화면 1>과 같이 비주얼 스튜디오 2010 익스프레스 for WP 7이 설치된 것을 확인할 수 있다.

필자 메모 이미 비주얼 스튜디오 2010 정식 버전이 컴퓨터에 설치돼 있어도 앞의 링크를 통해 다운로드 한 설치 프로그램은 비주얼 스튜디오 2010 익스프레스 for WP7을 시스템에 설치한다. 하지만 기존에 갖고 있던 비주얼 스튜디오 2010 정식 버전에 WP7을 개발할 수 있는 플러그인을 설치하기 때문에 비주얼 스튜디오 2010 정식 버전이나 비주얼 스튜디오 2010 익스프레스 버전 모두에서 WP7을 개발할 수 있다.

마이크로소프트 블랜드 4 설치하기
마이크로소프트 블랜드 4(이하 블랜드 4) 역시  아직 정식 버전이 아닌 RC(Release Candidate) 상태로, 보통 디자이너들이 실버라이트 애플리케이션이나 WPF 애플리케이션을 디자인하기 위해 많이 사용하는 툴이다. 블랜드 4는 기본적으로 Silverlight for WP7 애플리케이션을 디자인할 수 있도록 지원하고 있지는 않다. 이 때문에 추가로 ‘Expression Bled Add-in Preview 2 for Windows Phone’과 ‘Expression Blend Software Development Kit Preview 2 for Windows Phone’을 설치해야 한다.

각 프로그램의 다운로드 경로는 다음과 같다.

블랜드 4
http://www.microsoft.com/downloads/details.aspx?FamilyID=88484825-1b3c-4e8c-8b14-b05d025e1541&displaylang=en

블랜드 4 Add-in for 윈도우 폰
http://www.microsoft.com/downloads/details.aspx?FamilyID=47f5c718-9dec-4557-9687-619c0fdd3d4f&displaylang=en

블랜드 4 SDK for 윈도우 폰
http://www.microsoft.com/downloads/details.aspx?FamilyID=86370108-4c14-42ee-8855-226e5dd9b85b&displaylang=en

Hello World! 애플리케이션 작성하기
이제 설치된 프로그램을 이용해서 간단한 ‘Hello World’ 애플리케이션을 작성해 보려고 한다.

비주얼 스튜디오 2010 익스프레스 for WP7을 이용해 코드를 작성하고, 실제 디바이스가 없기 때문에 WP7 에뮬레이터를 이용해 작성한 코드를 실행해 보자.

먼저 [Visual Studio 2010 Express for WP]를 실행한다. 다음으로 WP7용 실버라이트 프로젝트를 생성하기 위해 <화면 2>와 같이 [File] → [New Project]를 선택한다.

<화면 2> 새로운 프로젝트 생성 화면

그럼 <화면 3>과 같이 생성할 프로젝트 타입을 선택하는 다이얼로그가 나타난다.

<화면 3> 생성할 프로젝트 타입 선택하는 다이얼로그

왼 쪽(Installed Templates)에는 비주얼 C#만, 그 하부에는 Silverlight for Windows Phone 그리고 XNA 게임 스튜디오 4.0만 존재하는 것을 확인할 수 있다. 즉, 현재는 WP7용 애플리케이션을 제작하는 방법으로 실버라이트나 XNA만 지원한다는 의미이다.

실버라이트 프로젝트를 생성하기 위해 Silverlight for Win dows Phone을 선택한다. 그럼 화면 중앙에 총 세 가지 타입의 실버라이트 프로젝트 템플릿이 나타날 것이다. 각 템플릿은 다음과 같은 특징을 갖고 있다.

1. Windows Phone Application은 빈 프로젝트로, 이를 선택하면 최소한의 리소스만 생성된다.
2. Windows Phone List Application은 실버라이트 3의 Navigation Project와 비슷하며, 실제로 이 프로젝트를 생성하면 여러 페이지를 탐색(Navigate)하는 예제가 포함된 프로젝트가 생성된다.
3. Windows Phone Class Library는 실버라이트 3의 Class Library 프로젝트와 비슷하며, 이 프로젝트는 다른 프로젝트에 참조돼 사용될 클래스 라이브러리를 생성하고자 할 때 이용한다.

우리는 첫 번째 Windows Phone Application을 선택해 빈 프로젝트를 생성한다. 프로젝트 이름 필드에는 ‘HelloWorld Project’라고 입력한다.

프로젝트가 생성되면 <화면 4>와 같이 나타난다. 왼 쪽은 xaml의 결과 디자인을, 가운데는 현재 작성 중인 xaml의 내용을 보여준다. 그리고 오른쪽에 위치한 프로젝트 구조를 살펴보면 알겠지만 실버라이트 3 프로젝트와 매우 유사하다.

그럼 화면에 “Hello World”를 출력하기 위해 ‘MainPage.xaml’의 내용을 <리스트  1>과 같이 작성한다.

<화면 4> 새로운 프로젝트 생성완료 화면

<리스트 1> “Hello World 출력을 위한 MainPage.xaml <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">    <Grid.RowDefinitions>       <RowDefinition Height="Auto"/>       <RowDefinition Height="*"/>    </Grid.RowDefinitions>    <!--TitleGrid is the name of the application and page title-->    <Grid x:Name="TitleGrid" Grid.Row="0">       <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>       <TextBlock Text="page title" x:Name= "textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>    </Grid>    <!--ContentGrid is empty. Place new content here-->    <Grid x:Name="ContentGrid" Grid.Row="1">       <TextBlock       Text="Hello Silverlight" FontSize="50"       VerticalAlignment="Center" HorizontalAlignment= "Center"/>   </Grid> </Grid>

<리스트 1>에서 굵게 표시한 TextBlock만 새롭게 추가한 것이며, 나머지 부분은 디폴트로 생성되는 구조를 그대로 사용했다.

이제 실버라이트 애플리케이션을 WP7 에뮬레이터로 실행해 보자. 에뮬레이터를 실행하기 위해 <화면 5>와 같이 Windows Phone 7 Emulator를 선택하자. 실제 디바이스가 있다면 이 부분을 Windows Phone 7 Device로 선택하면 된다.

<화면 5> 에뮬레이터 선택 화면

<화면 6> 애플리케이션 실행 화면

좌측에 있는 <Debug> 버튼을 클릭하거나 <F5>키를 눌러서 애플리케이션을 실행한다. 잠시 기다리면 먼저 WP7 에뮬레이터가 실행되는 것을 확인할 수 있다. 그리고 이어서 <화면 6>과 같이 “Hello Silverlight”가 화면에 출력되는 것을 볼 수 있다.

이상으로 WP7의 구조에 대해서 간단히 살펴보고, 실버라이트를 이용해 WP7용 애플리케이션을 개발하기 위해 필요한 프로그램에 대해 알아봤다. 그리고 비주얼 스튜디오 2010을 이용해서 [Hello World] 애플리케이션을 작성한 후 에뮬레이터에서 실행해 봤다.

Silverlight for WP7은 실버라이트 3와 매우 많이 닮았다. 하지만 스마트폰에서 작동하는 만큼 실버라이트 3에서와는 다른 스마트폰을 위한 다양한 라이브러리를 제공한다.

출처: http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=35157