회전 배너

마지막 업데이트: 2023-11-07
  • 작성 대상:
  • User
    Admin

회전 배너를 사용하면 마케터가 대화형 회전 프로모션 콘텐츠를 쉽게 만들어 모든 화면에 전달하여 전환을 유도할 수 있습니다.

홍보 배너에 포함된 콘텐츠를 만들고 수정하는 것은 시간이 많이 소요될 수 있으므로, 새 콘텐츠를 빠르게 게시하거나 더 많이 타깃팅하도록 하는 능력이 제한될 수 있습니다. 회전 배너를 사용하면 회전 배너를 빠르게 만들거나 수정할 수 있습니다. 제품 세부 사항 또는 관련 리소스에 연결하는 핫스팟과 같은 상호 작용을 추가하고 모든 화면에 제공하여 새로운 홍보 콘텐츠를 보다 빠르게 출시할 수 있습니다.

회전 배너는 단어가 포함된 배너로 지정됩니다. CAROUSELSET

chlimage_1-438

웹 사이트에서 회전식 배너는 다음과 같이 표시될 수 있습니다.

chlimage_1-439

여기에서 숫자를 클릭하여 이미지를 탐색할 수 있습니다. 또한 슬라이드는 사용자 정의할 수 있는 시간 간격을 기준으로 자동으로 회전합니다. 회전 배너에 추가하는 이미지는 핫스팟과 이미지 맵을 모두 지원합니다. 사용자는 하이퍼링크로 이동하거나 빠른 보기 창에 액세스할 수 있습니다.

이 예에서 사용자가 이미지 맵을 탭하거나 클릭하고 장갑을 위해 빠른 보기 창에 액세스했습니다.

chlimage_1-440

연습: 회전 배너를 만드는 방법(10분 33초). 또한 회전 배너를 미리 보고, 편집하고, 전달하는 방법을 배웁니다.

노트

관리자가 아닌 사용자를 dam-users 그룹: 회전 배너를 만들거나 편집할 수 있습니다. 만들거나 편집하는 데 문제가 있는 경우 사용자를 다음에 추가할 수 있는 시스템 관리자에게 문의하십시오. dam-users 그룹입니다.

회전 배너를 사용하여 빠르게 시작하고 실행하려면:

  1. 핫스팟 및 이미지 맵 변수 식별 (Experience Manager Assets + Dynamic Media을 사용하는 고객만 해당)

    Adobe Experience Manager Assets의 회전 배너 만들기 프로세스 중에 핫스팟과 이미지 맵 데이터를 제대로 입력할 수 있도록 기존 빠른 보기 구현에서 사용하는 동적 변수를 식별하는 것으로 시작합니다.

    노트

    Experience Manager Sites 또는 Ecommerce 고객의 경우 기본 제공 기능을 사용하여 제품 페이지로 이동하고 제품 카탈로그에서 기존 SKU(Stock Keeping Unit)를 조회할 수 있습니다. 핫스팟 또는 이미지 맵 변수를 수동으로 입력할 필요가 없습니다. 다음에 대한 정보 보기: eCommerce 설정.

    Experience Manager Assets 및 Dynamic Media 고객의 경우 핫스팟 및 이미지 맵에 대한 데이터를 수동으로 입력한 다음, 게시된 URL 또는 포함 코드를 타사 콘텐츠 관리 시스템과 통합합니다.

  2. Optional: Create a Carousel Set viewer preset, as needed.

    관리자는 고유한 회전판 뷰어 사전 설정을 만들어 회전판의 비헤이비어와 모양을 사용자 정의할 수 있습니다. 주요 이점은 여러 회전 메뉴에 대해 이 사용자 지정 뷰어 사전 설정을 다시 사용할 수 있다는 것입니다. 그러나 사용자는 선택적으로 회전판을 작성하는 동안 회전판의 비헤이비어와 모양을 직접 사용자 정의할 수 있습니다. 이 방법은 주어진 슬라이드에 대해 특정 디자인을 원하는 경우에 선호되는 방법입니다.

  3. 이미지 배너 업로드.

    대화형으로 만들 이미지 배너를 업로드합니다.

  4. 회전 메뉴 세트 만들기.

    회전 메뉴 세트에서 사용자는 배너 이미지를 탐색하고 핫스팟 또는 이미지 맵을 선택하여 관련 콘텐츠에 액세스합니다.

    에셋에서 회전 메뉴 세트를 만들려면 다음을 선택합니다. 만들기​을 선택한 다음 을 선택합니다. 회전 메뉴 세트. 슬라이드에 에셋 추가 및 선택 저장. You can also edit the appearance and behavior of the carousel directly within the editor.

  5. 이미지 배너에 핫스팟 또는 이미지 맵 추가.

    이미지 배너에 하나 이상의 핫스팟 또는 이미지 맵을 추가하고 각 핫스팟을 링크, 빠른 보기 또는 경험 조각과 같은 작업에 연결합니다. 핫스팟 또는 이미지 맵을 추가한 후 회전 메뉴 세트를 게시하여 이 작업을 완료합니다. 게시하면 웹 사이트 랜딩 페이지를 복사하고 적용하는 데 사용할 수 있는 포함 코드가 만들어집니다.

    다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기 - 선택 사항입니다. 원하는 경우 회전 메뉴 세트의 표현을 보고 상호 작용을 테스트할 수 있습니다.

  6. 회전 배너 게시.

    에셋의 경우와 마찬가지로 회전 메뉴 세트를 게시합니다. 에셋에서 회전 메뉴 세트로 이동하여 선택하고 를 선택합니다 게시. 회전 메뉴 세트를 게시하면 URL 및 포함 문자열이 활성화됩니다.

  7. 다음 중 하나를 수행하십시오.

