스포츠 앱

Applies to Windows and Windows Phone

스포츠 앱은 열광적인 팬에게 최신 스포츠 뉴스를 전달하든 또는 선수가 경기장에서 뛰어난 기량을 보이도록 도와주든 간에 사용자에게 영향을 줍니다. 타일, 시맨틱 줌, 검색 및 공유 계약 등의 Windows 기능은 스포츠 애호가들의 관심을 끄는 앱을 디자인할 때 특히 유용할 수 있습니다. 이 문서에서는 이러한 기능과 더불어 기존 스포츠 앱이 해당 기능을 사용하여 뛰어난 사용자 환경을 제공하는 방법의 다양한 예제를 간략하게 소개합니다. 한 번만 스크롤하면 새 스포츠 앱의 영감을 얻을 수 있습니다.

Bing 스포츠 앱의 기본 페이지

스포츠 앱 유형

다음은 몇 가지 일반적인 유형의 스포츠 앱입니다.

ESPN 앱의 기본 페이지

뉴스, 정보 및 동영상

이러한 앱은 최신 스포츠 뉴스를 기사, 동영상 및 슬라이드 쇼로 전달합니다. 콘텐츠는 정기적으로 업데이트되며 대체로 앱의 첫 페이지에서 제공됩니다. 예를 들어 ESPN 앱을 열면 즉시 최신 스포츠 콘텐츠를 확인할 수 있습니다. Windows 스토어에서 사용할 수 있는 ESPN, Sports Illustrated, NASCAR, Yahoo! Sports, THE Football 앱 등의 뉴스 중심 스포츠 앱을 살펴보세요.

Chicago Blackhawks 앱의 기본 페이지

팬 중심

이러한 앱은 특정 스포츠 팀의 열광 팬을 대상으로, 특정 팀에 대한 뉴스, 사진 및 동영상 콘텐츠를 제공합니다. Chicago Blackhawks 앱이 좋은 예입니다. 다음은 Blackhawks 기록에서 스탠리컵 우승을 차지했던 자랑스러운 순간을 보여 주는 앱의 방문 페이지입니다. Seattle Sounders FC 및 AC Milan은 팬 중심 Windows 스토어 앱의 다른 두 가지 예입니다.

NFL Final Fantasy 앱의 팀 성적 통계 비교 차트

도구 및 유틸리티

이러한 종류의 스포츠 앱은 팀 통계 비교, 특정 경기 스킬 교육 또는 사용자의 가상 리그 참여 허용 등의 특정 기능을 수행합니다. 대체로 이러한 앱은 사용자에게 특정 작업을 안내하는 보다 선형적인 탐색 패턴을 사용합니다. 영감을 얻으려면 Windows 스토어에서 Decision Maker 앱, Winchester Ballistics, One Basketball 또는 NFL Fantasy Football 2013을 참조하세요.

 

타일 및 알림을 통해 사용자 참여 유도

Windows 8.1에서는 앱이 실행되지 않는 경우에도 사용자 참여를 유도하는 다양한 방법을 앱에 제공합니다. 예를 들어 타일은 시작 화면에 라이브 동적 정보를 제공할 수 있습니다. 라이브 타일은 사용자가 좋아하는 팀의 새 드래프트 선정에 대한 뉴스 플래시나 라이브 득점 업데이트를 표시할 수 있습니다. 또한 사용자가 설정한 알림을 앱에서 제공하여 스포츠 팬이 경기를 놓치지 않도록 할 수 있습니다.

시작 화면에 표시된 각기 다른 크기의 스포츠 앱 타일

앱을 잘 나타내는 시작 화면 타일을 만듭니다. 이 스크린샷에서 타일이 작은 크기, 중간 크기, 와이드 및 큰 크기의 4가지 크기로 제공됨을 확인할 수 있습니다. 사용자는 자주 사용할 것 같은 잘 디자인된 타일을 시작 화면에 배치하는 경향이 있습니다. 덜 매력적인 타일을 사용하는 앱은 시작 화면에 표시되지 않고 훨씬 쉽게 잊혀질 수 있습니다. 세련된 타일의 효과를 간과하지 마세요.

