계층적 탐색 전체 프로세스(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

서로 별개이지만 관련된 다양한 세부 정보 수준의 섹션 또는 범주로 콘텐츠를 구분할 수 있는 경우 Windows 스토어 앱에 계층적 탐색 패턴을 사용합니다. 이 패턴은 기본 시퀀스나 순서로 트래버스되는 관계형 정보 아키텍처에서도 잘 작동하는 친숙하고 일반적인 패턴입니다.

선택하는 탐색 패턴은 앱에서 지원하는 시나리오에 따라 달라집니다. 앱이 조직과 구조로 다양한 환경과 콘텐츠를 제공하는 경우 계층적 패턴이 더 적합합니다. 그러나 앱에 많은 정보 밀도나 조직 계층 구조가 없는 경우에는 사용자가 소수의 관련된 페이지 집합을 빠르게 탐색할 수 있도록 하는 플랫 탐색 전체 프로세스를 살펴보세요.

여기에서는 계층적 탐색 패턴을 사용하며 기본 Windows 스토어 인증 요구 사항을 모두 충족하는 Windows 스토어 앱을 JavaScript로 만드는 방법의 전체 프로세스를 설명합니다. 여기에는 다음이 포함됩니다.

이미지 리소스 - 운영 체제 전체에 앱을 노출합니다.
앱 바 - 탐색 및 명령을 지원합니다.
설정 - 개인 정보, 도움말 및 기타 앱 정보를 제공합니다.
데이터 로밍 - 세션 및 장치 간에 앱을 동기화합니다.
세계화 - 전 세계 국가와 지역의 고객에 도달합니다.
접근성 - 사용자가 신체 능력과 입력 장치에 관계없이 작업을 수행할 수 있도록 합니다.

다음은 Windows 스토어 앱의 계층적 탐색 패턴 와이어프레임 및 기본 계층적 구조입니다.

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

JavaScript용 Windows 라이브러리 Hub 컨트롤은 이러한 형식의 앱을 위해 특별히 디자인되었습니다. 일반적인 페이지에서 특정 페이지까지 이 컨트롤은 허브, 섹션 및 항목/세부 정보 페이지를 사용하여 다양한 정보를 직관적이고 일관된 구조로 연결할 수 있도록 도와줍니다.

Page	설명
허브	허브는 앱의 전체 범위를 미리 볼 수 있는 앱의 시작 페이지입니다. 각각 섹션과 연결된 항목의 작은 샘플이 포함된 콘텐츠 섹션이 하나 이상 표시됩니다. 앱 또는 사용자 기본 설정에 따라 다양한 조건을 적용하여 표시되는 섹션과 항목을 제어할 수 있습니다. 일반적으로 각 항목은 콘텐츠의 미리 보기, 요약(summary) 또는 요약(abstract)을 표시합니다. 사용자는 이 페이지에서 섹션 또는 항목 세부 정보 페이지로 이동할 수 있습니다. 사용자 참여를 유도하고 앱의 여러 영역으로 끌어들이기 위해 다양한 화면 효과로 허브를 디자인하는 것이 좋습니다.
섹션	섹션 페이지는 섹션과 관련된 항목의 미리 보기, 요약(summary) 또는 요약(abstract)이 표시되는 앱의 두 번째 수준입니다. 이 페이지의 항목은 섹션의 콘텐츠와 시나리오를 가장 잘 나타나는 형식으로 표시할 수 있습니다. 일반적으로 이 페이지에는 허브 페이지보다 많은 항목을 표시합니다. 각 항목은 세부 정보 페이지로 연결됩니다.
항목/세부 정보	세부 정보 페이지는 허브 또는 섹션 페이지에서 선택한 특정 항목에 대한 콘텐츠나 기능이 모두는 아니지만 대부분 표시되는 앱의 세 번째 수준입니다. 콘텐츠가 너무 광범위해서 앱에서 바로 표시할 수 없는 경우 피드 읽기 프로그램 등의 일부 앱은 원본 기사와 사이트로 연결될 수도 있습니다. 세부 정보 페이지에는 많은 정보, 단일 객체(예제: 사진 또는 동영상), 기타 앱 기능이 포함될 수 있습니다.

허브

허브는 앱의 전체 범위를 미리 볼 수 있는 앱의 시작 페이지입니다. 각각 섹션과 연결된 항목의 작은 샘플이 포함된 콘텐츠 섹션이 하나 이상 표시됩니다. 앱 또는 사용자 기본 설정에 따라 다양한 조건을 적용하여 표시되는 섹션과 항목을 제어할 수 있습니다. 일반적으로 각 항목은 콘텐츠의 미리 보기, 요약(summary) 또는 요약(abstract)을 표시합니다.

사용자는 이 페이지에서 섹션 또는 항목 세부 정보 페이지로 이동할 수 있습니다.

사용자 참여를 유도하고 앱의 여러 영역으로 끌어들이기 위해 다양한 화면 효과로 허브를 디자인하는 것이 좋습니다.

섹션

섹션 페이지는 섹션과 관련된 항목의 미리 보기, 요약(summary) 또는 요약(abstract)이 표시되는 앱의 두 번째 수준입니다. 이 페이지의 항목은 섹션의 콘텐츠와 시나리오를 가장 잘 나타나는 형식으로 표시할 수 있습니다.

일반적으로 이 페이지에는 허브 페이지보다 많은 항목을 표시합니다. 각 항목은 세부 정보 페이지로 연결됩니다.

항목/세부 정보

세부 정보 페이지는 허브 또는 섹션 페이지에서 선택한 특정 항목에 대한 콘텐츠나 기능이 모두는 아니지만 대부분 표시되는 앱의 세 번째 수준입니다. 콘텐츠가 너무 광범위해서 앱에서 바로 표시할 수 없는 경우 피드 읽기 프로그램 등의 일부 앱은 원본 기사와 사이트로 연결될 수도 있습니다.

세부 정보 페이지에는 많은 정보, 단일 객체(예제: 사진 또는 동영상), 기타 앱 기능이 포함될 수 있습니다.

일반적으로 플랫 탐색 앱에서 사용되는 탐색 모음은 계층적 앱의 콘텐츠를 트래버스하는 데에도 유용할 수 있습니다. 이 앱 바는 사용자가 위쪽 또는 아래쪽 가장자리에서 살짝 밀 때(마우스 오른쪽 단추 클릭, Windows 로고 키+Z 또는 키보드 메뉴 키) 화면 위쪽 가장자리에 표시될 수 있는 임시 요소입니다.

탐색 모음이 없어도 사용자가 콘텐츠 구조를 통해 앱을 직관적으로 탐색할 수 있도록 앱을 빌드하세요. 이 작업이 불가능한 경우 허브 페이지에 섹션 머리글 대신 탐색 모음을 사용하여 전역 탐색 컨트롤을 제공합니다. 모든 페이지와 앱의 모든 수준에 표시되어야 합니다.

참고 사용자가 현재 페이지를 탐색한 순서와 반대로 탐색할 수 있도록 해야 합니다. WinJS는 이 작업을 위해 PageControl과 함께 BackButton을 제공합니다.

올바른 탐색 패턴과 적절한 UI 레이아웃을 사용하면 영구적 컨트롤의 혼잡을 줄이고 사용자가 앱의 중요한 콘텐츠에 집중하도록 할 수 있습니다.

계층적 탐색 샘플

기본 계층적 탐색 샘플을 시작점으로 하여 해당 콘텐츠와 환경을 채우세요. 이 샘플은 기본 Windows 스토어 인증 요구 사항을 모두 충족 하는 앱에서 여기에 설명된 원칙, 권장 사항 및 구현 세부 정보를 보여 줍니다. 아래에 표시된 것처럼 이 샘플에는 다양한 섹션이 포함된 허브 페이지, 데이터 기반 섹션 페이지(섹션 3), 해당 섹션의 항목 세부 정보 페이지가 포함되어 있습니다. 필요에 따라 추가 페이지를 사용하여 앱을 확장하세요. 지침을 실제로 적용하는 방법을 확인하세요. 이 샘플을 통해 영감을 얻고 시간을 절약할 수 있습니다.

허브 페이지를 표시하는 샘플 앱

섹션 페이지를 표시하는 샘플 앱

항목 페이지를 표시하는 샘플 앱

Windows 스토어 규정 준수

Windows 스토어는 Windows 스토어 앱을 고객에게 배포하고 해당 고객을 최대한 많은 유용한 앱에 연결하는 주요 수단이 됩니다. 스토어 앱은 Windows 및 Windows Phone 스토어 정책을 준수해야 합니다.

도우미 샘플은 여기에 설명된 기능 및 다음을 포함하여 모든 Windows 스토어 앱이 인증을 통과하는 데 필요한 기본 요구 사항을 구현합니다.

시작 화면 및 타일 이미지
터치식, 마우스 및 키보드 입력에 대한 완벽한 지원
다양한 창 크기, 장치 방향 및 디스플레이 크기 지원
로밍 및 세션 상태
세계화, 지역화 및 접근성에 최적화됨

앱을 개발할 때 Windows 및 Windows Phone 스토어 정책을 고려하고 일반적인 인증 오류가 발생하지 않도록 주의하세요.

탐색 구현

Visual Studio에서 계층적 탐색 샘플을 열거나 허브 앱 프로젝트 템플릿으로 시작합니다. 원하는 경우 다음 템플릿 개요를 검토할 수 있습니다.

Windows 런타임 앱용 JavaScript 프로젝트 템플릿에는 탐색 모델, 데이터 모델, 보기 상태 처리 등에 대한 구현 세부 정보가 요약되어 있습니다.
Windows 스토어 앱용 JavaScript 항목 템플릿: 개발 시간을 줄일 수 있는 일반적으로 사용되는 코드가 포함되어 있습니다.

단일 페이지 탐색 사용

PageControl 개체가 단일 페이지 탐색을 지원하는 방법에 대한 세부 정보로 이동합니다. 페이지 컨트롤 추가에서는 컨트롤을 구현하는 다양한 방법에 대해 설명합니다.

샘플에서 찾기:PageControl은 \js\navigator.js 파일에서 정의되며 \pages\home\home.js 및 \pages\page2\page2.js에서 사용됩니다.

UI 및 이미지 추가

응용 프로그램 매니페스트의 응용 프로그램 UI 탭에서 앱의 이미지 리소스(시작 화면, 타일 이미지 등의 시각적 자산)를 지정합니다. 이렇게 하려면 솔루션 탐색기에서 package.appxmanifest를 엽니다. 매니페스트 디자이너 사용을 참조하세요.

참고 도우미 앱에는 Windows 스토어 요구 사항을 충족하는 자리 표시자 이미지가 포함되어 있습니다. 데모를 위해 다양한 대비 설정과 프랑스어(fr-FR) 지역화로 접근성을 지원하는 추가 이미지가 템플릿에 포함되었습니다. 대부분의 이미지는 여러 해상도로 제공됩니다.

	앱을 나타내는 이미지 선택 가능한 최상의 환경을 제공하는 이미지를 지정합니다. 각기 다른 화면 해상도에 맞게 크기 조정된 버전을 포함합니다. 앱이 스토어 인증을 통과하려면 기본 이미지 집합이 필요합니다. 스토어 로고 검색 결과에는 앱 목록과 함께 표시되고 목록 페이지에는 앱 설명과 함께 표시됩니다. 로고 시작 화면의 정사각형 앱 타일에 표시됩니다. 타일 및 배지 만들기 및 앱 타일 및 배지 샘플을 참조하세요. 작은 로고 시작 화면에 반환된 검색 결과에는 앱 표시 이름과 함께 작은 로고가 표시됩니다. 검색 가능한 앱 목록과 축소된 시작 페이지에도 나타납니다. 시작 화면 앱을 시작할 때 표시되고, 앱을 조작할 준비가 되면 해제됩니다. 시작 화면은 이미지와 배경색으로 구성되며, 둘 다 사용자 지정할 수 있습니다. 시작 화면 추가 및 시작 화면 샘플을 참조하세요.
	파일 또는 이미지 리소스 추가 파일 리소스의 이름을 지정하고 폴더로 구성할 때는 다음 지침을 따르세요.
	각기 다른 해상도에 이미지 최적화 앱에 대한 이미지 리소스를 만들고 프로젝트에 추가한 다음 응용 프로그램 매니페스트에서 식별합니다.
	앱 바 추가 요청 시 탐색, 명령 및 도구를 사용자에게 제공합니다. 앱 바에는 사용자의 컨텍스트(일반적으로 현재 페이지 또는 현재 선택) 관련 명령이 표시됩니다. 필요에 따라 사용자 지정합니다. 자세한 예제는 HTML AppBar 컨트롤 샘플을 참조하세요.
	앱 설정 추가 사용자의 현재 컨텍스트와 관련된 모든 설정에 액세스할 수 있도록 합니다. 필요에 따라 사용자 지정합니다. 응용 프로그램 설정 샘플을 참조하세요. 도우미 앱에는 설정 참 메뉴에서 액세스할 수 있는 개인 정보 취급 방침과 도움말 콘텐츠가 둘 다 포함되어 있습니다.