회전 메뉴 세트를 편집하려면 다음을 참조하십시오. 회전 메뉴 세트 편집. 또한 보고 편집할 수 있습니다 회전 메뉴 세트 속성.

핫스팟 및 이미지 맵 변수 식별

Experience Manager Assets에서 회전 메뉴 세트 생성 프로세스 중에 핫스팟이나 이미지 맵 데이터를 제대로 입력할 수 있도록 기존 Quickview 구현에서 사용하는 동적 변수를 식별하여 시작합니다.

Experience Manager Assets의 배너 이미지에 핫스팟 또는 이미지 맵을 추가하는 경우 각 핫스팟 또는 이미지 맵에 SKU 및 선택적 추가 변수를 할당합니다. 이러한 변수는 나중에 핫스팟 또는 이미지 맵과 빠른 보기 콘텐츠를 일치시키는 데 사용됩니다.

노트

Experience Manager Sites 및/또는 Experience Manager Ecommerce 고객인 경우 이 단계를 건너뜁니다. 핫스팟 또는 이미지 맵 변수를 수동으로 식별할 필요가 없으며, 제품 통합을 위해 Ecommerce와의 통합을 사용할 수 있습니다. 다음에 대한 정보 보기: eCommerce 설정. 또한 대화형 구성 요소를 사용하여 웹 페이지에 추가할 수 있습니다.

Experience Manager Assets 또는 Media 고객의 경우 URL 또는 포함 코드를 게시한 다음 서드파티 콘텐츠 관리 시스템과 통합하고 핫스팟 및 이미지 맵을 수동으로 식별합니다.

핫스팟 또는 이미지 맵 데이터와 연결할 변수의 수 및 유형을 올바르게 식별하는 것이 중요합니다. 배너 이미지에 추가된 각 핫스팟 또는 이미지 맵에는 기존 백엔드 시스템의 제품을 명확하게 식별할 수 있는 충분한 정보가 있어야 합니다. 동시에 각 핫스팟 또는 이미지 맵에는 필요 이상의 데이터가 포함되지 않아야 합니다. 그 이유는 데이터 입력 프로세스가 지나치게 복잡하고 진행 중인 핫스팟 또는 이미지 맵 관리에 오류가 발생하기 쉽기 때문입니다.

핫스팟 또는 이미지 맵 데이터에 사용할 변수 집합을 식별하는 방법에는 여러 가지가 있습니다.

때로는 기존 Quickview 구현을 담당하는 IT 전문가와 상담하는 것으로 충분합니다. 시스템에서 빠른 보기를 식별하는 데 필요한 최소 데이터 세트가 무엇인지 알 수 있습니다. 그러나 일반적으로 프론트엔드 코드의 기존 동작을 간단하게 분석할 수도 있습니다.

대부분의 빠른 보기 구현은 다음 패러다임을 사용합니다.

  • User activates a user interface element on the website. 예: 를 탭합니다 빠른 보기 단추를 클릭합니다.
  • 필요한 경우 웹 사이트에서 백엔드에 Ajax 요청을 전송하여 Quickview 데이터 또는 컨텐츠를 로드합니다.
  • 빠른 보기 데이터는 웹 페이지에서의 렌더링을 준비하기 위해 콘텐츠로 변환됩니다.
  • 마지막으로 프론트엔드 코드는 이러한 콘텐츠를 화면에서 시각적으로 렌더링합니다.

그러면 빠른 보기 기능이 구현된 기존 웹 사이트의 다른 영역을 방문하는 방법이 제공됩니다. 빠른 보기를 트리거하고 웹 페이지에서 보낸 Ajax URL을 캡처하여 빠른 보기 데이터 또는 콘텐츠를 로드합니다.

