미리 보기에 대한 지침

Applies to Windows and Windows Phone

아래 지침에서는 사용자가 Windows 스토어 앱에서 탐색할 때 파일을 미리 볼 수 있도록 미리 보기 이미지를 사용하는 방법에 대해 설명합니다.

내 앱에 미리 보기를 포함해야 하나요?

앱에서 파일 찾아보기를 허용하는 경우 미리 보기 이미지를 표시하여 해당 파일을 빠르게 미리 볼 수 있도록 합니다.

다음과 같은 경우에 미리 보기를 사용합니다.

  • 많은 항목(여러 개의 파일과 폴더)에 대한 미리 보기 표시. 예를 들어 사진 갤러리 앱에서는 사진 파일 탐색 시 미리 보기를 사용하여 각 사진의 작은 보기를 표시해야 합니다.

  • 개별 항목(특정 파일)에 대한 미리 보기 표시. 예를 들어 미리 보기에서 탐색한 파일을 열지 여부를 결정하기 전에 더 큰 미리 보기와 추가 파일 정보를 보고자 할 수 있습니다.

권장 사항 및 금지 사항

  • 메서드를 호출하여 미리 보기를 검색할 때 미리 보기 모드(picturesView, videosView, documentsView, musicView, listView 또는 singleItem)를 지정합니다. 그러면 미리 보기 이미지는 사용자가 보려는 파일 형식을 표시하는 데 최적화됩니다.
  • 파일 형식에 관계없이 단일 항목에 대한 미리 보기를 검색하려면 singleItem 모드를 사용합니다. 다른 미리 보기 모드(picturesView, videosView, documentsView, musicViewlistView)는 여러 파일의 미리 보기를 표시하는 데 사용됩니다.
  • 미리 보기가 로드되는 동안 미리 보기 대신 일반적인 자리 표시자 이미지를 표시합니다. 이런 방식으로 자리 표시자를 사용하면 미리 보기가 로드되기 전에도 사용자가 항목을 조작할 수 있으므로 앱의 응답성을 더욱 높일 수 있습니다.

    자리 표시자 이미지는 다음 조건을 충족해야 합니다.

    • 개체 틀이 대신하는 항목의 종류에 맞는 것이어야 합니다. 예를 들어, 폴더, 사진, 비디오 등은 서로 다른 아이콘, 텍스트 및/또는 색을 사용하는 자체적인 개체 틀을 갖고 있어야 합니다.
    • 나타내는 자리 표시자 이미지와 크기 및 가로 세로 비율이 같아야 합니다.
    • 미리 보기 이미지가 로드될 때까지 표시되어야 합니다. 미리 보기를 검색할 수 없는 경우 자리 표시자 이미지를 대신 표시합니다.
  • 자리 표시자 이미지를 텍스트 레이블과 함께 사용하여 폴더 및 파일 그룹을 나타냅니다. 그러면 폴더, 파일 그룹 등의 시스템 구조가 개별 파일과 구분됩니다. 이러한 항목 유형을 시각적으로 구분하면 앱에서 사용자 탐색이 더욱 쉬워집니다. 파일 그룹을 형성하는 데 사용된 조건이나 폴더 이름인 자리 표시자의 텍스트 레이블을 포함해야 합니다.
  • 항목(파일, 폴더 또는 파일 그룹)의 미리 보기를 검색할 수 없는 경우 자리 표시자 이미지를 표시합니다.
  • 문서 및 음악 파일에 대한 미리 보기를 제공할 때 미리 보기 이미지와 함께 파일 정보를 표시합니다. 그러면 미리 보기 이미지만으로는 쉽게 알 수 없는 파일에 대한 주요 정보를 파악할 수 있습니다. 예를 들어 앨범 이미지를 보여 주는 미리 보기와 함께 음악 파일의 아티스트 이름을 표시할 수 있습니다.
  • 사진 및 동영상 파일의 경우 미리 보기와 함께 추가 파일 정보를 표시하지 마세요. 대부분의 경우 사진과 동영상을 탐색하는 사용자에게는 미리 보기 이미지만으로 충분합니다.

추가 사용법 지침

권장 미리 보기 모드 및 해당 기능

