이 지침에서는 썸네일 이미지를 사용하여 사용자가 WinUI 앱에서 검색할 때 파일을 미리 보는 데 도움이 되는 방법을 설명합니다.
중요 API
내 앱에 미리 보기가 포함되어야 하나요?
앱에서 사용자가 파일을 찾아볼 수 있는 경우 썸네일 이미지를 표시하여 사용자가 해당 파일을 빠르게 미리 볼 수 있도록 할 수 있습니다.
다음과 같은 경우 미리 보기를 사용합니다.
갤러리 컬렉션의 여러 항목(예: 파일 및 폴더)에 대한 미리 보기를 표시합니다. 예를 들어 사진 갤러리는 썸네일을 사용하여 사용자가 사진 파일을 탐색할 때 각 사진을 작은 보기로 표시해야 합니다.
목록의 개별 항목에 대한 미리 보기 표시(예: 특정 파일). 예를 들어 사용자는 파일을 열지 여부를 결정하기 전에 더 나은 미리 보기를 위해 더 큰 썸네일을 포함하여 파일에 대한 자세한 정보를 볼 수 있습니다.
권장 사항 및 금지 사항
썸네일을 검색할 때 썸네일 모드 (PicturesView, VideosView, DocumentsView, MusicView, ListView 또는 SingleItem)를 지정합니다. 이렇게 하면 썸네일 이미지가 사용자가 보려는 파일 형식을 표시하도록 최적화됩니다.
- SingleItem 모드를 사용하여 파일 형식에 관계없이 단일 항목에 대한 썸네일을 검색합니다. 다른 미리 보기 모드는 여러 파일의 미리 보기를 표시하기 위한 것입니다.
썸네일이 로드되는 동안 썸네일 대신 일반 자리 표시자 이미지를 표시합니다. 사용자가 썸네일이 로드되기 전 미리 보기와 상호 작용할 수 있으므로, 플레이스홀더를 사용하면 앱의 응답성이 더 높아 보입니다.
자리 표시자 이미지는 다음과 여야 합니다.
- 대체하려는 항목의 종류에 따라 다릅니다. 예를 들어 폴더, 그림 및 비디오에는 모두 고유한 특수 자리 표시자가 있어야 합니다.
- 썸네일 이미지를 대신하여 동일한 크기와 가로 세로 비율을 가집니다.
- 썸네일 이미지가 로드될 때까지 표시됩니다.
텍스트 레이블이 있는 자리 표시자 이미지를 사용하여 개별 파일과 구분하기 위해 폴더 및 파일 그룹을 나타냅니다.
썸네일을 검색할 수 없는 경우 자리 표시자 이미지를 표시합니다.
문서 및 음악 파일에 대한 미리 보기를 제공할 때 추가 파일 정보를 표시합니다. 그러면 사용자는 미리 보기 이미지만으로는 쉽게 사용할 수 없는 파일에 대한 주요 정보를 식별할 수 있습니다. 예를 들어 음악 파일의 경우 앨범 아트의 썸네일과 함께 아티스트의 이름을 표시할 수 있습니다.
사진 및 비디오 파일에 대한 추가 파일 정보를 표시하지 마세요. 대부분의 경우 썸네일 이미지는 사진과 비디오를 탐색하는 사용자에게 충분합니다.
추가 사용 지침
권장되는 미리 보기 모드 및 해당 기능:
| 에 대한 미리 보기 표시 | 썸네일 모드 | 검색된 썸네일 이미지의 기능 |
|---|---|---|
| Pictures 동영상 |
PicturesView 비디오 보기 |
크기: 보통, 바람직하게는 190 이상(이미지 크기가 190x130인 경우) 가로 세로 비율: 약 .7의 균일하고 넓은 가로 세로 비율(크기가 190인 경우 190x130) 미리 보기용으로 잘렸습니다. 균일한 가로 세로 비율로 인해 그리드에서 이미지를 정렬하는 데 적합합니다. |
| 문서 음악 |
문서보기 MusicView ListView |
크기: 작음, 바람직하게는 최소 40 x 40픽셀 가로 세로 비율: 정사각형이며 균일한 가로 세로 비율 정사각형 가로 세로 비율 때문에 앨범 아트를 미리 보는 데 적합합니다. 문서는 파일 선택기 창에서 보는 것과 같습니다(동일한 아이콘 사용). |
| 모든 단일 항목(파일 형식에 관계 없이) | 단일항목 |
크기: 작음, 바람직하게는 최소 40 x 40픽셀 가로 세로 비율: 정사각형이며 균일한 가로 세로 비율 정사각형 가로 세로 비율 때문에 앨범 아트를 미리 보는 데 적합합니다. 문서는 파일 선택기 창에서 보는 것과 같습니다(동일한 아이콘 사용). |
파일 형식 및 축소판 그림 모드에 따라 검색된 썸네일 이미지가 어떻게 다른지 보여 주는 예제는 다음과 같습니다.
| 항목 유형 | 다음을 사용하여 수신할 때:
|
다음을 사용하여 조회하는 경우:
|
다음 방법을 사용하여 검색할 때:
|
|---|---|---|---|
| 그림 | 썸네일 이미지는 약 .7의 균일하고 넓은 가로 세로 비율을 사용합니다(기본 크기가 190인 경우 190 x 130). |
썸네일은 정사각형 가로 세로 비율로 잘립니다. |
썸네일 이미지는 파일의 원래 가로 세로 비율을 사용합니다. |
| 비디오 | 축소판 그림에는 그림과 구분되는 아이콘이 있습니다. |
썸네일은 정사각형 가로 세로 비율로 잘립니다. |
썸네일 이미지는 파일의 원래 가로 세로 비율을 사용합니다. |
| 음악 | 썸네일은 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 앱의 타일 배경색에 따라 결정됩니다. |
파일에 앨범 아트가 있는 경우 썸네일은 앨범 아트입니다. 그렇지 않으면 썸네일은 적절한 크기의 배경에 있는 아이콘입니다. |
파일에 앨범 아트가 있는 경우 미리 보기는 파일의 원래 가로 세로 비율을 가진 앨범 아트입니다. 그렇지 않으면 축소판 그림이 아이콘입니다. |
| 문서 | 썸네일은 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 앱의 타일 배경색에 따라 결정됩니다. |
썸네일은 적절한 크기의 배경에 있는 아이콘입니다. 배경색은 앱의 타일 배경색에 따라 결정됩니다. |
문서 축소판 그림(있는 경우)입니다. 그렇지 않으면 축소판 그림이 아이콘입니다. |
| Folder | 폴더에 그림 파일이 있는 경우 그림 썸네일이 사용됩니다. 그렇지 않으면 미리 보기가 검색되지 않습니다. |
썸네일 이미지가 검색되지 않습니다. | 썸네일은 폴더 아이콘입니다. |
| 파일 그룹 | 폴더에 그림 파일이 있는 경우 그림 썸네일이 사용됩니다. 그렇지 않으면 미리 보기가 검색되지 않습니다. |
그룹의 파일 중 앨범 아트가 있는 파일이 있는 경우 미리 보기는 앨범 아트입니다. 그렇지 않으면 미리 보기가 검색되지 않습니다. |
그룹의 파일 중 앨범 아트가 있는 파일이 있는 경우 미리 보기는 앨범 아트이며 파일의 원래 가로 세로 비율을 사용합니다. 그렇지 않으면 썸네일은 파일 그룹을 나타내는 아이콘입니다. |
관련 토픽
Windows developer