설명서AEM 6.4Mobile 안내서

앱 콘솔을 사용한 앱 만들기 및 편집 creating-and-editing-apps-using-the-apps-console

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • User
CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.
NOTE
단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: React)이 필요한 프로젝트에 SPA 편집기를 사용하는 것이 좋습니다. 자세히 알아보기.

AEM 모바일 애플리케이션 개발 프로세스는 다양한 전문 지식을 가진 사용자가 모바일 애플리케이션 개발에 기여한다고 인식합니다. 다음 프로세스 맵은 컨텐츠 작성자와 애플리케이션 개발자가 작업을 수행하는 일반적인 순서를 보여줍니다.

chlimage_1-10

이 페이지에 마케터 작업을 수행하는 방법에 대한 정보가 표시됩니다. 개발자 작업에 대한 자세한 내용은 PhoneGap 애플리케이션 빌드를 참조하십시오.

모바일 애플리케이션의 구조 the-structure-of-mobile-applications

AEM Mobile은 모바일 애플리케이션을 만들기 위한 Phonegap 앱 블루프린트를 제공합니다. 블루프린트는 사용자가 만드는 응용 프로그램의 구조를 정의합니다. 응용 프로그램은 다음 항목으로 구성됩니다.

  • 루트 페이지입니다.
  • 애플리케이션의 언어 변형입니다.
  • 언어 변형의 홈 페이지입니다.

Phonegap 앱의 루트 the-root-of-a-phonegap-app

AEM에서 만드는 모바일 애플리케이션의 루트 페이지가 앱 콘솔에 표시됩니다.

루트 페이지는 애플리케이션을 만들 때 지정된 애플리케이션의 대상 경로 속성 아래에 저장됩니다(기본 경로는 /content/phonegap/apps). 페이지 이름은 애플리케이션의 이름 속성입니다. 예를 들어 이름이 지정된 사이트의 루트 페이지에 대한 기본 URL입니다 myphonegapapp is http://localhost:4502/content/phonegap/apps/myphonegapapp.html.

chlimage_1-146

PhoneGap 앱의 언어 변형 the-language-variation-of-a-phonegap-app

루트 페이지의 첫 번째 하위 페이지는 애플리케이션의 언어 변형입니다. 각 페이지의 이름은 애플리케이션을 만들 언어입니다. 예를 들어, English 는 애플리케이션의 영어 변형의 이름입니다.

참고: 기본 PhoneGap 블루프린트는 영어 애플리케이션만 만듭니다. 개발자는 더 많은 언어 변형을 만들 수 있도록 블루프린트를 수정할 수 있습니다.

chlimage_1-147

언어 페이지는 다음 두 가지 용도로 사용됩니다.

  • 페이지 컨텐츠는 애플리케이션의 언어 변형을 위한 스파시 페이지입니다.
  • 페이지 속성은 콘텐츠 업데이트 요청에 사용할 URL과, 클라우드 빌드 및 Adobe Analytics 서비스 통합에 연결하는 방법에 대한 정보 등 애플리케이션의 여러 디자인 측면을 제어합니다.

chlimage_1-148

홈 페이지 the-home-page

응용 프로그램을 열 때 응용 프로그램의 언어 변형의 홈 페이지나 index.html 페이지가 나타납니다. 홈 페이지는 응용 프로그램의 여러 페이지에 대한 링크 메뉴를 사용자에게 제공합니다. 단락 시스템을 사용하면 컨텐츠를 만들기 위해 페이지에 구성 요소를 추가할 수 있습니다.

모바일 애플리케이션 만들기 creating-a-mobile-application

모바일 애플리케이션은 페이지 구조 및 속성을 정의하는 블루프린트를 기반으로 합니다. 다음 응용 프로그램 속성을 구성할 수 있습니다.

  • 제목: 애플리케이션 제목입니다.
  • 대상 경로: 애플리케이션이 저장되는 저장소의 위치입니다. 앱 이름을 기반으로 경로를 만들려면 기본값을 그대로 둡니다.
  • 이름: 기본값은 공백 문자가 제거된 제목 속성 값입니다. CQ 내에서 응용 프로그램을 참조하는 데 사용됩니다. 예를 들어 응용 프로그램을 나타내는 저장소 노드의 경우입니다.
  • 설명: 응용 프로그램에 대한 설명입니다.
  • 서버 URL: OTA(Over-the-Air) 컨텐츠를 제공하는 URL은 응용 프로그램에 대한 업데이트를 제공합니다. 기본값은 외부 도우미 서비스에서 가져온 응용 프로그램을 만드는 데 사용되는 인스턴스의 게시 서버 URL입니다. 참고: 인증이 필요한 작성자가 아닌 게시 서버 인스턴스여야 합니다.

