탐색 패턴(Windows 스토어 앱)

아티클
04/07/2015

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

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

계층적 패턴

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

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

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

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

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

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

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

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

플랫 패턴

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

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

플랫 탐색 예제

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

캔버스에서 탐색

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

머리글 및 뒤로 단추

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

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

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

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

위쪽 앱 바

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

탐색 모음 액세스