검색 페이지용 배너 및 동적 배너 제작

배너는 컬렉션 검색 페이지에 표시되는 항목입니다. 다음과 같은 두 가지 유형의 배너가 있습니다.

기본 배너 – 기본 배너는 검색 페이지에 표시되는 이미지입니다. 배너를 탭하면 임의의 동작이 트리거되거나 아무런 동작도 실행되지 않을 수도 있습니다. 예를 들어 배너를 탭하면 아무 반응도 없거나, 웹 페이지가 실행되거나, 다른 아티클 또는 컬렉션으로 연결되거나, 이메일 또는 문자 메시지를 전송하거나, 전화 통화를 할 수 있습니다. 배너는 검색 페이지에서 브랜드를 표시하거나 시각적으로 구분되도록 하는 데에도 유용합니다.

동적 배너 – 동적 배너는 검색 페이지에서 HTML 콘텐츠를 표시합니다. 예를 들어 동적 배너는 주식 시세, 슬라이드쇼 캐러셀 또는 소셜 미디어 피드를 표시할 수 있습니다. Cordova 플러그인을 활용하여 사용자가 배너의 슬라이드를 탭하여 아티클로 이동하거나 권한 로그인 프롬프트를 표시하는 등의 AEM Mobile 특정 기능의 장점을 취할 수 있습니다.

기본 배너

배너의 모양은 여기에 할당되는 카드에 의해 결정됩니다. 배너 이미지는 가운데 정렬되고, 확대/축소되고, 필요에 따라 잘려 매핑되는 카드의 영역을 채웁니다. 카드 안에서도 제대로 볼 수 있을 만큼 충분히 큰 배너 이미지를 만드십시오. AEM Mobile용 콘텐츠 최적화를 참조하십시오.

  1. 콘텐츠 및 레이아웃에서 콘텐츠를 클릭한 다음 추가 > 배너 추가를 클릭합니다.

  2. 프로젝트에 맞는 고유한 배너 이름을 지정합니다.

  3. 배너용 메타데이터를 지정합니다.

    콘텐츠를 카드로 매핑하는 데 매핑 규칙을 사용하면 메타데이터를 추가하여 배너를 다른 콘텐츠와 구분할 수 있습니다.

  4. 배너를 탭하면 어떤 작업이 수행되는지 표시합니다.

    사용자가 배너를 탭할 때 아무 작업도 수행되지 않도록 하려면 “없음”을 선택하십시오.

    배너를 통해 작업이 수행되도록 하려면 다음 중 하나의 옵션을 선택합니다.

    http:// – 사용자가 배너를 탭하면 인앱 브라우저에서 지정한 웹 페이지(http: 또는 https:)를 엽니다.

    예: http://www.adobe.com

    navto:// – 지정한 아티클 또는 컬렉션으로 이동합니다. 아티클 내에서의 페이지 번호로 링크 기능은 지원되지 않는다는 점을 참고하십시오. navto 형식에 대한 자세한 내용은 AEM Mobile 아티클의 하이퍼링크를 참조하십시오.

    예: navto://collection/coffeeProducts

    mailto: – 디바이스의 기본 이메일 앱을 사용하여 이메일 메시지를 전송합니다.

    간략한 예: mailto:jane@example.com

    자세한 예: mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.

    sms: – 디바이스의 메시징 앱을 사용하여 문자 메시지를 전송합니다.

    간략한 예: sms:1-206-555-2323

    자세한 예(iOS): sms:+1206-555-2323&body=Text%20message

    자세한 예(Android): sms:+1206555-2323?body=Text%20message

    tel: – 디바이스의 전화 앱을 사용하여 전화 통화를 연결합니다.

    예: tel:1-206-555-2323

    홈 컬렉션으로 이동 – 최상위 수준 컬렉션의 첫 번째 아티클 또는 컬렉션으로 돌아갑니다.

    뒤로 이동 – 사용자가 현재 검색 페이지로 이동하기 위해 탭하거나 클릭한 이전의 브라우저 페이지 또는 아티클로 돌아갑니다. (모바일 디바이스에서의 스와이프 제스처는 뒤로 이동에 포함되지 않습니다.)

    mailto, sms 및 tel 액션은 모바일 디바이스에서만 지원됩니다. 데스크탑 웹 뷰어에서는 반응이 일어나지 않습니다.

  5. 이미지 탭을 사용하여 배너 이미지를 업로드할 수 있습니다.

    배너의 이미지를 사용하지 않으려는 경우(예를 들어 배너 제목이나 색상만 표시하려는 경우) 모든 이미지 파일을 업로드한 다음 이미지를 표시하지 않는 카드를 만들 수 있습니다.

  6. 컬렉션에 배너 추가 배너가 컬렉션 내(예: 맨 위)에 제대로 지정되어 검색 페이지의 적절한 위치에 표시되는지 확인합니다.

  7. 필요한 경우 레이아웃 템플릿을 편집하여 배너를 표시하는 카드를 포함하도록 할 수 있습니다.

    예를 들어 디바이스 폭을 덮는 카드를 만들어 카드를 모든 배너로 매핑하는 규칙을 만들 수 있습니다. 카드 및 레이아웃 제작을 참조하십시오.