일반적으로 특수 디버깅 도구를 사용할 필요가 없습니다. 최신 웹 브라우저에는 적절한 작업을 수행하는 웹 검사기가 있습니다. 다음은 웹 검사기를 포함하는 웹 브라우저의 몇 가지 예입니다.

  • Google Chrome에서 나가는 모든 HTTP 요청을 보려면 F12(Windows) 또는 Command-Option-I(Mac)를 눌러 [개발자 도구] 패널을 연 다음 [네트워크] 탭을 선택합니다.
  • Firefox에서는 F12(Windows) 또는 Command-Option-I(Mac)를 눌러 Firebug 플러그인을 활성화하고 Net 탭을 사용하거나 내장된 Inspector 도구 및 Network 탭을 사용할 수 있습니다.

브라우저에서 네트워크 모니터링이 켜지면 페이지에서 빠른 보기를 트리거합니다.

이제 네트워크 로그에서 Quickview Ajax URL을 찾아 기록된 URL을 복사하여 향후 분석할 수 있습니다. 일반적으로 빠른 보기를 트리거하면 서버로 전송되는 요청이 많이 있습니다. 일반적으로 Quickview Ajax URL은 목록의 첫 번째 URL 중 하나입니다. 복잡한 쿼리 문자열 부분 또는 경로가 있으며 응답 MIME 유형은 다음 중 하나입니다. text/html, text/xml, 또는 text/javascript.

이 프로세스 중에 다양한 제품 카테고리와 유형을 사용하여 웹 사이트의 다양한 영역을 방문하는 것이 중요합니다. 그 이유는 Quickview URL에는 주어진 웹 사이트 카테고리에 대해 공통적인 부분이 있지만, 웹 사이트의 다른 영역을 방문하는 경우에만 변경되기 때문입니다.

가장 간단한 경우, 빠른 보기 URL에 있는 유일한 변수 부분은 제품 SKU입니다. 이 경우 SKU 값은 배너 이미지에 핫스팟 또는 이미지 맵을 추가하는 데 필요한 유일한 데이터 부분입니다.

그러나 복잡한 경우 빠른 보기 URL에는 SKU 외에도 범주 ID, 색상 코드 및 크기 코드와 같은 다양한 요소가 있습니다. 이러한 경우 모든 요소는 핫스팟의 개별 변수이거나 회전 배너 기능의 이미지 맵 데이터 정의입니다.

다음 Quickview URL 및 결과 핫스팟 또는 이미지 맵 변수 예를 생각해 보십시오.

쿼리 문자열에 있는 단일 SKU.

기록된 빠른 보기 URL에는 다음이 포함됩니다.

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

URL에서 유일한 변수 부분은 productId= 쿼리 문자열 매개 변수이며 SKU 값입니다. 따라서 핫스팟 또는 이미지 맵에는 다음과 같은 값으로 채워진 SKU 필드만 필요합니다. 866558, 1196184, 1081492, 1898294.

URL 경로에 있는 단일 SKU.

기록된 빠른 보기 URL에는 다음이 포함됩니다.

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

변수 부분은 경로의 마지막 부분에 있으며, 핫스팟/이미지 맵의 SKU 값이 됩니다.6422350843, 1607745002, 0086724882.

쿼리 문자열의 SKU 및 카테고리 ID.

기록된 빠른 보기 URL에는 다음이 포함됩니다.

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

이 경우 URL에는 두 가지 다양한 부분이 있습니다. SKU는에 저장됩니다. prodId 매개 변수와 범주 ID는에 저장됩니다. category=매개 변수.

따라서 핫스팟/이미지 맵 정의는 쌍입니다. 즉, SKU 값과 라는 추가 변수입니다. categoryId. 결과 쌍은 다음과 같습니다.

  • SKU: 305466categoryId 은(는) 1100004.

  • SKU: 310181categoryId 은(는) 1100004.

  • SKU: 308706categoryId 은(는) 1740148.

이미지 배너 업로드

사용할 이미지를 이미 업로드한 경우 다음 단계로 이동하십시오. 회전 메뉴 세트 만들기. Dynamic Media이 활성화되면 회전 메뉴에 사용되는 이미지를 업로드해야 합니다.

이미지 배너를 업로드하려면 다음을 참조하십시오. 에셋 업로드.

노트

관리자가 아닌 사용자를 dam-users 그룹: 회전 배너를 만들거나 편집할 수 있습니다. 만들거나 편집하는 데 문제가 있는 경우 사용자를 다음에 추가할 수 있는 시스템 관리자에게 문의하십시오. dam-users 그룹입니다.

