엔터테인먼트 앱

Applies to Windows and Windows Phone

강력하고 대중적인 미디어 앱을 만드는 데 도움이 될 디자인 아이디어에 대해 설명합니다.

개요

Windows 8.1은 터치 중심의 태블릿에서 고해상도 랩톱 및 데스크톱 PC에 이르기까지 광범위한 장치에서 최고의 사용 범위를 제공합니다. Windows 8.1의 새로운 기능 중 다수는 미디어 및 엔터테인먼트 환경에 고유하게 맞춤화되어, 콘텐츠 게시자에게 고객과 연결하고 고객을 참여시키며 고객에게 가까이 갈 수 있는 새로운 방법을 제공합니다.

또한 Windows 스토어는 콘텐츠 게시자에게 콘텐츠를 배포, 홍보 및 판매할 수 있는 훌륭한 기회를 제공합니다. Windows 스토어의 비즈니스 조건에 따라 Microsoft에서 제공하는 상거래 엔진을 사용할 수 있습니다. 또는 원하는 경우 자신의 고유한 상거래 엔진을 사용하여, 자신의 조건에 따라 비즈니스를 운영하고 유연성과 수익을 최대화할 수 있습니다.

이 문서에서는 미디어 및 엔터테인먼트 게시자에게 특히 중요한, 다음과 같은 Windows 8.1의 기능을 중점적으로 소개합니다.

  • Windows 스토어 앱—콘텐츠의 중심 무대가 될 앱용 디자인 언어입니다.
  • 라이브 타일 및 알림 메시지—앱이 실행되고 있지 않을 때에도 시기적절한 관련 알림을 통해 콘텐츠를 홍보하여 사용자가 계속해서 앱으로 돌아오도록 만듭니다.
  • 검색 계약 및 공유 계약—미디어 콘텐츠를 찾고 공유하는 것은 이제 최고 수준의 운영 체제 기능입니다. 이를 통해 좀 더 일관된 사용자 환경이 조성되며 사용자는 좀 더 쉽게 앱에서 콘텐츠를 찾고 공유할 수 있습니다.
  • 장치 계약—사용자는 그룹 보기 및 참여를 위해 PC에서 TV와 오디오-동영상 수신기 등의 네트워크 장치로 콘텐츠를 전송할 수 있습니다.

미디어 앱의 레이아웃 및 탐색

엔터테인먼트 앱은 여러 미디어 유형에 맞는 서로 다른 다양한 범주를 제공하는 경향이 있습니다. 예를 들어, 영화 앱에서는 장르, 감독이나 배우, 이전 영화 기호 또는 추천 콘텐츠별로 영화를 검색할 수 있습니다. 마찬가지로 음악 앱에서는 아티스트, 앨범, 장르 및 추천 콘텐츠별로 음악을 검색할 수 있습니다. 미디어 앱의 최종 사용자 환경을 최적화하려면, 사용자가 원하는 것을 빠르고 정확하게 찾을 수 있도록 콘텐츠를 의미 있는 방식으로 구성하는 것이 중요합니다. Windows 스토어 앱에 대해 계층적 탐색 및 기타 탐색 패턴을 사용하면 앱을 빠르고 유연하고 쉽게 사용하도록 할 수 있으며, 사용자가 필요한 것을 빠르게 찾도록 도울 수 있습니다.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 살펴보세요.

계층적 모델

엔터테인먼트 및 미디어 앱에는 일반적으로 사용자가 찾아서 이해해야 할 많은 스토리와 이미지가 있습니다. Windows 8.1에서 권장 탐색 및 조작 패턴을 사용하면 콘텐츠를 화면에 표시하여 스토리와 이미지가 환경의 중심이 되도록 할 수 있습니다. 일반적인 것에서 특별한 것의 순서로 정보를 제공하면 사용자는 원하는 것을 신속하게 찾을 수 있습니다.

앱의 허브 페이지

앱의 환경을 풍성하고 다채롭게 만들려면 Windows 스토어 앱용 계층적 모델을 사용합니다. 앱의 방문 페이지(hub라고도 함)는 추천 콘텐츠, 권장 콘텐츠(사용자의 이전 관심사 기반), 현재 재생 중인 콘텐츠, 저장된 큐, 장르 및 범주 등을 이동이 용이한 하나의 화면에 표시할 수 있습니다. 각 범주 그룹을 강조 표시할 수 있으며, 다음 이미지에 보이는 것처럼 헤더를 탭하여 더 많은 콘텐츠를 표시할 수 있습니다.

예제 허브 페이지를 보여 주는 이미지

