뷰어 사전 설정 관리

뷰어 사전 설정은 사용자가 컴퓨터 화면 및 모바일 장치에서 리치 미디어 자산을 보는 방법을 결정하는 설정 모음입니다. 관리자는 뷰어 사전 설정을 만들 수 있습니다. 설정은 뷰어 구성 옵션의 배열에 사용할 수 있습니다. 예를 들어 뷰어 표시 크기 또는 확대/축소 비헤이비어를 변경할 수 있습니다.

고유한 HTML5 뷰어 사전 설정을 만들고 사용자 지정하는 방법에 대한 지침은 Adobe Dynamic Media HTML5 뷰어 SDK API 설명서​를 참조하십시오. SDK는 SDK 자체에 포함된 IS 게시 서버에서 사용할 수 있습니다. 각 라이브러리 버전에는 고유한 SDK 설명서가 포함되어 있습니다.

경로: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html.
예: 3.10 SDK:https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html

또한 Adobe Dynamic Media 뷰어 참조 안내서를 참조하십시오.

이 섹션에서는 뷰어 사전 설정을 만들고, 편집하고, 관리하는 방법에 대해 설명합니다. 미리 볼 때마다 자산에 뷰어 사전 설정을 적용할 수 있습니다. 뷰어 사전 설정 적용을 참조하십시오.

노트

기본적으로 제공되는 사전 정의된 뷰어 사전 설정​을 편집하면 지원되는 시나리오가 아닙니다. 즉시 사용 가능한 뷰어 사전 설정을 편집하려고 하면 새 이름을 사용하여 뷰어 사전 설정을 저장하라는 메시지가 표시됩니다.

뷰어에 대한 키보드 액세스 가능성

모든 기본 뷰어는 키보드 접근성을 지원합니다.

키보드 액세스 및 탐색도 참조하십시오.

뷰어 사전 설정 관리

도구(망치 아이콘) > 자산 > 뷰어 사전 설정을 탭하여 AEM에서 뷰어 사전 설정을 추가, 편집, 삭제, 게시, 게시 취소 및 미리 볼 수 있습니다.

6_5_tools-assets-viewerpresets

노트

기본적으로 자산의 세부 사항 보기에서 뷰어를 선택하면 15개의 뷰어 사전 설정이 표시됩니다. 이 한도를 늘릴 수 있습니다. 표시되는 뷰어 사전 설정 수 증가를 참조하십시오.

반응형 디자인 웹 페이지에 대한 뷰어 지원

웹 페이지마다 요구 사항이 다릅니다. 예를 들어 별도의 브라우저 창에서 HTML5 뷰어를 여는 링크를 제공하는 웹 페이지가 필요할 수 있습니다. 다른 경우 호스팅 페이지에 HTML5 뷰어를 직접 포함해야 할 수도 있습니다. 후자의 경우 웹 페이지에 정적 레이아웃이 있을 수 있습니다. 또는 "반응형"일 수 있으며 다른 장치 또는 다른 브라우저 창 크기에 대해 다르게 표시됩니다. 이러한 요구 사항을 충족하기 위해 Dynamic Media과 함께 제공되는 미리 정의된 즉시 사용 가능한 모든 HTML5 뷰어는 정적 웹 페이지와 반응형 디자인 웹 페이지를 모두 지원합니다.

웹 페이지에 응답형 뷰어를 포함하는 방법에 대한 자세한 내용은 의 반응형 이미지 라이브러리를 참조하십시오.

노트

처음 사용하기 전에 모든 기본 뷰어를 게시해야 합니다.
뷰어 사전 설정 게시를 참조하십시오.

뷰어 사전 설정 시스템 호환성

Dynamic Media과 함께 제공되는 모든 기본 뷰어 사전 설정은 다음 시스템과 완벽하게 호환됩니다.

  • 데스크톱
  • Apple iPhone
  • Apple iPad
  • Android 스마트폰
  • Android 태블릿
  • 비디오의 경우 BlackberryWindows Phone에 대한 추가 MP4 재생 지원이 제공됩니다.

뷰어 사전 설정에 대한 리치 미디어 유형

관리자는 새 뷰어 사전 설정을 만들 때 다음과 같은 리치 미디어 유형을 추가하고 사용자 정의할 수 있습니다.

회전 메뉴 세트

핫스팟, 이미지 맵 또는 둘 다 여러 개의 이미지에 추가됩니다. 고객은 이미지를 왼쪽 또는 오른쪽으로 이동시킨 다음 추가 정보를 위해 이미지의 핫스팟을 클릭하거나 웹 사이트의 카테고리, 홈 또는 랜딩 페이지에서 직접 구매할 수 있습니다.

