로컬 콘텐츠용 뷰어 앱 만들기

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

로컬 콘텐츠용 뷰어 앱 만들기

  • Comments 0

콘텐츠를 더욱 돋보이게 하고 사용자가 보다 편리하게 작업을 수행할 수 있는 깔끔한 보기를 만드는 것도 Metro 스타일 디자인에 있어 중요한 일부분입니다. 이번에는 그중에서도 사용자의 로컬 파일 시스템의 파일과 폴더에 있는 콘텐츠로 아름다운 갤러리를 만드는 방법을 살펴보겠습니다. 여러 갤러리 앱의 경우 사용자가 사진, 동영상, 음악, 문서 등의 콘텐츠를 탐색하고 소비하도록 로컬 콘텐츠를 보여주는 경험을 제공하는 것이 반드시 필요합니다. Windows 8은 이러한 요구 사항을 단순하고 효율적이며 사용자 지정이 가능한 방식으로 해결하는 도구를 제공합니다.

PhotoJournal 앱의 예를 통해 그 사례를 살펴보도록 하겠습니다. 이 앱은 사용자가 타임라인 보기를 사용해 사진과 동영상을 보고 관리할 수 있는 연결된 사진 저널입니다. 다음 그림은 이 앱의 방문 페이지를 보여 줍니다. 이 앱이 파일 시스템에 생성하는 보기의 전형적인 예를 타임라인 보기라고 하는데 최근에 앱에 게시되고 로컬 데이터 폴더에 저장된 사진을 표시해 줍니다. 또한 사용자가 특정 사진을 검색할 수 있는 검색 결과 보기도 있습니다. 이 글에서는 이 앱에서 이러한 보기가 구성되는 다음 두 단계를 살펴보겠습니다.

  1. 현재 컨텍스트에 따라 관련 데이터 가져오기(예: 검색 참을 사용한 사용자 검색 쿼리)
  2. 기본 제공 StorageDataSource 컨트롤을 사용하여 이 데이터를 사용자가 쉽게 소비할 수 있도록 콘텐츠에 맞게 미리 정의된 서식으로 바인딩

이미지 갤러리 보기를 통해 사용자가 사진 및 댓글을 공유할 수 있는 PhotoJournal 앱
그림 1: PhotoJournal 앱 

데이터 가져오기

적절한 옵션으로 파일 쿼리 작성

보기를 만드는 첫 단계는 데이터 원본을 준비하는 것입니다. 파일 시스템에서 보기를 만들려면 사용자가 원하는 파일을 반환하는 파일 쿼리를 구성하는 것이 가장 좋은 방법입니다. 파일 쿼리는 빠르고 쉽게 사용자 지정할 수 있는 로컬 데이터 액세스 방식일 뿐 아니라 항상 최신 파일 시스템 상태의 데이터가 검색되도록 보장합니다.

데이터 집합 정의

이 차트에서 보듯이 디지털 카메라와 카메라폰의 대중화로 인해 시간이 지날수록 누적되는 디지털 이미지의 경우 특히 사용자의 데이터 양이 클 수 있습니다. 이러한 막대한 데이터의 양 때문에 수천 장의 사진을 미디어에 저장하는 일반 사용자부터 수만 장을 저장하는 고급 사용자에 이르기까지 다양한 시나리오에 적용될 수 있는 보기를 디자인해야 합니다. 그러려면 필터와 주제를 이용해 각각의 보기를 관리하기 용이한 크기로 유지해야 합니다. 따라서 기본 갤러리 보기를 사용자의 콘텐츠를 단순히 나열한 목록 형태로 만들기보다는 시간을 투자해 어떤 형태의 쿼리가 적절할지를 고민해보는 것이 좋습니다. 이는 파일 시스템의 폴더 계층 구조를 그대로 따라서 컬렉션을 작은 집합으로 분할하는 것처럼 단순한 형태가 될 수도 있습니다.