라이브 타일: 스포츠 세계는 빠른 속도로 진행됩니다. 승리를 이끈 플레이, 심각한 부상 또는 유력한 드래프트 선정이 눈 깜짝할 사이에 발생할 수 있습니다. 스포츠 앱은 라이브 타일을 사용하여 앱이 실행되지 않는 경우에도 팬에게 좋아하는 팀과 관련된 최신 헤드라인 뉴스를 알립니다. 라이브 타일에 뉴스 속보, 득점 업데이트 또는 경기 미리 알림을 표시해 보세요. 광범위한 개요는 라이브 타일을 참조하고, 자세한 내용은 Guidelines for tiles and badges을 참조하세요.

라이브 타일은 Bing 스포츠 앱 환경의 핵심 부분입니다. 여기서는 앱의 라이브 타일이 시작 화면의 헤드라인과 이미지를 공유합니다.

라이브 타일에 헤드라인 및 미식축구 선수 사진이 표시됩니다.

보조 타일: 스포츠 팬은 항상 좋아하는 선수, 팀 및 리그를 확인하는 빠른 방법을 찾고 있습니다. 보조 타일을 사용하여 열광 팬이 관심 있는 콘텐츠에 즉시 액세스할 수 있도록 도와주세요. 스포츠 앱이 보조 타일을 지원하는 경우 사용자는 앱 내의 특정 콘텐츠에 대한 바로 가기를 시작 화면에 고정할 수 있습니다. 자세한 내용은 Guidelines for secondary tiles을 참조하고, 자세한 요약은 보조 타일 개요를 참조하세요.

예를 들어 ESPN 앱에서 Toronto Blue Jays 팬은 팀 통계 페이지를 시작 화면에 고정할 수 있습니다. 이 콘텐츠는 고정 가능하도록 디자인되었으므로 팬이 아래쪽 앱 바에서 고정 아이콘을 클릭할 수 있습니다(다음 스크린샷 참조).

ESPN 앱의 야구 팀 페이지에 있는 위쪽 및 아래쪽 앱 바를 보여 주는 스크린샷

사용자는 고정 아이콘을 클릭한 후 타일을 시작 화면에 고정하도록 확인합니다.

사용자가 앱의 페이지를 시작 화면에 고정할 때 표시되는 플라이아웃

"시작 화면에 고정" 단추를 누르면 새 보조 타일이 시작 화면에 나타납니다. 새 타일을 다른 스포츠 앱 근처로 이동합니다. 이제 시작 화면에 일반적인 콘텐츠에 사용되는 타일과 사용자가 좋아하는 팀 페이지로 바로 이동하는 새 보조 타일 등 두 개의 ESPN 타일이 있습니다.

시작 화면에 표시된 각기 다른 크기의 스포츠 앱 타일

이 Blue Jays 팬은 보조 타일을 통해 한 번만 클릭하면 관심 있는 통계에 액세스할 수 있습니다. 사용자가 바로 액세스할 수 있게 하려는 콘텐츠가 있으면 고정 가능하도록 설정하세요.

타일 크기 조정: 사용자가 타일 크기를 변경할 수 있으므로 앱이 지원하는 모든 타일 크기에서 타일이 멋지게 표시되어야 합니다. 각 타일 크기에 맞게 타일 이미지를 사용자 지정합니다. 이 타일은 작은 크기, 중간 크기 및 와이드 타일 크기에 대해 각각 다르게 디자인되었습니다.

SofaScore 앱의 작은 크기, 중간 크기 및 와이드 타일

Windows 스토어 앱은 모든 종류의 장치에서 실행될 수 있으므로 다음 화면 해상도에서 선명하게 표시되도록 타일 이미지의 크기 조정된 버전을 제공해야 합니다.

  • 1.0 = 1024 x 768 px
  • 1.4 = 1440 x 1080 px
  • 1.8 = 1920 x 1440 px