앱의 허브 페이지에 일정하게 콘텐츠 범주를 표시하고, 사용자의 시선을 끌 수 있도록 각 범주에서 관련 미디어 콘텐츠를 보여 줍니다. 범주에 추가 콘텐츠가 있음을 사용자에게 알리기 위해 머리글에 펼침 단추 문자 모양 (>)을 추가할 수 있습니다.

그룹에 더 많은 콘텐츠가 있음을 보여 주는 이미지

책갈피, 즐겨찾기 및 재생 목록

사용자는 종종 나중에 액세스하기 위해 재생 목록을 저장하거나 미디어를 큐에 추가합니다. 앱에서 쉽게 액세스할 수 있는 방법으로 이 기능을 지원하면, 즐겨 찾는 미디어에 액세스하기 위한 간편한 환경을 원하는 사용자들이 반복해서 사용할 것입니다.

사용자가 저장한 모든 미디어 콘텐츠 모음인 책갈피, 즐겨찾기 또는 재생 목록 섹션을 방문 페이지에 추가합니다. 사용자가 이러한 책갈피 항목을 선택하고, 항목을 큐의 맨 위로 이동하거나 큐에서 제거하거나 큐 내에서 항목을 정렬하여 관리할 수 있게 하세요. 다음 예제에서는 "나중을 위해 저장됨" 큐에 수집되는 콘텐츠를 보여 줍니다.

사용자가 저장한 콘텐츠 그룹 보여 주기

시맨틱 줌

방문 페이지와 범주 페이지 둘 다에서 사용자는 시맨틱 줌을 사용하여 전체 화면을 손쉽게 보고 관심이 있는 항목에 빠르게 액세스할 수 있습니다.

앱에서 이동을 지원하는 방법에 대한 자세한 내용은 터치 조작 디자인 페이지를 참조하세요. 다음 그림은 시맨틱 줌의 그룹 보기를 보여 줍니다.

콘텐츠 범주를 보여 주는 예제

시맨틱 줌을 사용하는 경우 사용자가 홈페이지에서 그룹을 선택하고 이동하여 범주 배치를 다시 정렬하도록 할 수 있습니다. 이제 사용자가 앱 방문 페이지를 개인 설정할 수 있으며, 이는 앱을 사용할 또 다른 이유가 됩니다.

다음 그림과 같이 사용자가 위쪽 앱 바를 탐색에 사용할 수도 있습니다.

범주의 이동을 보여 주는 예제

특정 범주 페이지에서 시맨틱 줌을 사용하여 해당 범주의 여러 영화와 곡 간에 이동할 수도 있습니다. 사용자는 서로 다른 곡과 동영상 간을 빠르게 이동하기 위해 시맨틱 줌을 사용합니다.

허브 보기에서 항목 탭하기

사례 1: 즉시 재생

사용자가 방문 페이지 또는 섹션 페이지에서 미디어 항목을 탭하면 미디어 항목이 재생됩니다. 사용자는 이 동작을 기대하므로 이것을 탭의 기본 응답으로 설정하는 것이 가장 좋습니다. 다음 이미지는 즉시 재생을 위한 조작을 보여 줍니다.

즉시 재생을 보여 주는 조작

마찬가지로, 사용자는 재생 중인 미디어에 대해 더 많은 정보를 원할 것이므로, 전체 화면 보기에서 상세 항목 보기로 이동할 수 있도록 앱 바에 단추를 제공하세요. 다음 이미지는 이것의 시뮬레이션을 보여 줍니다.

콘텐츠의 상세 보기로 이동하기 위한 조작

전체 화면 보기가 아닌 경우에도 미디어는 계속 재생되어야 합니다. 미디어가 전체 화면이 아니더라도 미디어 컨트롤을 계속 표시하세요. 이렇게 하면 앱이 축소되었는지 여부에 관계없이 사용자가 미디어 컨트롤을 열 때 동일한 환경을 사용할 수 있습니다.

전체 화면에 대한 전환 단추를 탭하거나 UI에 표시된 동영상 또는 음악을 탭하면 전체 화면 재생 모드가 다시 시작됩니다.

또는 앱이 미디어에 대한 상세 정보 환경을 제공하지 않는 경우, 앱 바에서 상세 보기로 전환하는 대신 앱 바 단추에서 추가 정보의 켜기와 끄기를 전환할 수 있습니다. 다음 이미지에서 이에 대한 설명을 볼 수 있습니다.

재생 중 추가 정보를 표시하기 위한 조작

사례 2: 상세 항목 보기