사용자들은 많은 양의 데이터를 저장합니다. 평균적으로 수만 개의 미디어 파일을 컴퓨터에 보관하고 있으며, 그중 대부분은 이미지가 차지하고 상위 10%의 사용자는 거의 70,000개 이상의 미디어 파일을 보관하고 있습니다.
  그림 2: 사용자 1인당 콘텐츠 유형별 파일 수 

쿼리를 어떻게 구성할지를 결정할 때는 앱의 장점이 무엇인지와 그러한 장점을 지원하는 시나리오에 어떻게 적용할지를 고려해야 합니다. 즉, 개발자의 앱에 있어서 특정 항목이 사용자에게 왜 중요한지를 생각해야 합니다. PhotoJournal은 사진을 동적으로 보여 주고 사진과 관련한 추가 데이터를 사용하는 데 장점이 있기 때문에 사진을 찍은 날짜와 관련 상황(장소 등)이 사용자에게 제시할 유용한 주제가 됩니다. 이러한 주제는 필터나 항목을 정렬하는 방식 또는 레이블의 형태로 적용하면 됩니다.

다음은 갤러리 스타일 앱에 사용할 수 있는 보기의 몇 가지 예입니다. 이 보기들은 모두 Windows 8에서 제공되는 API를 사용해 만들 수 있습니다.

  • 파일 및 폴더의 계층형 보기
  • 메타데이터를 기준으로 한 집계 보기
    • 메타데이터를 기준으로 한 그룹별로 파일 재정렬
    • 사용자에게 유용한 방식으로 미디어를 시각화하는 데 적합: 앨범별, 아티스트별, 태그별 등
  • 단순한 필터링된 보기
    • 폴더 계층 구조를 요약한 파일 목록 제시
    • 사용자가 한눈에 쉽게 알아볼 수 있는 필터링된 항목 집합을 표시하는 데 적합 - 예: 키워드로 필터링된 검색 보기 표시
    • 이러한 보기를 만들려면 파일을 반환하는 deep 쿼리 사용

쿼리 구현

지금까지 살펴본 예제는 모두 파일 탐색기와 파일 검색 기능의 검색 상자에서 지원되는 언어인 AQS(고급 검색 구문)를 사용해 구현할 수 있습니다. AQS는 메타데이터와 콘텐츠를 기준으로 결과를 압축할 수 있는 강력한 도구입니다. 이 도구를 사용하면 필요한 데이터만 검색하고 쿼리 API를 사용해 원하는 순서로 정렬할 수 있습니다. AQS는 시스템 인덱스를 기반으로 하므로 파일 집합을 수동으로 필터링할 때보다 훨씬 빨리 결과를 얻고 보기를 표시할 수 있습니다.