차원

카메라를 회전하거나, 이동하고, 확대/축소하거나, 다시 입력할 수 있는 3D 장면을 표시합니다.

플라이아웃 확대/축소

원본 이미지 옆에 확대된 영역의 두 번째 이미지를 표시합니다. 사용할 컨트롤이 없습니다. 사용자가 보려는 영역 위로 선택 영역을 이동합니다.

이 뷰어에 대한 전체 대역폭 사용을 결정할 때는 기본 이미지와 플라이아웃 이미지가 모두 뷰어에서 제공됨을 고려하십시오. 기본 이미지 크기(스테이지 너비 및 높이) 및 확대/축소 비율이 플라이아웃 이미지 크기를 결정합니다. 플라이아웃 파일 크기가 너무 커지지 않게 하려면 다음 두 값의 균형을 맞춥니다.기본 이미지 크기가 큰 경우 [확대/축소 요소] 값을 낮춥니다. (플라이아웃 폭 및 플라이아웃 높이는 플라이아웃 창의 크기를 결정하지만 뷰어에 제공되는 플라이아웃 이미지의 크기는 아닙니다.)

예를 들어 기본 이미지 크기가 350 x 350픽셀이고 확대/축소 비율이 3인 경우 결과 플라이아웃 이미지는 1050 x 1050픽셀입니다. 기본 이미지 크기가 300 x 300 픽셀이고 확대/축소 비율이 4인 경우 플라이아웃 이미지는 1200 x 1200 픽셀입니다. JPEG 품질 설정(권장 설정은 80-90 사이)에 따라 파일 크기를 크게 줄일 수 있습니다. 기본 이미지의 크기에 따라 권장되는 확대/축소 요소는 2.5에서 4까지입니다.

인라인 확대/축소 원본 뷰어 내에서 확대된 영역의 이미지를 표시합니다. 사용할 컨트롤이 없습니다. 즉, 사용자가 보려는 영역 위로 선택 영역을 이동합니다.
이미지 집합 [이미지 집합] 뷰어에서 축소판 이미지를 클릭하면 항목의 서로 다른 보기 또는 색상 변형을 볼 수 있습니다. 이 뷰어는 이미지를 자세히 검사하기 위한 확대/축소 도구를 제공합니다.
대화형 이미지 핫스팟은 고객이 추가 세부 사항을 살펴보거나 웹 사이트의 카테고리, 홈 또는 랜딩 페이지에서 직접 구매할 수 있는 이미지 부분에 추가됩니다.
대화형 비디오 축소판은 비디오의 타임라인 세그먼트에 추가되며, 고객이 추가 세부 사항을 클릭하거나 웹 사이트의 카테고리, 홈 또는 랜딩 페이지에서 직접 구매할 수 있습니다.
혼합 미디어 하나의 뷰어에 서로 다른 유형의 미디어를 표시합니다. 회전 집합, 이미지 집합, 이미지 및 비디오를 포함할 수 있습니다.
파노라마 이미지

파노라마 이미지 및 PanoramicVR 뷰어는 구형 파노라마 이미지를 렌더링하여 회의실, 속성, 위치 또는 조경에 대한 360° 보기 경험을 사용자에게 제공합니다.

업로드된 이미지가 구형 파노라마의 자격이 되려면 다음 중 하나 또는 둘 다를 가져야 합니다.

  • 2:1 종횡비.
  • equirectangular 또는 sphericalpanorama 또는 spherical panoramic 키워드로 태그가 지정됩니다. 태그 사용을 참조하십시오.

종횡비와 키워드 기준은 모두 자산 세부 사항 페이지와 "파노라마 미디어" WCM 구성 요소에 대한 파노라마 자산에 적용됩니다.

중요:이 뷰어는 Dynamic Media - Scene7 모드에서만 사용할 수 있습니다.

스마트 크롭 비디오

이 뷰어를 사용하여 모든 비디오의 초점을 자동으로 감지하고 자를 수 있습니다.

회전 집합 사용자가 개체를 돌려 서로 다른 면 및 각도를 검사할 수 있도록 한 이미지의 여러 보기를 제공합니다.
360 비디오

360/VR 비디오 뷰어를 사용하여 등장방형 비디오를 렌더링하여 룸, 재산, 위치, 가로 또는 의료 절차의 몰입형 보기 환경을 구현할 수 있습니다.

평면 디스플레이에서 재생하는 동안 사용자가 보기 각도를 제어할 수 있습니다.모바일 디바이스에서 재생하는 경우 일반적으로 내장된 자이로스코프 컨트롤을 활용할 수 있습니다.