탭할 경우 미디어를 즉시 재생하는 대신 사용자를 상세 항목 페이지로 안내하는 것이 좀 더 타당한 경우도 있습니다. 예를 들어, TV 프로그램의 여러 에피소드 중에 선택해야 하는 경우 미디어를 시작하기 전에 사용자에게 목록 옵션을 제공해야 합니다. 또한 미디어가 유료(Pay-Per-View)로만 제공되는 경우 사용자는 미디어를 시작하기 전에 먼저 요금을 지불해야 하므로, 지불 정보를 먼저 표시해야 할 것입니다.

다음 이미지는 TV 프로그램의 홍보 페이지에 있는 집계된 콘텐츠에서 특정 미디어를 선택하는 과정을 보여 줍니다. 사용자는 특정 에피소드에 대한 이미지를 탭하여 해당 에피소드에 대해 읽고 리뷰를 읽은 후, 다시 탭하여 에피소드 재생에 대한 옵션을 볼 수 있습니다.

추천 콘텐츠를 탐색하기 위한 조작

해당 에피소드의 세부 정보 페이지로 돌아가려면 위쪽 앱 바에서 뒤로 단추를 탭하거나 전체 보기 단추를 탭하여 다른 보기로 전환합니다.

구매 환경 예제

지금 재생 환경

미디어가 실제로 재생 중일 때, 사용자의 콘텐츠를 보여 주는 환경을 제공함으로써 앱을 차별화할 수 있습니다. 어떠한 방해 요소도 없이 완전히 몰입할 수 있도록 미디어 재생 환경을 디자인하세요. 사용자가 원하는 경우 탭하여 미디어에 미디어 컨트롤을 표시할 수 있습니다. 다음 이미지는 완전히 몰입할 수 있는 동영상 재생 환경을 보여 줍니다.

앱 방해 요소 없이 몰입할 수 있는 동영상 환경

재생 목록의 개념을 사용하는 음악 및 동영상 앱의 경우, 지금 재생 환경을 통해 사용자가 재생 목록을 관리하고 쉽게 탐색할 수 있습니다. 스크롤 가능한 플라이아웃 컨트롤 및 그 내부에 재생 목록을 표시하는 위쪽 앱 바 또는 캔버스에 재생 목록 단추를 배치하는 것이 좋습니다. 사용자는 항목을 선택하고 위나 아래로 이동하거나 목록에서 완전히 제거하는 방식으로 관리할 수 있습니다. 다음 그림은 지금 재생 목록을 보여 줍니다.

재생 목록 플라이아웃에서 음악 선택

또는, 지금 재생 화면에 항상 재생 목록을 표시하고자 하는 경우 사용자가 재생 목록을 손쉽게 탐색할 수 있도록 목록 보기 패턴과 세로 스크롤을 사용할 수 있습니다. 페이지가 두 방향으로 이동하여 사용자에게 혼란을 주지 않도록 페이지의 나머지 부분은 고정 너비여야 합니다. 기타 정보는 재생 목록 옆에 있는 고정된 너비 영역에 표시합니다.

다음과 같이 사용자가 교차 방향으로 밀기를 통해 항목을 선택하고 재생 목록을 관리하도록 할 수도 있습니다.

재생 목록 항목 관리의 예제

이전 에피소드와 다음 에피소드 또는 동영상 클립 간 탐색

사용자는 종종 여러 관련 클립 또는 에피소드를 연속해서 감상합니다. 이전다음 단추를 제공하면 사용자는 다음 클립 또는 에피소드로 빠르게 이동할 수 있습니다. 다음 이미지는 이전다음 단추가 있는 재생 환경을 보여 줍니다.

재생 환경의 다음 및 이전 컨트롤

이전 및 다음 조작이 더 자주 수행되는 음악 앱의 경우, 뒤에 나오는 명령 섹션의 설명과 같이 이러한 명령을 캔버스에 표시하는 것이 더 좋습니다.

명령

미디어 컨트롤

음악 및 동영상을 재생하는 미디어 앱에서 재생 컨트롤을 일관된 위치에 배치하면 사용자는 자신 있게 안정적으로 미디어를 조작할 수 있습니다. 명령에 대한 자세한 내용은 Windows 스토어 앱을 위한 명령 디자인을 참조하세요.

재생/일시 중지 단추와 전송 슬라이더는 일반적으로 미디어 재생에서 매우 중요한 컨트롤이므로 캔버스에 배치할 수 있으며 사용자가 화면을 탭하거나 살짝 밀면 즉시 표시되도록 할 수 있습니다. 재생/일시 중지는 탭할 때 발생하는 동작을 반영하는 전환 단추여야 합니다. 예를 들어, 음악이 재생 중일 때에는 단추에 "일시 중지"가 표시되어야 하고 그렇지 않을 때에는 "재생"이 표시되어야 합니다. 다음 이미지는 미디어 앱의 컨트롤을 보여 줍니다.

