본문 바로가기

Speaker Documents

Windows Phone 7 – 애플리케이션 개발의 시작

안녕하세요 루나네스 입니다
아래의 글은 제가 어떤 곳에 기고하기 위한 원고를 작성 했다가 착오로 기고하지 못한 원고 입니다
윈도우폰7에 대해 간략한 요약 정보와 Windows Phone 7 Training Kit에 있는 "Hello Windows Phone"을 정리해 보았습니다

Windows Phone 7(윈도우폰7)은 지난 2010년 2월 스페인 바로셀로나에서 열린 MWC에서 처음 공개가 되어 세계인의 많은 관심을 받고 있는 마이크로소프트의 차세대 모바일 플랫폼이다.
이후 MIX10에서 변화된 윈도우폰7 개발 환경과 새로운 UX소개가 진행되어 그 실체가 공개되기 시작했다. 국내에는 MIX10 이후 개발자 커뮤니티를 중심으로 개발 방법이 소개가 진행되었고, 지난 6월 REMIX10 Seoul에서 발표가 된 후 언론에 공개가 되면서 많은 관심을 받고 있다. 이번 연재에서는 Windows Phone 7의 변화된 UX와 개발환경을 설치와 간단한 예제를 통해서 살펴보도록 한다.

01. Windows Phone 7 : A New kind of Phone


<그림 1, Windows Phone 7 : A New kind of Phone>

윈도우폰7은 기존의 출시된 모든 스마트폰 과는 다른 폰이라 말하고 있다.
기존의 모바일 플랫폼인 Windows Mobile 시리즈까지 UX는 PC에서의 경험을 그대로 옮겨 PDA와 폰에서 사용할 수 있도록 설계가 되어있기 때문에 최근 손으로 터치하는 환경과는 적합하지 않았다. 이 후 마이크로소프트는 WM6.5.3부터 UX환경을 스타일러스에서 손가락으로 입력환경을 변경하였지만, 현재 시장에서의 경쟁력을 갖기에는 너무 늦은감이 있다.
그래서 마이크로소프트는 뒤쳐졌다고 평가 받는 모바일 플랫폼에 대해 역전을 위한 대대적인 변화를 준비하였는데 이것이 바로 윈도우폰7이다<그림1>.

윈도우폰7은 디자인부터 하드웨어까지 새로운 설계를 하였다. 디자인은 "폰은 PC가 아니다" 라는 생각으로 사용자의 시점부터 설계가 시작되었고, 그 디자인을 바탕으로 플랫폼의 설계가 진행되었다. 하드웨어는 표준화를 통해 동일한 하드웨어 버튼과 스팩을 정하여 어떠한 제조사의 단말기를 사용한다 하여도 동일한 윈도우폰7의 경험을 누릴 수 있도록 정하였다


<그림 2, Smart Design>

윈도우폰7은 기존에 취약하다고 평가 받았던 부분을 크게 개선하였다<그림2>. 기존에 단순한 기능만 제공했던 시작 화면을 Live 타일을 통해 사용자의 정보를 실시간으로 업데이트하여 한눈에 보고 사용할 수 있도록 디자인 되었다.

검색에 대한 부분도 개선되었다. Bing검색을 사용자의 위치에 따라 최적화된 결과를 제공할 수 있게 되어있고, 하드웨어 버튼의 "Search"버튼을 통해 한번의 클릭을 통해 검색이 가능하도록 하였다. 이것은 애플리케이션에서도 동일하게 검색을 할 수 있도록 하기 위함이다.

기존의 WM6.x에서의 약점으로 평가가 되었던 Internet Explorer는 윈도우폰7에서는 크게 개선하여 더욱더 빨라진 웹 서핑 환경 제공과 가독성 높은 텍스트와 링크를 쉽게 클릭할 수 있는 기능을 제공한다.


<그림 3, Integrated Experiences>