뷰어에는 360개의 비디오 에셋 전달에 대한 기본 지원이 포함되어 있습니다. 기본적으로 보거나 재생하는 데 추가 구성이 필요하지 않습니다. .mp4, .mkv 및 .mov와 같은 표준 비디오 확장을 사용하여 360개의 비디오를 제공할 수 있습니다. 가장 일반적인 코덱은 H.264입니다.

중요:이 뷰어는 Dynamic Media - Scene7 모드에서만 사용할 수 있습니다.

비디오

점진적 또는 적응형 비트 전송률 스트리밍을 사용하여 비디오를 재생합니다. 적응형 비트 전송률 스트리밍은 디바이스 및 대역폭 검색을 자동으로 수행하여 올바른 포맷으로 올바른 품질의 비디오를 제공할 수 있습니다.

세로 확대/축소

세로 확대/축소 뷰어를 사용하면 제품 이미지를 최대화하여 제품을 가장 잘 표현할 수 있습니다. 색상 견본의 수직 위치는 다음과 같습니다.

  • 견본이 "접힌 항목 위"에 있는지 확인합니다.
    가로 색상 견본을 사용하면 사용자의 데스크탑 화면 크기에 따라 사용자가 페이지를 스크롤할 때까지 색상 견본을 볼 수 없었습니다. 뷰어에 색상 견본을 세로로 배치하면 사용자의 화면 크기와 상관없이 견본이 표시되도록 할 수 있습니다.
  • 기본 이미지 크기를 최대화합니다.
    가로 색상 견본을 사용하면 페이지의 공간이 표시되는지 확인해야 합니다. 이 위치 지정은 기본 이미지의 크기를 줄여줍니다. 그러나 세로 견본 레이아웃에서는 이 공간을 할당할 필요가 없습니다. 따라서 기본 이미지 크기를 최대화할 수 있습니다.
확대/축소 사용자가 해당 영역을 클릭하여 확대할 수 있습니다. 사용자는 컨트롤을 클릭하여 이미지를 확대, 축소 및 기본 크기로 재설정할 수 있습니다.

즉시 사용 가능한 뷰어 사전 설정 목록

다음 표는 Dynamic Media과 함께 제공되는 미리 정의된 즉시 사용 가능한 뷰어 사전 설정을 모두 식별합니다.

실시간 데모도 참조하십시오.

뷰어에 대해 지원되는 웹 브라우저 및 운영 체제 버전에 대한 자세한 내용은 뷰어 릴리스 정보를 검토할 수 있습니다.

뷰어 참조 안내서의 목차 중 "뷰어 릴리스 노트"를 참조하십시오.

노트

Dynamic Media의 모든 즉시 사용 가능한 뷰어 사전 설정이 이미 활성화(켜짐)되었지만 게시해야 합니다.
게시 뷰어 사전 설정을 참조하십시오.

만들고 추가하는 모든 새로운 뷰어 사전 설정은 활성화되어야 하며 *게시되어야 합니다.
뷰어 사전 설정 활성화 또는 비활성화게시 뷰어 사전 설정을 참조하십시오.

뷰어 사전 설정 제목 유형 CSS 파일 이름
회전판_점선_어둡게 회전판_세트 html5_carouselviewer_dotted_dark.css
회전판_점선_조명 회전판_세트 html5_carouselviewer_dotted_light.css
Carousel_Numeric_dark 회전판_세트 html5_carouselviewer_numeric_dark.css
Carousel_Numeric_light 회전판_세트 html5_carouselviewer_numeric_light.css
차원 차원 html5_dimensionalviewer.css
플라이아웃 플라이아웃_확대/축소 html5_flyoutviewer.css
ImageSet_dark 이미지 집합 html5_zoomviewer_dark.css
ImageSet_light 이미지 집합 html5_zoomviewer_light.css
InlineMixedMedia_dark 혼합_미디어 html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light 혼합_미디어 html5_inlinemixedmediaviewer_light.css
InlineZoom 플라이아웃_확대/축소 html5_inlinezoomviewer.css
MixedMedia_dark 혼합_미디어 html5_mixedmediaviewer_dark.css
MixedMedia_light 혼합_미디어 html5_mixedmediaviewer_light.css
파노라마 이미지 파노라마_이미지 html5_panoramicimage.css
PanoramicImageVR 파노라마_이미지 html5_panoramicimage.css
Shopperable_Banner Interactive_Image html5_interactiveimage.css
쇼퍼블_비디오_다크 Interactive_Video html5_interactivevideoviewer_dark.css
Shopperable_Video_light Interactive_Video html5_interactivevideovewer_light.css
SmartCropVideo Smart_Crop_Video html5_smartcropvideoviewer.css
SmartCropVideo_social Smart_Crop_Video html5_smartcropvideoviewersocial.css
회전 집합_어둡게 회전(_S) html5_spinviewer_dark.css
회전 집합_조명 회전(_S) html5_spinviewer_light.css

