오픈소스를 이용한 윈도우 폰 UX 애플리케이션 개발

서진호 차장 (Jinho.Seo@microsoft.com) 모바일 / 임베디드 디벨로퍼 에반젤리스트

한국 마이크로소프트블로그 : http://blogs.msdn.com/jinhoseo

커뮤니티 : http://www.winmodev.net트위터 : @synabreu

Agenda

• 윈도우 모바일 6.5 UX 아키텍처• 개발자들을 위한 요구 사항• 윈도우 모바일 6.5 DTK 에 포함된 터치 및 제스처• 오픈 소스 프레임워크를 이용한 Apps 개발

– Fruid– Touch Control– Silvermoon for OPEG GL ES

• 윈도우 모바일 UX 애플리케이션 개발 최적화

세계는 지금 모바일 UX 전쟁 ?

• 모바일 UX 의 스마트폰 얼굴이기 때문에 !• 하드웨어보다는 소프트웨어 차별화 시대로 !

CES’2010 에서 본 윈도우 모바일 UX

출처 : WMPowerUser

왜 폰에서 사용자 경험이 중요한가 ?

더 뛰어난 그래픽 사용자 경험직관적인 / 생산적인 Phone UI더 나은 인터넷 브라우징 ( 모바일 / 데스크톱 )끊김없는 연결성더 나은 멀티미디어 경험오피스 도구와의 통합

Design Concept - Interaction

Home

6

Start

Internet ExplorerMobile 6

Demo

Windows Mobile 6.5

윈도우폰 애플리케이션 개발 방법

Smart Device projectPlatform Builder

Hardware

Software

OS

ApplicationWin32, MFC, ATL

C#, VB.NET

C/C++

윈도우 모바일 6.5 DTK

• 에뮬레이터 이미지 , 터치 제스처 및 위젯 API• 반드시 Windows Mobile 6 SDK 필요

터치 제스처 • DTK 에서는 C/C++ 만 , 코드 갤러리에 C# 용

– http://code.msdn.microsoft.com/gestureswm

• 동작원리– 제스처는 마우스 메시지가 아니다 .– WM_GESTURE 메시지 (GESTUREINFO 구조체 포함 )

• 기본 제스처– Pan, Scroll (Inertia), Select (Tap), Double-select, Hold

• 컨트롤에서의 터치 제스처 지원– ListView 및 ListBox ( 콤보 박스 포함 )– WebView 및 TreeView, Tab ( 왼쪽에서 오른쪽으로 스크롤링 )

• Managed Wrapper– GestureRecognizer– PhysicsEngine– AutoGestureContext

터치 제스처 동작원리 GF_BEGIN GF_INERTIA

GF_END

GESTUREINFO

종류에 따라(Gesture IDs)

GID_BEGIN = 1GID_END = 2GID_PAN = 4GID_SCROLL = 8GID_HOLD = 9GID_SELECT = 10GID_DOUBLESELECT = 11GID_LAST = 11

Managed Wrapper • GestureRecognizer

– http://code.msdn.microsoft.com/gestureswm

• PhysicsEngine– 자연스러운 스크롤링을 할 수 있음– 스크롤링시 rubber-band 효과 제공– Animation point 의 스트림 생성

• AutoGestureContext– 자동적인 제스처 핸들링 및 OwnerAnimate 이벤트 핸들러

var g = new GestureRecognizer();g.TargetControl = panel1;g.Select += (sender, GestureEventArgs e) => …g.DoubleSelect += (sender, GestureEventArgs e) => …g.Hold += (sender, GestureEventArgs e) => …g.Pan += (sender, GestureEventArgs e) => …g.Scroll += (sender, GestureScrollEventArgs e) => …

Demo

관리형 제스처 샘플

왜 오픈 소스 프레임워크인가 ?