응용 프로그램 축소판으로 사용할 이미지 파일을 제공하고, 사용할 PhoneGap Build 구성을 선택한 다음, 사용할 Mobile App Analytics 구성을 선택할 수도 있습니다. 이 이미지는 Experience Manager의 모바일 앱 콘솔 내에서 모바일 애플리케이션을 나타내는 축소판으로만 사용됩니다.

빌드 클라우드 서비스를 사용하고 Adobe Mobile Services SDK 플러그인을 앱에 통합하기 위한 추가(및 선택 사항) 탭이 있습니다.

  • 빌드: 여기에서 구성 관리를 클릭하고 build.phonegap.com build 서비스를 설정합니다. 그런 다음 드롭다운에서 새로 만든 PhoneGap 빌드 클라우드 서비스를 선택할 수 있습니다.
  • Analytics: 구성 관리 를 클릭하고 Adobe Mobile Services SDK 클라우드 서비스. 그런 다음 드롭다운에서 새로 만든 Mobile Service를 선택하여 모바일 앱에 통합할 수 있습니다.
NOTE
개발자는 AEM PhoneGap Starter Kit를 사용하여 앱을 만들고 콘솔에 추가할 수 있습니다.

다음 절차에서는 Touch UI를 사용하여 모바일 애플리케이션을 만듭니다.

  1. 레일에서 앱을 클릭합니다.

  2. 만들기 아이콘을 클릭하거나 탭합니다.

  3. (선택 사항) 고급 탭에서 응용 프로그램에 대한 설명을 제공하고 필요한 경우 서버 URL을 변경합니다.

  4. (선택 사항) PhoneGap Build을 사용하여 응용 프로그램을 컴파일하는 경우, 빌드 탭에서 사용할 구성을 선택합니다.

    PhoneGap 빌드 구성을 만들려면 구성 관리를 클릭합니다.

  5. (선택 사항) SiteCatalyst을 사용하여 애플리케이션 활동을 추적하는 경우 Analytics 탭에서 사용할 구성을 선택합니다.

    모바일 앱 구성을 만들려면 구성 관리를 클릭합니다.

  6. (선택 사항) 응용 프로그램 아이콘을 제공하려면 [찾아보기] 단추를 클릭하고 파일 시스템에서 이미지 파일을 선택한 다음 [열기]를 클릭합니다.

  7. 만들기를 클릭합니다.

모바일 애플리케이션의 속성 변경 changing-the-properties-of-a-mobile-application

모바일 애플리케이션을 만든 후 속성을 변경할 수 있습니다.

제목, 설명 및 아이콘 변경 change-the-title-description-and-icon

  1. 레일에서 앱을 클릭하거나 탭합니다.

  2. 구성할 응용 프로그램을 선택하고 페이지 속성 보기 아이콘을 클릭합니다.

  3. 속성 값을 변경하려면 편집 아이콘을 클릭하거나 탭합니다.

  4. 기본 및 고급 속성을 구성한 다음 완료 아이콘을 클릭하거나 탭합니다.

응용 프로그램의 언어 변형 구성 configure-a-language-variation-of-the-application

  1. 레일에서 앱을 클릭하거나 탭합니다.

  2. 앱 Admin Console 내에서 편집할 모바일 애플리케이션을 자세히 살펴보려면 을 클릭합니다. 구성할 응용 프로그램의 언어 버전을 선택하고 응용 프로그램 속성 보기 아이콘을 클릭합니다.

  3. 속성 값을 변경하려면 편집 아이콘을 클릭하거나 탭합니다.

  4. 기본, 고급, 빌드 및 Analytics 탭에서 속성을 구성한 다음 완료 아이콘을 클릭하거나 탭합니다.

모바일 애플리케이션 컨텐츠 작성 authoring-the-content-of-a-mobile-application

모바일 애플리케이션을 만든 후 애플리케이션 UI로 사용되는 컨텐츠를 추가합니다.

  1. 레일에서 앱을 클릭하거나 탭합니다.
  2. 애플리케이션을 클릭하거나 탭한 다음, 영어를 클릭하거나 탭합니다.
  3. 홈 페이지를 편집하거나 필요에 따라 하위 페이지를 추가합니다.

모바일 애플리케이션으로 컨텐츠 이동 moving-content-to-mobile-applications