미디어 컨트롤의 예제

앱에 전송 슬라이더가 있는 경우 사용자는 슬라이더를 사용해 음악 또는 곡을 되감거나 앞으로 이동할 수 있으므로 되감기앞으로 단추는 기능 중복이 됩니다. 이러한 중복을 피하려면 전송 컨트롤과 되감기/앞으로 컨트롤을 함께 사용하지 마세요.

이전다음(곡 또는 에피소드) 등의 기타 미디어 컨트롤은 실제로 앱의 시나리오에 달려 있습니다. 예를 들어, 이전다음 컨트롤은 재생 중인 영화에서는 별 의미가 없지만, 음악 재생 목록이나 에피소드가 있는 TV 시리즈에서는 매우 유용합니다. 앱에서 이전다음 컨트롤을 사용하는 경우 재생/일시 중지 및 전송 슬라이더와 함께 배치하여, 사용자가 탭하거나 살짝 밀 때 사용 가능한 컨트롤이 모두 동시에 표시되도록 하세요.

특정 상황에서 의미가 없는 컨트롤은 표시하지 마세요. 예를 들어, 새 음악 재생 목록을 시작할 경우 재생이 시작되기 전에는 이전 단추가 필요하지 않습니다. 사용자는 재생 목록의 맨 앞에 있고 "이전" 트랙이 없기 때문입니다.

탭하거나 살짝 밀면 미디어 컨트롤이 나타납니다. 앱 바는 가장자리를 살짝 밀면 나타납니다. 사용자가 앱 바를 표시하기 위해 살짝 밀 때마다 캔버스의 미디어 전송 컨트롤도 표시하여, 앱 바 명령을 사용하는 동안 원하는 경우 미디어를 조작할 수 있도록 하세요.

UI 미디어 제어 외에도 다음과 같은 미디어 키보드 단추 또는 미디어 리모컨 단추로 앱을 제어할 수 있도록 함으로써 사용자에게 미디어 재생 환경에 대한 더 많은 제어 기능을 제공할 수 있습니다.

  • 재생
  • 일시 중지
  • 빨리 감기

볼륨 조절 슬라이더와 음소거 단추는 하드웨어 단추를 통해 사용할 수 있으므로 앱에서 중복되면 안 됩니다.

전체 화면 모드 간 전환, 캡션 선택, 메타데이터 등 미디어 재생에 크게 중요하지 않은 기타 명령은 앱 바에 둘 수 있습니다. 앱 바 사용에 대한 자세한 내용은 앱 바에 대한 지침 및 검사 목록을 참조하세요.

재생 목록 관리를 위해 "재생 목록에서 제거", "큐 지우기", "큐 저장", "큐에서 위로 이동", "큐에서 아래로 이동" 등의 단추도 앱 바에 두는 것을 고려해 보세요.

좁은 창 크기

사용자가 좁은 너비로 앱 크기를 조정할 때 미디어 컨트롤 조작이 동일해야 합니다.

  • 미디어 캔버스를 탭하여 미디어 재생 컨트롤을 표시합니다. 재생/일시 중지는 좁은 너비에서도 유지되어야 합니다.
  • 전송 슬라이더, 이전다음 같은 기타 컨트롤은 좁은 너비에서 삭제될 수 있습니다.

다음 그림은 좁은 미디어 앱의 재생/일시 중지 단추를 보여 줍니다.

좁은 너비로 크기가 조정된 미디어 앱 예제

백그라운드 및 포그라운드 재생

미디어 앱이 음악을 재생 중인데 사용자가 다른 앱으로 전환하는 경우 사용자가 백그라운드에서 계속 음악을 듣도록 할 수 있습니다. 백그라운드에서도 잘 작동하는 미디어 시나리오의 좋은 예에는 음악, 스트리밍 라디오, 팟캐스트 및 뮤직 동영상이 있습니다. TV 프로그램과 영화 등의 비주얼 미디어를 재생 중인 동안 사용자가 다른 앱으로 전환하면 앱을 자동으로 일시 중지해야 합니다. 그래야만 사용자가 앱으로 다시 전환할 때 내용을 놓치지 않고 중단된 부분부터 시작할 수 있습니다.

백그라운드 미디어 재생에 대한 자세한 내용은 MediaControl.Soundlevel | soundLevel propertyWindows 스토어 앱에서 오디오 재생 백서를 참조하세요.

