Metro : A Concept of Windows Phone 7.5

Jinho.Seo@microsoft.comSr .Developer Evangelist – Windows Phone and Academyhttp://blogs.msdn.com/jinhoseo

http://www.facebook.com/windowsphonekorea

Windows Phone Microsoft confidential.

vs.People Icons

Why metro?

Metro is a concept of Microsoft Future!

다양한 Windows Phone 디자인 요소

DemoWindows Phone 7.5

7

Start and Apps List

상태 바 (Status Bar) 란 무엇인가 ?

1. 상단 위의 표시 및 시스템 레벨의 정보 표시2. 손가락으로 누르면 약 8 초간 보여주고 자동적으로 슬라이드 됨 .3. App 에서 예약된 공간4. System Clock 은 Portrait 일 경우 Height 32px, Landscape 일 경우 Width 가 72px   영역 차지

Status Bar icon

1. Signal Strength2. Data connection3. Call forwarding4. Roaming5. Wireless network signal strength6. Bluetooth status7. Ringer mode8. Input status9. Battery Power level10. System clock

Status Bar – System Area

1. 하단 버튼 , 아이콘 또는 텍스트로 표시할 수 있음 .  

2“…” 으로 표현된 연속된 점을 탭 (Tab) 한다던 지 , 위쪽으로 Flick up 하면 ↑

3. “ 아이콘 +Text” 와 “ Text” 로 이루어진 그 밖의 옵션들이 제공

4. 메뉴를 다시 원래대로 bottom 에 아이콘 형태로만 보이도록 하려면 ,  • ‘…’ 을 탭 (Tab) 하거나 아래쪽으로 Flick. • 메뉴 이외의 영역을 Tap • Hardware 키인 ‘ Back’ 키를 선택 • 메뉴 선택

App Bar

• http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/27/windows-phone-7-series-icon-pack.aspx

• http://expression.microsoft.com/en-us/gg317447 

[ 개발자와 디자이너 고려사항 ]- 어플리케이션 바 아이콘 이미지는 투명 배경위에 foreground color 로 ‘ white’ 컬러를 사용해서 48*48px- 최대 5 개만 ( 손가락 큰 사람을 대비 , 터치 중첩 방지 )  

Icongraphy

• 인식하기 쉽고 , 이해할 수 있으며 사용자가 실생활에서의 메타포(metaphors) 적인 표현

• 사용자가 봤을 때 기능과의 매칭이 잘되는 아이콘을 사용 권장 • 아이콘 텍스트는 어플리케이션 바 메뉴에서 사용자에게 보여줄 내용입니다 . 

- 개발자가 세로모드 보기를 지원하기 위해서는 코드를 추가 <xaml>SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"OrientationChanged="PhoneApplicationPage_OrientationChanged"

<cs>private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e){    if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)    {        Grid.SetRow(buttonList, 1);        Grid.SetColumn(buttonList, 0);    }    else    {        Grid.SetRow(buttonList, 0);        Grid.SetColumn(buttonList, 1);    }}

- 어플리케이션이 가로모드 (landscape) 를 지원한다면 ,  left landscape 나 right landscape 중에 하나가 아닌 둘 다 지원해야 한다 . - 텍스트 입력을 지원 / 제공하는 어플은 쿼티키보드를 가진 디바이스의 경우 , 가로모드를 고려 - 사용자 화면 전환 애니메이션 (Custom screen transition animation) 효과를 적용하지 않도록 한다 .

Screen Orientation

윈도우폰 7 은 기본 시스템 폰트는 Multi-language 지원은 Segoe WP를 사용하여 5 개의 스타일을 이용할 수 있으나 , Korean Edition 에서는 네오고딕 입니다 .  • Regular• Bold• Semi-bold• Semi-light• Black 이 폰트는 중국어 , 일본어 , 한국어와 같은 동아시아 쪽의 Unicode 를 지원합니다 .

 [ 개발자와 디자이너 고려사항 ]- 통합적인 사용자 경험을 유지하기 위해 다른 대체 폰트의 사용을 하지 않도록 고려한다 .- 15 points 보다 작은 사이즈를 사용하지 않는다 . 읽기 어려울 수도 있고 touch target 영역이 너무 작아진다 .- 폰트 색상을 처리할 경우 , 두 개의 background(light / dark) 와 모든 accent colors 테마 (theme) 를 고려하여 사용해야 한다 .