앞서 소개한 예제, PhotoJournal은 최근 사진에 중점을 두고 AQS를 사용해 한 달 이내에 촬영된 이미지만 홈 페이지에 표시합니다. 날짜를 기준으로 정렬된 단순한 목록을 사용하면 앱에서 연대기와 같은 느낌을 주는 데 유용합니다.

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, [".jpg", ".png"]);
// Use the app search filter to enforce business logic
options.applicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { ".jpg", ".png" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the appl search filter to enforce business logic
options.ApplicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

반면 검색 결과 보기에서는 사용자가 무엇을 찾으려고 하는지가 중요하기 때문에 타임라인 보기와 같이 날짜를 사용하지 않고 사용자 쿼리 문자열을 사용하여 키워드를 기준으로 쿼리를 필터링하고 관련 데이터만 표시합니다. 작동 방식은 다음과 같습니다.

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, ["*"]);
// Use the text provided in the search box as the user search filter
options.userSearchFilter = queryText;
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { "*" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the application search filter to enforce business logic
options.UserSearchFilter = queryText;
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

표시할 데이터 생성

쿼리를 설정한 후에는 ListView 컨트롤에 표시할 수 있도록 코드 몇 줄만 작성하면 됩니다. 이러한 동작은 StorageDataSource를 사용하면 가장 간단하게 구현됩니다. StorageDataSource를 만들려면 보기를 어떤 모양으로 표시할지에 따라 약간의 추가 정보를 제공해야 합니다.

적합한 미리 보기 모드 선택

데이터 원본을 만들 때는 원하는 미리 보기를 결정해야 합니다. Windows 런타임은 미리 보기 사용 방식에 따라 몇 가지 미리 보기 모드 중에서 선택하는 기능을 지원합니다. 미리 보기 모드에 따라 잘라내기와 같은 일부 매개 변수가 조절됩니다. PhotoJournal은 이미지의 갤러리이므로 StorageDataSource 생성자에 picturesView 모드를 지정해 줍니다. 이 모드는 보기가 조화롭게 표시되는 황금비를 사용하여 모든 미리 보기가 0.7 가로 세로 비율로 잘려 반환되게 합니다. picturesView는 Metro 스타일 앱에 사진을 표시하는 전형적인 방법입니다.

미리 보기 크기 선택

미리 보기 크기는 미리 보기의 의도된 크기를 나타냅니다. 시스템에서는 시스템 전반에 걸쳐 사용되도록 미리 정의된 크기로 미리 보기를 캐시에 저장합니다. 이러한 크기 중 하나를 사용하면 앱에 Metro 스타일의 모양과 느낌을 적용하기가 용이하고 이미지 크기를 조정하는 데 따른 성능 낭비를 방지할 수 있습니다. 다음은 사용 가능한 미리 보기 모드와 각각에 권장되는 크기의 목록입니다.

미리 보기 모드

권장 요청 크기

반환 값

PicturesView / VideosView

190

고정된 가로 세로 비율을 적용해 190x130 크기(가능한 경우)로 잘라낸 미리 보기입니다. 시스템에서 캐시에 저장하는 미리 보기 크기로, 이를 사용할 경우 성능을 높일 수 있습니다.

0.7 가로 세로 비율로 잘라낸 미리 보기 

MusicView

256

256x256 크기(가능한 경우)의 정사각형 미리 보기입니다. 시스템에서 캐시에 저장하는 미리 보기 크기로, 사용할 경우 성능을 높일 수 있습니다.

정사각형 미리 보기로 잘라낸 앨범 아트 

DocumentsView/ ListView

40

고정된 가로 세로 비율을 적용한 40x40 크기(가능한 경우)의 정사각형 미리 보기입니다.

시스템에 등록된 파일 연결 아이콘으로, 정사각형 색상표에 표시 

SingleItem

16, 32, 48, 96, 256, 1024

원본 파일 가로 세로 비율의 미리 보기로, 가장 큰 가장자리의 크기로 요청됩니다. 최상의 성능을 위해 캐시에 저장된 6가지 크기를 사용할 수 있습니다.

표 1: 권장 미리 보기 크기

Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale 옵션을 데이터 원본 생성자로 전달하면 손쉽게 데이터 원본이 표시되는 미리 보기가 현재 배율에 관계없이 작동하도록 할 수 있습니다. 따라서 100% 배율에서 앱의 레이아웃에 해당하는 크기를 요청하면 충분합니다. 0으로 지정하면 보기에 미리 보기를 사용하지 않음을 나타내므로 미리 보기가 검색되지 않습니다.

데이터 원본 작성

이제 컬렉션을 어떤 모양으로 표시할지를 알고 있으므로 다음 단계로 넘어가서 ListView 컨트롤이 갤러리를 표시하는 데 사용할 수 있는 데이터 원본 개체를 만들 수 있습니다.

JS

// Set data source options
var dataSourceOptions = {
// Options to retrieve thumbnails
mode: Windows.Storage.FileProperties.ThumbnailMode.picturesView,
requestedThumbnailSize: 190, // 0 means that thumbnails should not be retrieved
thumbnailOptions: Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale
};

// Create the data source
var dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);

많은 앱에서 개발자들이 사진과 같은 각 콘텐츠 유형에 적합한 공통적인 패턴을 반영하여 유사한 StorageDataSource 구성을 사용할 것이라 예측합니다. 때문에 개발자의 편의를 위해 이러한 최적화된 구성으로 StorageDataSource를 구성하는 기본 설정을 한 줄의 코드로 제공합니다. PhotoJournal의 경우 사진에 해당하는 기본 구성을 사용하면 훨씬 적은 코드로 방금 살펴볼 코드와 같은 결과를 얻을 수 있습니다.