시스템 전송 컨트롤

백그라운드에서 미디어를 재생하는 앱의 경우 사용자는 시스템 전송 컨트롤을 통해 앱이 재생하고 있는 것을 볼 수 있으며 앱으로 다시 전환하지 않고도 재생을 제어할 수 있습니다. 사용자는 장치의 하드웨어 볼륨 단추를 눌러, 앱의 외부에서 빠르고 유연하게 미디어 컨트롤과 메타데이터에 액세스할 수 있습니다. 무엇을 재생 중인지 사용자가 알 수 있도록 트랙에 대한 정보와 아티스트 이름을 제공하세요. 앱에 콘텐츠를 로드 중이거나 다운로드 중인 경우 사용자가 미디어 재생의 상태를 알 수 있도록 사용자에게 상태를 제공할 수 있습니다. 다음 이미지는 시스템 전송 컨트롤을 보여 줍니다.

시스템 전송 컨트롤 예제

미디어 재생 환경으로 돌아가기

사용자가 앱을 사용하여 곡을 재생 목록에 더 추가하거나 새 음악을 구매하려고 탐색 중인 경우, 지금 재생 뮤직/동영상으로 이동할 수 있는 일관된 장소를 제공하는 것이 중요합니다. 이렇게 하면 사용자는 지금 재생 환경으로 빠르게 돌아올 수 있습니다.

다음 이미지는 사용자가 다른 미디어 관련 작업을 하는 동안 얼마나 쉽게 탐색 모음에 액세스할 수 있는지를 보여 줍니다. 사용자는 원할 때 앱의 지금 재생 섹션으로 빠르게 이동할 수 있습니다.

현재 재생 중인 콘텐츠가 UI에 나타나며 지금 재생으로 돌아가기 위해 이를 선택할 수 있음

평가 및 검토

미디어 콘텐츠의 평가 및 검토는 대부분의 미디어 앱에서 중요한 시나리오입니다. 사용자가 미디어 콘텐츠를 신속하게 검토할 수 있도록, 리뷰를 표시하는 앱의 섹션 위에 별표를 두는 것을 고려해 보세요. 사용자가 리뷰를 쓰도록 하려면 터치 키보드가 나타날 공간을 마련하기 위해 위쪽에 텍스트 상자를 표시할 수 있습니다. Enter를 누르면 리뷰가 제출됩니다. 더 긴 리뷰를 작성하기 위해 필요한 경우 텍스트 상자가 커질 수 있습니다.

다음에 보이는 것처럼 사용자는 헤더를 탭하면 더 많은 리뷰를 볼 수 있습니다.

콘텐츠 평가를 위한 조작

미디어 앱의 입력 체계

콘텐츠 구조와 리듬의 감각을 만들려면 글자 램프 지침을 따르세요. 미디어 앱의 입력 체계를 Windows 8의 입력 체계와 맞추려면 맑은 고딕 11pt를 콘텐츠의 기본 크기로 사용하고, 맑은 고딕 20pt를 제목과 부제목에 사용합니다. 더 작은 크기가 필요하면 짧은 캡션과 제작진 정보에 맑은 고딕 9pt를 사용합니다. 9pt보다 작은 크기는 사용하지 마세요.

헤드라인과 제목에서 맑은 고딕 42pt의 사용을 최소화하세요. "Music" 또는 "Movies"와 같은 제목에 42pt를 사용하는 것을 피하세요. 가장 큰 글자 크기는 동영상, 앨범 또는 음악 트랙의 이름을 위해 남겨두세요. 가장 큰 글자 크기를 사용할 때에는 커닝 및 입력 체계의 올바른 구두점을 적용하는 것이 중요합니다. 곧은 따옴표와 하이픈 대신 둥근 따옴표, 아포스트로피 및 대시를 사용하세요. 다음은 구두점 사용의 올바른 예와 잘못된 예를 보여 줍니다.

텍스트 서식 지정의 예

Windows 8에서는 첫 글자 대문자를 사용해야 하지만, 자신의 콘텐츠에 모두 대문자, 모두 소문자 또는 제목 대문자가 더 적절하다고 판단할 수도 있습니다. 다수의 지역화된 언어에는 이러한 입력 체계 처리 방식이 적용되지 않습니다. 또한 앱의 입력 체계에 시각적인 흥미를 추가하는 것만이 아니라 대/소문자 스타일을 일관되게 사용해야 하며 내용의 서로 다른 부분을 차별화해야 합니다.

