Windows 8 메트로 스타일 앱 개발

Windows 8 메트로 스타일 앱 개발 퓨쳐위즈 기술연구소 정석모

Agenda • Metro UI란? • 개발은 어떻게?

1. Metro UI란?

Start 화면 Larger Tile Smaller Tile

Splash 화면

App Bar

Charm Bar

Recommended UX 사용자의 UX를 해치지 않음

Inline host –Contracts

2. 개발은 어떻게?

개발 환경 • Windows 8 • 현재는 Consumer Preview • Visual Studio 11 • 현재는Beta • Blend가 필요 없을 정도로 Blend 기능성 통합

개발 요소 • C#과 XAML • Visual Basic과 XAML • C++과 XAML • HTML5와 Javascript • Javascript KIT 통합

XAML • MS가 XML을 확장해 만든 UX표현 마크업 • Silverlight, WPF등에서 사용되어 옴 • Grid, StackPanel, Canvas등의 레이아웃 컨트롤 • WebView, ComboBox, TextBlock등의 일반 컨트롤 • Relative Sizing이 가능하여 다중 해상도 지원 가능 • 해상도에 따른 표현 방법 분리 가능 • 너비에 따라 가로/세로 배치 지정 • 필수 정복대상!!

메트로앱의 특징 • async, await 키워드 • 각종 Contracts • 검색 • 파일 선택/저장 • 공유 • 프로토콜 • Notification • Toast Notification 지원 • Toast Notification 라이프사이클 핸들링 • Badge • 타일 핸들링 가능

Toast Style Notification 요렇게 토스팅!!

Notification to Tile 노티를 통한 다이내믹한 타일링 애니메이션

App Menifest • Application UI • Capabilities • Declarations • Packaging

Page Navigation Sender : Navigate(p) Target : OnNavigateTo(p) 역주행: GoBack() 인자 전달 못함 ㅠㅠ

Page Navigation - sender

Page Navigation - Target

Page Navigation의 치명적인 단점 • 이전 페이지의 상태가 Dispose(Dealloc) 된다. • GoBack()으로 다시 돌아갈 경우 다시 그려야 한다. • 그리고 인자 전달 못한다!!!! 뭥미!! • 그럼 이전 페이지의 상태는 어떻게 저장할까?? • Static Instance • Serialization/Deserialization

Local Database • 그런거 없다. • 과연 Sqlite같은 훌륭한 친구들을 Official로 지원 해 줄까?? • 글쎄올시다 • 그럼 뭘로 대체 할까?? • 파일DB를 만들어 사용? • LINQ to Object • Object를 파일에 저장 • Serialization/Deserialization

Windows 8 메트로 스타일 앱 개발