오픈소스를 이용한 윈도우 폰 UX애플리케이션 개발<br />서진호 차장 (Jinho.Seo@microsoft.com)<br /> 모바일/임베디드 디벨로퍼 에반젤리스트<br />한국 마이크로소프트<br />블로그: htt...
Agenda<br />윈도우 모바일 6.5 UX 아키텍처<br />개발자들을 위한 요구 사항<br />윈도우 모바일 6.5 DTK에 포함된 터치 및 제스처<br />오픈 소스 프레임워크를 이용한 Apps 개발<br />...
세계는 지금 모바일 UX 전쟁?<br />모바일 UX의 스마트폰 얼굴이기 때문에!<br />하드웨어보다는 소프트웨어 차별화 시대로!<br />
CES’2010 에서 본 윈도우 모바일 UX<br />출처: WMPowerUser<br />
왜 폰에서 사용자 경험이 중요한가?<br />더 뛰어난 그래픽 사용자 경험<br />직관적인/생산적인 Phone UI<br />더 나은 인터넷 브라우징 (모바일/데스크톱)<br />끊김없는 연결성<br />더 나은 멀티...
Design Concept - Interaction<br />Home<br />Start<br />Internet <br />Explorer<br />Mobile 6<br />6<br />
Demo<br />Windows Mobile 6.5<br />
윈도우폰 애플리케이션 개발 방법<br />Smart Device project<br />Platform Builder<br />C#, VB.NET<br />C/C++<br />Hardware<br />Software<b...
윈도우 모바일 6.5 DTK<br />에뮬레이터 이미지, 터치 제스처 및 위젯 API<br />반드시 Windows Mobile 6 SDK 필요<br />
터치 제스처 <br />DTK 에서는 C/C++만, 코드 갤러리에 C#용<br />http://code.msdn.microsoft.com/gestureswm<br />동작원리<br />제스처는 마우스 메시지가 아니다.<...
터치 제스처 동작원리 <br />GESTUREINFO<br />GF_INERTIA<br />GF_BEGIN<br />종류에 따라<br />(Gesture IDs)<br />GF_END<br />GID_BEGIN  = 1...
Managed Wrapper<br />GestureRecognizer<br />http://code.msdn.microsoft.com/gestureswm<br />PhysicsEngine<br />자연스러운 스크롤링을 ...
Demo<br />관리형 제스처 샘플<br />
왜 오픈 소스 프레임워크인가?<br />창조적인 아이디어를 빠르게 구현하기 위해!!<br />개발한 소스를 재활용 하기 위해!!<br />멀티 장치 디스플레이에도 동일하게 동작하기 위해<br />글로벌 언어 및 리소스를...
Touch UI <br />Chris 가 개발한 Touch UI <br /> for Windows Mobile 6.1/6.5<br />http://touchui.codeplex.com/<br />http://blog.w...
Touch UI(1)<br />private void MainForm_Load(object sender, EventArgs e)<br />{<br />dialogStack = new List&lt;Dialog&gt;()...
Touch UI(2) – Scroll Up/Down<br />private void MainForm_MouseUp(object sender, MouseEventArgs e)<br />        {<br />dialo...
Touch UI(3)<br />protected override void OnPaint(PaintEventArgs e)<br />{<br />base.OnPaint(e);<br />            if(!loade...
Demo<br />오픈 소스 프레임워크<br />
오픈소스(1) Fluid – Windows Mobile 6.x Touch Controls<br />http://fluid.codeplex.com/<br />http://www.codeproject.com/KB/mobil...
오픈소스(2) - iPhone UI<br />21<br />http://iphoneui.codeplex.com/<br />http://www.codeproject.com/KB/mobile/IPhoneUI.aspx<br />
오픈소스(3) - Alpha Mobile Controls<br />AlphaBlend() - Alpha Blending 과 Alpha Channel 이용<br />http://blogs.msdn.com/chrislort...
오픈소스(4) - Silvermoon<br />OpenGL ES 2.0을 이용한 UX 프레임워크<br />http://silvermoon.codeplex.com/<br />
결론<br />윈도우 모바일 UX의 기본적인 디자인 철학과 컨셉트를 이해하라!<br />윈도우 모바일 UX 애플리케이션은 다양한 오픈 소스 프레임워크로 개발 할 수 있다!<br />먼저 윈도우 모바일 UX에 맞게 디자인...
Mobile UX for Windows Mobile
Upcoming SlideShare
Loading in …5
×

Mobile UX for Windows Mobile

3,756 views

Published on

Mobile UX for Windows Mobile

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,756
On SlideShare
0
From Embeds
0
Number of Embeds
921
Actions
Shares
0
Downloads
50
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile UX for Windows Mobile

  1. 1. 오픈소스를 이용한 윈도우 폰 UX애플리케이션 개발<br />서진호 차장 (Jinho.Seo@microsoft.com)<br /> 모바일/임베디드 디벨로퍼 에반젤리스트<br />한국 마이크로소프트<br />블로그: http://blogs.msdn.com/jinhoseo<br />커뮤니티: http://www.winmodev.net<br />트위터: @synabreu<br />
  2. 2. Agenda<br />윈도우 모바일 6.5 UX 아키텍처<br />개발자들을 위한 요구 사항<br />윈도우 모바일 6.5 DTK에 포함된 터치 및 제스처<br />오픈 소스 프레임워크를 이용한 Apps 개발<br />Fruid<br />Touch Control<br />Silvermoon for OPEG GL ES <br />윈도우 모바일 UX 애플리케이션 개발 최적화<br />
  3. 3. 세계는 지금 모바일 UX 전쟁?<br />모바일 UX의 스마트폰 얼굴이기 때문에!<br />하드웨어보다는 소프트웨어 차별화 시대로!<br />
  4. 4. CES’2010 에서 본 윈도우 모바일 UX<br />출처: WMPowerUser<br />
  5. 5. 왜 폰에서 사용자 경험이 중요한가?<br />더 뛰어난 그래픽 사용자 경험<br />직관적인/생산적인 Phone UI<br />더 나은 인터넷 브라우징 (모바일/데스크톱)<br />끊김없는 연결성<br />더 나은 멀티미디어 경험<br />오피스 도구와의 통합<br />
  6. 6. Design Concept - Interaction<br />Home<br />Start<br />Internet <br />Explorer<br />Mobile 6<br />6<br />
  7. 7. Demo<br />Windows Mobile 6.5<br />
  8. 8. 윈도우폰 애플리케이션 개발 방법<br />Smart Device project<br />Platform Builder<br />C#, VB.NET<br />C/C++<br />Hardware<br />Software<br />Application<br />Win32, MFC, ATL<br />OS<br />
  9. 9. 윈도우 모바일 6.5 DTK<br />에뮬레이터 이미지, 터치 제스처 및 위젯 API<br />반드시 Windows Mobile 6 SDK 필요<br />
  10. 10. 터치 제스처 <br />DTK 에서는 C/C++만, 코드 갤러리에 C#용<br />http://code.msdn.microsoft.com/gestureswm<br />동작원리<br />제스처는 마우스 메시지가 아니다.<br />WM_GESTURE 메시지 (GESTUREINFO 구조체 포함)<br />기본 제스처<br />Pan, Scroll (Inertia), Select (Tap), Double-select, Hold<br />컨트롤에서의 터치 제스처 지원<br />ListView및 ListBox (콤보 박스 포함)<br />WebView및 TreeView, Tab (왼쪽에서 오른쪽으로 스크롤링)<br />Managed Wrapper<br />GestureRecognizer<br />PhysicsEngine<br />AutoGestureContext<br />
  11. 11. 터치 제스처 동작원리 <br />GESTUREINFO<br />GF_INERTIA<br />GF_BEGIN<br />종류에 따라<br />(Gesture IDs)<br />GF_END<br />GID_BEGIN = 1<br />GID_END = 2<br />GID_PAN = 4<br />GID_SCROLL = 8<br />GID_HOLD = 9<br />GID_SELECT = 10<br />GID_DOUBLESELECT = 11<br />GID_LAST = 11<br />
  12. 12. Managed Wrapper<br />GestureRecognizer<br />http://code.msdn.microsoft.com/gestureswm<br />PhysicsEngine<br />자연스러운 스크롤링을 할 수 있음<br />스크롤링시 rubber-band 효과 제공<br />Animation point 의 스트림 생성<br />AutoGestureContext<br /> 자동적인 제스처 핸들링 및OwnerAnimate이벤트 핸들러 <br />var g = new GestureRecognizer();<br />g.TargetControl= panel1;<br />g.Select += (sender, GestureEventArgs e) =&gt; …<br />g.DoubleSelect += (sender, GestureEventArgs e) =&gt; …<br />g.Hold += (sender, GestureEventArgs e) =&gt; …<br />g.Pan += (sender, GestureEventArgs e) =&gt; …<br />g.Scroll += (sender, GestureScrollEventArgs e) =&gt; …<br />
  13. 13. Demo<br />관리형 제스처 샘플<br />
  14. 14. 왜 오픈 소스 프레임워크인가?<br />창조적인 아이디어를 빠르게 구현하기 위해!!<br />개발한 소스를 재활용 하기 위해!!<br />멀티 장치 디스플레이에도 동일하게 동작하기 위해<br />글로벌 언어 및 리소스를 편리하게 관리<br />
  15. 15. Touch UI <br />Chris 가 개발한 Touch UI <br /> for Windows Mobile 6.1/6.5<br />http://touchui.codeplex.com/<br />http://blog.wmdev.net/<br />
  16. 16. Touch UI(1)<br />private void MainForm_Load(object sender, EventArgs e)<br />{<br />dialogStack = new List&lt;Dialog&gt;();<br />MainDialogmainDialog = new MainDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle);<br />mainDialog.Selected += new EventHandler(dialogSelected);<br />dialogStack.Add(mainDialog);<br /> navigate();<br /> timer = new Timer();<br />timer.Interval = 80; // 12.5 fps<br />timer.Tick += new EventHandler(timer_Tick);<br />timer.Enabled = true;<br /> loaded = true;<br />}<br />private void MainForm_Activated(object sender, EventArgs e)<br />{<br /> if(loaded) timer.Enabled= true;<br />}<br />private void MainForm_Deactivate(object sender, EventArgs e)<br />{<br /> if(loaded) timer.Enabled = false;<br />}<br />
  17. 17. Touch UI(2) – Scroll Up/Down<br />private void MainForm_MouseUp(object sender, MouseEventArgs e)<br /> {<br />dialogStack.Last().MouseUp(new Point(e.X, e.Y));<br /> }<br />…..<br />private void MainForm_KeyDown(object sender, KeyEventArgs e)<br /> {<br />dialogStack.Last().KeyDown(e);<br />}<br />….<br />private void navigateForward()<br /> {<br /> if(dialogStack.Last() is MainDialog)<br /> {<br />MainDialogmainDialog = (MainDialog)dialogStack.Last();<br />DetailDialogdetailDialog = new DetailDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle, mainDialog.SelectedLine + 1);<br />dialogStack.Add(detailDialog);<br /> navigate();<br /> }<br />}<br />
  18. 18. Touch UI(3)<br />protected override void OnPaint(PaintEventArgs e)<br />{<br />base.OnPaint(e);<br /> if(!loaded) return;<br />dialogStack.Last().Paint(Common.Instance.PaintGraphics);<br /> Rectangle r = Common.Instance.ClientRectangle;<br /> if(animationLeft != 0)<br /> {<br />e.Graphics.DrawImage(Common.Instance.PaintCopyBitmap,<br /> new Rectangle(animationLeft - r.Width * animationLeft.CompareTo(0), 0, r.Width, r.Height),<br /> r, GraphicsUnit.Pixel);<br />e.Graphics.DrawImage(Common.Instance.PaintBitmap, new Rectangle(animationLeft, 0, r.Width, r.Height), r, GraphicsUnit.Pixel);<br />animationLeft -= animationOffset;<br /> if(Math.Abs(animationLeft) &lt; Math.Abs(animationOffset))<br />animationLeft = 0;<br /> }<br /> else<br />e.Graphics.DrawImage(Common.Instance.PaintBitmap, r, r, GraphicsUnit.Pixel);<br />}<br />
  19. 19. Demo<br />오픈 소스 프레임워크<br />
  20. 20. 오픈소스(1) Fluid – Windows Mobile 6.x Touch Controls<br />http://fluid.codeplex.com/<br />http://www.codeproject.com/KB/mobile/MobilePasswordSafe.aspx<br />
  21. 21. 오픈소스(2) - iPhone UI<br />21<br />http://iphoneui.codeplex.com/<br />http://www.codeproject.com/KB/mobile/IPhoneUI.aspx<br />
  22. 22. 오픈소스(3) - Alpha Mobile Controls<br />AlphaBlend() - Alpha Blending 과 Alpha Channel 이용<br />http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx<br />http://www.codeproject.com/KB/mobile/Windows_Mobile_UI.aspx<br />
  23. 23. 오픈소스(4) - Silvermoon<br />OpenGL ES 2.0을 이용한 UX 프레임워크<br />http://silvermoon.codeplex.com/<br />
  24. 24. 결론<br />윈도우 모바일 UX의 기본적인 디자인 철학과 컨셉트를 이해하라!<br />윈도우 모바일 UX 애플리케이션은 다양한 오픈 소스 프레임워크로 개발 할 수 있다!<br />먼저 윈도우 모바일 UX에 맞게 디자인 설계한 다음 프로토타입을 테스트하라!<br />한 화면에 모든 것을 표현하지 말라!<br />배터리가 없어지거나 전화가 오거나 알람이 울릴 때 등 다양한 이벤트 환경을 고려하여 디자인하라!<br />

×