타일 크기에 대한 자세한 내용은 타일 및 알림 이미지 크기를 참조하세요. 크기 조정에 대한 자세한 내용은 Guidelines for scaling to pixel density을 참조하세요.

알림 메시지: 스포츠 이벤트는 하루에도 수시로 발생합니다. 라이브 타일은 시작 화면에서 새 스포츠 소식을 팬에게 알리는 데 유용하지만 사용자가 보다 직접적인 알림을 원할 경우 스포츠 앱에서 알림 메시지를 제공할 수 있습니다. 알림을 통해 게임이 시작됨을 알리든 또는 좋아하는 팀이 월드 시리즈에서 우승했음을 알리든 관계없이 사용자는 알림을 클릭하여 앱을 열고 자세한 내용을 볼 수 있습니다.

알림에 대해 궁금한 점이 있으면 Guidelines for toast notifications을 참조하세요. 자세한 설명은 알림 메시지 개요를 참조하세요.

SportsCenter 앱의 알림 메시지

이 이미지는 SportsCenter 앱의 알림 메시지를 보여 줍니다. 알림은 화면 오른쪽 위에 나타납니다.

시맨틱 줌을 사용하여 콘텐츠를 독창적으로 표시

대체로 스포츠 앱은 단일 페이지에 많은 고품질 콘텐츠가 있습니다. 앱에서 다양한 주요 스포츠의 뉴스 기사를 다루는 경우 방문 페이지가 복잡해질 수 있습니다. 시맨틱 줌은 콘텐츠가 많은 페이지를 구성하는 세련된 방법입니다. 이 기능은 콘텐츠를 논리적 그룹으로 축소하여 사용자가 사용 가능한 모든 콘텐츠를 더 잘 이해하고 원하는 특정 유형의 콘텐츠에 액세스할 수 있도록 합니다.

Sports Illustrated 앱은 시맨틱 줌을 사용하여 콘텐츠를 관리할 수 있도록 유지합니다. 사용자는 앱을 처음 열 때 오른쪽으로 이동하여 앱의 모든 콘텐츠를 확인할 수 있습니다. 다음은 기본 보기를 보여 주는 스크린샷입니다.

Sports Illustrated 앱의 콘텐츠 기본 보기

그러나 사용 가능한 모든 콘텐츠를 보려면 많이 이동해야 합니다. 사용 가능한 콘텐츠의 개요를 보기 위해 사용자는 시맨틱 줌을 사용합니다. 사용자가 마우스 휠을 스크롤하는 동안 터치 제스처를 사용하거나 "Ctrl" 키를 눌러 확대/축소하면 콘텐츠가 유용한 제목과 미리 보기를 포함하는 각기 다른 범주로 구성됩니다.

시맨틱 줌을 사용하여 축소한 후의 Sports Illustrated 앱

이제 사용자가 쉽게 콘텐츠를 살펴보고 특정 관심 섹션으로 이동할 수 있습니다. 추가 예제는 시맨틱 줌을 참조하고, 자세한 내용은 Guidelines for semantic zoom을 참조하세요.

허브를 사용하여 팬 관심 유도

스포츠에는 격렬한 동작, 승리의 순간, 인상적인 장면 등이 많습니다. 허브 컨트롤은 앱의 전면 중앙에 "영웅" 이미지를 배치합니다. 영웅 이미지는 방문 페이지에서 사용자를 맨 먼저 맞이하고 앱의 기사에 관심을 갖게 하는 큰 고해상도 이미지입니다.

여기서 Chicago Blackhawks 앱은 영웅 이미지에 팀의 가장 자랑스러운 순간을 표시합니다. 이 이미지는 사용자가 앱을 열 때 맨 먼저 표시됩니다.

Chicago Blackhawks 앱을 열 때 사용자에게 표시되는 큰 이미지의 스크린샷

