언어: HTML | XAML

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

Applies to Windows only

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

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

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

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

여기에 포함된 지침, 작업 및 샘플 코드는 JavaScript로 작성한 Windows 스토어 앱 개발과 관련이 있습니다. C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱 버전의 경우 계층적 탐색 전체 프로세스를 참조하세요.

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

계층적 탐색 패턴의 기본 구현

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

 

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

페이지설명

허브

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

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

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

섹션

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

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

항목/세부 정보

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

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

 

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

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

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

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

사전 요구 사항

JavaScript로 작성한 Windows 스토어 앱을 처음 개발하는 경우 다음 항목을 검토하여 여기서 설명하는 기술에 대해 알아보세요.

계층적 탐색 샘플

Microsoft는 아래에서 참조하는 항목에 포함된 샘플과 코드 조각 외에도 계층적 탐색 샘플을 개발했습니다. 이 Windows 스토어 앱 샘플은 기본 Windows 스토어 인증 요구 사항을 모두 충족 하는 앱에서 여기에 설명된 원칙, 권장 사항 및 구현 세부 정보를 보여 줍니다.

지침을 실제로 적용하는 방법을 확인하세요. 이 샘플을 통해 영감을 얻고 시간을 절약할 수 있습니다.

다음은 샘플에 대한 간단한 설명입니다.

샘플에는 필요에 따라 사용자 지정할 수 있는 Windows 스토어 인증 규격 셸 또는 템플릿이 있습니다. 이것을 시작점으로 하여 해당 콘텐츠와 환경을 채우세요.

다음은 샘플의 기본 기능을 보여 주는 샘플 앱의 스크린샷입니다. 여기에는 다양한 섹션이 포함된 허브 페이지, 데이터 기반 섹션 페이지(섹션 3), 해당 섹션의 항목 세부 정보 페이지가 포함되어 있습니다. 필요에 따라 추가 페이지를 사용하여 앱을 확장하세요.

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

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

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

다음은 계층적 탐색 모델을 사용하여 Windows 스토어 앱을 빌드하는 모범 사례를 따르는 기본 앱 빌드에 도움이 되는 작업의 개요입니다. 탐색 정보 및 스토어 규정 준수에 필요한 최소 기능에 대해 설명합니다. 각 작업은 세부 정보가 포함된 해당 항목으로 연결됩니다. 경우에 따라 도우미 샘플의 관련 코드도 식별됩니다.

Windows 스토어 앱을 처음 개발하거나 스토어 규정 준수의 여러 측면을 잘 모르는 경우 각 단계를 검토하는 것이 좋습니다. 관련 세부 정보가 함께 표시됩니다.

Windows 스토어 규정 준수

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

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

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

다음은 개발자를 안내하고 작은(또는 작지 않은) 앱을 마켓에 출시하는 데 도움이 되는 일반적인 포인터입니다.

시작 아이콘

등록

아직 없는 경우 Microsoft 계정과 Windows 스토어 개발자 계정을 받으세요. Windows 스토어에 앱을 올리려면 둘 다 필요합니다.

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

단계 아이콘

앱 만들기

플랫 탐색 앱을 만들려면 다음 단계를 따르세요. 함께 제공된 플랫 탐색 패턴 템플릿으로 시작하거나 Microsoft Visual Studio에서 허브 앱 Windows 스토어 프로젝트를 만들 수 있습니다.

단계 아이콘

앱 마케팅

계정을 설정하고 앱을 빌드했으면 Windows 스토어에 올릴 수 있습니다.

제출하기 전에 올바른 앱 사용자를 대상으로 지정합니다.

배포 프로세스를 시작합니다.

Windows 스토어 전체에서 사용할 수 있는 프로모션 도구를 통해 고객이 앱을 검색할 수 있도록 도와줍니다.

원격 분석 데이터를 사용하여 사용 현황 데이터를 분석하고 앱 품질 및 성능을 개선합니다.

 

이제 Windows 스토어 앱에서 계층적 탐색 패턴의 UI와 기능을 구현하는 방법을 자세히 살펴보겠습니다.

도우미 샘플은 다음 항목을 모두 구현하지만 원활한 진행을 위해 여기서 코드를 단계별로 수행하지는 않습니다. 각 단계에는 코드를 빠르게 찾을 수 있도록 "샘플에서 찾기" 설명이 있습니다.