윈도우폰7의 또 다른 변화로 바로 통합된 환경(Integrated Experiences)이라 말할 수 있다. 앞서 설명한 Live 타일과 같이 사용자에게 정보를 한눈에 제공하기 위해 만들어진 Hub는 모든 정보를 한눈에 볼 수 있는 Panoramic View를 제공한다. 연속적인 정보를 마치 화면을 넓게 보는 것 과 같은 디자인을 제공하여, 한눈에 볼 수 있고 연계되는 정보도 통합적으로 보여줘서 사용자의 몰입도를 높여줄 수 있다. 또한 모든 애플리케이션과 서비스, 컨텐트와 테마와 같은 사용자 환경에 동일하게 적용되기 때문에 사용자가 조작하는 단계를 현저하게 줄여줄 수 있다<그림3>. 이러한 Hub는 People, Pictures, Games, music+video, Marketplace, Office에 동일하게 구성되어 있다

 

02. Windows Phone 7 – Developer Tools

이러한 변화에 맞게 개발 방법도 변경이 되었다. 기존의 모바일 애플리케이션을 개발하기 위해서는 임베디드의 높은 레벨의 개발 지식과 개발 언어의 이해도 필요했다. 이러한 배경 때문에 애플리케이션에서의 메모리 누수와 같은 단말기의 정상적인 동작을 방해하는 문제적인 요소가 발생되게 되었고, 이는 사용자들이 불편을 느끼게 되는 주요 원인 중 하나였다. 윈도우폰7에서는 개발 언어를 실버라이트와 XNA를 선택하게 되었다. 이는 기존의 Native코드 개발에서 Managed환경으로 변화가 되면서 기존의 웹 개발자와 같은 임베디드의 전문지식이 없는 개발자도 쉽게 윈도우폰7의 애플리케이션을 개발 할 수 있도록 진입 장벽을 낮추게 된 것이다.


<그림 4, Windows Phone 7 Developer Tools>

실버라이트와 XNA는 <그림4>와 같이 윈도우폰7 애플리케이션을 개발하기 위한 Framework이다. 실버라이트는 윈도우폰7에 UI Framework로 탑재되어 보다 역동적이고 편리한 애플리케이션 개발이 가능해졌다. 실버라이트를 사용하는 웹 개발자는 윈도우폰7 개발에 쉽게 진입을 할 수 있는 것 이다. XNA는 고성능 게임을 제작할 수 있는 Framework로 Managed언어인 C#을 기반으로 개발을 할 수 있게 되어 있다. XNA는 윈도우폰7 뿐만 아니라 Xbox와 PC에서의 게임을 개발할 수 있기 때문에 하나의 소스코드로 3가지 디바이스를 동시에 지원하는 게임 개발이 가능해졌다. 국내에는 정식 출시가 되지 않았지만, Zune이라는 멀티미디어 디바이스도 지원이 가능하다.

기존에 Windows Mobile 애플리케이션을 개발하기 위해 Visual Studio가 반드시 필요했다. 물론 윈도우폰7에서도 마찬가지지만, Windows Phone Developer Tools<그림5>에서는 Visual Studio 2010 Express for Windows Phone과 Expression Blend 4 for Windows Phone 를 무료로 제공한다. 그만큼 개발에 입문하는 사람들의 금전적 부담을 매우 많이 줄여주게 된 것이다. 제품명 뒤에 for Windows Phone에서 볼 수 있듯이 제공되는 도구는 윈도우폰7 전용으로 다른 어플리케이션 개발에는 사용이 불가능하다.
Windows Phone Developer Tools는 아래 링크에서 다운로드 받을 수 있다
다운로드 : http://developer.windowsphone.com/windows-phone-7/

 


<그림 5, Windows Phone Developer Tools Beta>

Windows Phone Developer Tools Beta에는 다음과 같은 도구들이 포함되어 있다

  • Visual Studio 2010 Express for Windows Phone Beta
  • Windows Phone Emulator Beta
  • Silverlight for Windows Phone Beta
  • Microsoft Expression Blend for Windows Phone Beta
  • XNA Game Studio 4.0 Beta

기존의 공개된 윈도우폰7 개발 툴은 Visual Studio 2010 Expression for Windows Phone 과 Expression Blend 4 Beta를 각각 따로 설치를 해 줘야 했다. 그로 인해서 설치하는 과정에 이미 윈도우폰7 개발 툴과 관련된 도구가 이미 설치 되어 있었다면 일일이 다 제거해주고 설치를 하고 각각 추가로 설치를 해줘야 하는 어려움이 있었는데 이번 Beta버전에는 이러한 문제점들을 한번에 해결할 수 있도록 공개가 되었다.