회전 메뉴 세트를 생성하려면

  1. 에셋에서 회전 메뉴 세트를 만들 폴더로 이동한 다음 로 이동합니다 만들기 > 회전 메뉴 세트.

  2. 캐러셀 배너 편집기 페이지에서 자산 선택기를 열려면 탭하십시오. 을 클릭하여 첫 번째 슬라이드의 이미지를 선택합니다.

    회전 배너 편집기 페이지에서 다음 중 하나를 수행합니다.

    • 페이지의 왼쪽 상단 모서리 근처에서 을 선택합니다. 슬라이드 추가 아이콘.

    • 페이지 가운데 근처에서 을 선택합니다. 자산 선택기를 열려면 탭하십시오..

    회전 메뉴 세트에 포함할 자산을 선택하려면 를 선택합니다. Selected assets have a checkmark icon over them. 완료되면 페이지의 오른쪽 상단 모서리 근처에서 을 선택합니다. 선택.

    With the Asset Selector, you can search for assets by typing in a keyword and tapping or clicking Return. You can also apply filters to refine your search results. You can filter by path, collection, file type, and tag. 필터를 선택한 다음 필터 아이콘을 클릭합니다. Change the view by tapping the View icon and selecting Column View, Card View, or List View.

    다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

  3. 회전 메뉴 세트에서 회전할 모든 이미지를 추가할 때까지 슬라이드를 계속 추가합니다.

  4. (선택 사항) 다음 중 하나를 수행합니다.

    • 필요한 경우 슬라이드를 드래그하여 세트 목록에서 이미지 순서를 변경합니다.

    • 이미지를 삭제하려면 이미지를 선택한 다음 를 선택합니다 슬라이드 삭제 을 클릭합니다.

    • 페이지의 오른쪽 상단 모서리 근처에서 사전 설정을 적용하려면 사전 설정 드롭다운 목록을 선택한 다음 세트에 적용할 사전 설정을 한 번에 선택합니다.

    슬라이드를 삭제하려면 슬라이드를 선택한 다음 도구 모음에서 를 선택합니다 슬라이드 삭제. 슬라이드를 이동하려면 순서 변경 아이콘을 선택하고 누른 채로 원하는 위치로 이동합니다.

  5. 슬라이드에 이미지를 추가한 후 이미지에 핫스팟, 이미지 맵 또는 두 가지 모두를 추가할 수 있습니다. 다음을 참조하십시오 이미지 배너에 핫스팟 또는 이미지 맵 추가.

  6. 회전 메뉴 세트의 시각적 디자인과 비헤이비어를 변경할 수 있습니다. 다음 항목 선택 비헤이비어모양 탭 표시 및 조정 캐러셀 배너 표시 방법 또는 특정 구성 요소의 작동 방식. 다음을 참조하십시오 뷰어 사전 설정 관리 뷰어 편집기 사용 방법에 대한 자세한 정보.

    노트

    회전 배너의 경우 조정할 수 있는 사항은 다음과 같습니다.

    * 이미지가 표시되는 기간. 기본적으로 각 이미지는 9초 동안 표시됩니다.
    * 애니메이션. 기본적으로 각 슬라이드 전환은 페이드입니다. 이를 슬라이드 전환으로 변경할 수 있습니다.
    * 단추 스타일입니다. 사용자는 각 점 또는 숫자를 탭하여 배너를 통해 회전할 수 있습니다. 설정된 표시기 단추가 나타나는 위치(숫자 또는 점선 스타일인 경우)와 표시 단추 크기를 변경할 수 있습니다.
    * 이미지 맵의 강조 표시 스타일 또는 핫스팟에 사용되는 아이콘을 변경합니다.
    * 뷰어 사전 설정을 편집하기 전에 사전 설정을 기반으로 할 스타일을 선택합니다. 스타일을 선택하지 않은 경우 뷰어 사전 설정 편집을 시작할 때 다른 사전 설정으로 변경하기로 결정하면 모든 변경 내용이 손실됩니다.
    

    다음을 참조하십시오 회전 배너에 대한 특수 고려 사항 뷰어 편집기에 대한 자세한 지침 및 추가 정보입니다.

    회전 배너가 표시되는 방식을 미리 볼 수도 있습니다. 다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기.

  7. 선택 저장 완료 시.

이미지 배너에 핫스팟 또는 이미지 맵 추가

회전 메뉴 세트 편집기를 사용하여 배너에 핫스팟 또는 이미지 맵을 추가할 수 있습니다.

핫스팟 또는 이미지 맵을 추가할 때 빠른 보기 팝업 표시, 하이퍼링크 또는 경험 조각으로 정의할 수 있습니다.

다음을 참조하십시오 경험 조각.

노트