이러한 정보 중 일부는 앱에 적용되지 않을 수도 있습니다. 적용되는 정보를 선택합니다.

탐색 개념

앱을 마켓에 출시하기 위한 기본 사항을 설명했으므로 이제 Windows 스토어 앱에서 자주 사용되고 Microsoft Visual Studio 2013에 템플릿으로 포함된 다양한 탐색 패턴을 살펴보겠습니다. 탐색 패턴은 다음과 같습니다.

단계 아이콘

탐색 패턴

앱과 앱 콘텐츠에 가장 적합한 탐색 패턴을 선택합니다.

계층적 탐색 패턴 도우미 샘플에서 여기에 설명된 개념을 보여 주므로 샘플을 다운로드하여 살펴보세요.

계층적 탐색 패턴이 앱에 가장 적합한 구조임을 확인한 후 이러한 단계를 계속 따르거나, 이 샘플을 바로 고유한 앱 디자인 및 개발의 템플릿으로 사용합니다.

단계 아이콘

영감

다음 사례 연구와 아이디어 책에 포함된 탐색 예제를 통해 영감을 얻으세요.

 

탐색 구현

단계 아이콘

이 항목에 대한 도우미 샘플은 Visual Studio의 허브 앱 프로젝트 템플릿에서 파생되므로 다음 항목을 검토하는 것도 도움이 됩니다.

  • Windows 스토어 앱용 JavaScript 프로젝트 템플릿

    JavaScript로 작성한 Windows 스토어 앱 템플릿을 요약합니다. 여기에는 탐색 모델, 데이터 모델, 보기 상태 처리 등에 대한 구현 정보가 포함됩니다.

    여기서 강조하는 탐색 모델은 일반적으로 사용자 작업에 대한 응답으로 HTML 페이지를 하나의 앱 전체 컨텍스트에 로드합니다. 이것을 단일 페이지 탐색이라고도 합니다.

  • Windows 스토어 앱용 JavaScript 항목 템플릿

    자주 사용하는 코드가 포함된 앱 파일로, 이 파일을 프로젝트 템플릿에 추가하면 개발 시간을 줄일 수 있습니다.

단계 아이콘

단일 페이지 탐색 사용

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

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

 

이미지 리소스

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

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

각기 다른 해상도에 이미지 최적화

앱에 대한 이미지 리소스를 만들고 프로젝트에 추가한 다음 응용 프로그램 매니페스트에서 식별합니다.

단계 아이콘

앱 이미지 선택

가능한 최상의 환경을 제공하는 이미지를 지정합니다. 각기 다른 화면 해상도에 맞게 크기 조정된 버전을 포함합니다.

앱이 스토어 인증을 통과하려면 기본 이미지 집합이 필요합니다.

  • 스토어 로고

    검색 결과에는 앱 목록과 함께 표시되고 목록 페이지에는 앱 설명과 함께 표시됩니다.

  • 로고

    시작 화면의 정사각형 앱 타일에 표시됩니다. 타일 및 배지 만들기앱 타일 및 배지 샘플을 참조하세요.

  • 작은 로고

    시작 화면에 반환된 검색 결과에는 앱 표시 이름과 함께 작은 로고가 표시됩니다. 검색 가능한 앱 목록과 축소된 시작 페이지에도 나타납니다.

  • 시작 화면

    앱을 시작할 때 표시되고, 앱을 조작할 준비가 되면 해제됩니다. 시작 화면은 이미지와 배경색으로 구성되며, 둘 다 사용자 지정할 수 있습니다. 시작 화면 추가시작 화면 샘플을 참조하세요.

단계 아이콘

빠른 시작: 파일 또는 이미지 리소스 사용

파일 리소스의 이름을 지정하고 폴더로 구성할 때는 다음 지침을 따르세요.

 

앱 바

도우미 앱은 표준 앱 바에 단일 명령을 구현합니다.

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

단계 아이콘

앱 바 추가

요청 시 탐색, 명령 및 도구를 사용자에게 제공합니다. 앱 바에는 사용자의 컨텍스트(일반적으로 현재 페이지 또는 현재 선택) 관련 명령이 표시됩니다. 필요에 따라 사용자 지정합니다. HTML AppBar 컨트롤 샘플을 참조하세요.

 