AEM 게시 인스턴스의 컨텐츠 동기화 캐시가 모바일 애플리케이션의 컨텐츠 저장소로 사용됩니다.

  • 개발자가 애플리케이션을 컴파일할 때 콘텐츠 동기화 캐시의 콘텐츠가 애플리케이션에 포함됩니다.
  • 설치된 모바일 애플리케이션에서 애플리케이션 컨텐츠를 업데이트할 수 있도록 캐시의 콘텐츠를 사용할 수 있습니다.

모바일 응용 프로그램에는 업데이트된 응용 프로그램 콘텐츠를 다운로드하고 설치하는 업데이트 명령이 포함됩니다. 응용 프로그램 인스턴스가 업데이트 요청을 보낼 때 Content Sync는 마지막으로 응용 프로그램을 업데이트하거나 설치한 이후 변경된 콘텐츠를 결정하고 새 콘텐츠를 제공합니다.

chlimage_1-149

업데이트된 컨텐츠를 애플리케이션에서 사용할 수 있도록 하려면 컨텐츠 동기화 캐시를 업데이트합니다. 캐시를 처음 업데이트하면 게시된 모든 콘텐츠가 추가됩니다. 이후 업데이트에서는 이전 업데이트 이후 변경된 게시된 컨텐츠만 추가합니다.

또한 컨텐츠 동기화는 업데이트가 발생하는 시점을 추적합니다. 이 정보를 사용하면 콘텐츠 동기화가 모바일 애플리케이션에 전송할 캐시 업데이트를 결정할 수 있습니다.

캐시를 업데이트할 인스턴스에서 다음 절차를 수행합니다. 예를 들어, 애플리케이션이 게시 인스턴스에서 업데이트를 요청하는 경우 게시 인스턴스에서 절차를 수행합니다.

  1. 레일에서 앱을 클릭하거나 탭한 다음, 애플리케이션을 클릭하거나 탭합니다.

  2. 시작 페이지를 선택한 다음 캐시 업데이트 아이콘을 클릭하거나 탭합니다.

앱 템플릿 사용 using-app-templates

이 기능은 앱 6.1 기능 팩 2에서 사용할 수 있으며, AEM 내에서 새 앱을 만들 때 기존 앱 템플릿을 쉽게 활용할 수 있는 방법을 제공합니다.

앱 템플릿이란 무엇입니까? 앱의 기준선 또는 기반을 나타내는 페이지 템플릿 및 구성 요소의 컬렉션으로 간주하십시오.
다른 앱의 템플릿을 기반으로 새 앱을 만들 때 앱이 만들어진 시작점을 나타내는 앱이 표시됩니다.

이 기능을 사용하려면 기존 모바일 앱 템플릿(또는 앱 템플릿이 있는 앱)이 설치되어 있어야 합니다.

최신 AEM Apps 6.1 샘플 패키지에는 앱 템플릿이 있는 업데이트된 버전의 Geometrixx 앱이 포함되어 있습니다. 또는 템플릿을 제공하는 StarterKit을 설치할 수 있습니다.

앱 템플릿을 기반으로 새 앱을 만드는 단계:

  1. 최신 AEM Apps 6.1 기능 팩과 참조 샘플 패키지가 설치되어 있는지 확인합니다
  2. 왼쪽 레일에서 앱을 클릭합니다.

chlimage_1-1

  1. 맨 위에 있는 + 만들기 단추를 클릭하고 앱 만들기 를 선택합니다.
  2. 앱 템플릿 목록이 표시되면 다음 중 하나를 선택합니다.

chlimage_1-2

  1. 다음을 클릭합니다.

  2. 앱 ID와 제목을 제공하지만, 이름과 설명을 포함할 수도 있습니다.

    1. 또한 AEM 자산을 탐색하여 PNG(지원되는 PhoneGap 아이콘 형식)를 아이콘으로 제공할 수 있습니다.
    2. 앱 관리 타일에서 앱을 만든 후 이러한 모든 필드를 편집할 수 있습니다. 앱 ID를 제외하고 앱 ID가 설정되면 변경할 수 없습니다.

chlimage_1-150

  1. 만들기 단추를 클릭하면 완료 (앱 카탈로그 보기로 돌아가기) 또는 앱 관리 (앱 대시보드 열기)라는 두 가지 옵션이 표시됩니다.
  2. 만들어진 새 앱은 앱 카탈로그에 나열됩니다.

chlimage_1-3

  1. 앱을 클릭하여 엽니다. 기존 앱의 템플릿을 기반으로 새 앱을 만들었습니다.
NOTE
AEM에서 Geometrixx Outdoors 참조 앱 패키지를 제거하고 해당 템플릿을 기반으로 만든 앱이 있는 경우 해당 앱이 더 이상 작동하지 않습니다. Geometrixx Outdoors 앱은 제거할 수 있지만, 다른 모바일 애플리케이션에서 사용하는 경우 앱 템플릿을 계속 사용해야 합니다.