비디오

(자막 지원 포함)

비디오 html5_videoviewer.css

비디오360_social

(기본 비디오 재생 컨트롤 포함, 비디오 렌더링 작업은 스테레오 모드로 수행되고, 수동 POV 제어가 꺼져 있지만 GIP 제어가 켜지고 소셜 미디어 기능이 없는 경우)

Video_360 html5_video360viewersocial.css

Video360VR

(가상 현실 안경을 사용하는 최종 사용자를 위해 설계되었습니다. 기본 비디오 재생 컨트롤 및 소셜 미디어 기능 포함)

Video_360 html5_video360viewer.css

Video_social

(자막 및 소셜 미디어 지원 포함)

비디오 html5_videoviewersocial.css
Zoom_dark
확대/축소
html5_basiczoomviewer_dark.css
Zoom_light
확대/축소 html5_basiczoomviewer_light.css
ZoomVertical_dark
세로_확대/축소 html5_zoomverticalviewer_dark.css
ZoomVertical_light 세로_확대/축소 html5_zoomverticalviewer_light.css

지원되는 모바일 뷰어 제스처 매트릭스

다음 표는 iOS, Android 2.x 및 Android 3.x 장치에서 지원되는 모바일 뷰어 제스처를 나타냅니다.

제스처 플라이아웃 확대/축소 확대/축소 회전

드래그

탭하기

플라이아웃 창 표시

사용자 인터페이스를 표시하거나 숨깁니다.

사용자 인터페이스를 표시하거나 숨깁니다.

두 번 누르기

적용되지 않음

확대 또는 재설정

확대 또는 재설정

핀치 열기

적용되지 않음

확대(iOS 및 Android 3x 전용)

확대(iOS 및 Android 3x 전용)

핀치 닫기

적용되지 않음

축소(iOS 및 Android 3x 전용)

축소(iOS 및 Android 3x 전용)

밀기

견본 막대 스크롤하기

이미지 스크롤

회전

Flick

견본 막대 스크롤하기

이미지 스크롤

회전

을(를) 표시하는 뷰어 사전 설정 수 증가

AEM에서는 세부 사항 보기 > 뷰어에서 자산을 볼 때 다양한 뷰어 사전 설정을 표시합니다. 표시되는 뷰어 수를 늘리거나 줄일 수 있습니다.

표시되는 뷰어 사전 설정 수를 늘리려면

  1. CRXDE Lite(https://localhost:4502/crx/de)로 이동합니다.

  2. /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist의 뷰어 사전 설정 목록 노드로 이동합니다.

    chlimage_1-221

  3. limit 속성에서 기본적으로 15로 설정된 ​을 원하는 수로 변경합니다.

  4. 뷰어 사전 설정 데이터 소스(/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource)로 이동합니다.

    chlimage_1-222

  5. limit 속성에서 숫자를 원하는 숫자(예: {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]})로 변경합니다.

  6. 모두 저장을 탭합니다.

뷰어 사전 설정 만들기

뷰어 사전 설정을 만들면 다양한 설정을 적용하여 자산을 보고 상호 작용할 수 있습니다. 그러나 새 뷰어 사전 설정을 만들 필요는 없습니다. 원하는 경우 AEM Assets에 이미 포함되어 있는 기본 즉시 사용 가능한 뷰어 사전 설정을 사용할 수 있습니다.

새 뷰어 사전 설정을 만들도록 선택하는 경우, 저장한 후 [뷰어 사전 설정] 페이지에서 뷰어 상태가 자동으로 활성화됩니다(On​으로 설정). 이 상태는 Dynamic Media 구성 요소 및 대화형 미디어 구성 요소에서 그리고 이미지나 비디오를 미리 볼 때마다 표시되도록 합니다.

일부 뷰어 사전 설정에는 뷰어의 사용 및 전반적인 비헤이비어에 영향을 줄 수 있는 전용 설정이 있습니다. 만드는 뷰어 사전 설정에 따라 이러한 특별한 고려 사항을 알고 싶을 수 있습니다.

