Windows 스토어 앱용 탐색 디자인

계층적 시스템

Windows 8에서 대부분의 Windows 스토어 앱은 계층적 탐색 시스템을 사용합니다. 이 패턴은 일반적이며 사람들에게 친숙하지만 허브 탐색 패턴에 의해 훨씬 더 효율적으로 됩니다. 이 패턴은 Windows 스토어 앱을 빠르고 유연하게 하는 동시에 간편하게 해줍니다. 큰 콘텐츠 모음 또는 다양한 콘텐츠 섹션을 포함하고 사용자가 이를 탐색해야 하는 앱에 가장 효과적인 패턴입니다.

계층 구조의 계층

허브 디자인의 핵심은 콘텐츠를 서로 다른 섹션과 세부 정보 수준으로 구분하는 것입니다.

허브 페이지 허브 페이지는 앱에 대한 사용자의 진입점입니다. 이 페이지에는 콘텐츠가 가로 이동 보기로 표시되어, 새로 추가된 기능과 사용 가능한 기능을 한눈에 살펴볼 수 있습니다. 허브는 다양한 콘텐츠 범주로 구성되며, 이 각각의 범주는 앱의 섹션 페이지에 매핑됩니다. 각 섹션에서 콘텐츠 또는 기능이 다양하게 생성되어야 합니다. 허브는 풍부한 시각적 다양성을 제공하여 앱의 각 부분으로 사용자를 유도해야 합니다.   섹션 페이지 섹션 페이지는 앱의 두 번째 수준입니다. 이 페이지에서는 시나리오와 섹션에 포함된 콘텐츠가 가장 잘 나타나는 형태로 콘텐츠를 표시할 수 있습니다. 섹션 페이지는 개별 항목들로 구성되며, 각 항목은 자체 정보 페이지가 있습니다. 또한 섹션 페이지에서는 그룹화 및 파노라마 스타일 레이아웃을 활용할 수 있습니다.   정보 페이지 정보 페이지는 앱의 세 번째 수준입니다. 이 페이지에는 개별 항목의 세부 정보가 콘텐츠 유형에 따라 다양한 형식으로 표시됩니다. 정보 페이지는 항목 세부 정보 또는 기능으로 구성됩니다. 정보 페이지는 많은 정보를 포함하거나 사진, 동영상과 같은 단일 개체를 포함할 수 있습니다.

플랫 시스템

Windows 8에서 대부분의 Windows 스토어일 앱은 플랫 탐색 시스템을 사용합니다. 사용자가 동일한 계층 수준에 있는 페이지, 탭 또는 모드를 이동하는 게임, 브라우저 또는 문서 만들기 앱에서도 이 패턴이 표시될 수 있습니다. 소수의 페이지 또는 탭 사이를 빠르게 전환하는 것이 핵심 시나리오인 경우 가장 알맞은 패턴입니다.

콘텐츠 페이지

플랫 시스템의 핵심은 콘텐츠를 각기 다른 페이지로 구분하는 것입니다.

맨 위 앱 바 맨 위 앱 바는 여러 컨텍스트를 전환하는 데 유용합니다. 예를 들어 탭, 문서, 메시지 또는 게임 세션이 있습니다. 앱 바는 화면의 맨 위에 있는 임시 요소이며 사용자가 위 또는 아래쪽 가장자리를 손가락으로 살짝 밀면 나타납니다. 탐색 모음의 항목 형식은 다를 수 있지만 간단한 미리 보기를 사용하는 것이 일반적입니다.   전환 계층적 시스템과 달리 단순 시스템에는 영구적인 뒤로 단추나 탐색 스택이 없으므로 콘텐츠 또는 맨 위 앱 바에 있는 직접 링크를 통해 페이지를 이동하는 것이 일반적입니다. 맨 위 앱 바에 다른 기능을 추가할 수 있습니다. 예를 들어 새 탭, 페이지 또는 세션을 만들 수 있도록 '+' 단추를 추가합니다.

탐색 분석