Font

 • Tile notifications

• 사용자가 동작하고 있는 상태에 직접적인 영향을 주지 않지만 , 시작화면의 타일 (tile) 에 알림을 전달 ,

• 시작화면의 메일 (Mail) 타일에 카운트를 증가시켜주는 것과 같은 형태의 알림

• Toast notifications • 사용자의 동작을 요구하는 것으로 시스템 전반에 걸쳐 발생하는

알림• 사용자가 폰을 사용하는 중에 text message 또는 instant

message 를 받았을 때 , 이 알림은 화면의 상단에 보여지고 10 초 후에 사라짐 .

 • Raw notifications

• 어플리케이션 내에서 사용자 동작을 요구하는 알림• 어플리케이션에 의해 전체적으로 컨트롤이 가능하고 , 오직 해당

어플리케이션 내에서만 영향을 미침 .

 

Push Notification

■ Tile notification미리 설치된 (built-in or pre-installed) 어플리케이션 타일 외에는 사용자가 직접 시작화면에 등록 (pin) 해야 합니다 .

[ 개발자와 디자이너 고려사항 ]- 타일 이미지와 타이틀을 포함하지 않은 어플리케이션은 프로젝트의 이름과 시스템에 정의된 아이콘을 사용하여 디스플레이 된다 .- 타일 이미지는 256dpi 에서 173*173px 이어야 하고 , JPEG 나 PNG 포맷 이어야 한다 .- 이미지가 위의 사이즈보다 작거나 크면 좌측상단을 중심으로 잘라지거나 (crop) 확대 (scaled up) 될 수 있다 .- 63*63px 의 어플리케이션 이미지가 포함되어 있지 않으면 프로그램 리스트에서는 default 로 타일 이미지가 축소 (scaled down) 되어 디스플레이 된다 .- 타일의 타이틀은 tile notification 사용 없이도 디스플레이 될 수 있다 .- 다양한 타일 이미지를 활용한다면 인식할 수 있는 테마와 스타일을 고려하여 사용할 수 있다 .- 개발자는 카운터의 색상 , 폰트 , 폰트색상 , 사이즈를 변경 시킬 수 없다 .- 과도한 사용은 배터리 수명에 영향을 줄 수 있으므로 적당히 사용 .

Push Notification

테마 (theme) 는 사용자를 위한 비쥬얼적인 요소로 활용되는 것으로 백그라운드와 강조색 (Accent color) 을 사용자가 선택 가능하게 되어있습니다 . 컬러만 테마의 요소로서 활용되고 폰트의 경우는 따로 변경시킬 수 없습니다 . 테마설정은 2 개의 백그라운드 칼라인 dark 와 light, 10 개의 강조색(accent colors) 을 가지고 있습니다 . • magenta (FF0097) • purple (A200FF) • teal (00ABA9) • lime (8CBF26) • brown (996600) • pink (FF0097) • orange (F09609) • blue (1BA1E2) • red (E51400) • green (339933)

개발자는 OLED display 를 가진 디바이스들의 배터리 전력소모를 고려해 너무 많은 “ White” 컬러의 사용을 자제할 필요가 있습니다 .

Theme - Color

touch target 은 9mm / 34px 이상으로 하는 것을 권장하고 , 터치할 수 있는 컨트롤간의 간격은 최소 2mm / 8px 은 되야 합니다 .예외적으로 컨트롤의 사이즈를 더 작게 해야 할 경우가 있을 수 있는데 , 그래도 최소한 7mm / 26px 이상은 되야 합니다 .가상키보드 (on-screen keyboard) 나 IE 내의 하이퍼링크(hyperlinks) 의 경우는 예외입니다 .

9mm 보다 커야 되는 touch target 을 살펴보면 • 자주 선택하는 컨트롤 • 잘못된 터치 동작으로 인해 심각한 에러가 발생될 만한 결과를