샘플 Geometrixx Outdoors 앱 탐색 exploring-the-sample-geometrixx-outdoors-app

Geometrixx Outdoors 앱은 기본 PhoneGap 애플리케이션 블루프린트와 샘플 모바일 구성 요소의 기능을 보여 주는 샘플 PhoneGap 애플리케이션입니다.

애플리케이션을 열려면 레일에서 모바일 애플리케이션 을 클릭한 다음 Geometrixx Outdoors 앱 을 선택합니다.

일반적인 페이지 기능 - Geometrixx 모바일 앱 common-page-features-geometrixx-mobile-app

모바일 앱의 각 페이지에는 다음 기능이 포함되어 있습니다.

  • 상위 페이지로 돌아가도록 하는 뒤로 단추. 뒤로 단추는 홈 페이지에 나타나지 않습니다.

  • 명령 및 링크 메뉴를 제공하는 확장 가능한 레일:

    • 위치 페이지를 엽니다.
    • 장바구니를 엽니다.
    • 로그인합니다.
    • 애플리케이션을 업데이트합니다.

  • 구성 요소를 추가하고 컨텐츠를 만드는 단락 시스템입니다.

홈 페이지 - Geometrixx 모바일 앱 the-home-page-geometrixx-mobile-app

홈 페이지의 컨텐츠는 다음 탐색 도구로 구성됩니다.

  • 톱니바퀴, 검토, 뉴스 및 정보 미국 하위 페이지에 대한 링크를 제공하는 메뉴 목록 구성 요소입니다.
  • 하위 페이지를 표시하는 밀기 회전판 구성 요소입니다.

톱니바퀴 페이지 - Geometrixx 모바일 앱 the-gear-page-geometrixx-mobile-app

톱니바퀴 페이지에서는 사용자에게 제품 페이지에 대한 액세스 권한을 제공합니다. 메뉴 목록 구성 요소는 톱니바퀴 페이지의 하위 페이지에 액세스할 수 있습니다. 하위 페이지는 웹 사이트에서 제공하는 제품 카테고리입니다.

  • 시즌
  • 의류
  • 성별
  • 활동

각 카테고리 페이지에서는 톱니바퀴 페이지와 동일한 컨텐츠 구조를 사용합니다. 회전판은 제품의 하위 카테고리인 하위 페이지에 액세스할 수 있도록 합니다. 하위 카테고리 페이지에는 제품 페이지에 대한 링크를 제공하는 제품 목록이 포함되어 있습니다.

제품 페이지 - Geometrixx 모바일 앱 the-products-page-geometrixx-mobile-app

제품 페이지 및 하위 페이지의 계층 은 제품 페이지에 대한 분류 시스템을 구현합니다. 계층의 각 분기에서 가장 낮은 페이지는 제품 구성 요소를 포함하는 제품 페이지입니다.

제품 페이지는 애플리케이션 사용자가 사용할 수 없습니다. 톱니바퀴 페이지에서는 각 제품 페이지에 액세스할 수 있습니다.

검토 페이지 - Geometrixx 모바일 앱 the-reviews-page-geometrixx-mobile-app

뒤로 단추를 포함합니다. 단락 시스템에서 구성 요소를 추가할 수 있습니다.

애플리케이션을 사용하는 경우 [검토] 페이지는 [영어] 페이지의 회전판에서 사용할 수 있습니다.

뉴스 페이지 - Geometrixx 모바일 앱 the-news-page-geometrixx-mobile-app

뒤로 단추를 포함합니다. 단락 시스템에서 구성 요소를 추가할 수 있습니다.

애플리케이션을 사용하는 경우 영어 페이지의 회전판에서 뉴스 페이지를 사용할 수 있습니다.

정보 페이지 - Geometrixx 모바일 앱 the-about-us-page-geometrixx-mobile-app

정보 페이지에는 서버 2개의 열 행 구성 요소가 포함되어 있습니다. 각 열에는 이미지 또는 텍스트 구성 요소가 포함됩니다. 구성 요소는 편집할 수 있으며 단락 시스템에서 구성 요소를 추가할 수 있습니다.

애플리케이션을 사용하는 경우 영어 페이지의 회전판에서 미국 정보 페이지를 사용할 수 있습니다.

위치 페이지 - Geometrixx 모바일 앱 the-locations-page-geometrixx-mobile-app

위치 페이지에는 위치 구성 요소가 포함되어 있습니다.