만약 자신의 PC에 영문판 Visual Studio 2010이 이미 설치되어 있다면 자동적으로 템플릿과 SDK가 추가되어 동작할 수 있게 된다. 꼭 Visual Studio 2010 Express for Windows Phone을 이용하지 않아도 된다는 뜻이다. 주의사항으로 아직은 Beta라서 그런지 한글판 Visual Studio 2010에는 템플릿이 추가되지 않는다.

설치를 하기 위해 다운로드를 받으려면 두 가지 설치 방식이 존재한다. 한가지는 wm_web.exe라는 온라인에서 설치 패키지를 다운로드 받아 설치하는 방법과 WPDTBeta_en.iso라는 ISO이미지 파일을 받아 설치하는 방법으로 나뉘어있다. 기존의 온라인 다운로드 방식이 느리고 설치하는데 시간이 많이 걸리기 때문에 Beta버전에는 ISO를 제공한다. 편리한 방법을 선택해서 설치하여도 동일한 환경을 제공한다.

윈도우폰7의 개발환경은 기존의 Windows Mobile 6이하의 개발 환경에 비해 Windows Vista이상의 운영체제에서만 설치가 가능하다. 마이크로소프트에서 Windows XP의 지원이 종료되었고 새로운 운영체제인 Windows 7이 보급되고 있는 시점에서는 기존의 Windows XP를 사용하는 개발환경의 업그레이드가 필요한 것은 사실이다. 하지만 Windows XP를 사용하는 환경에서는 설치를 할 수 없는 부분은 아쉬운 부분이다.

 

03. Windows Phone 7 Training Kit for Developers

변화된 윈도우폰7 개발 방법에 대한 전문적인 자료는 MSDN을 제외하고 전무한 상황이다. 마이크로소프트에서도 이점을 염두에 두었는지 트레이닝 킷을 제공하고 있다<그림6>.


<
그림 6, Windows Phone 7 Training Kit for Developers>

트레이닝 킷<그림6>에는 기본적인 애플리케이션 제작 방법 뿐만 아니라 윈도우폰7의 새로운 기능에 대한 추가적인 설명과 개발 방법에 대해 Step별로 따라 진행할 수 있도록 제공하고 있다. 트레이닝 키트를 이용하여 윈도우폰7 개발 입문에 많은 도움이 될 것 이라 예상된다.
아래의 (4) Hello Windows Phone도 트레이닝 키트에 있는 첫 번째 자료인 "Hello Windows Phone"을 요약 정리한 내용이다.

다운로드 : http://www.microsoft.com/downloads/details.aspx?familyid=CA23285F-BAB8-47FA-B364-11553E076A9A&displaylang=en

 

04. Hello Windows Phone

모든 개발언어에서 가장 먼저 해보는 것은 바로 "Hello world!"를 출력해보는 것이다. 이번 연재에서도 "Hello Windows Phone"을 만들어 보도록 하겠다. 기본적인 자료는 앞서 설명한 윈도폰7 트레이닝 킷을 참고하여 진행하도록 한다.

(1) Visual Studio 2010 Express for Windows Phone

먼저 <그림7>처럼 Visual Studio 2010 Express for Windows Phone을 실행해서 프로젝트 "HelloWP7"을 생성한다. 필자는 VS2010에서 프로젝트를 생성해서 작업을 한 후 Blend4에서 UX작업을 진행한다. 대부분의 개발은 VS2010의 강력한 Intellisense와 실시간 디버깅을 이용해 작업을 하고, UX적인 요소와 기능들은 Blend4를 이용하고 있다.


<그림 7, "HelloWP7" 프로젝트 생성>

생성된 프로젝트에 <그림8>과 같이 컨트롤을 배치한다. 배치된 컨트롤의 name과 속성을 맞게 변경해 준다


<그림 8, 컨트롤 배치 및 속성 정의>

컨트롤 배치가 끝났으면 [Click Me]버튼에 대해 이벤트를 정의해야 한다. 디자인에서 [Click Me]버튼을 클릭한 다음 Properties의 Event탭을 누르면 <그림9>와 같은 [Click]이벤트를 추가할 수 있다. 쉽게 하기 위해서는 [Click Me]버튼을 Double-Click하면 해당 컨트롤의 가장 기본적인 [Click]이벤트를 바로 추가할 수 있다.

 