발생할 소지가 있을 경우 ( 일부분만 입력된 상태로 메시지가 전송될 수 있는 경우 /  데이터 삭제와 같은 복구될 수 없는 것들 )

• 사용자 터치 오류로 인해 의도하지 동작이 발생되어 불편함을 초래하는 경우 ( 원하지 않는 다른 화면으로의 이동 )

• 화면상의 가장자리와 가까운 경우 ( 가장자리에서 3.5mm 내 ) • 인접한 touch control 사이에서 멀티 터치나 연속된 터치를 해야

하는 경우 ( 다이얼패드 ) 

특별히 위치나 사이즈의 제약이 있는 touch / non-touch UI element 의 경우 , 레이아웃에서 최소 터치 타겟 사이즈의 공간을 만들어내기 위해 추가적인 어플리케이션 페이지나 화면내의 조정이 필요합니다 . 

Control and Touch Input

■ Pinch and strech

pinch and strech 는 2 개의 손가락을 이용하여 분리된 영역을 죄거나(pinch) 하거나 늘리는 (strech) 동작입니다 .두 개 손가락의 중심을 기준으로 컨텐츠를 줌 (zoom) 할 수 있습니다 .

 [ 개발자와 디자이너 고려사항 ]- touch and hold 제스처는 일반적으로 아이템을 위한 context menu 나 옵션 페이지를 표시하는데 사용한다 .

■ Touch and hold

Touch and hold 는 특정 영역을 한 손가락으로 누르고 일정기간 기다리는 동작입니다 .

■ Four touch points 윈도우폰은 동시에 4 개의 입력 포인트를 활용할 수 있습니다 . 예를 들면 게임이나 섬세한 동작이 요구되는 어플들에 활용이 될 수 있습니다 .입력 타겟의 지름은 7mm 이상이 되어야 하고 , 타겟 간에 3.5mm 이상이 되도록 합니다 .

Multi-Touch and Gestures

• On-Screen Keyboard 는 텍스트 입력을 위한 것으로 , • 편집 가능한 컨트롤이 활성화 되었을 때 화면의 하단에서 자동적으로 sliding up됩니다 .

• 사용자가 edit control 의 외부를 탭 (tab) 하거나 리스트 스크롤 또는 Back Button 을 누르면 화면의 하단으로 sliding down 되면서 close됩니다 .

•  • 만일 하드웨어 키보드 ( 폰 제조사 옵션 ) 를 slide out 하게 되면 , On-Screen Keyboard

는 자동적으로 close됩니다 .

• 자동완성과 같은 텍스트 제안 기능들을 제공합니다 . ( 자동완성 혹은 추천단어 기능으로 이해하시면 될 듯 합니다 )

• On-Screen Keyboard 는 세로 (portrait) 모드에서 height 가 336px 이고 , 가로(landscape) 모드에서는 256px 입니다 .

• 텍스트 제안 창 (text suggestion window) 은 두 모드에서 65px 로 표시됩니다 .

• 개발자는 edit control 이 활성화되었을 때 On-Screen Keyboard 를 배치 시킬지 말지에 대해 정의할 수 있습니다 .

•  • 싱글 라인 (single line) 의 edit control 일 경우 enter key 를 누르면 데이터가

전달되고 keyboard 가 close 되거나 다음 edit control 로 포커스가 변경됩니다 .

• 멀티라인 (multi-line) 의 경우에는 새로운 라인이 추가됩니다 .

On Screen Keyboard

■ Microphone

윈도우폰 7 의 마이크로폰 (microphone) 주파수 범위는 150Hz~7kHz 입니다 .

■ Phone hardware buttons

윈도우폰은 디바이스에 몇 가지의 하드웨어 버튼을 가지고 있습니다 .각 버튼들마다 고유한 기능들을 제공합니다 . • Power/Sleep • Volume up and volume down • Camera • Back • Start • Search Back, Start, Search 버튼은 폰 제조사에서 정전식 버튼으로 적용될 수도 있습니다 .위 3 개의 버튼을 제외한 다른 버튼들의 위치는 폼팩터 (form factor) 나 제조사에 따라 변경될 수 있습니다 .

