윈도우 모바일 6.5로 만나는 UX 개발의 시작

이 글은 2010년 2월 월간 마이크로소프트웨어에 개재된 원고로 마이크로소프트웨어 에서 온라인에 공개가 되었기 때문에 제 블로그에도 포스팅 합니다
원본 : http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&keywords=%C0%D0%C0%BB%B0%C5%B8%AE%3B%B5%F0%BA%A7%B7%CE%C6%DB+%C7%C3%B7%AF%BD%BA&page=11&wr_id=34450

 

2010년 세계는 지금 모바일 UX에 주목하고 있다. 애플의 아이폰이나 구글의 안드로이드 플랫폼은 사용자에게 새로운 감동을 주기 위한 UX에 중점을 두고 있다. 더 이상의 하드웨어 차별로 승부는 어렵기 때문에 사용자가 가장 빨리 느낄 수 있는 소프트웨어로 차별화를 꾀하면서 시작된 UX의 변화는 모바일 UX 전쟁이라 말해도 과언이 아닐 것이다. 이에 따라 윈도우 모바일 6.5에서 변화된 UX 개발의 시작을 살펴보도록 한다.

마이크로소프트는 2009년 10월 7일, 전 세계에 30여 종의 윈도우폰을 선보이며, 윈도우 모바일 6.5의 시대를 열었다. 윈도우 모바일 6.1을 탑재한 스마트폰은 PDA부터 계승된 UI로 사용자들의 감성을 자극하기 어려웠고, 그로 인해 제조사에서는 Shell을 탑재해 UI를 개선시키려는 많은 노력들을 지속해 왔다.

왜 윈도우 모바일 6.5인가
그동안 많이 부족했던 윈도우 모바일 UI의 큰 변화를 불러일으킨 모습을 보여주는 윈도우 모바일 6.5는 더 이상 User Interface가 아닌 User eXperience의 진정한 윈도우 모바일 UX를 보여주게 됐다.

그림 1, 윈도우 모바일 6.5가 탑재된 윈도우 폰

윈도우 모바일 6.5는 마이크로소프트의 누적된 경험과 입증된 기술이 축약된 운영체제라 할 수 있다. 시스템적으로 폰 하드웨어 디자인이나 개발 비용을 축소시켰고, 부팅 속도를 약 25% 정도 향상시켰다. 똑같은 하드웨어 사양에서 이틀 정도 연장된 베터리 관리 장치 드라이버 아키텍처를 최적화했고, 현재 윈도우 모바일 6.1 애플리케이션과 그대로 호환 가능하도록 했으며, 33번째 슬롯을 활성화시켜 메모리 관리를 더욱 더 진보적으로 확대시켰다.

그림 2, 윈도우 모바일 6.5의 특징들

이는 그동안의 윈도우 개발자들이 변화된 운영체제에 맞게 새롭게 학습해야 하는 리스크를 감소시켰고, 하위 운영체제 애플리케이션 개발 경험을 그대로 살릴 수 있다는 장점을 갖게 해서 보다 편리하고 능률적인 윈도우 모바일 개발을 보장할 수 있다는 것이다. 또한 전 세계적으로 많은 개발자 네트워크를 통해 기술 지원을 받을 수 있으며, 국내에서는 '윈도우폰 개발자 그룹'을 통해 개발자 지원을 받을 수 있다.

Codeplex : http://www.codeplex.com/
The Code Project : http://www.codeproject.com/
윈도우폰 개발자 그룹 : http://www.winmodev.net/

윈도우 모바일 6.5 DTK
윈도우 모바일에서 UX 개발에 어려움을 호소하던 개발자에게 도움이 되는 터치 제스처와 투명화 처리, 위젯 등 많은 기능을 지원하는 라이브러리가 윈도우 모바일 6.5 DTK에 포함되어 공개됐다.

DTK(Developers Toolkit)는 SDK가 설치되어 있는 상태에서 윈도우 모바일 6.5 개발의 편의를 도와주는 에뮬레이터와 부가적인 라이브러리가 포함되어 있어, 윈도우 모바일 6.5에서UX 개발을 위해 반드시 설치해야 한다.