대화형 뷰어 사전 설정](#special-considerations-for-creating-an-interactive-viewer-preset)을 만들기 위한 특별한 고려 사항을 참조하십시오.[

회전판 배너 뷰어 사전 설정](#special-considerations-for-creating-a-carousel-banner-viewer-preset)을 만들기 위한 특별한 고려 사항을 참조하십시오.[

뷰어 사전 설정을 만들려면

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) > 자산 > 뷰어 사전 설정​을 누릅니다.

    6_5_viewerpresets

  2. 뷰어 사전 설정 페이지의 도구 모음에서 만들기.

  3. 새 뷰어 사전 설정 대화 상자의 사전 설정 이름 필드에 새 사전 설정의 이름을 입력합니다. 만들기를 탭한 후 편집할 수 없는 이름을 신중하게 선택합니다.

    이러한 단계 후에 사전 설정을 저장하면 [사전 설정 제목] 열 머리글 아래에 [뷰어 사전 설정] 페이지에 해당 이름이 표시됩니다.

  4. [리치 미디어 유형] 드롭다운 메뉴에서 만들려는 뷰어 사전 설정의 유형을 선택한 다음 페이지의 오른쪽 위 모서리에서 만들기를 누릅니다.

    뷰어 사전 설정에 대한 리치 미디어 유형을 참조하십시오.

  5. 뷰어 사전 설정 편집기 페이지에서 모양 탭을 누릅니다.

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

    • 선택한 유형 풀다운 메뉴에서 시각 디자인을 사용자 정의할 구성 요소를 선택합니다. 또는 뷰어에서 시각적 요소를 탭하거나 클릭하여 구성할 수 있습니다.

      시각적 편집기를 사용하면 특정 속성이 스타일에 어떤 영향을 주는지 확인할 수 있습니다. 편집기의 왼쪽에 있는 샘플을 사용하여 뷰어에 미치는 영향을 즉시 확인할 수 있도록 속성을 설정하거나 조정하기만 하면 됩니다.

      각 뷰어 사전 설정 유형에 대한 CSS 스타일 속성은 뷰어 참조 안내서의 "Customizing <viewer name> 뷰어" 도움말 항목에 설명되어 있습니다. 예를 들어 Mixed_Media 유형의 뷰어 사전 설정을 만드는 경우 각 속성의 목록과 설명은 혼합 미디어 뷰어 사용자 정의를 참조하십시오.

    • 별도의 CSS 파일에 스타일 설정을 정의한 경우 CSS 파일을 AEM Assets에 업로드할 수 있습니다. 업로드된 CSS 파일을 찾아 뷰어 사전 설정과 연결하려면 선택한 유형 풀다운 메뉴 아래에 있는 CSS 가져오기​를 탭합니다.(시각적 편집기를 위로 스크롤하여 보려면 스크롤해야 할 수도 있습니다).

      CSS 파일을 가져올 때 시각적 편집기는 CSS가 올바른 뷰어 마커를 사용하는지 확인합니다. 예를 들어 확대/축소 뷰어를 만드는 경우 가져오는 모든 CSS 규칙은 상위 뷰어 요소에 정의된 뷰어 클래스 이름 .s7mixedmediaviewer을 사용하여 정의해야 합니다.

      주어진 뷰어에 대한 CSS 마커를 올바르게 정의하는 한 임의의 손으로 만든 CSS를 가져올 수 있습니다. (CSS 마커는 뷰어 참조 안내서의 "Customizing <viewer name> 뷰어" 도움말 항목에 설명되어 있습니다. 예를 들어 확대/축소 뷰어의 CSS 마커에 대해 읽으려면 확대/축소 뷰어 사용자 정의를 참조하십시오.) 그러나 시각적 편집기가 일부 CSS 값을 이해하지 못할 수도 있습니다. 이러한 경우 시각적 편집기는 오류를 무시하여 CSS가 계속 작동할 수 있도록 합니다.

    노트

    CSS를 Raw 형식으로 직접 편집하려면 선택한 유형 풀다운 메뉴 아래에 있는 CSS 표시/숨기기​를 누릅니다(보기 위해 시각적 편집기를 위로 스크롤해야 할 수 있음).
    시각적 편집기와 마찬가지로 CSS에서 바로 속성을 변경하면 뷰어 샘플에 어떤 영향이 있는지 즉시 확인할 수 있습니다. 시각적 편집기에서 동일한 속성이 동시에 자동으로 업데이트됩니다. 이처럼 원시 CSS 편집기 또는 시각적 편집기를 사용하거나 두 가지 모두를 혼용하여 사용할 수 있습니다.

    노트

    버튼 아트웍의 경우 2x 이미지를 선택하고 고해상도 아트웍을 업로드합니다. 인터랙티브한 이미지 및 쇼퍼블 배너를 사용하여 작업할 때 즉시 사용 가능한 다양한 핫스팟 단추에서 선택할 수도 있습니다.

  7. (선택 사항) [뷰어 사전 설정 편집] 페이지의 위쪽 근처에 있는 데스크톱, 태블릿 또는 전화​를 탭하여 다른 장치 및 화면 유형에 대한 시각적 스타일을 고유하게 정의합니다.

  8. 뷰어 사전 설정 편집기 페이지에서 비헤이비어 탭을 누릅니다. 또는 뷰어에서 시각적 요소를 탭하거나 클릭하여 구성할 수 있습니다.

  9. 선택한 유형 풀다운 메뉴에서 동작을 변경할 구성 요소를 선택합니다.

    시각적 편집기의 많은 구성 요소에는 관련된 자세한 설명이 있습니다. 이러한 설명은 구성 요소를 확장하여 연관된 매개 변수를 표시할 때 파란색 상자에 표시됩니다.

    일부 뷰어 유형에는 IS 명령 텍스트 필드에서 이미지 제공 명령을 지정할 수 있는 구성 요소가 있습니다. 사용할 수 있는 명령 목록은 이미지 제공 API 참조를 참조하십시오.

    노트

    휴대폰 또는 태블릿과 같은 터치 장치를 사용하는 경우…

    텍스트 필드에 값을 입력한 후 사용자 인터페이스의 다른 부분을 눌러 변경 내용을 제출하고 가상 키보드를 닫습니다. Enter 키를 누르면 작업이 발생하지 않습니다.

  10. 페이지의 오른쪽 위 모서리 근처에 있는 저장을 탭합니다.

  11. 새 뷰어 사전 설정을 게시합니다. 웹 사이트에서 사전 설정을 사용하려면 먼저 사전 설정을 게시해야 합니다.

    게시 뷰어 사전 설정을 참조하십시오.