뷰어를 경험 조각에 포함할 때 회전 배너의 소셜 미디어 공유 도구가 지원되지 않습니다.

이 문제를 해결하려면 소셜 미디어 공유 도구가 없는 뷰어 사전 설정을 사용하거나 만들 수 있습니다. 이러한 뷰어 사전 설정을 사용하면 경험 조각에 성공적으로 포함할 수 있습니다.

이미지에 핫스팟 또는 이미지 맵을 추가할 때 작업 내용을 저장하는 것을 잊지 마십시오. 페이지의 오른쪽 상단 모서리 근처에 있는 실행 취소 및 재실행 옵션은 현재 생성/편집 세션 중에 지원됩니다.

회전식 배너 만들기를 마치면 선택적으로 미리보기 를 사용하여 회전식 배너가 고객에게 표시되는 방식을 확인할 수 있습니다.

다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기.

노트

이미지에 핫스팟을 추가하는 경우 대화형 이미지 캐러셀 배너인 경우 핫스팟 정보는 동일한 메타데이터 위치에 저장됩니다. 이 위치는 대화형 이미지인지 아니면 회전 배너인지에 관계없이 이미지의 위치를 기준으로 합니다. 이 기능은 정의된 핫스팟 데이터와 함께 동일한 이미지를 두 뷰어에서 쉽게 재사용할 수 있음을 의미합니다.

그러나 회전 배너는 핫스팟을 포함할 수도 있는 이미지에 대한 이미지 맵을 지원하지만 대화형 이미지는 지원하지 않습니다. 동일한 이미지를 사용하는 대화형 이미지 또는 회전 배너를 만들려면 이 규칙을 염두에 두십시오. 동일한 이미지의 별도의 사본을 대신 사용하여 대화형 이미지 및 회전 배너를 만드는 것이 좋습니다.

노트

핫스팟이 있는 대화형 이미지를 편집하고 이미지를 자르는 경우 핫스팟이 제거됩니다.

참조: 이미지 맵 추가.