Bing 스포츠 앱은 영웅 이미지에 최신 헤드라인을 표시합니다. 이 사진은 사용자의 관심을 끌고 기사에서 발췌한 캡션을 포함합니다.

Bing 스포츠 앱의 기본 페이지

자세한 내용은 허브 컨트롤에 대한 지침을 참조하세요.

전체 화면 콘텐츠로 효과 최대화

Windows 스토어 앱 실루엣과 연관된 그리드가 있다고 해서 모든 앱 콘텐츠가 여백 안에 맞아야 하는 것은 아닙니다. 스포츠 앱 디자인에서 경계를 자유롭게 밀거나 넘어갈 수 있습니다. 다음은 눈금선을 넘어가는 콘텐츠의 예입니다. 앱 왼쪽에 있는 로고와 콘텐츠는 여백 안에 들어갑니다. 그러나 영웅 이미지는 시각적 효과를 최대화하기 위해 화면 맨 위에서 맨 아래까지 표시됩니다.

차려고 준비 중인 축구 선수의 큰 이미지를 포함하는 스포츠 앱의 방문 페이지

다음 이미지는 동일한 앱 이미지 위에 Windows 스토어 앱 실루엣의 여백을 겹쳐서 표시합니다. 대부분의 앱 콘텐츠는 여백으로 둘러싸인 파란색 영역 안에 충분히 들어가지만 선수 이미지는 경계를 넘어서 화면 가장자리까지 확장됩니다.

눈금선이 겹쳐진 스포츠 앱의 방문 페이지

Seattle Sounders 앱도 전체 화면에 걸쳐 있는 그래픽으로 효과를 거둡니다. 매력적인 배경 이미지 위에 관심을 끄는 추천 콘텐츠가 겹쳐서 표시됩니다. 화면 맨 오른쪽에 있는 전체 크기 광고도 Sounders 환경과 어울리도록 디자인되었습니다.

Sounder FC 앱의 콘텐츠를 표시하는 와이드 스크린샷

화면 공간의 각 픽셀은 스포츠 앱 디자인에 적합한 대상입니다.

앱 바를 사용하여 손쉽게 탐색

앱 전면 중앙에 콘텐츠를 표시하고 필요 없을 때는 화면이 혼잡해지지 않도록 제어합니다. Windows 스토어 앱에서 탐색 모음(위쪽 앱 바라고도 함)과 아래쪽 앱 바는 사용자가 화면 위쪽 또는 아래쪽 가장자리에서 살짝 밀거나 마우스 오른쪽 단추를 클릭할 때까지 보이지 않습니다. 대부분의 스포츠 앱은 탐색 모음을 사용하여 앱의 여러 섹션에 대한 바로 가기를 포함합니다. 예를 들어 THE Football 앱의 탐색 모음에는 전 세계 여러 미식축구 리그에 대한 탭이 있습니다. 또한 사용자가 홈, 뉴스, 동영상 및 소셜 미디어를 빠르게 액세스할 수 있도록 합니다.

THE Football 앱의 위쪽 앱 바

ESPN 앱은 탐색 컨트롤 외에도 최신 경기 득점을 탐색 모음에 표시합니다. 사용자는 탐색 모음을 통해 앱의 한 섹션에서 다른 섹션으로 건너뛰거나, 현재 경기 득점을 빠르게 살펴보거나, 자세한 경기 관련 앱 콘텐츠로 이동할 수 있습니다.

현재 경기 득점과 탐색 컨트롤을 표시하는 ESPN 앱의 위쪽 앱 바

일반적으로 아래쪽 앱 바에는 현재 보기와 관련된 컨트롤이 포함됩니다. 예를 들어 텍스트가 많은 스포츠 기사를 포함하는 페이지는 아래쪽 앱 바에 텍스트 크기 변경 단추가 있을 수 있습니다. Sports Illustrated 앱에서는 사용자가 앱 바를 통해 스포츠 리그별로 콘텐츠를 필터링할 수 있습니다.

Sports Illustrated 앱의 아래쪽 앱 바를 표시하는 스크린샷