이 지침과 다른 방식을 사용하려는 경우에도 네 가지가 넘는 유형의 크기와 두께를 사용하지는 마세요. 동일한 글자 크기로 내용을 다르게 표시하려면 색과 글꼴 두께를 사용하세요.

크기, 색, 두께 등 글꼴 모범 사례에 대한 자세한 내용은 글꼴에 대한 지침을 참조하세요.

계약

공유

공유 계약은 두 앱 간에 콘텐츠를 공유하는 친숙하고 자연스러운 방법을 사용자에게 제공합니다. 자신의 앱을 다른 앱과 차별화하는, 미디어 앱의 콘텐츠 공유를 위한 많은 시나리오가 있습니다. 사용자가 앱의 콘텐츠를 공유할 수 있게 하려는 경우 앱이 공유 소스여야 합니다. 사용자가 다른 앱의 데이터를 사용할 수 있게 하려는 경우 앱이 공유 대상이어야 합니다. 앱의 특정 요구에 따라 둘 다 지원할 수도 있습니다.

엔터테인먼트 앱에서 공유

미디어 콘텐츠 공유는 엔터테인먼트 앱의 주요 시나리오입니다. 공유 계약을 사용하여 사용자가 관심이 있는 동영상 또는 듣고 있는 곡을 해당 형식이 지원되는 모든 앱에 공유할 수 있게 합니다. 이렇게 하면 소셜 네트워크에서 재미있는 동영상을 공유하거나 추천 영화나 곡을 친구에게 메일로 보내는 등 많은 흥미진진한 시나리오가 가능합니다. 또한 카메라 필터 앱, 자동 튜닝 앱 등 Windows의 다른 앱을 통해 미디어 앱의 음악, 사진 또는 동영상을 흥미로운 방식으로 변환할 수 있게 합니다.

동영상 콘텐츠 공유

엔터테인먼트 앱에 공유

친구 또는 가족과 공유하거나 공개적으로 공유하기 위해 사진, 음악 또는 동영상을 저장하는 기능을 앱이 지원하는 경우 대상 공유 계약을 등록해야 합니다. 이렇게 하면 사용자가 쉽게 앱을 활용하여 다른 앱의 미디어를 구성하고 보다 광범위한 사용자에게 도달할 수 있습니다.

사진에 특수 필터 적용, 음악 녹음 자동 튜닝, 파노라마 작성 등 미디어 앱이 다른 앱의 콘텐츠를 흥미로운 방식으로 변환할 수 있는 경우 대상 공유 계약에 등록해야 합니다. 이렇게 하면 사용자가 쉽게 앱을 활용하여 다른 앱의 콘텐츠로 앱의 가치를 높일 수 있습니다.

검색

검색은 미디어 앱의 중요한 시나리오이며, 미디어 앱에서 여러 범주의 검색 결과를 표시하는 경우가 많습니다. 검색 참 메뉴는 웹을 포함하여 모든 사용자 검색 요구에 대한 중앙 집중식 환경을 제공하는 반면, 앱에서 바로 검색 상자는 사용자에게 완전한 사용자 지정 검색 환경을 제공하는 데 도움이 됩니다.

검색에 대한 자세한 내용은 검색에 대한 지침을 참조하세요. 다음 이미지는 일반적인 검색 환경을 보여 줍니다.

검색 환경 예제

앱에 필터링과 검색 범위를 포함하는 더 많은 고급 검색 시나리오가 있는 경우 이들을 앱 캔버스에서 제공하세요.

또한 쿼리 제안을 사용하면 사용자의 검색 쿼리를 자동 완성하고, 전체 문자열을 입력하지 않고도 더 빨리 검색하도록 지원할 수 있습니다.

설정

사용자 계정 정보, 구독 정보, 개인 정보 보호 설정, 알림 설정 등 미디어 앱에 해당되는 모든 설정은 설정 참 메뉴에 포함해야 합니다. 이곳은 사용자가 설정을 조정할 수 있는 단일 장소입니다. 앱 UI가 서로 다른 설정으로 인해 혼란스러워지는 것을 막아주기도 합니다. 다음 이미지는 미디어 앱의 설정을 보여 줍니다.

설정 UI 예제

장치

장치 계약은 미디어 앱에 추가할 수 있는 멋진 옵션을 제공합니다. 사용자가 TV에서 영화나 동영상을 보고 오디오 장치에서 음악을 재생하길 원할 수 있습니다. 장치 계약과 통합하면 사용자는 탭하는 것만으로 이를 구현할 수 있습니다. 다음 이미지는 콘텐츠가 장치에서 재생되는 것을 보여 줍니다.

장치 환경 예제

연결 및 유지