<
그림 9, [Click Me]버튼 이벤트 추가>

MainPage.xaml.cs파일을 열어보면 ClickMeButton_Click이 추가되어 있는 것을 볼 수 있다.

이곳에 아래와 같은 코드를 넣어준다

private void ClickMeButton_Click(object sender, RoutedEventArgs e)
{
BannerTextBlock.Text = MessageTextBox.Text;
MessageTextBox.Text = String.Empty;
}

코드작성이 마무리 되었으면 메뉴의 [Debug] -> [Start Debugging]을 눌러 실행 확인을 한다.

(2) Microsoft Expression Blend 4 for Windows Phone Beta

완성된 프로젝트의 UX를 변경하기 위해서 Expression Blend 4 for Windows Phone Beta를 실행하여 프로젝트를 불러온다 <그림10>.


<
그림 10, Expression Blend 4 for Windows Phone Beta>

우리가 작업할 부분은 바로 [Click Me]버튼을 Fancy하게 꾸미는 작업을 진행할 것이다. <그림11>처럼 [Click Me]버튼을 선택 후 오른쪽 마우스 클릭을 하여 [Edit Template]을 선택 한 후 하위 메뉴의 [Create Empty]를 눌러 템플릿을 추가한다


<
그림 11, FancyButton Template 생성>

[Create ControlTemplate Resource]다이얼로그에서 Name에 FancyButton을 입력 후 Define in에서는 "This document"를 선택 후 확인을 눌러 추가한다<그림12>.


<
그림 12, Create ControlTemplate Resouce>

 

<그림 13>처럼 Objects and Timeline 패널에서 Grid를 선택 후 오른쪽 버튼을 클릭하면 [Change Layout Type]에서 Border로 변경한다


<
그림 13, 버튼의 Layout Type 변경>

변경된 [Board]를 선택 하면 Properties가 변경되는데 여기서 아래 <그림14>와 같이 속성을 변경한다


<
그림 14, Button Template 속성 Board>

버튼과 마찬가지로 Text를 넣어줘야 한다. 이것은 TextBlock을 추가하여 변경하도록 한다. TextBlock을 추가한 뒤, <그림15>와 같이 속성을 변경해 줘야 한다. 주의할 점은 Common Properties에 Text에 직접 "Click Me"라고 수정하는 것이 아니라 Template Binding을 통해서 Content를 선택해주면 자동으로 변경이 된다.


<그림 15, TextBlock속성 변경>

프로젝트를 저장 후 F5를 눌러 Blend 4 for Windows Phone Beta에서 바로 에뮬레이터로 실행이 되는 모습을 볼 수 있다 <그림16>


<그림 16, Windows Phone 7 – Hello Windows Phone 구동 모습>

 

05. 마치며

윈도우폰7은 기존의 Windows Mobile에서의 개발환경과는 많은 차이점을 보이고 있다. 하지만 UI Framework가 Silverlight로 변경된 것이고, 내부적인 알고리즘 처리는 .NET기반의 C#으로 개발이 가능하다는 점을 살펴본다면 Windows Mobile 개발자도 쉽게 윈도우폰7으로 전환이 가능할 것이라 예상된다. 마찬가지로 Silverlight 웹 개발자도 쉽게 윈도우폰7의 개발이 가능한 것이다. 이처럼 윈도우폰7은 개발 진입장벽이 많이 낮아졌고 Silverlight의 막강한 UX와 결합이 되었기 때문에 수준 높은 애플리케이션을 기존에 비해 쉽고 빠르게 만들 수 있게 되었다.

국내에서도 많은 윈도우폰 개발자가 서로 정보를 공유하면서 윈도우폰7 출시에 맞춰 애플리케이션을 준비하고 있다. 특히 윈도우폰 개발자 커뮤니티와 실버라이트 커뮤니티에서도 윈도우폰7 준비를 위한 스터디를 운영하고 있고, 이에 따른 자료도 공개 되고 있다. 관심이 있는 개발자들은 국내 커뮤니티에서 개발 정보를 접하며 윈도우폰7 애플리케이션을 개발해 볼 수 있을 것 이다. 자세한 정보는 WinMoDev에서 만나볼 수 있다.