다음은 같은 앱에 속한 섹션 간에, 계층 구조상의 각기 다른 단계 간에 그리고 하나의 앱 페이지 내부에서 이동하는 것에 대한 자세한 설명입니다.

1. 헤더 및 뒤로 단추

   헤더는 현재 페이지에 레이블을 지정하며 길 찾기에 유용합니다. 뒤로 단추를 사용하면 이전에 있었던 위치로 빠르게 돌아갈 수 있습니다.

2. 허브 페이지

   허브 페이지는 응용 프로그램의 다양한 영역에서 화면으로 정보를 가져옵니다. 또한 앱에서 사용할 수 있는 모든 항목을 입체적으로 보여 줍니다.

3. 콘텐츠 섹션 또는 범주

   홍보하는 기능 또는 항목을 가장 잘 표시하도록 콘텐츠 섹션을 포맷할 수 있습니다.

   

4. 시맨틱 줌 : 계층 구조의 단계 간 이동

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

   

5. 맨 위 앱 바

   맨 위 앱 바에는 탐색 컨트롤 또는 앱의 기타 영역에 대한 임시 액세스 기능이 포함되어 있습니다.

6. 헤더 메뉴

   헤더 메뉴는 앱의 어디에서든 사용할 수 있으며, 앱의 한 섹션에서 다른 섹션으로 빠르게 이동할 수 있도록 해줍니다.

7. 홈 링크

   헤더 메뉴의 아래쪽에 있는 홈 링크를 사용하면 앱의 루트로 빠르게 돌아갈 수 있습니다.

8. 아래쪽 앱 바

   아래쪽 앱 바에는 특정 뷰 관련 명령에 대한 임시 액세스 기능이 포함되어 있습니다.

9. 뷰/정렬/필터

   이러한 명령은 특정 뷰에서 콘텐츠가 표시되는 방법을 변경합니다. 따라서 이러한 명령을 앱 바에 배치하는 것이 가장 좋습니다.

10. 가장자리

    화면의 가장자리를 손가락으로 살짝 밀면 앱 바 및 참이 나타납니다.

    

가장자리 살짝 밀기를 통한 탐색

사용자는 가장자리부터 손가락이나 엄지로 살짝 밀어 앱 내부에서 또는 시스템 전체에서 탐색할 수 있습니다. Windows 스토어 앱을 효율적으로 사용하려면 각 가장자리 살짝 밀기 기능에 대해 알아두는 것이 좋습니다. 화면의 아래쪽 또는 위쪽 가장자리를 손가락으로 살짝 밀면 탐색 모음과 명령 앱 바가 나타납니다. 화면 오른쪽 가장자리부터 살짝 밀면 시스템 명령이 보이는 참 메뉴가 표시됩니다. 왼쪽 가장자리부터 살짝 밀면 현재 실행 중인 앱을 순환합니다. 화면의 위쪽 가장자리부터 아래쪽 가장자리까지 밀면 현재 앱을 닫습니다. 위쪽 가장자리부터 왼쪽 또는 오른쪽 가장자리까지 밀면 화면의 해당 위치로 현재 앱을 끕니다.

헤더 메뉴 및 섹션 레이블을 통한 탐색

Food with Friends라는 샘플 앱을 사용하여 뒤로 단추, 헤더 메뉴 및 콘텐츠 섹션을 통해 Windows 스토어 앱을 탐색하는 패턴을 보여 줍니다.

헤더 메뉴에는 각 섹션 페이지(수준 2) 링크와 허브(수준1)로 돌아가는 링크가 포함되어 있어 사용자가 앱에서 빠르게 이동할 수 있습니다. 각 수준과 앱의 모든 페이지에 메뉴가 표시되므로 사용자가 원하는 위치로 안전하고 효율적으로 이동할 수 있습니다.

사용자는 섹션 레이블을 탭하여 해당 섹션에 대한 페이지를 드릴다운할 수 있습니다. 허브에 표시된 것보다 많은 항목이 이 섹션에 있음을 사용자에게 표시하기 위해 모두 보기(x) 등의 시각 신호를 제공합니다. 이 패턴을 사용하면 타일 공간을 사용하거나 콘텐츠 안에 링크를 배치할 필요가 없습니다.