응용 프로그램을 사용하는 경우 [위치] 페이지는 [영어] 페이지의 메뉴 목록에서 사용할 수 있습니다.

샘플 모바일 구성 요소 sample-mobile-components

모바일 애플리케이션의 페이지를 작성할 때 사이드 킥에서 여러 구성 요소를 즉시 사용할 수 있습니다. 구성 요소가 PhoneGap 구성 요소 그룹에 속합니다.

회전판 밀기 구성 요소는 사이트 페이지를 표시하고 탐색하는 도구입니다. 구성 요소에는 페이지 링크 목록 위에 있는 페이지의 이미지를 순환하는 회전판이 포함되어 있습니다. 구성 요소를 편집하여 노출할 페이지와 회전 메뉴의 동작을 지정합니다.

회전판에 이미지가 특정 방식으로 이미지와 연관된 페이지의 경우 나타납니다. 페이지가 이미지와 연결되어 있지 않으면 링크 목록만 나타납니다.

chlimage_1-151

회전판 속성 탭

회전판의 동작을 구성합니다.

  • 재생 속도: 다음 이미지를 표시하기 전에 각 이미지가 표시되는 시간(밀리초)입니다.
  • 전환 시간: 이미지 전환에 대한 애니메이션의 기간(밀리초)입니다.
  • 컨트롤 스타일: 이미지 간을 이동하기 위해 제공되는 컨트롤 유형입니다.

목록 속성 탭

페이지 목록이 생성되는 방식을 지정합니다.

  • 목록 작성 방법: 회전판에 포함할 페이지를 지정하는 데 사용하는 방법입니다. 페이지 목록 작성 을 참조하십시오.
  • 정렬 기준: 페이지 목록을 정렬하는 데 사용할 페이지 속성을 선택합니다. 예를 들어 jcr:title 을 선택하여 제목을 기준으로 페이지를 사전순으로 정렬합니다.
  • 제한: 포함할 최대 페이지 수입니다. 이 속성은 페이지 목록을 작성하는 검색 기반 방법에 적합합니다.

페이지 목록 작성 building-the-page-list

밀기 회전판 구성 요소는 다음을 사용하여 빌드 목록에 대한 값을 제공합니다. 편집 대화 상자는 선택한 값에 따라 변경됩니다.

하위 페이지

구성 요소는 특정 페이지의 모든 하위 페이지를 나열합니다. 이 값을 선택한 후 하위 페이지 탭에서 페이지를 선택하거나 현재 페이지의 하위 페이지를 나열할 값을 지정하지 않습니다.

고정 목록

포함 페이지 목록을 지정합니다. 이 값을 선택한 후 고정 목록을 선택할 때 나타나는 고정 목록 탭에서 목록을 구성합니다.

  • 페이지를 추가하려면 항목 추가 를 클릭한 다음, 페이지를 찾습니다.
  • 위쪽 및 아래쪽 화살표 아이콘을 사용하여 목록 내에서 페이지를 이동합니다.
  • 목록에서 페이지를 제거하려면 제거 단추를 클릭하십시오.

정렬 기준 속성은 고정 목록의 순서에 영향을 주지 않습니다.

검색

키워드 검색 결과를 사용하여 목록을 채웁니다. 검색은 지정하는 페이지의 하위 페이지에서 수행됩니다.

  1. 검색의 루트 페이지를 지정하려면 시작 위치 속성을 사용하여 페이지 경로를 선택합니다. 현재 페이지 아래에서 검색할 경로를 지정하지 않습니다.
  2. 검색 쿼리 속성에서 검색 키워드를 입력합니다.

고급 검색

다음 아이콘을 사용하여 목록 채우기 QueryBuilder 쿼리를 클릭합니다.

이미지 image

애플리케이션 컨텐츠에 이미지를 추가합니다.

텍스트 text

애플리케이션 컨텐츠에 리치 텍스트를 추가합니다.

스토어 위치 store-locations

저장소 위치 구성 요소는 사용자에게 다음과 같은 비즈니스 매체를 찾기 위한 도구를 제공합니다.

  • 검색
  • 장치의 GPS 좌표에 가깝거나 먼 위치 목록.

구성 요소를 사용하려면 저장소에 각 저장소에 대한 위치 정보가 있어야 합니다. 샘플 위치는 /etc/commerce/locations/adobe 노드에 설치됩니다. chlimage_1-152

두 열 행 two-column-row

페이지에 나란히 구성 요소를 추가할 수 있습니다.

chlimage_1-153

recommendation-more-help
547b817b-14b5-4d82-aa0f-a64750e0e592