대화형 뷰어 사전 설정을(를) 만들기 위한 특수 고려 사항

패널의 이미지 축소판의 표시 모드 정보

대화형 비디오 뷰어 사전 설정을 만들거나 편집할 때 동작 탭 아래의 선택한 구성 요소 풀다운 메뉴에서 InteractiveSwatches을 선택하면 사용할 표시 모드 설정을 선택할 수 있습니다. 선택한 표시 모드는 비디오가 재생되는 동안 축소판이 표시되는 방법과 시기에 영향을 줍니다. segment표시 모드(기본값) 또는 continuous 표시 모드를 선택할 수 있습니다.

표시 모드 설명
세그먼트

Segment 은 사용자가 직접 만드는 기본 대화형 비디오 뷰어 사전 설정 Shoppable_Video_lightShoppable_Video_dark 및 모든 대화형 비디오 뷰어 사전 설정에 대한 기본 표시 모드입니다.

이 모드에서는 표시 패널에 표시된 별점의 수보다 비디오 세그먼트에 할당된 축소판이 더 적으면 다음 또는 이전 하위 세그먼트의 축소판은 패널의 빈 지점을 채우기 위해 가져오지 않습니다. 즉, 특정 비디오 세그먼트에 할당된 색상 견본의 표시를 유지합니다.

연속

continuous 표시 모드에서 세그먼트에 있는 축소판 수가 패널에 표시되는 축소판 수보다 적은 경우 뷰어는 마지막 축소판이 표시되는 경우 다음 세그먼트 또는 이전 세그먼트의 축소판 표시를 자동으로 포함합니다.

이 항목의 비디오는 continuous 표시 모드의 예입니다.

대화형 비디오 뷰어의 자동 스크롤 동작 정보

대화형 비디오 뷰어에서 축소판의 자동 스크롤 동작은 선택한 표시 모드와 독립적으로 작동합니다.

대화형 비디오 뷰어 사전 설정을 만들거나 편집할 때 [동작] 탭에서 [자동 스크롤]에 액세스합니다. 동작 탭의 선택한 구성 요소 드롭다운 메뉴에서 대화형 견본을 누릅니다. 자동 스크롤 확인란이 IS 명령(IS Command) 텍스트 필드 아래에 나열됩니다.

뷰어 사전 설정에서 자동 스크롤(확인란 지우기)을 비활성화하는 경우 사용자가 비디오를 재생하는 동안 패널에는 비디오 전체 길이에 대한 첫 번째 축소판 이미지만 표시됩니다. 그러나 원하는 경우 위/아래 화살표 아이콘을 사용하여 축소판을 수동으로 스크롤할 수 있습니다.

