Windows Phone Design Guide

1. Metro : A Concept of
Windows Phone 7.5
Jinho.Seo@microsoft.com
Sr .Developer Evangelist – Windows Phone and
Academy
http://blogs.msdn.com/jinhoseo
http://www.facebook.com/windowsphonekorea

2. People vs. Icons
Windows Phone Microsoft confidential.

3. Why metro?

4. Metro is a concept of Microsoft Future!

5. 다양한 Windows Phone 디자인 요소

6. Demo
Windows Phone 7.5

7. Start and Apps List

8. Status Bar – System Area
상태 바(Status Bar)란 무엇인가?
1. 상단 위의 표시 및 시스템 레벨의 정보 표시
2. 손가락으로 누르면 약 8초간 보여주고 자동적으로 슬라이드 됨.
3. App 에서 예약된 공간
4. System Clock 은 Portrait 일 경우 Height 32px, Landscape 일 경우
Width가 72px 영역 차지
Status Bar icon
1. Signal Strength
2. Data connection
3. Call forwarding
4. Roaming
5. Wireless network signal strength
6. Bluetooth status
7. Ringer mode
8. Input status
9. Battery Power level
10. System clock

9. App Bar
1. 하단 버튼, 아이콘 또는 텍스트로 표시할 수 있음.
2“…” 으로 표현된 연속된 점을 탭(Tab)한다던 지, 위쪽으로 Flick up하면 ↑
3. “아이콘+Text” 와 “Text”로 이루어진 그 밖의 옵션들이 제공
4. 메뉴를 다시 원래대로 bottom에 아이콘 형태로만 보이도록 하려면,
• ‘…’을 탭(Tab)하거나 아래쪽으로 Flick.
• 메뉴 이외의 영역을 Tap
• Hardware 키인 ‘Back’키를 선택
• 메뉴 선택

10. Icongraphy
• 인식하기 쉽고, 이해할 수 있으며 사용자가 실생활에서의
메타포(metaphors)적인 표현
• 사용자가 봤을 때 기능과의 매칭이 잘되는 아이콘을 사용 권장
• 아이콘 텍스트는 어플리케이션 바 메뉴에서 사용자에게 보여줄
• http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/ 내용입니다.
03/27/windows-phone-7-series-icon-pack.aspx [개발자와 디자이너 고려사항]
- 어플리케이션 바 아이콘 이미지는 투명 배경위에 foreground color로 ‘white’
• http://expression.microsoft.com/en-us/gg317447 컬러를 사용해서 48*48px
- 최대 5개만 (손가락 큰 사람을 대비, 터치 중첩 방지)

11. Screen Orientation
- 개발자가 세로모드 보기를 지원하기 위해서는 코드를 추가
<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) 효과를
적용하지 않도록 한다.

12. Font
윈도우폰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)를 고려하여 사용해야 한다.

13. Push Notification
• Tile notifications
• 사용자가 동작하고 있는 상태에 직접적인 영향을 주지
않지만, 시작화면의 타일(tile)에 알림을 전달,
• 시작화면의 메일(Mail) 타일에 카운트를 증가시켜주는 것과 같은
형태의 알림
• Toast notifications
• 사용자의 동작을 요구하는 것으로 시스템 전반에 걸쳐 발생하는 알림
• 사용자가 폰을 사용하는 중에 text message 또는 instant message를
받았을 때, 이 알림은 화면의 상단에 보여지고 10초 후에 사라짐.
• Raw notifications
• 어플리케이션 내에서 사용자 동작을 요구하는 알림
• 어플리케이션에 의해 전체적으로 컨트롤이 가능하고, 오직 해당
어플리케이션 내에서만 영향을 미침.

14. 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 사용 없이도 디스플레이 될 수
있다.
- 다양한 타일 이미지를 활용한다면 인식할 수 있는 테마와
스타일을 고려하여 사용할 수 있다.
- 개발자는 카운터의 색상, 폰트, 폰트색상, 사이즈를 변경 시킬 수
없다.
- 과도한 사용은 배터리 수명에 영향을 줄 수 있으므로 적당히
사용.

15. Theme - Color
테마(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” 컬러의 사용을 자제할 필요가 있습니다.

16. Control and Touch Input
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의
경우,
레이아웃에서 최소 터치 타겟 사이즈의 공간을 만들어내기 위해
추가적인 어플리케이션 페이지나 화면내의 조정이 필요합니다.

17. Multi-Touch and Gestures
■ Pinch and strech
pinch and strech는 2개의 손가락을 이용하여 분리된 영역을 죄거나(pinch)
하거나 늘리는(strech) 동작입니다.
두 개 손가락의 중심을 기준으로 컨텐츠를 줌(zoom) 할 수 있습니다.
■ Touch and hold
Touch and hold는 특정 영역을 한
손가락으로 누르고 일정기간 기다리는
동작입니다.
■ Four touch points
윈도우폰은 동시에 4개의 입력 포인트를 활용할 수 있습니다. 예를 들면 게임이나
섬세한 동작이 요구되는 어플들에 활용이 될 수 있습니다.
입력 타겟의 지름은 7mm이상이 되어야 하고, 타겟 간에 3.5mm이상이 되도록
합니다.
[개발자와 디자이너 고려사항]
- touch and hold 제스처는 일반적으로 아이템을 위한 context
menu나 옵션 페이지를 표시하는데 사용한다.

18. On Screen Keyboard
• 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)의 경우에는 새로운 라인이 추가됩니다.

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

20. Sensors & Output methods
윈도우폰은 다음의 센서들을 포함합니다.
• 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, 어플 내에서의 게임 컨트롤
등으로 이 기능을 활용할 수 있습니다.

21. Panorama Template
• 파노라마 어플리케이션(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

22. Panorama Template Design
배경 이미지(background image)는 최하위 layer 이며, magazine-like 느낌을 갖게 합니다.
대체로 배경 이미지는 전체 화면에 채워지도록 사용되며, 어플리케이션의 가장 시각적인(visual) 부분입니다.
파노라마 섹션(panorama section)은 각기 다른 컨트롤이나 컨텐츠를
파노라마 타이틀(panorama title)은 파노라마 어플리케이션의 전체 타이틀입니다. 요약/분류하는 구성 요소입니다.
어플리케이션을 구분하는데 사용하고, 어플리케이션의 실행(진입)방법에 상관없이 파노라마 섹션의 이동은 pan이나 flick 제스처를 사용하여 같은 비율로 동작합니다.
항상 표시됩니다.
파노라마 섹션 타이틀(section title)은 선택적(optional)으로 적용할 수 있습니다.

23. 무료 6 App Design Template 제공

24. Slider Control
슬라이더 컨트롤(Slider control)은 볼륨이나 밝기 레벨과 같은 데이터의 범위로부터
값을 설정하는데 사용합니다.
Slider는 최소값과 최대값을 가집니다.
[개발자와 디자이너 고려사항]
- 어플리케이션에서 가로 또는 세로 slider를 사용할 수 있지만, 가로 slider 사용을
추천한다.

25. Windows Phone Marketplace 현재상황
Global
• Total 34,162 apps (10/15/2011)
• 52 % of Free. Average Price $1.73
Windows Phone Microsoft Corporation.

26. Windows Phone Marketplace for Web
• http://www.windowsphone.com/ko-kr/marketplace
Windows Phone Microsoft Corporation.

27. 개발자 등록은 App Hub로!

28. Windows Phone 7.5 개발자 포털
현재 4,300명좋아요! 총40편개발자동영상및한글실습교재제공
http://www.facebook.com/windowsphonekorea http://msdn.microsoft.com/ko-kr/gg415576

29. START!