탐색 패턴(Windows 스토어 앱)

Applies to Windows only

사용자가 쉽고 직관적으로 탐색할 수 있도록 Windows 스토어 앱에서 콘텐츠를 구성합니다. 오른쪽 탐색 패턴을 사용하면 화면에 계속 표시되는 컨트롤을 제한하는 데 도움이 됩니다. 이렇게 하면 사용자가 현재 콘텐츠에 집중할 수 있습니다.

Windows 스토어 앱의 탐색은 계층적 패턴과 플랫 패턴의 두 패턴을 기반으로 합니다. 앱은 두 패턴 중 하나를 사용하거나 둘 다 조합해서 사용할 수 있습니다.

계층적 패턴

이 패턴을 사용하면 Windows 스토어 앱이 빠르고 유연하게 작동합니다. 큰 콘텐츠 모음 또는 다양한 콘텐츠 섹션을 포함하고 사용자가 이를 탐색해야 하는 앱에 가장 효과적입니다. 대부분의 Windows 스토어 앱은 계층적 탐색 시스템을 사용합니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능을 자세히 살펴보세요.:  계층적 탐색 전체 프로세스(HTMLXAML)

Windows 스토어 앱의 허브, 섹션 및 세부 정보 페이지

허브 페이지는 앱에 대한 사용자의 진입점입니다. 이 페이지에는 콘텐츠가 가로 이동 보기로 표시되어, 새로 추가된 기능과 사용 가능한 기능을 한눈에 살펴볼 수 있습니다.

허브는 다양한 콘텐츠 범주로 구성되며, 이 각각의 범주는 앱의 섹션 페이지에 매핑됩니다.

 

섹션 페이지는 앱의 두 번째 수준입니다. 이 페이지에서는 시나리오와 섹션에 포함된 콘텐츠가 가장 잘 나타나는 형태로 콘텐츠를 표시할 수 있습니다.

섹션 페이지는 개별 항목들로 구성되며, 각 항목에는 자체 정보 페이지가 있습니다. 또한 섹션 페이지에서는 그룹화 및 파노라마 스타일 레이아웃을 활용할 수 있습니다.

 

세부 정보 페이지는 앱의 세 번째 수준입니다. 이 페이지에는 개별 항목의 세부 정보가 콘텐츠 유형에 따라 다양한 형식으로 표시됩니다.

정보 페이지는 항목 세부 정보 또는 기능으로 구성됩니다. 정보 페이지는 많은 정보를 포함하거나 사진, 동영상과 같은 단일 개체를 포함할 수 있습니다.

 

플랫 패턴

대부분의 Windows 스토어일 앱은 플랫 탐색 패턴을 사용합니다. 게임, 브라우저 또는 문서 만들기 앱 등의 앱은 이 패턴을 사용하여 사용자가 동일한 계층 수준에 있는 페이지, 탭 또는 모드 간에 이동할 수 있게 합니다. 계층적 패턴과 달리 영구적인 뒤로 단추나 탐색 스택이 없으므로 대체로 콘텐츠 내의 직접 링크를 통해(아래 첫 번째 예제) 또는 탐색 모음을 통해(아래 두 번째 예제) 페이지 간에 이동합니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능을 자세히 살펴보세요.:  플랫 탐색 전체 프로세스(HTMLXAML)

플랫 탐색 예제

 

이 패턴은 핵심 시나리오에 적은 개수의 페이지 또는 탭 간 빠른 전환이 포함된 경우에 유용합니다. 예를 들어 Internet Explorer, ebook, 게임 같은 웹 브라우저 앱에 유용합니다.

캔버스에서 탐색

 

탐색 요소로 머리글, 뒤로 단추, 섹션 머리글 및 타일

 

  1. 머리글 및 뒤로 단추

    머리글은 현재 페이지에 레이블을 지정하며 표지판에 유용합니다. 뒤로 단추를 사용하면 이전에 있었던 위치로 빠르게 돌아갈 수 있습니다.

  2. 섹션 또는 범주 레이블

    이러한 레이블은 사용자를 다른 콘텐츠 섹션이나 범주로 이동합니다.

  3. 기타 대상

    타일, 화살표, 단추, 검색 결과 또는 기타 사용자 지정된 대상을 탐색 요소로 사용할 수 있습니다. 일부 게임에서 흥미로운 모양이 포함된 탐색 요소의 예를 확인할 수 있습니다.

 