이미지 배너에 핫스팟 또는 이미지 맵을 추가하려면 다음을 수행합니다.

  1. Assets에서 대화형으로 만들 회전 메뉴 세트로 이동합니다.

  2. 회전 메뉴 세트를 선택하고 편집. 슬라이드 뷰어 편집기가 열립니다.

  3. 대화형으로 만들 슬라이드를 선택합니다.

  4. 페이지의 왼쪽 상단 모서리 근처에서 을 선택합니다. 핫스팟 또는 이미지 맵.

  5. 다음 중 하나를 수행합니다.

    • 핫스팟의 경우: 이미지에서 핫스팟을 표시할 위치를 선택합니다.
    • 이미지 맵의 경우: 이미지에서 을 선택한 다음 왼쪽 상단에서 오른쪽 하단으로 드래그하여 이미지 맵 영역을 만듭니다. 모퉁이를 드래그하여 이미지 맵의 크기를 조정할 수 있습니다.

    필요한 경우 핫스팟 또는 이미지 맵을 새 위치로 드래그합니다. 필요에 따라 추가 핫스팟 또는 이미지 맵을 추가합니다.

    핫스팟 또는 이미지 맵을 삭제하려면 작업 탭. Under the Maps & Hotspots heading, from the Selected Type drop-down menu, select the name of the hotspot or image map you want to remove. 다음 항목 선택 휴지통 아이콘을 클릭한 다음 선택 삭제.

  6. 이름 텍스트 필드에 핫스팟 또는 이미지 맵의 이름을 입력합니다. 이 이름은 지도 및 핫스팟 드롭다운 목록입니다. 이름을 제공하면 나중에 핫스팟 또는 이미지 맵을 변경하기로 결정하는 경우 쉽게 식별할 수 있습니다.

  7. 다음 중 하나를 수행합니다. 작업 탭:

    • 선택 빠른 보기.

      • Experience Manager Sites 및 Ecommerce 고객의 경우 제품 선택기 아이콘(돋보기)을 선택하여 제품 선택 페이지를 엽니다. 사용할 제품을 선택한 다음 슬라이드 배너 편집기로 돌아갈 수 있도록 페이지의 오른쪽 상단에 있는 확인 표시를 선택합니다.

      • Experience Manager Sites 또는 Ecommerce 고객이 아닌 경우

        • 다음을 참조하십시오 핫스팟 변수 식별 다음 변수를 정의하려는 경우.

        • 그런 다음 수동으로 SKU 값을 입력합니다. SKU 값 텍스트 필드에 제품의 SKU(Stock Keeping Unit)를 입력합니다. 이 SKU는 제공하는 각 고유 제품이나 서비스에 대한 고유 식별자입니다. 입력한 SKU 값은 빠른 보기 템플릿의 변수 부분을 자동으로 입력하므로 시스템에서 탭 핫스팟을 특정 SKU의 빠른 보기와 연결해야 한다는 것을 알게 됩니다.

        • (선택 사항) Quickview 내에 제품을 추가로 식별하는 데 사용해야 하는 다른 변수가 있는 경우 다음을 선택합니다. 일반 변수 추가. 텍스트 필드에 추가 변수를 지정합니다. 예를 들어 category=Mens는 추가된 변수입니다.

        • 다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

    • 선택 하이퍼링크.

      • Experience Manager Sites 고객의 경우 사이트 선택기 아이콘(폴더)을 선택하여 URL로 이동합니다.

        노트

        대화형 콘텐츠에 상대 URL이 있는 링크, 특히 Experience Manager Sites 페이지에 대한 링크가 있는 경우에는 URL 기반 연결 방법이 불가능합니다.

      • 독립형 고객인 경우 HREF 텍스트 필드에 연결된 웹 페이지에 대한 전체 URL 경로를 지정합니다.

    링크를 새 브라우저 탭(권장 기본값)에서 열지 또는 동일한 탭에서 열지를 지정해야 합니다.

    다음을 참조하십시오 선택기를 사용한 작업 추가 정보.

    • 선택 경험 조각.

      • Experience Manager Sites 고객인 경우 검색 아이콘(돋보기)을 선택하여 경험 조각 페이지를 엽니다. 사용할 경험 조각을 선택한 다음 를 선택합니다 선택 핫스팟 관리 페이지로 돌아갈 수 있도록 페이지의 오른쪽 상단 모서리에서 를 클릭합니다.
        다음을 참조하십시오 경험 조각.

      • 배너에 표시되는 경험 조각의 너비와 높이를 지정합니다.

        노트

        뷰어를 경험 조각에 포함할 때 회전 배너의 소셜 미디어 공유 도구가 지원되지 않습니다.

        이 문제를 해결하려면 소셜 미디어 공유 도구가 없는 뷰어 사전 설정을 만듭니다. 이러한 뷰어 사전 설정을 사용하면 경험 조각에 성공적으로 포함할 수 있습니다.

    experience_fragment-carouselbanner

    회전 배너가 표시되는 방식을 미리 볼 수도 있습니다. 다음을 참조하십시오 (선택 사항) 회전 배너 미리 보기.

  8. 저장​을 선택합니다.

  9. 회전 메뉴 세트를 게시합니다. 게시하면 웹 사이트 페이지에서 사용할 수 있는 포함 코드 또는 URL이 만들어집니다. Experience Manager Sites 고객인 경우 웹 페이지에 바로 회전 메뉴 세트를 추가할 수 있습니다.

    다음을 참조하십시오 자산 게시.

    다음을 참조하십시오 웹 사이트 랜딩 페이지에 회전 메뉴 세트 추가

노트

관리자가 아닌 사용자를 dam-users 그룹: 회전 배너를 만들거나 편집할 수 있습니다. 만들거나 편집하는 데 문제가 있는 경우 사용자를 다음에 추가할 수 있는 시스템 관리자에게 문의하십시오. dam-users 그룹입니다.

회전판 세트에 대해 다음과 같은 다양한 편집 작업을 수행할 수 있습니다.

  • 슬라이드 세트에 슬라이드를 추가합니다. 참조: 선택기를 사용한 작업.
  • 슬라이드 세트에서 슬라이드 순서를 변경합니다.
  • 회전 메뉴 세트에서 에셋을 삭제합니다.
  • 뷰어 사전 설정을 적용합니다.
  • 회전 메뉴 세트를 삭제합니다.
  • 핫스팟 및 이미지 맵을 추가하거나 편집합니다. 참조: 선택기를 사용한 작업.