// Shorthand datasource (similar shorthand constructors are available for Videos,
// Music and Documents)
var dataSource = new WinJS.UI.StorageDataSource("Pictures");

C#

C#에서는 데이터 원본을 만드는 의미 체계가 약간 다르고, StorageDataSource를 만드는 대신 FileInformationFactory 클래스를 사용하게 됩니다. 다음 코드는 이 개체를 사용하여 가상화된 파일 벡터를 얻는 방법을 보여 줍니다. 가상화된 파일 벡터는 GridView 컨트롤에 사용할 수 있는 생성자입니다.

var fileInformationFactory = new FileInformationFactory(
fileQuery,
Windows.Storage.FileProperties.ThumbnailMode.PicturesView,
size,
Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,
true);

사용자 지정 데이터 원본

앱의 보기를 구성하는 데 파일 시스템에서 기본적으로 제공되는 일반적인 구성 주제만으로도 충분하다면 StorageDataSource 컨트롤과 FileInformationFactory를 사용하면 됩니다. 표시되는 데이터에 비즈니스 논리를 적용하려는 경우에는 파일 시스템에 직접 데이터 원본을 만들 수 있습니다.

앱에 사용할 자체적인 데이터 원본을 구현해야 할 사례로 클라우드, 사용자 지정 데이터베이스, 파일 시스템 등의 여러 원본에서 데이터를 취합하는 경우를 들 수 있습니다. 또한 앱의 특정한 비즈니스 논리를 기준으로(예: PhotoJournal에 게시되는 사진이 찍힌 날짜를 기준으로) 항목을 필터링하거나 정렬하거나 그룹화해야 하는 경우에도 고유한 데이터 원본이 필요합니다. 이때에도 데이터 모델 API를 사용해 데이터를 쿼리할 수 있지만, 직접 작성한 필터링 계층을 추가하고 데이터가 가상화되어 ListView 컨트롤에 반환되는 방법을 관리해야 합니다. 그러려면 약간의 추가 작업이 필요합니다.

데이터 서식 지정

너무 많은 데이터가 사용자에게 표시되는 일이 없도록 보기에 관련 콘텐츠만 표시되게 하는 것도 필수적인 조건이지만, 앱을 돋보이게 하고 차별화하려면 데이터를 아름답고 세련되게 보여 주는 것이 중요합니다. 늘 그렇듯, 구체적인 데이터 표시 방법은 앱의 용도와 표시할 콘텐츠의 종류에 따라 달라집니다.

사진 갤러리 디자인

PhotoJournal은 오로지 사진만 보여 주는 앱이므로 콘텐츠를 최우선으로 하고, 불필요한 요소를 최소화하며, 빠르고 자연스러운 환경을 제공한다는 Metro 원칙에서 출발한 주요 지침을 따르고 있습니다. 이러한 지침은 파일 선택기의 동작을 통해 살펴볼 수 있습니다.

  • 사진 중심의 보기에서는 이미지 미리 보기가 중요합니다.
  • 대개 사용자가 한눈에 사진을 식별할 수 있고 파일 이름을 표시하지 않아도 될 경우가 많습니다. 이름을 표시하지 않으면 시각적인 방해 요소를 줄이고 단순화할 수 있습니다.
  • PicturesView 미리 보기 모드를 사용하여 미리 보기의 가로 세로 비율을 일정하게 유지함으로써 깔끔하고 조화로운 보기를 만듭니다.
  • 간단한 자리 표시자를 사용하여 보기에 이미지가 로드되는 동안 시각적 피드백을 제공합니다. 이렇게 하면 앱의 속도가 빠르게 보이는 효과가 있습니다.
  • 사용자에게 유용한 텍스트만 표시합니다(예: 사용자의 검색 쿼리와 일치하는 속성만 검색 결과 보기에 표시).
  • 사용자가 길게 누르기 제스처를 통해 액세스할 수 있는 플라이아웃에 추가 정보를 제공합니다.

