1

Windows 8 메트로 스타일 앱 개발

퓨쳐위즈 기술연구소 정석모

2

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

3

1. Metro UI 란 ?

4

Start 화면Larger Tile

Smaller Tile

5

Splash 화면

6

App Bar

7

Charm Bar

8

Recommended UX

사용자의 UX 를 해치지않음

9

Inline host –Contracts

10

2. 개발은 어떻게 ?

11

개발 환경• Windows 8• 현재는 Consumer Preview

• Visual Studio 11• 현재는 Beta• Blend 가 필요 없을 정도로 Blend 기능성 통합

12

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

13

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

• 필수 정복대상 !!

14

메트로 앱의 특징• async, await 키워드 • 각종 Contracts• 검색• 파일 선택 / 저장• 공유• 프로토콜

• Notification• Toast Notification 지원• Toast Notification 라이프사이클 핸들링

• Badge• 타일 핸들링 가능

15

Toast Style Notification

요렇게 토스팅 !!

16

Notification to Tile

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

17

App Menifest• Application UI• Capabilities• Declarations• Packaging

18

Page NavigationSender : Navigate(p)

Target : OnNavigateTo(p)

역주행 : GoBack()인자 전달 못함 ㅠㅠ

19

Page Navigation - sender

20

Page Navigation - Target

21

Page Navigation 의 치명적인 단점• 이전 페이지의 상태가 Dispose(Dealloc) 된다 .• GoBack() 으로 다시 돌아갈 경우 다시 그려야 한다 .• 그리고 인자 전달 못한다 !!!! 뭥미 !!

• 그럼 이전 페이지의 상태는 어떻게 저장할까 ??• Static Instance• Serialization/Deserialization

22

Local Database• 그런거 없다 .• 과연 Sqlite 같은 훌륭한 친구들을 Official 로 지원 해 줄까 ?? • 글쎄올시다

• 그럼 뭘로 대체 할까 ??• 파일 DB 를 만들어 사용 ?• LINQ to Object• Object 를 파일에 저장• Serialization/Deserialization

23

끝