회전 메뉴 세트를 편집하려면:

  1. 다음 중 하나를 수행합니다.

    • 회전 메뉴 세트 에셋을 마우스로 가리킨 다음 을 선택합니다. 편집 (연필 아이콘).

    • 회전 메뉴 세트 에셋 위로 마우스를 가져간 후 선택 (확인 표시 아이콘)을 클릭한 다음 을 선택합니다 편집 을 클릭합니다.

    • 회전 메뉴 세트 에셋을 선택한 다음 페이지의 왼쪽 상단 모서리에서 을(를) 선택합니다. 편집 (연필 아이콘).

  2. 회전 메뉴 세트를 편집하려면 다음 중 하나를 수행합니다.

    • 슬라이드를 추가하려면 슬라이드 추가 아이콘 을 클릭하고 슬라이드에 추가할 에셋으로 이동한 다음 확인 표시를 선택합니다.
    • 슬라이드의 순서를 바꾸려면 슬라이드를 새 위치로 끕니다. 항목을 이동하려면 순서 바꾸기 아이콘을 선택합니다.
    • 핫스팟 또는 이미지 맵을 추가하려면 핫스팟 또는 이미지 맵 아이콘을 선택하고 핫스팟 및 이미지 맵 추가.
    • 회전 메뉴 세트의 모양이나 비헤이비어를 편집하려면 모양 탭 또는 비헤이비어 탭을 클릭한 다음 원하는 옵션을 설정합니다.
    • 핫스팟 또는 이미지 맵을 편집하려면 해당 슬라이드에서 핫스팟 또는 이미지 맵을 선택하고 필요에 따라 변경합니다. 작업 탭.
    • 슬라이드를 삭제하려면 해당 슬라이드를 선택한 다음 를 선택합니다 슬라이드 삭제 을 클릭합니다.
    • 페이지의 오른쪽 상단 모서리 근처에서 사전 설정을 적용하려면 사전 설정 드롭다운 목록에서 뷰어 사전 설정을 선택합니다.
    • 전체 회전식 세트를 삭제하려면 회전식 세트로 이동하여 선택한 다음 를 선택합니다 삭제.
    노트

    핫스팟이 있는 대화형 이미지를 편집하고 이미지를 자르는 경우 핫스팟이 제거됩니다.

미리보기 를 사용하여 캐러셀 배너가 고객에게 표시되는 방식을 확인하고 캐러셀 배너 핫스팟 및 이미지 맵을 테스트하여 예상대로 작동하는지 확인할 수 있습니다.

캐러셀 배너가 마음에 들면 게시할 수 있습니다.
다음을 참조하십시오 웹 페이지에 비디오 또는 이미지 뷰어 포함.
다음을 참조하십시오 웹 애플리케이션에 URL 연결. 대화형 콘텐츠에 상대 URL이 있는 링크, 특히 Experience Manager Sites 페이지에 대한 링크가 있는 경우에는 URL 기반 연결 방법이 불가능합니다.
다음을 참조하십시오 페이지에 Dynamic Media Assets 추가.

회전 메뉴 편집기(기본 방법) 또는 뷰어 목록을 표시합니다.

회전 배너를 미리 보려면:

  1. 위치 에셋​를 클릭하고 생성한 기존 회전 배너로 이동한 다음 를 선택하여 엽니다.

  2. 편집​을 선택합니다.

  3. 도구 모음의 오른쪽 모서리에 있는 뷰어 사전 설정 목록에서 회전 배너를 미리 볼 뷰어를 선택합니다.

    experience_fragment-carouselbanner-viewerdropdown

  4. 미리보기​를 선택합니다.

  5. 연결된 작업을 테스트할 수 있도록 이미지에서 핫스팟 또는 이미지 맵을 선택합니다.

뷰어 목록에서 회전 배너를 미리 보려면 다음을 수행하십시오.

  1. 위치 에셋​를 클릭하고 생성한 기존 회전 배너로 이동한 다음 를 선택하여 엽니다.
  2. 미리 보기 페이지의 왼쪽 상단 모서리 근처에서 컨텐츠 아이콘을 선택합니다.
  3. 다음에서 뷰어 페이지 왼쪽에 있는 패널에서 사용할 캐러셀 배너 뷰어 사전 설정의 이름을 선택합니다.
  4. 연결된 작업을 테스트할 수 있도록 이미지에서 핫스팟 또는 이미지 맵을 선택합니다.

사용할 수 있도록 회전 메뉴를 게시합니다. 회전 메뉴 세트를 게시하면 URL 및 포함 코드가 활성화됩니다. 또한 확장 가능하고 성능이 뛰어난 전송을 위해 CDN과 통합된 Dynamic Media 클라우드에 캐러셀을 게시합니다.

노트

회전 배너에 핫스팟이 있는 기존 대화형 이미지를 사용하는 경우 회전 배너를 게시한 후 대화형 이미지를 별도로 게시해야 합니다.

또한, 캐러셀 배너에 사용 중인 기존의 게시된 대화형 이미지를 수정하는 경우, 해당 변경 사항이 캐러셀 배너에 반영되기 전에 대화형 이미지를 게시해야 합니다.

다음을 참조하십시오 Dynamic Media Assets 게시 회전 배너를 게시하는 방법에 대한 정보입니다.

캐러셀을 만들기 위해 배너 이미지를 업로드하고, 배너에 핫스팟 및/또는 이미지 맵을 추가하고, 캐러셀 세트를 게시하면 이제 기존 웹 사이트 페이지에 추가할 준비가 된 것입니다.