이 패턴을 사용할 경우 Food with Friends 예제의 탐색 다이어그램은 다음과 같습니다. 이 다이어그램은 모든 대화식 항목을 대표하는 데 사용되는 탐색 요소의 정식 예만 표시하는 간소화된 다이어그램입니다.

필터, 피벗, 정렬 및 보기를 통한 탐색

앱 탐색의 또 다른 부분은 사용자가 콘텐츠 환경을 보다 자유롭게 제어할 수 있도록 하는 시기, 위치 및 방법을 결정하는 것입니다. 필터, 피벗, 정렬 및 보기 전환은 모두 앱 디자인에서 고려할 사항입니다.

캔버스

모음 또는 검색 결과 페이지 등에서 항목을 찾는 것이 주요 작업인 경우 캔버스 컨트롤을 필터링, 피벗 또는 정렬에 사용합니다.

잡지 또는 쇼핑 앱과 같이 앱의 초점이 콘텐츠 검색인 경우 앱 바에 컨트롤을 배치해야 합니다.

페이지 필터 및 정렬

모음 보기에서 콘텐츠를 필터링 및 정렬할 수 있도록 필터 및 정렬 명령을 헤더와 콘텐츠 사이에 한 행으로 배치할 수 있습니다. 다음 예제에서는 시리즈별로 정렬 및 그룹화된 TV 에피소드만을 표시하도록 보기가 필터링됩니다.

마켓플레이스 앱에 대한 다음 예제에서는 드롭다운 선택 컨트롤이 현재 보기의 콘텐츠를 필터링합니다. 메뉴가 표시될 때 현재 활성 필터가 드롭다운 목록에 선택되어 있습니다.

맨 위 앱 바

맨 위 앱 바는 주로 플랫 탐색 패턴을 사용하는 앱의 섹션이나 페이지를 탐색하는 데 사용됩니다. 탐색 앱 바라고도 하는 맨 위 앱 바는 헤더 메뉴 대신 계층형 패턴과 함께 글로벌 탐색 컨트롤을 제공하는 데 사용할 수도 있습니다. 맨 위 앱 바는 모든 페이지와 앱의 모든 단계에 표시되어 사용자에게 편리하고 일관성 있는 탐색 방법을 제공해야 합니다.

다음 재무 앱 예제에서 허브(L1)는 앱의 섹션(Headlines, Watchlist)을 허브 수준으로 올리고 섹션 헤더가 연결됩니다. 섹션 수준(L2)에서 위쪽 또는 아래쪽 가장자리를 살짝 밀어 맨 위 앱 바를 호출하면 사용자가 루트 및 앱의 다른 모든 섹션에 액세스할 수 있습니다.

앱 바 보기 전환

앱 바는 주로 명령 화면으로 사용되지만 콘텐츠를 보는 방법을 변경하는 데 사용할 수도 있습니다. 앱 바를 사용하여 보기 전환, 피벗, 필터링 및 정렬을 모두 수행할 수 있습니다. 앱 바를 사용하여 앱의 한 위치에서 다른 위치로 이동하지 마세요. 모든 앱 바 항목은 현재 보기에 있는 콘텐츠에만 작동해야 합니다.

다음 일정 앱 예제에서는 기본 보기가 이 앱이 최적화된 월 보기로 설정됩니다. 다른 일정 보기를 선택하는 명령은 위쪽 또는 아래쪽 가장자리부터 살짝 밀어 액세스하는 앱 바에 있습니다. 새 약속 만들기 등의 다른 명령이 바에 표시될 수도 있습니다.

Food with Friends 예제의 All Restaurants 페이지에서는 목록이나 지도로 항목을 보는 옵션을 사용할 수 있으며 비용, 위치, 등급 등의 특정 기준에 따라 보기를 필터링하고 정렬할 수도 있습니다. 여기서 필터링 옵션은 메뉴 플라이아웃에 컨트롤로 노출됩니다.