플랫 탐색 전체 프로세스(HTML)

아티클
12/11/2015

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

페이지 수가 적고 해당 정보가 계층 구조로 구성되어 있지 않은 경우 Windows 스토어 앱에 플랫 탐색 패턴을 사용합니다. 즉 페이지, 탭 및 모드가 논리적 피어인 경우입니다.

앱은 사용자가 위치나 이유가 아니라 앱에 있는 콘텐츠의 중요성에 집중하도록 해야 합니다. 앱에 계층과 구조가 필요한 시나리오, 많은 페이지 또는 높은 정보 밀도가 없는 경우 사용자가 페이지 간에 빠르게 탐색할 수 있는 플랫 구조를 고려해 보세요. 그러나 앱이 기본 시퀀스나 순서로 트래버스해야 하는 구조로 구성된 다양한 환경과 콘텐츠를 제공하는 경우에는 계층적 탐색 전체 프로세스를 참조하세요.

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

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

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

샘플 앱의 와이어프레임

이러한 이미지에서 볼 수 있듯이, 이 패턴으로 정의된 플랫 콘텐츠 구조에서는 앱의 각 페이지를 다른 모든 페이지에서 액세스할 수 있어야 합니다. 사용자는 분기 없이 페이지 간에 앞뒤로 임의로 이동할 수 있습니다.

플랫 탐색 앱에서 페이지 간에 빠르게 전환하려면 위의 와이어프레임에 표시된 탐색 앱 바를 사용합니다. 이 앱 바는 사용자가 위쪽 또는 아래쪽 가장자리에서 살짝 밀 때(마우스 오른쪽 단추 클릭, Windows 로고 키+Z 또는 키보드 메뉴 키) 화면 위쪽 가장자리에 표시될 수 있는 임시 요소입니다.

다음은 계산기 앱에서 플랫 탐색 패턴을 구현하는 방법입니다. 이 앱에서 표준 임시 탐색 모음 대신 영구적 탐색 모음을 사용하는 방법을 확인하세요. 다음은 Windows 스토어 앱 플랫폼이 앱에 고유한 특정 시나리오에 맞게 조정되는 방법의 예제입니다.


표준 계산기 페이지	공학용 계산기 페이지	변환기 계산기 페이지

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

플랫 탐색 샘플

기본 플랫 탐색 샘플을 시작점으로 하여 해당 콘텐츠와 환경을 채우세요. 이 샘플은 기본 Windows 스토어 인증 요구 사항을 모두 충족하는 앱에서 여기에 설명된 원칙, 권장 사항 및 구현 세부 정보를 보여 줍니다. 아래에 표시된 것처럼 이 샘플에는 앱을 소개하는 홈페이지와 제품을 레이아웃할 수 있는 두 번째 페이지가 포함되어 있습니다. 지침을 실제로 적용하는 방법을 확인하세요. 이 샘플을 통해 영감을 얻고 시간을 절약할 수 있습니다.

페이지 1을 표시하는 샘플 앱

페이지 1과 탐색 앱 바를 표시하는 샘플 앱

페이지 2를 표시하는 샘플 앱

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 컨트롤 샘플을 참조하세요.
	앱 설정 추가 사용자의 현재 컨텍스트와 관련된 모든 설정에 액세스할 수 있도록 합니다. 필요에 따라 사용자 지정합니다. 응용 프로그램 설정 샘플을 참조하세요. 도우미 앱에는 설정 참 메뉴에서 액세스할 수 있는 개인 정보 취급 방침과 도움말 콘텐츠가 둘 다 포함되어 있습니다.