본문 바로가기

class "Think"/"MSP"

[P] MSP 개인 프로젝트 2 - 본격 윈폰7 어플리케이션 개발하기 - 그 첫번째


사실 윈폰7으로 팀프로젝트를 시작하면서, 개인프로젝트와 연계할수 있으면 딱 좋겠다는 생각을 해서, 처음에 윈폰7에 대한 포스팅을 하려다, 다른분들이 윈폰7 관련 포스팅을 많이 해주셔서, 저는 개발자 취향인 만큼 윈폰7 개발에 대한 발을 살짝 담굴수 있을만한 포스팅을 하기로 했습니다!

따라서 8월 포스팅은 - '본격 윈폰7 어플리케이션 개발하기' 로 주제를 잡아보았습니다.

* 본 포스팅은 Programming Windows Phone 7 Series - Charles Petzold 의 Preview Content를 참고하였습니다



먼저! 다들 알고 계실만한 마이크로 소프트에서 요구하는 윈폰7 을 탑제하는 하드웨어의 최소스팩과 간단한 특징들을 열거해보겠습니다
  • 480*800 또는 320*480의 해상도를 가진 4개이상의 정전식 터치 입력이 동시에 가능한 OLED 디스플레이
  • 3개의 하드웨어 버튼 (Back, Start, Search)
  • Wi-Fi 무선인터넷
  • 500만화소 이상의 카메라와 플래쉬
  • 3차원 가속도 센서와 나침반센서
  • GPS 로케이션 디바이스
  • 진동과 푸쉬 알림기능 등...
사실 이러한 세부적인 하드웨어 제한은, 하드웨어 개발하는 분들에게 있어서 다형성을 제한받고 기기만의 특징을 표현하는데 어려움이 생기게 되지만, 사실 개발자에게 있어 두손들고 환영할만한 좋은 조건이라고 생각합니다.
윈폰과 같은 오픈플렛폼인 안드로이드는 각 기기마다의 스팩과 특징, 라이브러리가 달라서 같은 어플리케이션이라 하더라도 디바이스 별로 조금씩 다르게 개발해야 했었는데, 윈폰7 은 하나의 어플리케이션으로 모든 윈폰7을 탑제한 디바이스에서 동일하게 동작할수 있게 처음부터 개발할수 있기에, 처음 개발환경은 물론이고 유지보수 환경도 뛰어나기때문에 개발자 입장에서도 한가지에 집중할수 있고, 사용자 입장에서도 빠른 유지보수 업데이트로 양질의 어플리케이션을 사용할수 있는, 더할나위없는 Win-WIn환경이라고 생각합니다.

아무튼, 잡설이 길었는데 그만큼 이번 윈폰7에 대한 기대를 하고있는 개발자들이 많을거라고 생각합니다!! (저포함ㅋ)

자! 그럼 윈폰7은 어떤 언어와 프레임(Frame)으로 개발할까요?
다들 아시지만 Silverlight와 XNA라는 C#이 베이스인 닷넷프레임워크(정확히 .Net Compact Framework)로 개발해야 합니다. 윈폰7 RC(Release Candidate)를 통해 주로 우리가 보아왔던 아래와 같은 Metro 레이아웃은 Silverlight로 개발이 되었다고 생각하시면 됩니다.


XNA는 원래 XBOX360과 윈도우 기반의 게임을 만들때 쓰는 프레임이었는데, 이번에 윈폰7에도 채용을 하여, 윈폰7기반의 게임을 개발할때 (혹은 그래픽적인 요소가 많이들어가는 어플리케이션) 사용할수 있는 프레임입니다.

(굳이 XNA를 보여드리자면, 똑같은(코드는좀 다르지만) HelloWorld 어플을, 오른쪽은 실버라이트로, 왼쪽은 XNA로 개발한것입니다.)

사실 프로그램을 개발하는데 있어, 실버라이트니 XNA니 구분 안하고 그냥 취향에 맞는 프레임을 선택하여 개발할수 있지만, 굳이 저는 조금더 코드가 적고 모양새가 이쁘게 나오는 실버라이트를 중심으로 설명하고자 합니다. (나는 코딩머신이다! 하시는 분들은 XNA 추천 ㅋㅋ)


자 그럼! 이제 본격적으로 윈폰7을 개발할수 있는 개발환경을 셋팅하는 방법을 알려드리고!
본격적인 개발에 앞서 기본적인 파일들에 대한 설명과 간단한 예제를 보여드리겠습니다.

개발환경 셋팅은! 먼저 가장 중요한! Visual Studio 2010Expression Studio 4, 그리고 Windows Phone 7 SDK를 다운로드 받아야합니다.