편리한 검색 기능 제공

스포츠 세계에는 많은 정보와 소식이 있습니다. 앱에서 바로 검색할 수 있도록 하고 검색 계약을 통해 시스템의 어디에서든 앱을 검색할 수 있게 하면 사용자가 필요할 때 필요한 정보를 정확하게 얻을 수 있습니다.

앱에서 바로 검색: 앱에 검색 상자를 포함하여 팬이 원하는 콘텐츠에 빠르게 액세스할 수 있도록 합니다. 사용자가 검색 쿼리만 입력하는 앱 페이지가 있을 경우 입력하여 검색을 사용하도록 설정할 수 있습니다. 그러면 모든 키보드 입력이 검색 쿼리로 자동으로 등록됩니다. 입력하여 검색이 적절한 경우에 대한 자세한 내용은 Guidelines for search을 참조하세요.

기존 스포츠 앱의 검색 예제는 Bing 스포츠 앱을 참조하세요. 사용자가 특정 선수에 대해 알아보려는 경우 앱을 열고 선수 이름을 입력할 수 있습니다. Bing 스포츠 앱의 기본 페이지에서는 입력하여 검색을 사용할 수 있으므로 검색 상자가 열리고 사용자가 입력을 시작하는 즉시 입력을 등록합니다.

Bing 스포츠 앱 방문 페이지의 입력하여 검색

Bing 스포츠 앱은 사용자 입력에 따라 검색 결과 제안을 구체화합니다.

Bing 스포츠는 사용자 입력에 따라 검색 결과를 구체화합니다.

8개 키만 입력하면 필요한 정보를 얻을 수 있습니다.

Bing 스포츠 앱의 선수 프로필 스크린샷

검색 계약: 검색 계약을 사용하여 앱의 스포츠 콘텐츠를 시스템 검색에서 사용할 수 있도록 합니다. 앱이 검색 계약에 참여하면 사용자가 시스템의 어디에서든 검색 참 메뉴를 통해 검색할 경우 앱에서 관련된 검색 결과를 얻을 수 있습니다. 계약에 대해 잘 모르는 경우 광범위한 개요는 참 메뉴 및 계약을 참조하고, 자세한 설명은 앱 계약 및 확장을 참조하세요.

좋아하는 스포츠 공유

스포츠는 좋아하는 경기와 팀, 그리고 일반적인 경험을 공유하는 사용자 커뮤니티를 중심으로 돌아갑니다. Windows에서는 공유 계약을 사용하여 쉽게 공유할 수 있습니다. 앱을 공유 원본으로 설정하면 사용자가 Twitter, Facebook 또는 메일과 같은 다른 설치된 앱을 사용하여 앱에서 콘텐츠를 공유할 수 있습니다. 공유는 사용자를 만족시킬 뿐 아니라 앱의 판촉에도 도움이 됩니다. Windows 스토어 앱에 사용 가능한 계약의 광범위한 개요는 참 메뉴 및 계약을 참조하세요.

앱을 공유 원본으로 등록하면 사용자가 언제든지 공유 참 메뉴를 사용하여 앱에서 콘텐츠를 공유할 수 있습니다. 예를 들어 사용자가 NFL Fantasy Football 앱에서 경기 재방송을 보고 있다고 가정합니다. 사용자는 전날 오후에 친구와 이 경기에 대해 이야기했으며 영상을 친구와 공유하기로 결정합니다. 화면 오른쪽에서 살짝 밀어 참 메뉴를 표시하고 공유 참 메뉴를 선택합니다.

NFL Fantasy Football 앱에 표시되는 참 메뉴