이러한 원칙을 구현한 PhotoJournal 검색 보기의 모습은 다음과 같습니다.

사용자가 콘텐츠를 빠르게 확인할 수 있도록 하면서도 사용자의 검색 쿼리와 일치하는 속성을 강조하여 각 이미지 결과가 왜 반환되었는지를 보여 주기 위해 이미지를 많이 이용한 PhotoJournal 검색 보기  그림 3: 이미지 강조, 사용자의 검색 쿼리와 일치하는 속성 표시

사진 이외의 콘텐츠 디자인

콘텐츠마다 디자인 규칙은 서로 다릅니다. 예를 들어 음악 보기에서는 사용자가 항목을 빠르게 확인하려면 곡명, 앨범 제목, 아티스트 이름 등의 역할이 중요하고, 앨범 아트를 표시하는 것도 빠른 탐색을 위해 중요합니다. 반면에 문서의 경우에는 주로 텍스트가 많기 때문에 일반적으로 풍부한 그래픽 표현을 만드는 데는 크게 비중을 두지 않습니다. 대신 텍스트와 항목 정보를 보여 주는 데 보다 중요한 항목 템플릿을 사용합니다.

파일과 폴더를 함께 표시하는 계층 구조 모델에 따라 보기를 만들 경우 이 두 가지 항목을 시각적으로 구분해 주어야 합니다. Windows 파일 선택기에 사용된 패턴을 따르면 이러한 시각적 구분에 유용합니다. 사용자는 시스템 전반에 걸쳐 이러한 패턴을 보게 되므로 사용자에게 익숙하고 쉽게 인식됩니다. 따라서 이러한 패턴을 사용하면 앱이 Windows 8에 자연스럽게 통합됩니다.

파일 선택기 미리 보기
그림 4: 파일 선택기에 오버레이를 사용하여 폴더 구분

보기의 모양을 결정할 때는 실제로 보기를 표시해 보면 됩니다.

보기 표시

보기를 표시할 때는 항목 템플릿이라는 개념이 핵심이 됩니다. 보기를 만들면 표시되는 모든 항목이 공용 템플릿을 바탕으로 서식이 지정됩니다. 이 템플릿에는 항목의 정보(미리 보기, 이름, 날짜 등)가 채워집니다.

JavaScript의 경우

JavaScript에서 ListView 컨트롤을 사용할 경우 템플릿의 스타일을 지정하는 가장 좋은 방법은 ListView 클래스를 기반으로 한 CSS를 사용하는 것입니다.

.imageGallery .win-container
{
margin-right: 10px;
margin-bottom: 10px;
}

.imageGallery .win-item
{
width: 190px;
height: 130px;
overflow: hidden;
background-color: #333333;
}

.imageGallery .win-item img {
width: 190px;
height: 130px;
overflow: hidden;
}

보기에 항목을 렌더링하는 가장 일반적인 방법은 ListView 컨트롤에서 보기의 각 항목을 생성하기 위해 호출하는 항목 템플릿 메서드를 작성하는 것입니다. 이 메서드는 항목을 화면에 표시해야 할 때마다 항목당 한 번씩 호출됩니다. 이러한 방식을 프로그래밍 렌더링이라고 합니다. 각 항목마다 프로그래밍 방식으로 DOM 요소를 즉각적으로 생성할 수 있습니다.

한편 개발자의 입장에서는 미리 보기 품질을 관리하기가 까다로울 수 있습니다. 사용자가 처음으로 시스템에서 사진을 볼 때 Windows는 저해상도의 빠른 미리 보기를 반환하여 응답성을 높이지만, 이후로는 고해상도 미리 보기를 표시합니다. 이러한 복잡한 동작을 직접 처리하지 않고 시스템이 자동으로 처리하도록 하려면 StorageDataSource 컨트롤의 LoadThumbnail 도우미 함수를 사용하면 됩니다. 이 함수는 이러한 복잡한 메커니즘을 무시하고 단순히 요청된 미리 보기가 제공된 이미지 요소에 삽입되도록만 합니다. 이 경우 다음과 같이 단 몇 줄의 코드로 항목이 렌더링됩니다.