동적 배너

동적 배너는 검색 페이지에서 HTML 콘텐츠를 표시합니다.

  • 검색 페이지에서 여러 동적 배너를 사용하는 경우 제대로 작동하는지 확인하기 위해 대상 디바이스에서 기능을 테스트해 보십시오. 검색 페이지를 로드하는 데 시간이 너무 오래 소요되거나 다른 문제가 발생하는 경우에는 해당 검색 페이지에서 사용하는 동적 배너의 수를 줄이는 것이 좋습니다.
  • 필요한 경우 배너에 대한 썸네일 이미지를 사용할 수 있습니다. 사용자가 오프라인 상태이거나 투명하게 처리하여 뒤쪽의 HTML 콘텐츠가 표시되도록 하려는 경우 이들 이미지가 유용합니다.
  • 동적 배너에서 Cordova 플러그인을 사용하는 경우 동적 배너 속성에서 확장 기능 활성화를 선택해야 합니다.
  • HTML 파일에서 외부 콘텐츠를 참조하는 경우에는 HTTP가 아닌 HTTPS 프로토콜을 사용하는 것이 좋습니다. 데스크탑 웹 뷰어에서는 HTTPS 프로토콜이 요구됩니다.
  • <video playsinline autoplay> 요소를 사용하여 동적 배너에서 비디오가 자동 재생되도록 할 수 있습니다. 배너가 표시되기 전에 비디오가 자동 재생된다면 window.onAppear 이벤트 시 비디오를 재생하고 window.onDisappear 이벤트 시 비디오를 일시 정지하는 JavaScript를 사용해 보십시오.

 

동적 배너 비디오

동적 배너 비디오

권한 부여 배너의 예

이 HTML 콘텐츠를 사용하여 권한 부여 동적 배너를 제작할 수 있습니다. 사용자가 로그인하지 않은 경우 배너에 로그인 프롬프트가 표시됩니다. 사용자가 로그인하면 배너에 로그아웃 버튼이 표시됩니다. 동적 배너를 제작할 때 확장 기능 활성화를 선택하여 Cordova 플러그인을 활성화해야 합니다.

다운로드

동적 배너 제작

  1. HTML 콘텐츠를 제작하고 아티클 파일을 생성합니다.

    AEM Mobile용 HTML 아티클 제작을 참조하십시오.

  2. 콘텐츠 및 레이아웃에서 콘텐츠를 클릭한 다음 추가 > 동적 배너 추가를 클릭합니다.

  3. 프로젝트에 맞는 고유한 배너 이름을 지정합니다.

  4. 배너용 메타데이터를 지정합니다.

    콘텐츠를 카드로 매핑하는 데 매핑 규칙을 사용하면 메타데이터를 추가하여 배너를 다른 콘텐츠와 구분할 수 있습니다.

    참고:

    HTML 콘텐츠가 Cordova 플러그인에 대한 참조를 포함하고 있는 경우 확장 기능 활성화를 선택해야 합니다.

  5. 이미지 탭을 사용하여 배너 이미지를 업로드할 수 있습니다.

    필요한 경우 배너 이미지를 사용할 수 있습니다. 디바이스가 오프라인 상태이거나 투명한 HTML 콘텐츠의 배경으로 사용하려는 경우 배너 이미지가 유용합니다.

  6. 콘텐츠 파일 탭을 사용하여 HTML 콘텐츠를 포함하고 있는 아티클 파일을 업로드할 수 있습니다.

  7. 동적 배너가 광고인 경우에는 광고 탭을 사용하여 분석 데이터에 대한 정보를 지정합니다.

  8. 컬렉션에 배너 추가 배너가 컬렉션 내(예: 맨 위)에 제대로 지정되어 검색 페이지의 적절한 위치에 표시되는지 확인합니다.

  9. 필요한 경우 레이아웃 템플릿을 편집하여 배너를 표시하는 카드를 포함하도록 할 수 있습니다.

    예를 들어 디바이스 폭을 덮는 카드를 만들어 카드를 모든 배너로 매핑하는 규칙을 만들 수 있습니다. 카드 및 레이아웃 제작을 참조하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책