미리 보기 표시미리 보기 모드검색된 미리 보기 이미지의 특성
사진
동영상
picturesView
videosView
크기: 보통, 190 이상(이미지 크기가 190 x 130인 경우)
가로 세로 비율: 약 7의 균일하고 넓은 가로 세로 비율(크기가 190인 경우 190 x 130)
미리 보기를 위해 잘림
균일한 가로 세로 비율 때문에 그리드에 이미지를 맞추는 데 유용합니다.
문서
음악
documentsView
musicView
listView
크기: 작음(최소 40 x 40 픽셀 선호)
가로 세로 비율: 균일(정방형 가로 세로 비율)
정방형 가로 세로 비율 때문에 앨범 아트 미리 보기에 좋습니다.
문서는 파일 선택기 창에서 볼 때와 똑같이 보입니다(동일한 아이콘 사용).
모든 단일 항목
(파일 형식에 관계없음)
singleItem
크기: 큼(가장 긴 쪽이 최소 256픽셀)
가로 세로 비율: 가변적(파일의 원래 가로 세로 비율 사용)

 

  서로 다른 모드에서 미리 보기 이미지의 특징은 향후에 더욱 구체적이 될 수도 있습니다. 이를 설명하기 위해 미리 보기를 표시하려는 파일 종류를 가장 근접하게 설명하는 미리 보기 모드를 지정하는 것이 좋습니다. 예를 들어 동영상 파일을 표시하려는 경우 videosView 미리 보기 모드를 사용해야 합니다(단, 하나의 동영상 파일을 표시하는 경우에는 singleItem 모드 사용).

권장 미리 보기 모드 사용 이유

다음은 검색된 미리 보기 이미지가 파일 형식과 미리 보기 모드에 따라 어떻게 달라지는지를 보여 주는 예제입니다.

항목 유형

검색 시 사용:

검색 시 사용:

검색 시 사용:

사진

사진 미리 보기 이미지.

미리 보기가 정사각형 가로 세로 비율에 맞게 잘립니다.

잘린 사진 미리 보기 이미지.

미리 보기 이미지는 파일의 원래 가로 세로 비율을 사용합니다.

사진 미리 보기 이미지.

동영상

미리 보기에 사진과 구별되는 아이콘이 있습니다.

비디오 도구 영역이 있는 비디오 미리 보기 이미지.

미리 보기가 정사각형 가로 세로 비율에 맞게 잘립니다.

잘린 비디오 미리 보기 이미지.

미리 보기 이미지는 파일의 원래 가로 세로 비율을 사용합니다.

비디오 미리 보기 이미지.

음악

미리 보기는 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 파일과 연관된 앱에 따라 결정됩니다. 연관된 앱이 Windows 스토어 앱인 경우에는 앱의 타일 배경색이 사용됩니다.

배경에 연관된 앱 색이 있는 음악 파일의 아이콘 화면 캡처

파일에 앨범 이미지가 있는 경우에는 미리 보기도 앨범 이미지입니다. 그렇지 않으면 미리 보기는 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 파일과 연관된 앱에 따라 결정됩니다. 연관된 앱이 Windows 스토어 앱인 경우에는 앱의 타일 배경색이 사용됩니다.

앨범 아트 이미지.

파일에 앨범 이미지가 있는 경우에는 미리 보기도 앨범 이미지이며 파일의 원래 가로 세로 비율을 사용합니다. 그렇지 않으면 미리 보기는 아이콘입니다.

앨범 아트 이미지.

문서

미리 보기는 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 파일과 연관된 앱에 따라 결정됩니다. 연관된 앱이 Windows 스토어 앱인 경우에는 앱의 타일 배경색이 사용됩니다.

배경에 연관된 앱 색이 있는 문서 아이콘의 화면 캡처

미리 보기는 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 파일과 연관된 앱에 따라 결정됩니다. 연관된 앱이 Windows 스토어 앱인 경우에는 앱의 타일 배경색이 사용됩니다.

배경에 연관된 앱 색이 있는 문서 아이콘의 화면 캡처가 검색됩니다.

문서 미리 보기(있는 경우).

문서 미리 보기의 화면 캡처.

그렇지 않으면 미리 보기가 아이콘입니다.

문서 아이콘의 화면 캡처

폴더

폴더에 사진 파일이 있으면 사진 미리 보기가 사용됩니다.

사진 미리 보기 이미지.

폴더에 사진이 없는 경우에는 미리 보기가 검색되지 않습니다.

미리 보기 이미지가 검색되지 않습니다.

미리 보기는 폴더를 나타내는 아이콘입니다.

폴더 문자 이미지

파일 그룹

그룹의 파일들 중에 사진 파일이 있으면 사진 미리 보기가 사용됩니다.

사진 미리 보기 이미지.

파일 그룹에 사진이 없는 경우에는 미리 보기가 검색되지 않습니다.

그룹의 파일들 중에 앨범 아트가 포함된 파일이 있으면 미리 보기는 앨범 아트입니다.

앨범 아트 이미지.

파일 그룹에 앨범 이미지가 없는 경우에는 미리 보기가 검색되지 않습니다.

그룹의 파일들 중에 앨범 아트가 포함된 파일이 있으면 미리 보기는 앨범 아트이며 파일의 원래 가로 세로 비율을 사용합니다.

앨범 아트 이미지.

그렇지 않으면 미리 보기는 파일 그룹을 나타내는 아이콘입니다.

파일 그룹 아이콘 이미지.

 

관련 항목

ThumbnailMode enumeration
StorageItemThumbnail class
StorageFile.GetThumbnailAsync

 

 

표시:
© 2014 Microsoft