이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

스포츠 앱

스포츠 앱 아이디어 북에는 Windows 8용 가상 스포츠 앱에 대한 설명이 포함되어 있습니다. 이 항목의 시나리오를 검토하고 Windows 8 Microsoft 디자인 언어를 앱에서 활용하는 방법을 파악하면 스포츠 앱 디자인에 대한 아이디어를 얻을 수 있습니다.

스포츠 앱 시나리오

이 항목에서 설명하는 스포츠 앱은 Microsoft 디자인 기능을 통해 사용자를 위한 효율적인 스포츠 환경을 만듭니다.

사용자의 관심 끌기공유다른 사용자의 관심 끌기

뉴스를 보면서 태블릿 PC를 사용하는 사람 이미지

스포츠 앱을 실행하는 컴퓨터 이미지

스포츠 앱을 사용하여 다른 사용자와 공유하는 이미지

원격 재생을 사용하여 스포츠 앱에서 동영상을 스트림하는 이미지

스포츠 앱 이미지

스포츠 앱의 공유 데이터 이미지

 

사용자가 앱의 콘텐츠에 주목하도록 만들기

Microsoft 디자인 언어를 사용하여 일상적인 탐색 환경을 효율적이면서도 쉽고 재미있게 만들 수 있습니다. 라이브 타일을 통해 사용자가 앱의 콘텐츠에 주목하도록 할 수도 있습니다. 이 시나리오에 따라 효율적인 스포츠 앱을 만드는 방법을 파악할 수 있습니다.

John Rodman은 TV에서 뉴스를 보면서 "두 번째 화면"으로 Windows 8 태블릿을 사용하고 있습니다.

뉴스를 보면서 태블릿 PC를 사용하는 두 사람의 큰 이미지

Contoso Sports 앱은 스포츠 헤드라인이 나열된 라이브 타일을 통해 사용자의 주의를 끕니다.

시작 메뉴 및 라이브 타일 이미지

이동 가능한 동일한 캔버스에 모든 옵션이 표시된 보기가 가로로 놓여 있습니다. John은 페이지 계층 구조를 탐색할 필요 없이 검색할 수 있습니다.

이동 가능한 대시보드 페이지 이미지

John은 손가락을 모아 시맨틱 줌을 활성화합니다. 시맨틱 줌을 사용하면 좋아하는 스포츠로 빠르게 이동할 수 있습니다.

동영상 라이브러리에서 선택하는 파일 선택기 이미지

 

앱 콘텐츠 요약

첫 번째 시나리오의 내용:

  • 크롬 및 여러 탐색 계층 구조 없이도 콘텐츠가 돋보입니다.
  • 라이브 타일을 사용하여 사용자와 관련 있는 정보를 제공하는 앱으로 사용자의 주의를 끌 수 있습니다.

라이브 타일, 이동 및 시맨틱 줌에 대한 자세한 내용은 다음 항목을 참조하세요.

로컬 및 네트워크에서 공유

원격 재생을 사용하여 PC 환경을 TV로 공유할 수 있습니다. 공유 계약을 사용하여 콘텐츠를 다른 앱으로 공유할 수 있습니다.

John은 흥미로운 기사를 발견하고 이 기사를 열어 전체 화면 기사 보기에서 기사를 봅니다.

기사를 선택하는 이미지

John은 원격 재생을 사용할 수 있는 TV에서 기사의 하이라이트 동영상을 재생합니다.

원격 재생을 사용하여 동영상을 스트림하는 이미지

John은 부상을 입은 선수가 그의 친구인 Ben Martens의 가상 팀에 소속되어 있다는 것을 알았습니다. John은 공유 참 메뉴를 살짝 밀어 연 다음 Contoso 소셜 앱을 사용하여 친구에게 알림을 보냅니다.

공유 참 메뉴 이미지

 

공유 요약