뷰어 사전 설정에서 자동 스크롤​을 활성화(선택)하면 비디오 재생 중에 비디오 세그먼트에 할당된 축소판 이미지가 세그먼트 시작 시 보기로 스크롤됩니다. 하지만 세그먼트 내 특정 축소판이 이전 또는 이후 다른 축소판의 두 배 이상 표시되는 경우가 있습니다. 이러한 동작은 세그먼트의 축소판 수가 패널에 표시되는 수보다 크고 균일하게 분할되지 않기 때문에 발생합니다.

표현하려면 30초 비디오 세그먼트가 1개 있다고 가정합니다. 30초 동안 표시할 총 9개의 축소판이 있습니다. 표시 패널에 4개의 축소판 위치가 표시되는 방식으로 브라우저 크기가 조정됩니다. 30초 비디오 시간 세그먼트는 3개의 하위 세그먼트로 분할됩니다. 다음 표는 지정된 시간 하위 세그먼트에 대해 축소판이 표시되는 분류를 보여줍니다.

비디오 하위 세그먼트 하위 세그먼트 시간(초) 패널에 표시되는 축소판
1 0-10 1, 2, 3, 4
2 10-20 4, 5, 6, 7
3 20-30 6, 7, 8, 9

비디오 하위 세그먼트 3은 할당된 축소판을 초과하지 않습니다. 또한 다른 축소판의 두 배만큼 패널에서 축소판 4, 6 및 7이 표시됩니다.

사용 가능한 위치의 수에 따라 뷰어에서 패널에 표시되는 축소판 수에 대해 사용하는 논리는 다음과 같습니다.

  • 하위 세그먼트 수 = 다음 하위 세그먼트로 반올림합니다(브라우저 창 크기에 따라 축소판 수 / 축소판 패널에 표시되는 슬롯 수).
    위의 표에서 예제를 사용하면, 9개의 축소판 / 4개의 슬롯 = 2.25가 됩니다.뷰어 논리는 최대 3개의 하위 세그먼트로 반올림합니다.

  • 축소판 수 = 다음 축소판(축소판 수 / 비디오 하위 세그먼트 수)로 둥글게 표시됩니다.
    위의 표에 나온 예제를 사용하여, 9개의 축소판 / 3개의 비디오 하위 세그먼트 = 3개의 축소판을 사용합니다.

  • 하위 세그먼트 지속 시간 = 총 비디오 지속 시간/비디오 하위 세그먼트 수입니다.
    위의 표에 나온 예제를 사용하여 30초 / 3개의 비디오 하위 세그먼트 = 각 비디오 하위 세그먼트의 10초 표시

회전판 배너 뷰어 사전 설정을 만들 때 다음과 같이 핫스팟 스타일을 변경할 수 있습니다.

설명 작업
핫스팟 아이콘 핫스팟에 사용되는 아이콘 변경 핫스팟 아이콘 이미지를 변경하려면 모양 탭의 선택한 구성 요소​에서 ImageMapEffect를 누릅니다. 아이콘 에서 배경 ​을 선택하고 이미지 필드 ​에서 원하는 배경 이미지를 탐색합니다.

뷰어 사전 설정 활성화 또는 비활성화

사용자 인터페이스에서 사용할 수 있는 뷰어 사전 설정은 작성자 모드에서 활성 상태인 설정에 따라 달라집니다. 기본적으로 뷰어 사전 설정은 만든 후 "켜기"입니다. 사전 설정을 끄면 [작성자] 모드에서 사전 설정이 표시되지 않습니다. 사전 설정이 게시된 경우 켜지거나 꺼지든 상관없이 항상 게시됩니다. 목록이 너무 복잡하거나 뷰어 사전 설정을 사용할 수 없도록 하려는 경우 뷰어 사전 설정을 비활성화할 수 있습니다.

뷰어 사전 설정을 활성화 또는 비활성화하려면

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) > 자산 > 뷰어 사전 설정을 누릅니다.

  2. 뷰어 사전 설정 페이지의 상태 열 헤더 아래에서 토글을 눌러 뷰어 사전 설정을 활성화하거나 비활성화합니다.

    활성화되는 뷰어 사전 설정은 파란색 상자 내에 전환을 오른쪽에 표시합니다.비활성화된 뷰어 사전 설정에는 밝은 회색 상자 안에 토글이 표시됩니다.

게시 뷰어 사전 설정

뷰어 사전 설정의 상태를 활성화(또는 "켜기")하는 것은 Dynamic Media 구성 요소, Interactive Media 구성 요소에서 그리고 자산을 볼 때마다 해당 사전 설정이 표시된다는 것을 의미합니다.