노트

Experience Manager Sites 고객의 경우 대화형 미디어 구성 요소를 페이지로 드래그하여 회전식 배너를 페이지에 바로 추가할 수 있습니다. 다음을 참조하십시오 페이지에 Dynamic Media 에셋 추가.

그러나 독립형 Experience Manager 에셋 고객의 경우 이 섹션에 설명된 대로 웹 사이트 랜딩 페이지에 슬라이드 배너를 수동으로 추가할 수 있습니다.

  1. 게시된 회전 메뉴 세트의 포함 코드를 복사합니다.
    다음을 참조하십시오 웹 페이지에 비디오 또는 이미지 뷰어 포함.

  2. Experience Manager Assets에서 복사한 포함 코드를 웹 페이지에 추가합니다.
    복사된 포함 코드는 응답하므로 페이지의 포함 영역에 자동으로 맞춰야 합니다.

노트

이 단계는 독립형 Experience Manager Assets 고객인 경우에만 적용됩니다.

이 프로세스의 마지막 단계는 웹 사이트의 기존 빠른 보기 구현과 회전 배너를 통합하는 것입니다. 모든 Quickview 구현은 고유하며 프론트엔드 IT 직원의 지원을 포함하는 특정 접근 방식이 필요합니다.

기존 빠른 보기 구현은 일반적으로 웹 페이지에서 다음 순서로 발생하는 상호 관련된 작업 체인을 나타냅니다.

  1. 사용자가 웹 사이트의 사용자 인터페이스에서 요소를 트리거합니다.
  2. 프론트엔드 코드는 1단계에서 트리거된 사용자 인터페이스 요소를 기반으로 Quickview URL을 가져옵니다.
  3. 프론트엔드 코드는 2단계에서 얻은 URL을 사용하여 Ajax 요청을 보냅니다.
  4. 백엔드 로직은 해당 Quickview 데이터 또는 컨텐츠를 프론트엔드 코드로 다시 반환합니다.
  5. 프론트엔드 코드는 Quickview 데이터 또는 콘텐츠를 로드합니다.
  6. 선택적으로, 프론트엔드 코드는 로드된 Quickview 데이터를 HTML 표시로 변환합니다.
  7. 프론트엔드 코드는 모달 대화 상자 또는 패널을 표시하고 최종 사용자를 위해 화면에 HTML 콘텐츠를 렌더링합니다.

이러한 호출은 임의의 단계에서 웹 페이지 논리에 의해 호출될 수 있는 독립적인 공개 API 호출을 나타내지 않습니다. 대신 모든 다음 단계가 이전 단계의 마지막 단계(콜백)에서 숨겨지는 체인 호출입니다.

캐러셀 배너가 1단계 및 2단계를 대체하는 것과 동시에, 사용자가 캐러셀 배너 내에서 핫스팟 또는 이미지 맵을 탭하면 이러한 상호 작용은 뷰어에 의해 처리됩니다. 뷰어가 이전에 추가한 모든 핫스팟 또는 이미지 맵 데이터를 포함하는 웹 페이지에 이벤트를 반환합니다.

이러한 이벤트 처리기에서 프론트엔드 코드는 다음을 수행합니다.

  • 회전 배너에서 방출되는 이벤트를 수신합니다.
  • 핫스팟 또는 이미지 맵 데이터를 기반으로 빠른 보기 URL을 구성합니다.
  • 백엔드에서 Quickview를 로드하고 화면에 렌더링하여 표시하는 프로세스를 트리거합니다.

Experience Manager Assets에서 반환한 포함 코드에는 이미 주석 처리된 사용 준비 이벤트 핸들러가 있습니다.

따라서 코드의 주석 처리를 제거하고 더미 처리기 본문을 특정 웹 페이지에만 해당하는 코드로 바꾸기만 하면 됩니다.

Quickview URL을 구성하는 프로세스는 이전에 설명한 핫스팟 및 이미지 맵 변수를 식별하는 데 사용되는 프로세스와 반대입니다.

다음을 참조하십시오 핫스팟 및 이미지 맵 변수 식별.

빠른 보기 URL을 트리거하고 빠른 보기 패널을 활성화하는 마지막 단계는 IT 부서의 프론트엔드 IT 직원의 지원이 필요할 수 있습니다. 바로 사용 가능한 빠른 보기 URL을 가지고 적절한 단계에서 빠른 보기 구현을 정확하게 트리거하는 방법을 가장 잘 알고 있는 지식을 보유하고 있습니다.

빠른 보기를 사용하여 사용자 정의 팝업 제작

다음을 참조하십시오 빠른 보기를 사용하여 사용자 지정 팝업 만들기.

이 페이지에서는