우리는 대학생이니까! 이 모든 제품을 무료로 사용할수 있는 드림스파크! (http://dreamspark.com) 을 이용하면 손쉽게 받을수 있습니다.

보시면 맨위에 비쥬얼스튜디오2010 프로페셔널!(무려!) 그리고 아래 익스프레션스튜디오4 울티메이트(와우!)가 보입니다 ㅎ 사뿐히 다운로드 받아주세요~
(다운로드에 앞서 대학생임을 인증받아야 하는데, 먼저 live.com 계정이 있어야 하구요, 그리고 @*.ac.kr 로 된 이메일 주소가 필요합니다. 간단한 인증절차를 거치면 저기있는 자료들 모두 무료로 다운로드 받으실수 있습니다)

다운받으신 프로그램 모두 데몬툴 등을 이용하여 이미지 마운트하신다음에 설치를 완료 하시구요!
그다음에 SDK를 설치해야 합니다. SDK는 다음 주소에서 다운로드 받으세요!
(http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en)
링크에 들어가시면 중간쯤 부분에 아래와 같은 부분이 보입니다.
여기서 중간에 있는 wm_web.exe 를 받으셔서 실행하면, 자동으로 비주얼스튜디오와 익스프레션스튜디오가 윈폰7에 맞게끔 업그래이드가 되고, 필요한 SDK도 다운로드를 받아 설치하게 됩니다.
*참고로 윈폰7 SDK는 윈도우비스타/윈도우7 OS 에서만 작동합니다

자! 그럼 개발환경이 모두 준비가 되었습니다! 이제 본격적으로 조금 지루하겠지만, 기본적인 요소들에 대한 설명과 예제를 보여드리겠습니다.

시작 -> 모든프로그램 -> Microsoft Visual Studio 2010 Express -> Microsoft Visual Studio 2010 Express for Windows Phone

를 실행합니다. 그럼 다음과 같은 화면을 확인할수 있습니다.


여기서

File -> New Project 를 클릭합니다


위와같은 화면이 나오는데, Windows Phone Application 을 클릭한후, Name은 일단 notepad라고 입력했습니다.

그럼 드디어 아래와 같은 화면이 나타납니다

굉장히 직관적인 인터페이스입니다.
가장왼쪽은 당연히 Visual상으로 확인할수 있는 윈폰7의 모습입니다. 모든부분은 아니지만, 기본적인 디자인이라던가 컨트롤등은 적용시 바로 시각적으로 확인할수 있는 부분입니다.
중간부분은 현재 MainPage.xaml 의 코드를 보여주고 있습니다. xaml(재물(?) 이라고 많이 부르죠)파일은 eXtensible Application Markup Language의 약자로 디자인적인 요소를 많이 띄고있는 소스파일입니다. 일반적인 HTML태그형식처럼 <>꺾인 괄호를 통해 컨트롤과 그리드와 같은 레이아웃적인 요소를 추가하며,  일반적으로 이부분에 추가되는 부분은 왼쪽의 에뮬레이팅창에서 바로 확인이 가능합니다.
그리고 가장 오른쪽창은 솔루션익스플로러 로 현재 어플리케이션에서 사용하고 있는 리소스, 소스파일, 레퍼런스와 속성등을 확인할수 있습니다.

이제 윈폰7 개발에 아주 중요한 파일 4가지만 짚고 넘어가겠습니다. 그 파일은 다음과 같습니다
  • MainPage.xaml
  • MainPage.xaml.cs
  • App.xaml
  • App.xaml.cs
(처음 *.cs 파일은 솔루션탐색기에서 안보이는데,
오른쪽 사진과 같이 화살표를 클릭하면 나타납니다.)

MainPage.xaml은 위에서도 설명했지만, xml이라는 html을 보완한 마크업랭귀지로, html을 배우신 분이라면 어렵지 않게 배우실수 있고, 또한 Microsoft Blend4 같은 툴을 이용하여 시각적으로도 손쉽게 편집할수 있는 부분입니다. 특히 App.xaml과 MainPage.xaml 2가지 파일이 있는데, MainPage.xaml은 어플리케이션의 가장 첫 화면을 장식하는 (타이틀, 하부타이틀, 네비게이션 등..)을 결정하는 중요한 파일입니다.

MainPage.xaml.cs 파일은 MainPage.xaml과는 다르게 C#으로 구현되어있는 소스파일입니다. 따라서 열어보시면 아시겠지만 C#의 문법으로 네임스페이스와 클래스로 시작하는 것을 확인할수 있습니다. 이곳에서는 MainPage.xaml에 추가된 컨트롤에 대해 이벤트와 트리거등을 추가하여 사용자와 어플리케이션간의 상호작용을 통해 좀더 어플리케이션 답게 만드는 부분입니다. 참고로, MainPage.xaml 파일을 기본상태로 두고 MainPage.xaml.cs파일만으로 디자인과 이벤트, 트리거 작성을 동시에 할수 있다는 것입니다. (하지만 디자이너와의 협업이 어려워지기에 비추입니다..)

App.xaml App.xaml.cs 파일은 굳이 위에 MainPage* 파일들이 있는데 있어서 뭐하냐? 라고 많은분들이 반문하실수도 있고, 저또한 이게 왜 필요한가 많이 생각했는데, 책을보니 다음과 같이 적혀있었습니다.
The App.xaml file is often used for storing resources that are used throughout the application.
즉 어플리케이션을 통한 리소스를 저장하는데 사용된다고 하네요. 컬러스키마나 그라디언트 브러쉬, 스타일등 여러 리소스가 이미 App.xamle 라는 파일을 통해 제공된다고 합니다. 그리고 전역적인 어플리케이션 수준의 이벤트를 다룬다고 하는데요, App.xaml.cs 파일을 열어보면 Application_Launching, Application_Activated.. 등의 전역 이벤트를 확인할수 있습니다. 여기다 코드를 추가하면, 필요할때 어플리케이션을 적절히 제어할수 있을것 같습니다.

이제 4가지 주요 파일에 대해 모두 알아봤습니다.

자 이제 마지막으로 예제프로그램을 작성해보도록 하겠습니다.
아까 만든 프로젝트를 그대로 사용해서 작성하겠습니다. 지금 작성할 어플리케이션은, 특정 폼에 문자열을 입력하고 Button을 누르면, 아래 텍스트레이블(텍스트박스)에 그대로 출력되는 간단한 프로그램을 작성하려고 합니다.

먼저 MainPage.xaml을 통해 어플리케이션 상단에 출력되는 이름을 수정하도록 하겠습니다.

소스 중간을 보시면 StackPanel이 보입니다. 여기에 x:Name은 페널의 상수이름을 뜻합니다. 그중 ApplicationTitle라는 TextBlock의 Text가 "MY APPLICATION" 이라는 기본값으로 적혀있는데 "HELLO" 로 수정하도록 하겠습니다.
또, PageTitle라는 TextBlock의 Text는 "page name"로 되어있는데 "I/O TEST"로 수정하도록 하겠습니다.

다음 툴박스를 사용해 필요한 컨트롤을 추가하겠습니다. 필요한 컨트롤은
  • TEXTBOX - 문자열 입력에 필요한 텍스트박스
  • BUTTON - 문자열 입력을 완료하면 버튼을 통해 트리거 작동
  • TEXTBLOCK - 입력한 문자열을 출력하는 블럭
(컨트롤 추가는 오른쪽 그림의 Toolbox를 클릭한 사이드 메뉴에서 해당 항목을 더블클릭 하거나 출력 화면으로 드래그 하면 됩니다.)

컨트롤의 배치는 다음과 같이 했습니다.


소스는 다음과 같습니다 (툴박스를 통해 추가했다면 변수를 제외한 기본 소스는 동일합니다)

이제 버튼에 이벤트를 작성하여 텍스트박스와 텍스트블럭을 연계하는 작업을 하겠습니다.
화면 출력창에서 Button 컨트롤을 더블클릭하거나 Button의 속성창에서 Event->Click를 정의해주면 MainPage.xaml.cs 파일에 자동으로 이벤트가 추가됩니다
위 그림과 같이 출력되면 이벤트가 연결된 상태입니다.

이제 MainPage.xaml.cs 파일로 이동하여 두개의 컨트롤을 연결하겠습니다
컨트롤을 추가한부분에 위와같은 맴버함수가 추가되었습니다. 이부분에 다음과 같은 코드를 삽입합니다.

TextBlock1.Text = TextBox1.Text;
(여기서 TextBlock1과 TextBox1은 해당 컨트롤의 이름입니다)

소스를 추가한 부분은 다음과 같습니다

그다음 F5를 눌러 디버깅을 하면 자동으로 윈폰7이 에뮬레이팅되어 제작한 어플리케이션이 시작하는것을 확인할수 있습니다.

프로그램이 다음과 같이 실행되었습니다. 이제 텍스트박스에 문자열을 입력한후 버튼을 눌러보겠습니다. 저는 제 아이디인 hahaheo를 입력해보았습니다

정상적으로 작동하는것을 확인할수 있습니다.



지금까지 정말 간단한 윈폰7 어플리케이션을 개발해 보았습니다.
저도 윈폰7 입문단계라 뭐라 말씀드리기 어렵지만, 아이폰의 Objective-C나 안드로이드의 Java등 다른 플렛폼의 언어보다 조금더 쉽게 개발할수 있는 환경을 제공해주고 있다고 말씀드릴 정도로, 괜찮구나 라고 생각하고 있습니다.

아무튼 다음번 포스팅엔 필자가 조금더 공부해서 더욱더 높은 수준의 윈폰7 개발기술을 제공해보도록 노력하겠습니다!

감사합니다~!

* 궁금한점, 잘못된점은 꼭 댓글로 지적해주세요!