타일 및 알림

미디어 앱의 라이브 타일에 대해서는 흥미진진한 많은 시나리오가 있습니다. 사용자에게 추천하는 최신 영화를 보여 주는 영화 앱, DVD로 이용할 수 있는 최신 앱, 빠른 속도로 인기를 얻는 동영상에 대한 타일 등, 이 모든 것은 사용자가 앱으로 다시 돌아오도록 하는 요소입니다. 음악 앱에서도 마찬가지로, 좋아하는 아티스트가 발매한 새 앨범, 지금 재생 중인 음악 또는 사용자의 기호를 기반으로 추천한 아티스트 등을 타일에서 보여 주면 사용자가 우연히 새로운 콘텐츠를 발견할 때 계속해서 앱에 대해 관심을 갖도록 할 수 있습니다. 다음 이미지는 정보를 표시하는 라이브 타일을 보여 줍니다.

미디어 앱에 대한 타일 예제

시작 메뉴에 다양한 영화 장르, TV 채널, 아티스트 및 재생 목록을 고정할 수 있는 기능을 제공하면 사용자는 가장 관심이 있는 콘텐츠에 대한 맞춤형 알림을 볼 수 있으며 원하는 콘텐츠에 신속하게 액세스할 수 있습니다. 이는 앱에 대한 사용자의 관심을 끄는 또 다른 방법입니다. 다음 이미지는 미디어 앱의 고정된 타일을 보여 줍니다.

미디어 및 엔터테인먼트 앱의 고정된 타일 예제

앱이 실행되고 있지 않을 때에도 알림 메시지를 통해 뉴스 속보를 볼 수 있도록 사용자의 옵트인(opt in)을 허용하면 사용자에게 계속해서 최신 뉴스를 제공함으로써 앱에 대한 관심을 끌 수 있습니다. 그러나 알림 메시지는 설정 참 메뉴를 통해 액세스할 수 있는 앱 설정에서만 사용하도록 설정할 수 있는 옵션이라는 점을 기억해야 합니다. 일부 사용자에게는 이 기능이 불편할 수 있기 때문입니다.

로밍

로밍은 설정 및 기본 설정을 장치 간에 이동하는 것입니다. 대부분의 사용자는 Windows PC를 두 대 이상 가지고 있습니다. 모든 Windows 8 PC에서 일관된 사용자 환경을 제공하는 앱을 만드는 것이 사용자가 기대하는 환경을 제공하는 방법입니다. 가능하면 앱 설정, 저장된 미디어 콘텐츠, 즐겨찾기, "최근에 본" 기록, 특정 미디어를 볼 때 중단한 곳 등을 로밍하세요. 로밍에 대한 추가 지침은 앱 설정에 대한 지침, 앱 데이터 로밍 지침앱 데이터 관리에서 확인할 수 있습니다.

방향 및 창 크기

세로 및 가로

Windows 8.1용 미디어 앱을 디자인하는 경우 모든 장치 크기, 화면 해상도 및 방향을 고려하세요. Windows 8.1에서는 더 큰 장치에 대해 앱에 더 많은 콘텐츠를 포함하여, 세로 레이아웃 및 고해상도 화면 모두에 대해 디자인의 크기를 손쉽게 조정할 수 있습니다. 가로 보기와 세로 보기로 앱을 보여 주세요. 영화 보기 등 앱의 몇몇 보기는 가로로 고정하는 것이 나을 수 있습니다.

창 크기 조정

Windows 8.1에서는 사용자가 화면에 여러 앱을 나란히 배치하여 멀티태스킹할 수 있습니다. 좁은 너비에서 제대로 작동하는 앱을 디자인하면 앱의 화면 표시 시간과 사용자 참여 기간이 증가합니다. 사용자가 앱을 사용하는 동안 멀티태스킹할 수 있으므로 다른 일을 하는 동안에도 화면에 앱을 더 오래 열어두게 됩니다.

사용자가 미디어 앱과 멀티태스킹하려는 강력한 시나리오가 있습니다. 사용자는 웹을 검색하는 동시에 라이브 스트리밍된 스포츠 경기를 시청하거나, 뉴스를 읽는 동시에 Spotify 재생 목록을 청취할 수 있습니다. 이러한 일반적인 시나리오를 지원하도록 모든 크기의 창에 맞게 핵심 재생 환경을 조정합니다.

다음 그림에서는 좁은 너비에 맞게 크기가 조정된 엔터테인먼트 앱 예제를 보여 줍니다. 각 페이지의 유용한 맞춤형 보기가 있으므로 사용자가 응용 프로그램의 크기를 조정할 때 컨텍스트를 유지할 수 있습니다.