function storageRenderer(itemPromise, element) {
var img, itemStatus;
if (element === null) {
// dom is not recycled, so create inital structure
element = document.createElement("div");
element.className = "FileTemplate";
element.appendChild(document.createElement("img"));
}
img = element.querySelector("img");
img.style.opacity = 0;

return {
// returns the placeholder
element: element,
// and a promise that will complete when the item is fully rendered
renderComplete: itemPromise.then(function (item) {
// now do cheap work (none here, so we return item ready)
return item.ready;
}).then(function (item) {
// wait until item.ready before doing expensive work
return WinJS.UI.StorageDataSource.loadThumbnail(item, img).then(function (image) {
// perform any operation that requires the thumbnail to be available
});
})
};
}

스타일과 렌더러가 준비되었으니 이제 ListView 컨트롤을 초기화하기만 하면 갤러리 앱이 완성됩니다.

var container = document.getElementById("listviewDiv");
var listViewOptions = {
itemDataSource: dataSource,
itemTemplate: storageRenderer,
layout: new WinJS.UI.GridLayout(),
selectionMode: "single"
};

var listViewControl = new WinJS.UI.ListView(container, listViewOptions);

참고: JavaScript 개발자는 HTML 마크업을 사용한 선언적인 렌더링을 통해 잠시 후 살펴볼 XAML 예제의 경우와 유사한 다른 방식을 이용할 수 있습니다. 관련 예제로 StorageDataSource 샘플을 참조하시기 바랍니다. 선언적인 렌더링은 보다 손쉬운 방식이지만 프로그래밍 렌더링을 이용하면 보다 복잡한 구현이 가능합니다.

XAML의 경우

XAML에서는 앞서 설명한 JavaScript 방식과 조금 다른 구현 방식을 사용합니다. 이 방식은 사용할 템플릿을 나타내는 XAML 마크업을 작성하고 해당 템플릿을 GridView 또는 ListView 컨트롤에 바인딩하는 식으로 진행됩니다. 이러한 방식을 선언적 렌더링이라고 합니다. 이 경우 ListView 자체에서 보기의 모든 항목에 대한 요소가 생성되며, 해당 요소는 바인딩을 통해 올바른 데이터로 채워집니다. FileInformation 개체에 의해 노출되는 모든 속성을 이 컨트롤에 바인딩할 수 있습니다.

XAML 템플릿 마크업

<UserControl.Resources>
<local:ThumbnailConverter x:Key="thumbnailConverter"/>
<DataTemplate x:Key="Custom190x130ItemTemplate">
<Grid Width="190" Height="130">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
<Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" Width="190" Height="130"/>
</Border>
</Grid>
</DataTemplate>

<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"/>
</UserControl.Resources>

<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items"
Grid.Row="1"
Margin="0,-4,0,0"
Padding="116,0,40,46"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Custom190x130ItemTemplate}"
SelectionMode="None"/>

바인딩하기 전에 속성에 액세스해야 할 경우(예: Image 개체에 직접 바인딩할 수 없고 먼저 디코딩해야 하는 미리 보기 스트림) 이를 처리할 값 변환기를 선언하면 됩니다.

C# 값 변환기

internal class ThumbnailConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string culture)
{
if (value != null)
{
var thumbnailStream = (IRandomAccessStream)value;
var image = new BitmapImage();
image.SetSource(thumbnailStream);

return image;
}

return DependencyProperty.UnsetValue;
}

public object ConvertBack(object value, Type targetType, object parameter, string culture)
{
throw new NotImplementedException();
}
}

그러면 FileInformationFactory 개체에서 얻어진 VirtualizedItemsVector를 사용하여 GridView를 설정할 수 있습니다.

itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();

보기의 변화