두 번째 시나리오의 내용:

  • 앱의 콘텐츠를 원격 재생을 사용하는 다른 장치로 확장할 수 있습니다.
  • 콘텐츠를 공유 소스로 지정하면 Windows 8을 통해 다른 앱, 메일 및 소셜 네트워크에 연결할 수 있습니다.
  • 앱을 공유 대상으로 지정하고 콘텐츠, 링크 또는 기타 유형의 구조화된 데이터를 받을 수 있습니다.

원격 재생 및 공유에 대한 자세한 내용은 다음 항목을 참조하세요.

앱 외부에서 사용자의 관심 끌기

시기적절한 알림 메시지 및 검색 계약을 사용하여 앱으로 사용자의 주의를 끌 수 있습니다.

Ben Martens는 보고서를 작성하고 있습니다. Ben은 자신의 선수가 부상을 입었다는 내용의, John Rodman이 보낸 Contoso Social 앱 알림을 확인합니다.

알림 메시지 이미지

Ben은 알림 메시지를 클릭하고 Contoso 소셜 네트워크 앱에 딥 링크됩니다. 여기에서 Ben은 기사의 웹 페이지 링크가 게시되었음을 확인합니다.

원격 재생을 사용하여 동영상을 스트림하는 이미지

Ben은 가상 팀의 새 외야수를 선발해야 합니다. Ben은 시스템 수준의 검색 참 메뉴를 사용하여 새 선수를 검색합니다.

검색 참 메뉴 이미지

Ben은 Contoso Sports 앱 내에서 검색하여 관련 외야수를 찾습니다. Ben은 대체 역할을 훌륭히 해낼 것 같은 Ben Smith를 선택합니다.

검색 결과 이미지

새 외야수를 선택한 후에 Ben은 앱 바를 표시하여 가상 팀에 새 선수를 추가합니다. 앱 바는 탐색(위쪽 앱 바로 표시) 및 명령(아래쪽 앱 바로 표시)에 유용하며, 콘텐츠를 돋보이게 해 줍니다.

위쪽 및 아래쪽 앱 바 이미지

Ben은 새 선수의 기록을 계속 추적하기 위해 점수 추적기로 이동합니다.

점수 추적기 페이지 이미지

Ben은 보고서를 계속 작성하면서 점수 추적기를 모니터링하기 위해 Contoso Sports 앱을 사이드 뷰에 배치합니다.

공유 참 메뉴 이미지

 

앱 외부에서 사용자의 관심 끌기 요약

세 번째 시나리오의 내용:

  • 알림 메시지는 앱으로 딥 링크되며 사용자에게 콘텐츠에 다시 참여할 수 있는 기회를 제공합니다.
  • 완벽한 기능을 갖춘 사이드 뷰를 통해 사용자는 앱 참여를 높일 수 있습니다.
  • 검색은 사용자가 정보를 필요로 할 때 잠재적인 대상 목록에 앱을 배치합니다.

알림 메시지, 사이드 뷰, 검색 및 앱 바에 대한 자세한 내용은 다음 항목을 참조하세요.

다양한 가능성 살펴보기

Windows 8은 앱을 돋보이게 만들 수 있는 새로운 기능으로 가득 차 있습니다. 자세한 내용은 개발자용 Windows 8 제품 가이드(영문)를 참조하세요.

관련 항목

유용한 Windows 스토어 앱 만들기
Windows 스토어 앱용 UX(사용자 환경) 디자인 패턴
Windows 스토어 앱용 UX 지침
샘플 및 지침
라이브 타일 지침
라이브 타일 샘플
이동 지침
이동 샘플(HTML)
이동 샘플(XAML)
앱 바 지침
앱 바 샘플(HTML)
앱 바 샘플(XAML)
알림 메시지에 대한 지침 및 검사 목록
알림 샘플
사이드 뷰 지침
사이드 뷰 샘플
공유 지침
공유 원본 샘플
공유 대상 샘플
검색 지침
검색 샘플
원격 재생 지침
재생 샘플
시맨틱 줌 지침
시맨틱 줌 샘플(C#/VB/C++)
시맨틱 줌 샘플(JavaScript)

 

 

© 2013 Microsoft. All rights reserved.