헤더, 섹션 레이블 및 세부 정보 링크를 보여 주는 Bing 뉴스 앱

 

위쪽 앱 바

사용자는 화면 위쪽 또는 아래쪽 가장자리에서 살짝 밀어 앱 바를 표시합니다. 위쪽 앱 바를 탐색 모음이라고도 합니다. 앱의 콘텐츠에 더 많은 화면 공간을 사용하여 돋보이게 만들 수 있도록 위쪽 앱 바에 탐색 요소를 배치할 수 있습니다. 또는 사용자가 앱을 사용할 때 자주 필요로 하는 경우 및 캔버스에 배치해도 앱 환경에 부정적인 영향을 주지 않는 경우 캔버스에 탐색 요소를 배치할 수 있습니다. 탐색 요소가 위쪽 앱 바 또는 캔버스에 속하는지 결정합니다.

 

탐색 모음 액세스

 

일반적으로 섹션 또는 범주 레이블은 Hulu Plus 같이 탐색 모음에 있습니다.

 

hulu plus 앱 탐색 모음

 

대부분의 앱은 위쪽 앱 바를 사용하여 바로 가기를 제공합니다. 예를 들어 ESPN 앱에서 사용자는 위쪽 앱 바의 섹션 레이블 위에 있는 득점판을 클릭하여 게임 방송 페이지로 이동할 수 있습니다.

 

espn 앱 탐색 모음

 

위쪽 앱 바에서 대상 페이지의 콘텐츠 미리 보기를 사용자에게 제공할 수도 있습니다. 다음 쇼핑 앱 예제에서는 제품 세부 정보 페이지로 이동하기 전에 앱 바에서 제품 이미지를 미리 볼 수 있습니다.

 

vevo 앱 탐색 모음

 

앱 바를 독창적인 방법으로 사용하여 디자인을 더욱 발전시키세요. Fresh Paint에서 위쪽 앱 바는 전용 탐색 기능 이상의 가치를 제공하며 그리기 도구 상자로도 사용됩니다.

 

fresh paint 탐색 모음

 

시맨틱 줌

시맨틱 줌을 사용하면 뷰를 빠르고 유연하게 검색하여 이동할 수 있으므로, 뷰가 긴 이동 목록으로 되어 있는 경우에 특히 유용합니다.

 

확대 보기 및 축소 보기의 샘플 앱

 

예를 들어 Great British Chefs에서 허브 페이지에는 스포트라이트 섹션과 시각적으로 풍부한 가로 이동 섹션 5개가 있습니다. 이 앱은 시맨틱 줌을 사용하여 5개 섹션으로 각각 쉽게 이동할 수 있게 합니다.

 

Great British Chefs의 시맨틱 줌

자세한 내용은 시맨틱 줌에 대한 지침을 참조하세요.

관련 항목

디자이너용
명령 패턴
레이아웃
뒤로 단추
Windows 스토어 앱의 허브 컨트롤에 대한 지침
Windows Phone 스토어 앱의 허브 컨트롤에 대한 지침
앱 바에 대한 지침
앱 바에 접근성 구현
개발자용(HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML 허브 컨트롤 샘플
HTML AppBar 컨트롤 샘플
HTML NavBar 컨트롤 샘플
탐색 및 탐색 기록 샘플
첫 번째 앱 - 3부: PageControl 개체 및 탐색
앱 바 추가
탐색 모음 추가
페이지 간 탐색(HTML)
개발자용(XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML Hub 컨트롤 샘플
XAML AppBar 컨트롤 샘플
XAML 탐색 샘플
첫 번째 앱 - 3부: 탐색, 레이아웃 및 보기
첫 번째 앱 - C++ Windows 스토어 앱에서 탐색 및 보기 추가(자습서 3/4)
앱 바 추가(XAML)
페이지 간 탐색(XAML)
개발자용(DirectX 및 C++로 작성한 Windows 런타임 앱)
앱 바 또는 설정 만들기

 

 

표시:
© 2014 Microsoft