이제 여러분이 직접 멋진 파일 시스템 보기를 만들 준비가 되었습니다. 단, 보기를 하나 만드는 것으로 끝은 아닙니다. 사용자의 요구 사항에 대응하여 사용자가 수행하려는 작업에 따라 모든 화면이 맞춤형으로 구성되는 앱이라야 진정으로 뛰어난 앱이라고 할 수 있습니다. 예를 들어 추가 코드를 작성하여 사용자 경험을 향상시키는 두 가지 방법으로, 데이터를 피벗하는 옵션을 제공하거나 시맨틱 줌 기능을 사용할 수 있습니다.

데이터 피벗

PhotoJournal 앱의 경우 카메라 모델 또는 날짜와 관련하여 피벗을 추가할 수도 있습니다. 이러한 피벗은 AQS를 사용하여 파일 쿼리의 범위를 제한할 수 있게 하고 항상 적당한 수의 사진만 사용자에게 표시되도록 합니다. 피벗이 바뀔 때마다 새 쿼리를 실행하고 ListView 컨트롤에서 데이터 원본을 바꾼 다음, 앱의 리소스 소모량이 너무 커지지 않도록 이전 쿼리와 데이터 원본을 버리면 됩니다. 앞서 소개한 검색 보기에 이러한 피벗을 손쉽게 추가할 수 있습니다. 추가한 결과는 다음과 같습니다.

다양한 필터 옵션이 포함된 탭 또는 드롭다운 메뉴와 같은 피벗을 검색 보기 맨 위에 추가하여 사용자가 콘텐츠를 필터링하도록 지원 그림 5: 사용자가 콘텐츠를 필터링할 수 있도록 피벗 추가

시맨틱 줌

시맨틱 줌은 약간의 코드만 추가하여 앱을 돋보이게 만들 수 있는 또 다른 방법입니다. 피벗 방식이 앱에 맞지 않거나 피벗이 적용된 보기에도 너무 많은 수의 항목이 표시되는 경우 시맨틱 줌을 사용하면 사용자가 한눈에 확인할 수 있는 종합적인 콘텐츠 보기를 표시할 수 있습니다.

 시맨틱 줌을 이용하여 앱의 테마를 사용한 서식으로 전체적인 집계 데이터 표시 - 예: PhotoJournal에서 매일 게시된 사진 수를 나타내는 타임라인을 막대 그래프로 표시그림 6: 시맨틱 줌

결론

이 글에서는 StorageDataSource와 VirtualizedItemsVector를 JavaScript 또는 XAML 컨트롤에 사용하여 갤러리 앱에 적용할 다양한 파일 시스템 보기를 만드는 방법을 살펴보았습니다. 요점을 정리하면 다음과 같습니다.

  • 보기에 표시할 데이터를 신중하게 선택하고 그에 따라 파일 시스템 쿼리
  • 보기를 스타일링할 때는 다른 Windows 환경과의 조화 및 콘텐츠 유형 고려
  • 렌더링 파이프라인의 유연성을 이용하여 항목을 표시할 때 비즈니스 논리 표현
  • 피벗 및 시맨틱 줌 기능을 사용하여 보다 풍부한 환경 구현

이제 여러분도 멋진 갤러리 앱을 만들어보시기 바랍니다.

- Windows 사용자 경험 팀 프로그램 관리자, Marc Wautier

 

리소스

링크

유형

주요 내용

빠른 시작 ListView 추가

개발자용 빠른 시작 문서

일반적인 ListView를 만드는 방법 설명

StorageDataSource and GetVirtualizedFilesVector sample

코드 샘플

StorageDataSource 및 GetVirtualizedFilesVector를 사용하여 로컬 파일을 기반으로 한 보기를 만드는 방법 제시

그리드 레이아웃용 항목 템플릿

코드 조각

ListView에 사용할 샘플 항목 템플릿 제공

StorageDataSourceFileInformationFactory

API 참조

StorageDataSource 및 FileInformationFactory API 참조

  • Loading...
Leave a Comment
  • Please add 4 and 3 and type the answer here:
  • Post