그러나 뷰어 사전 설정이 있는 에셋을 제공하려면 뷰어 사전 설정도 게시해야 합니다.* 자산에 대한 URL 또는 포함 코드를 얻으려면 모든 뷰어 사전 설정을 활성화하거나 *게시해야 합니다. Dynamic Media과 함께 제공되는 모든 기본 뷰어 사전 설정을 활성화하고 게시해야 합니다. 만들고 추가하는 사용자 정의 뷰어 사전 설정은 자동 활성화되지만 게시되어야 합니다.

뷰어 사전 설정 활성화 또는 비활성화를 참조하십시오.

자산 미리 보기를 참조하십시오.

뷰어 사전 설정을 게시하려면

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) > 자산 > 뷰어 사전 설정을 누릅니다.
  2. 게시할 뷰어 사전 설정을 하나 이상 선택합니다.
  3. 도구 모음에서 게시 아이콘을 누릅니다.

뷰어 사전 설정 정렬

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) > 자산 > 뷰어 사전 설정을 누릅니다.
  2. 사전 설정 제목, 유형, 게시된 또는 상태​을 클릭하여 해당 열 제목을 기준으로 정렬합니다. 예를 들어 유형​을 클릭하여 뷰어 사전 설정 유형을 알파벳 순 또는 역 알파벳순으로 정렬합니다.

뷰어 사전 설정 편집

기본적으로 제공되는 사전 정의된 뷰어 사전 설정​을 편집하면 지원되는 시나리오가 아닙니다. 즉시 사용 가능한 뷰어 사전 설정을 편집하는 경우 새 이름으로 저장하라는 메시지가 표시됩니다.

뷰어 사전 설정을 편집하려면

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) > 자산 > 뷰어 사전 설정을 누릅니다.

  2. 뷰어 사전 설정 제목 왼쪽에 있는 상자를 선택하여 사전 설정을 선택합니다.

  3. 도구 모음에서 편집을 누릅니다.

  4. 뷰어 사전 설정 편집기 페이지에서 모양동작 탭에 있는 옵션을 사용하여 뷰어 사전 설정에 대한 변경 작업을 수행합니다.

    [뷰어 사전 설정 편집기] 페이지의 왼쪽 위 모서리 근처에 있는 모양 탭에서 데스크톱, 태블릿 또는 Phone​을 탭하여 자산의 프레젠테이션 모드를 변경합니다.

  5. 페이지의 오른쪽 위 모서리 근처에 있는 다음 중 하나를 수행합니다.

    • 저장​을 눌러 변경 내용을 저장하고 뷰어 사전 설정 페이지로 돌아갑니다.
    • 취소​를 눌러 변경 사항을 무효화하고 뷰어 사전 설정 페이지로 돌아갑니다.

사용자 정의 뷰어 사전 설정 삭제

만들고 Dynamic Media에 추가한 뷰어 사전 설정을 삭제할 수 있습니다.

사용자 정의 뷰어 사전 설정을 삭제하려면

  1. AEM의 왼쪽 위 모서리에서 AEM 로고를 누른 다음 왼쪽 레일에서 도구(망치 아이콘) 자산 > 뷰어 사전 설정을 누릅니다.
  2. [뷰어 사전 설정] 페이지에서 사전 설정 제목을 선택한 다음 휴지통 아이콘을 누릅니다.
  3. 삭제를 누릅니다.

자산에 뷰어 사전 설정 적용

자산과 선택한 뷰어를 모두 이미 게시한 경우 뷰어 사전 설정을 선택하면 URL포함 단추가 표시됩니다.

자산에 뷰어 사전 설정을 적용하려면

  1. 자산을 열고 페이지의 왼쪽 위 모서리 근처에 있는 드롭다운 메뉴를 누른 다음 뷰어를 선택합니다.

    노트

    자산과 선택한 뷰어를 모두 이미 게시한 경우 뷰어 사전 설정을 선택하면 URL포함 단추가 표시됩니다.

  2. 왼쪽 창에서 뷰어 사전 설정을 선택하여 자산에 적용합니다.

    URL을 복사하여 다른 사용자와을(를) 공유할 수 있습니다.

뷰어 사전 설정을(를) 사용하여 에셋 제공

뷰어 사전 설정에 대한 URL을 가져오려면 웹 응용 프로그램에 URL 연결을 참조하십시오. 웹 페이지에 비디오 뷰어 포함](/docs/experience-manager-65/assets/embed-code.html?lang=ko)을 참조하십시오.[

AEM을 WCM으로 사용하는 경우 페이지에 있는 뷰어 사전 설정을 사용하여 자산을 추가할 수 있습니다. 페이지에 Dynamic Media 자산 추가를 참조하십시오.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now