NFL Fantasy Football에서 사용자가 공유하려는 콘텐츠를 시스템에 제공하며, Windows는 사용자 시스템에 설치된 앱 중 이 유형의 페이지 콘텐츠를 처리할 수 있는 앱 목록을 표시합니다. 이 경우 Twitter, 메일, Evernote Touch, Flipboard 및 다른 여러 앱이 이 유형의 콘텐츠를 공유할 수 있습니다. 이제 사용자가 이 정보를 공유하는 방법을 선택할 수 있습니다. 트윗하든, 친구에게 링크를 메일로 보내든 또는 사용 가능한 다른 앱 중 하나로 공유하든 관계없이 NFL Fantasy Football을 나갈 필요가 없습니다.

NFL Fantasy Football 앱의 공유 플라이아웃을 표시하는 스크린샷

사용자가 앱에서 콘텐츠를 공유할 때 앱을 나타내는 방식을 사용자 지정할 수 있습니다. 예를 들어 기본적으로 공유 콘텐츠의 링크만 제공하거나 해당 링크와 함께 앱의 로고 또는 공유 콘텐츠의 미리 보기를 표시할 수 있습니다.

앱에서 다른 앱이 공유하는 콘텐츠를 받으려는 경우 스포츠 앱을 공유 대상으로 설정합니다. 앱을 공유 원본 및/또는 대상으로 설정하는 방법에 대한 자세한 내용은 Guidelines for sharing content을 참조하세요. 코드 샘플은 공유 원본 샘플공유 대상 샘플을 참조하세요.

소셜 미디어 활용: 앱에 소셜 미디어를 통합하여 사용자가 항상 스포츠 대화의 최신 동향을 파악할 수 있도록 합니다. 사용자가 스포츠 주제에 대한 친구들의 의견을 알 수 있도록 Twitter 기능을 이용하든 또는 Facebook과 동기화하든 관계없이 독창적인 방식으로 소셜 콘텐츠를 제공하면 영향을 줄 수 있습니다.

FX의 이 엔터테인먼트 앱은 타임라인을 사용하여 소셜 미디어 추세를 표시합니다. 사용자는 주제(이 경우 TV 프로그램) 및 소셜 미디어 원본별로 타임라인을 필터링합니다. 그러면 앱에서 해당 주제와 관련된 모든 대화의 타임라인과 개별 게시물을 표시합니다.

TV 프로그램 Archer에 대한 Twitter 게시물을 표시하는 FX 앱의 타임라인

대화형 데이터 만들기

스포츠 세계는 스포츠 팬의 경험에 큰 영향을 미치는 통계로 가득 차 있습니다. 사용자가 충분한 정보를 기반으로 가상 스포츠 트레이드 결정을 내리려고 하든, 좋아하는 하키 팀의 성적을 즐기려고 하든 또는 MLB에서 두 지명 타자의 RBI를 비교하려 하든 관계없이 데이터를 시각화하고 조작하는 독창적인 방법을 제공하면 앱을 차별화할 수 있습니다.

NFL Fantasy Football 2013 앱은 대화형 미디어를 사용하여 게임 통계에 활기를 불어넣습니다. 이 앱은 가상 팀의 시간별 득점 그래프를 표시하고 사용자가 그래프에서 특정 지점을 클릭하여 득점 플레이의 동영상 클립을 볼 수 있도록 합니다.

NFL Fantasy Football 2013의 대화형 데이터 표시

관련 항목

개요 및 지침
Windows 스토어 앱 만나보기
Windows 스토어 앱용 UX 지침
참 메뉴 및 계약
앱 계약 및 확장
허브 컨트롤 지침
라이브 타일
라이브 타일 지침
보조 타일 개요
Secondary tile guidelines
알림 메시지 개요
알림 메시지 지침
창 크기 지침
이동 지침
시맨틱 줌
시맨틱 줌 지침
AppBar 지침
공유 지침
검색 지침
샘플
라이브 타일 샘플
이동 샘플(HTML)
이동 샘플(XAML)
앱 바 샘플(HTML)
앱 바 샘플(XAML)
공유 원본 샘플
공유 대상 샘플
검색 샘플
시맨틱 줌 샘플(C#/VB/C++)
시맨틱 줌 샘플(JavaScript)
알림 샘플

 

 

표시:
© 2014 Microsoft