좁은 미디어 및 엔터테인먼트 앱 예제

사용자가 최소값까지 원하는 너비로 창 크기를 조정할 수 있으므로 가로 세로 비율이 크게 달라질 수 있습니다. 동영상 및 기타 미디어 콘텐츠를 적절하게 표시합니다. 창의 가로 세로 비율이 미디어 콘텐츠와 일치하지 않는 경우 콘텐츠가 확대되지 않도록 레터박스 안에 미디어 콘텐츠를 표시합니다.

시작 화면

미디어 앱은 종종 웹에서 새로운 콘텐츠를 다운로드해야 합니다. 앱의 속도와 응답성을 높이려면, 각 범주의 모든 이미지가 다운로드된 후에 방문 페이지가 표시되도록 하지 마세요. 사용자가 기다리지 못할 수 있습니다. 콘텐츠 제목이 다운로드된 후 앱 방문 페이지를 보여 주고 이미지와 기타 데이터를 비동기로 로드하세요. 다음 이미지는 시작 화면의 예를 보여 줍니다.

시작 화면 예제

음악 및 동영상 모범 사례

음악 앱

권장 사항설명

앱을 백그라운드 미디어로 등록

앱이 음악 재생 목록을 재생할 수 있는 경우 사용자가 다른 작업으로 전환한 후에도 앱이 백그라운드에서 계속 실행되도록 설정할 수 있습니다. 자세한 내용은 백그라운드에서 오디오를 재생하는 방법을 참조하세요.

모든 하드웨어 미디어 단추에 응답

사용자가 원격 컨트롤러 또는 미디어 키보드 단추에서 앱을 제어할 수 있도록 재생, 일시 중지, 재생/일시 중지, 다음 트랙, 이전 트랙 및 기타 미디어 단추에 대한 이벤트를 등록하고 이에 응답합니다. 자세한 내용은 미디어 제어에 대한 키를 구성하는 방법을 참조하세요.

시스템 전송 컨트롤에서 "지금 재생" 정보 제공

백그라운드에서 재생될 수 있는 앱은 사용자가 현재 앱에 있지 않더라도 현재 재생 중인 곡에 대한 정보를 볼 수 있도록 시스템 전송 컨트롤에 트랙 이름, 음악가 이름 및 앨범 이미지를 제공해야 합니다. 사용자가 트랙을 변경할 때 앱에서 지연이 발생하는 경우 앱이 응답하지 않는 것처럼 느껴지지 않도록 트랙 이름 필드를 "다음 트랙 로드 중"으로 채웁니다. 자세한 내용은 시스템 전송 컨트롤 개발자 가이드를 참조하세요.

 

동영상 앱

권장 사항설명

앱에 맞는 스트림 유형 선택

대부분의 경우는 앱을 포그라운드 전용 미디어로 등록합니다.

사용자가 동영상을 시작할 때 백그라운드에서 음악이 재생 중이면 사용자가 동영상 소리를 들을 수 있도록 스트림이 자동으로 백그라운드 음악을 일시 중지시킵니다. 사용자가 앱에서 나와 다른 작업으로 전환하는 경우 사용자가 동영상의 일부를 놓치지 않고 그만 둔 지점을 나중에 선택할 수 있도록 동영상을 자동으로 일시 중지합니다. 자세한 내용은 Windows 스토어 앱에서 오디오 재생을 참조하세요.

사용자가 뮤직 비디오를 재생하거나 동영상 재생 목록을 만드는 경우 앱을 백그라운드 미디어로 등록합니다.

사용자가 음악 플레이어 등의 앱을 다루거나 동영상을 대기하는 경우 앱에서 나와 다른 작업으로 전환한 후에도 재생 소리를 계속 들을 수 있기를 기대합니다. 자세한 내용은 백그라운드에서 오디오를 재생하는 방법을 참조하세요.

모든 하드웨어 미디어 단추에 응답

사용자가 원격 컨트롤러 또는 미디어 키보드 단추에서 앱을 제어할 수 있도록 재생, 일시 중지, 재생/일시 중지, 다음 트랙, 이전 트랙 및 기타 미디어 단추에 대한 이벤트를 등록하고 이에 응답합니다. 자세한 내용은 미디어 제어에 대한 키를 구성하는 방법을 참조하세요.

 

관련 항목

Windows 스토어 앱 만나보기
Windows 스토어 앱용 UX 지침
미디어 재생 전체 프로세스(HTML)
미디어 재생 전체 프로세스(XAML)

 

 

표시:
© 2014 Microsoft