그럼 DTK와 SDK의 차이점은 무엇일까? SDK는 윈도우 모바일 6 모바일 애플리케이션을 개발하기 위한 6만 여 가지 이상의 윈도우 CE API와 .Net Compact Framework를 이용한 C# 언어의 네임스페이스를 이용할 수 있도록 제공해 주는 것으로, 윈도우폰의 범용 모바일 애플리케이션을 개발하기 위한 개발 킷이라 할 수 있다.

그에 비해 DTK는 윈도우 모바일 6.5를 개발하기 위한 에뮬레이터와 스킨 그리고 싱글 터치의 제스처 API를 제공하기 위한 개발 킷이라 말할 수 있다.

따라서 처음 윈도우 모바일 6.5 모바일 애플리케이션을 개발하기 위해 DTK만으로는 불가능하고, 윈도우 모바일 6 SDK를 설치 후에 추가로 윈도우 모바일 6.5 DTK를 설치해야 한다.

더 쉽고 자세한 설치 과정은 마이크로소프트 에반젤리스트의 블로그에서 확인할 수 있다(http://blogs.msdn.com/jinhoseo/archive/ 2009/10/13/6-5-5.aspx). 윈도우 모바일 6.5 DTK를 설치하면  <표 1>과 같은 내용이 포함되어 있다.

<표 1>에서 확인할 수 있는 내용으로 윈도우 모바일 6.5 에뮬레이터가 해상도별로 추가됐다는 것과 제스처 API가 추가된 것을 확인할 수 있다. 터치 제스처는 기존의 마우스 이벤트와 다른 이벤트로 구성되어 있기 때문에 독립적으로 마우스 이벤트와 제스처 이벤트를 따로 따로 구현해 더 편리한 프로그래밍이 가능하다. 윈도우 모바일 6.5 DTK는 아래 주소에서 다운로드할 수 있다.

http://go.microsoft.com/?linkid=9670343

Gesture & Physics Engine
윈도우 모바일 6.5 이전에 제스처를 구현하기 위해 지금까지는 윈도우 폼의 마우스 이벤트를 활용했었다. Mouse down으로 시작 위치를 저장하고, Mouse move로 이동 중인 위치를 추적해 Mouse Up에서 끝나는 위치를 저장하고 이동 방향과 거리를 계산해 구현했기 때문에 복잡한 제스처 기능을 구현하기 위해서는 매우 까다롭고 번거로웠으며, 구현 가능한 기능도 제한적이었다.

윈도우 모바일 6.5 DTK에서 제공되는 제스처 API를 이용하면 이러한 것들을 손쉽게 구현할 수 있다. DTK에서 제공되는 제스처 기능은 <표 2>와 같다.

윈도우 모바일 6.5 DTK에 추가된 또 하나의 기능으로 Physics Engine이 있다. Physics Engine은 Scroll 이벤트에 대한 2차원 애니메이션 포인트의 계산을 지원하는 기능으로, 실제로 보여지는 화면의 영역과 화면 영역을 벗어나는 가상의 영역을 지정해 제스처 움직임에 따라 컨트롤이 부드럽게 이동하도록 도와주는 기능이다. 시작 속도와 진행 방향의 각도를 계산해 지정된 가장자리 도달 혹은 지정된 영역에 맞춰 움직임을 보여준다.

그림 3, 윈도우 모바일 6.5 DTK의 Physics Engine 활용 예

Native로 개발할 경우 기본 6.5 DTK의 Sample을 참고해 라이브러리와 헤더파일을 추가해 개발하면 된다.

C:￦Program Files￦Windows Mobile 6 SDK￦Windows Mobile 6.5 Developer Tool Kit￦Samples￦PocketPC￦CPP￦ Win32Manage로 개발하기 위해서는 제스처 API를 Wrapper DLL로 변환해 사용하는 작업이 필요한데, 이것은 이미 MSDN에 공개되어 있으니 다운로드해 사용할 수 있다.

이때 주의할 점은 .NET Compact Framework 3.5를 이용해 만들어진 Wrapper DLL이기 때문에 프로젝트 생성시 .Net Compact Framework 3.5를 선택해야 정상적으로 동작이 가능하다는 것이다(참고 : http://code.msdn.microsoft.com/gestureswm).

다운로드한 Wrapper DLL을 프로젝트에서 사용하기 위해서는 도구상자에 추가해야 한다. 도구상자에 추가하기 위해서는 도구상자에서 오른쪽 마우스 클릭 후 [탭 추가]를 선택해 적당한 이름을 넣어준 뒤 생성된 탭으로 다운로드 받은 Microsoft.Windows Mobile.Gestures.Dll 파일을 드래그 앤 드롭으로 넣어주면 된다.

사용자 정의 컨트롤 형식으로 생성된 Physics Engine과 GestureRecognize가 추가된 것과 추가된 컨트롤을 폼으로 추가했을 때 각각의 속성을 볼 수 있다.

GestureRecognize에 TargetControl을 정의하면 해당 컨트롤로부터 발생되는 제스처 이벤트를 관리할 수 있게 된다. 마찬가지로 PhysicsEngine에 이동하는 대상 컨트롤을 Extent Control에 지정하고, 대상 컨트롤이 보여지는 Viewport Control을 정의하면 간단하게 사용할 수 있다.

그림 4, 프로젝트에 추가된 PhysicsEngine과 GestureRecognize 정의

옴니아2 터치위즈 2.0 UI 흉내내기
Shell 애플리케이션 중 화면을 가상의 영역으로 이용하고 사용자 선택에 의해 화면을 이동해 원하는 기능을 사용하는 것을 많이 볼 수 있다. 이것을 윈도우 모바일 6.5 DTK를 이용해서 동작 모습을 구현해 볼 수 있다. 이번 예제에서는 3개의 화면 중 하나를 보여주고, 제스처를 통해 좌우로 이동하며 화면을 전환해 보는 것을 구현해 보겠다.

그림 5, 배경 이미지 리소스 추가

그림 6, 배경 이미지 (QVGA기준 720x268, Jpg)

우리가 예제로 사용할 배경은 가로 길이가 화면 크기의 3배가 되는 720×268(QVGA 기준)로 만들어진 이미지이다. 알아보기 쉽게 각 화면 해상도별로 다른 해상도에서는 비정상적으로 표시될 수 있기 때문에 PictureBox Control에서 Size Mode를 변경해 줄 필요가 있다. 이미지를 리소스에 추가해 애플리케이션에서 사용이 가능하도록 설정한다.

폼에 사용할 컨트롤을 추가한 뒤 기본 값으로 정의된 속성 중 주요 설정만 표기했다. Form1에서는 Scroll을 사용하지 않고 대신에 Gesture를 사용할 것이기 때문에 AutoScroll을 False로 정의한다.

panel1에 PictureBox1을 배경으로 올리고, Size Mode에서 StretchImage로 변경한다. 이는 배경 이미지를 컨트롤 크기에 맞게 늘리거나 줄여주는 옵션으로, 해상도에 따라 자동으로 확대/축소가 이뤄진다.

Physics Engine에서는 실제로 보여지는 영역을 지정하는 컨트롤을 Viewport Control에, 확장되어 있는 가상의 영역을 가지고 있는 컨트롤을 Extent Control에 각각 지정해 준다. 마찬가지로 Gesture Recognizer에서도 이동하게 될 컨트롤인 panel1을 지정해 준다.

그림 7, 각각 컨트롤 배치

<리스트 1> 초기화 코드 using Microsoft.WindowsMobile.Gestures; private void Form1_Load(object sender, EventArgs e) {         // 제스처와 PhysicsEngine에 의해 움직일 Panel     panel1.Size = new Size(Size.Width * 3, Size.Height);     panel1.Location = new Point(-Size.Width, 0);     pictureBox1.Image = GestureApp.Properties.Resources.BackGround;     pictureBox1.Size = new Size(Size.Width * 3, Size.Height);     pictureBox1.Location = new Point(0, 0);     // panel1에 포함되어 있는 컨트롤의 위치 정의     // 화면 중앙에 위치하기 위해 화면 가로 크기 Size.Width에 배치된 컨트롤의 크기를 뺀 다음 2로 나눴다     // 뒤에 Size.Width를 더한 것은 Left/Center/Right의 3개 화면에 각각 배치하기 위해서다     btnLeft.Location = new Point((Size.Width - btnLeft.Width) / 2, 200);     btnRight.Location = new Point(((Size.Width - btnRight.Width) / 2) + Size.Width*2, 200);     tbxCenter.Location = new Point(((Size.Width - tbxCenter.Width) / 2) + Size.Width, 10);     // 물리 엔진을 통해 이동되는 아이템의 크기     physicsEngine1.ItemSize = new Size(Size.Width, Size.Height);     }

 

<리스트 2> 제스처 컨트롤 - Pan 이벤트 코드 Point begin; private void gestureRecognizer1_Pan(object sender, Microsoft.WindowsMobile.Gestures.GestureEventArgs e) {     // 팬 이벤트가 시작되는 위치 값을 기억     if ((e.State & Microsoft.WindowsMobile.Gestures.GestureState.Begin) == Microsoft.WindowsMobile.Gestures.GestureState.Begin)     { begin = e.Location; return;     }     // 시작 위치와 종료 위치의 값을 이용해 이동한 거리를 계산     int _x = (e.Location.X - begin.X);     // panel1의 위치가 이동할 위치     int x = panel1.Location.X + _x;         // _x값을 이용해 panel1의 위치를 조정할 때 0 이하 값이 나오도록 보정     // 이유 : 좌측 화면이 다 표시됐을 때 panel의 위치는 0이다     if (x > 0) x = 0;     // 이유 : 우측 화면이 다 표시됐을 때 panel의 위치는 ?(가로길이*2)이다(3페이지 기준)     if (x < -( Size.Width * 2)) x = -( Size.Width * 2);         // 계산된 위치를 panel1에 적용한다     panel1.Location = new Point(x, 0); }

 

<리스트 3> 제스처 컨트롤 - Scroll 이벤트 코드 private void gestureRecognizer1_Scroll(object sender, Microsoft.WindowsMobile.Gestures.GestureScrollEventArgs e) { // 스크롤 이벤트가 발생하면 좌우 이동에 대한 것만 필터링한다 if (e.ScrollDirection == GestureScrollDirection.Left || e.ScrollDirection == GestureScrollDirection.Right)     { // 물리 엔진에게 이동 각도와 속도를 넘겨주고 엔진을 시작시킨다. physicsEngine1.Stop(); physicsEngine1.Angle = e.Angle; physicsEngine1.Velocity = e.Velocity / Size.Width; physicsEngine1.Start();     } }

그림 8, 실행화면

기존 6.1 환경에서 동일한 기능을 구현하려면 mouse 이벤트와 애니메이션 알고리즘을 직접 구현하거나 공개되어 있는 오픈소스를 이용해야만 했다. 하지만 구현이 어렵고, mouse 이벤트를 이용했기 때문에 오작동을 일으키는 경우가 매우 많았다.

윈도우폰을 개발할 때 싱글 터치 제스처를 이용한 애플리케이션 개발은 그동안 개발자들이 힘겨워 했던 부분인데, DTK를 활용하면 쉽고 빠르게 구현되는 것을 볼 수 있었다. 비록 간단한 예제로 확인해 보았지만 제스처 기능은 많은 상황을 고려해 사용할 수 있을 정도로 세부적으로 강력하게 구현된 API이다. 이것을 이용해 윈도우 모바일 애플리케이션의 UX 개발에 빠른 발전을 기대해 볼 수 있을 것 같다.

더 궁금한 사항이나 추가적인 윈도우폰 개발 관련 정보는 윈도우폰 개발자 그룹인 WinMoDev(http://www.winmodev. net)에서 만나볼 수 있다.

※ 추가 : Windows Mobile Managed Gestures Sample에 있는 Microsoft.WindowsMobile.Gesture.dll은 약간의 버그가 있어 추가한 뒤 실행하다보면 제스처 발생을 인식 못하는 버그가 있습니다
이러한 문제점을 해결한 Microsoft.WindowsMobile.Gesture.dll을 배포합니다
정보제공 : WinMoDev - 로보토미님 (http://cafe.naver.com/winmodev/3362)

Microsoft.WindowsMobile.Gestures.zip