Hardware Button

윈도우폰은 다음의 센서들을 포함합니다 . • Accelerometer• A-GPS• Proximity Sensor• Camera• Compass• Light Sensor• Gyro• FM Radio  

■ Accelerometer

윈도우폰 7 accelerometer 는 +/-5 정도의 정확도를 갖는 가속도 측정 센서입니다 .이 3D 모션 (motion) 센서는 X,Y,Z값에 대해 연속적인 정보를 제공합니다 . 개발자는 API 를 활용하여 자동 화면 변환 (automatic screen rotation), tilt-to-scroll, 어플 내에서의 게임 컨트롤 등으로 이 기능을 활용할 수 있습니다 .

Sensors & Output methods

• 파노라마 어플리케이션 (Panorama Application) 은 Windows Phone OS 7.0 시각적 요소의 핵심적인 한 부분입니다 .

•  • 폰 화면 크기에 맞춰 디자인된 기존의 표준 어플리케이션과는 달리 , 파노라마는

화면크기의 제한을 넘어 확장되는 가로로 긴 캔버스 (canvas) 를 사용하여 view 컨트롤 , 데이터 및 서비스를 사용하도록 제공합니다 .

•페이지 이동의 애니메이션이 부드럽고 사실적인 효과를 보이도록 지원합니다 .썸네일 (Thumbnail) 은 파노라마 뷰의 주요 element 입니다 . 이것은 컨텐츠나 미디어를 연결해줍니다 .

• 파노라마 어플리케이션의 element 들은 더 세부적인 동작을 위한 시작점 역할을 합니다 .

• 파노라마의 UI 는 각각의 모션 로직 (motion logic) 에 의존하여 동작되는 레이어 (layer) 타입들로 구성되어있습니다 .

 - Layer type • Background image • Panorama titles • Panorama section titles • Panorama sections

Panorama Template

배경 이미지 (background image) 는 최하위 layer 이며 , magazine-like 느낌을 갖게 합니다 . 대체로 배경 이미지는 전체 화면에 채워지도록 사용되며 , 어플리케이션의 가장 시각적인 (visual) 부분입니다 .

파노라마 타이틀 (panorama title) 은 파노라마 어플리케이션의 전체 타이틀입니다 . 어플리케이션을 구분하는데 사용하고 , 어플리케이션의 실행 ( 진입 ) 방법에 상관없이 항상 표시됩니다 .

파노라마 섹션 (panorama section) 은 각기 다른 컨트롤이나 컨텐츠를 요약 /분류하는 구성 요소입니다 .파노라마 섹션의 이동은 pan 이나 flick 제스처를 사용하여 같은 비율로 동작합니다 . 파노라마 섹션 타이틀 (section title) 은 선택적 (optional) 으로 적용할 수 있습니다 .

Panorama Template Design

무료 6 App Design Template 제공

슬라이더 컨트롤 (Slider control) 은 볼륨이나 밝기 레벨과 같은 데이터의 범위로부터 값을 설정하는데 사용합니다 . Slider 는 최소값과 최대값을 가집니다 .

[ 개발자와 디자이너 고려사항 ]- 어플리케이션에서 가로 또는 세로 slider 를 사용할 수 있지만 , 가로 slider 사용을 추천한다 . 

Slider Control

Windows Phone Microsoft Corporation.

Windows Phone Marketplace 현재 상황

• Total 34,162 apps (10/15/2011)• 52 % of Free. Average Price $1.73

Global

Windows Phone Microsoft Corporation.

Windows Phone Marketplace for Web

• http://www.windowsphone.com/ko-kr/marketplace

Windows Phone Microsoft confidential.

개발자 등록은 App Hub 로 !

개발자 등록은 App Hub 으로 시작 http://create.msdn.com/

Windows Phone 7.5 개발자 포털

현재 4,300 명 좋아요 !

http://www.facebook.com/windowsphonekorea

총 40편 개발자 동영상 및 한글 실습 교재 제공

http://msdn.microsoft.com/ko-kr/gg415576

START!