• 창조적인 아이디어를 빠르게 구현하기 위해 !!• 개발한 소스를 재활용 하기 위해 !!• 멀티 장치 디스플레이에도 동일하게 동작하기 위해• 글로벌 언어 및 리소스를 편리하게 관리

Touch UI

• Chris 가 개발한 Touch UI for Windows Mobile 6.1/6.5

– http://touchui.codeplex.com/– http://blog.wmdev.net/

Touch UI(1) private void MainForm_Load(object sender, EventArgs e){ dialogStack = new List<Dialog>(); MainDialog mainDialog = new MainDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle); mainDialog.Selected += new EventHandler(dialogSelected); dialogStack.Add(mainDialog); navigate();

timer = new Timer(); timer.Interval = 80; // 12.5 fps timer.Tick += new EventHandler(timer_Tick); timer.Enabled = true;

loaded = true;}private void MainForm_Activated(object sender, EventArgs e){ if(loaded) timer.Enabled = true;}private void MainForm_Deactivate(object sender, EventArgs e){ if(loaded) timer.Enabled = false;}

Touch UI(2) – Scroll Up/Down private void MainForm_MouseUp(object sender, MouseEventArgs e) { dialogStack.Last().MouseUp(new Point(e.X, e.Y)); }….. private void MainForm_KeyDown(object sender, KeyEventArgs e) { dialogStack.Last().KeyDown(e); }….private void navigateForward() {

if(dialogStack.Last() is MainDialog) { MainDialog mainDialog = (MainDialog)dialogStack.Last(); DetailDialog detailDialog = new DetailDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle, mainDialog.SelectedLine + 1); dialogStack.Add(detailDialog); navigate(); }

}

Touch UI(3) protected override void OnPaint(PaintEventArgs e){ base.OnPaint(e);

if(!loaded) return;

dialogStack.Last().Paint(Common.Instance.PaintGraphics); Rectangle r = Common.Instance.ClientRectangle; if(animationLeft != 0) { e.Graphics.DrawImage(Common.Instance.PaintCopyBitmap, new Rectangle(animationLeft - r.Width * animationLeft.CompareTo(0), 0, r.Width, r.Height), r, GraphicsUnit.Pixel); e.Graphics.DrawImage(Common.Instance.PaintBitmap, new Rectangle(animationLeft, 0, r.Width, r.Height), r, GraphicsUnit.Pixel); animationLeft -= animationOffset; if(Math.Abs(animationLeft) < Math.Abs(animationOffset)) animationLeft = 0; } else e.Graphics.DrawImage(Common.Instance.PaintBitmap, r, r, GraphicsUnit.Pixel); }

Demo

오픈 소스 프레임워크

오픈소스 (1) Fluid – Windows Mobile 6.x Touch Controls

• http://fluid.codeplex.com/• http://www.codeproject.com/KB/mobile/

MobilePasswordSafe.aspx

21

오픈소스 (2) - iPhone UI

• http://iphoneui.codeplex.com/• http://www.codeproject.com/KB/mobile/

IPhoneUI.aspx

오픈소스 (3) - Alpha Mobile Controls

• AlphaBlend() - Alpha Blending 과 Alpha Channel 이용http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx• http://www.codeproject.com/KB/mobile/

Windows_Mobile_UI.aspx

오픈소스 (4) - Silvermoon

• OpenGL ES 2.0 을 이용한 UX 프레임워크• http://silvermoon.codeplex.com/

결론

• 윈도우 모바일 UX 의 기본적인 디자인 철학과 컨셉트를 이해하라 !• 윈도우 모바일 UX 애플리케이션은 다양한 오픈

소스 프레임워크로 개발 할 수 있다 !• 먼저 윈도우 모바일 UX 에 맞게 디자인 설계한

다음 프로토타입을 테스트하라 !• 한 화면에 모든 것을 표현하지 말라 !• 배터리가 없어지거나 전화가 오거나 알람이 울릴

때 등 다양한 이벤트 환경을 고려하여 디자인하라 !

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the

date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.