로밍 중인 응용 프로그램 데이터

단계 아이콘

앱 데이터 액세스

런타임 상태, 사용자 기본 설정, 기타 설정 등 응용 프로그램 데이터를 관리합니다. 앱이 실행 중일 때 이 데이터의 만들기, 읽기, 업데이트 및 삭제가 수행됩니다.

단계 아이콘

빠른 시작: 로밍 중인 응용 프로그램 데이터

여러 장치에서 앱 데이터 및 상태를 동기화된 상태로 유지하고 다른 장치에서 사용자의 설정 작업 및 반복 작업을 줄입니다. Windows는 업데이트된 데이터를 클라우드로 복제하고, 앱이 설치된 다른 장치에 데이터를 동기화합니다.

 

설정

도우미 앱에는 설정 참 메뉴에서 액세스할 수 있는 개인 정보 취급 방침과 도움말 콘텐츠가 둘 다 포함되어 있습니다. 앱에 개인 정보 취급 방침이 필요한 경우 Windows 스토어에서 앱의 설명 페이지에 표시해야 합니다. 자세한 내용은 Windows 및 Windows Phone 스토어 정책을 참조하세요.

단계 아이콘

앱 설정 추가

사용자의 현재 컨텍스트와 관련된 모든 설정에 액세스할 수 있도록 합니다. 필요에 따라 사용자 지정합니다. 응용 프로그램 설정 샘플을 참조하세요.

단계 아이콘

앱 설명

앱의 기능을 명확하게 나타내도록 앱 설명을 가능한 한 자세히 지정합니다.

 

세계화

일관성 있게 세계화하고 스크린샷을 통해 앱이 지역화되었음을 표시합니다. 언어는 마켓과 다르다는 점을 기억하세요. 자세한 내용은 앱 세계화를 참조하세요.

단계 아이콘

앱 리소스 및 지역화

리소스를 독립적으로 유지 관리 및 지역화하고 각기 다른 크기 조정 인수, 접근성, 기타 사용자 및 컴퓨터 컨텍스트에 맞게 사용자 지정할 수 있도록 Windows 스토어 앱을 디자인합니다. 응용 프로그램 리소스 및 지역화 샘플(영문)을 참조하세요.

단계 아이콘

패키지 매니페스트 지역화

앱의 표시 이름, 설명 및 응용 프로그램 매니페스트에 설명된 기타 식별 기능을 지역화합니다.

단계 아이콘

앱 세계화

추가 언어, 마켓, 문화권 및 지역에 맞게 소프트웨어를 조정합니다.

 

접근성

접근성 시나리오에 맞게 앱을 특별히 엔지니어링 및 테스트한 경우에만 앱을 접근성 있음으로 선언합니다.

단계 아이콘

앱의 접근성 테스트.

Windows 8용 Windows SDK(소프트웨어 개발 키트)에 포함되어 있으며 앱의 접근성 검증에 도움이 되는 접근성 테스트 도구를 검색합니다.

단계 아이콘

Windows 스토어에 접근성 있는 앱으로 등록

접근성에 대해 앱을 테스트한 경우 판매 세부 정보 페이지에서 접근성 확인란을 선택하여 이를 표시합니다.

 

마무리

스토어 요구 사항 아이콘

Windows 앱 인증 키트를 사용하여 앱 인증을 받습니다.

Windows 앱 인증 키트를 실행하여 앱이 Windows 스토어 요구 사항을 충족하는지 확인합니다. 앱에 주요 기능을 추가할 때마다 이 작업을 수행하세요.

중지 아이콘

완료되었습니다. 컴팩트하고 단순하며 탐색하기 쉬운 앱이 구현되었습니다.

마음껏 성공을 누리세요.

 

더 자세히 알고 싶으세요?

Windows 스토어 앱 계획

사용자에게 제공하려는 환경에 대해 자세히 알아봅니다.

접근성을 위한 디자인

사용자의 다양한 능력, 장애 및 기본 설정에 대해 자세히 알아봅니다.

다양한 양식 요소에 맞는 디자인

각기 다른 장치, 입력 방법 및 화면 방향 처리에 대해 자세히 알아봅니다.

UX 지침 인덱스

사용자 환경 지침의 전체 목록을 찾아봅니다.

샘플

 

 

표시:
© 2015 Microsoft