회전 갤러리 구성요소

AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.

회전 갤러리 구성요소는 여러 이미지를 스와이프할 수 있는 회전식 갤러리를 만듭니다. 구성요소 속성을 수정하여 다양한 3D 환경 및 회전 유형을 만드세요. 동적 광고에서도 회전 갤러리를 사용할 수 있습니다.

올바른 갤러리 선택하기

Google Web Designer에는 다음과 같은 네 가지 갤러리 구성요소가 있습니다.

• 360° 갤러리는 여러 면의 개체 이미지를 표시하며, 앞뒤로 스와이프하여 개체를 회전할 수 있습니다. 360° 갤러리에는 그룹 또는 탐색 요소가 표시되지 않습니다.
• 스와이프할 수 있는 갤러리는 단순하고 평면적이며, 이미지 또는 그룹을 세로 또는 가로로 스와이프할 수 있습니다.
• 회전 갤러리는 스와이프할 수 있는 갤러리와 비슷하지만 주변 이미지에 3D 느낌을 부여하여, 주변 이미지가 회전하는 디스플레이에 있는 것처럼 보입니다.
• 전환 갤러리는 이미지 간에 전환하면서 다양한 애니메이션 효과를 제공합니다.

프로젝트에서 회전 갤러리를 사용하는 방법:

1. 구성요소 패널에 이어 갤러리 폴더를 엽니다.

2. 회전 갤러리 구성요소를 스테이지로 드래그합니다.

3. 속성 패널의 회전 갤러리 속성 섹션에서 구성요소의 이름을 지정합니다.

4. 이미지 모음이나 그룹 모음을 추가합니다. 그룹을 사용하면 이미지 이외의 요소를 표시하거나 단일 프레임에 여러 요소를 표시할 수 있습니다.

   • 갤러리에 이미지를 추가하려면 다음 방법 중 하나를 사용합니다.
     • 속성 패널의 회전 갤러리 속성 섹션에서 이미지 입력란의 갤러리 이미지 선택 버튼을 클릭합니다. 이미지 선택 버튼을 클릭하여 이미지 파일을 찾거나 파일을 대화상자로 바로 드래그합니다.
     • 속성 패널의 회전 갤러리 속성 섹션에서 이미지 URL을 쉼표로 구분하여 이미지 입력란에 추가합니다.
   • 그룹을 갤러리에 추가하는 방법:
     • 속성 패널의 회전 갤러리 속성 섹션에서 그룹 이름 목록을 쉼표로 구분하여 그룹 입력란에 추가합니다.

5. 아니면 추가 구성요소 속성을 조정합니다(아래 설명 참조).

갤러리에서 이미지를 재정렬하거나 삭제하는 방법:

1. 속성 패널의 회전 갤러리 속성 섹션에서 갤러리 이미지 선택 버튼을 클릭합니다.
2. 이미지를 새 위치로 드래그하여 재정렬하거나 마우스를 이미지 위로 가져간 후 삭제 버튼을 클릭하여 갤러리에서 이미지를 삭제합니다.
3. 확인을 클릭합니다.

속성

속성	설명
이름	회전 갤러리 이름을 설정합니다.
이미지	갤러리에서 사용할 이미지를 선택할 수 있습니다. 동적 데이터에 결합될 수 있습니다.
그룹	갤러리에 사용할 쉼표로 구분된 그룹 목록입니다. 동적 데이터에 결합될 수 있습니다.
전환	이미지 사이의 전환 시간(밀리초)입니다.
시작 프레임	처음에 표시할 이미지의 수입니다.
자동재생	선택하는 경우 갤러리의 이미지가 자동으로 재생됩니다.
내비게이션 포함	선택하는 경우 갤러리를 이동하기 위한 내비게이션 아이콘이 포함됩니다.
썸네일 이미지 사용	'탐색 포함'과 함께 선택하는 경우 아이콘이 아닌 탐색을 위한 썸네일 이미지가 표시됩니다.
강조표시 색상	내비게이션 이미지의 강조표시 색상을 설정합니다.
크기 조절	고정된 프레임 크기 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다. 이미지의 크기를 조절하여 맞추기 - 이미지의 크기를 자르지 않고 필요에 따라 프레임에 맞게 같은 비율로 조절합니다. 이미지의 가로 세로 비율과 프레임이 다른 경우 패딩이 추가됩니다. 이미지를 잘라 채우기 - 프레임의 가로 세로 비율과 이미지가 다른 경우 이미지를 잘라 이미지의 크기를 조절하여 프레임을 완전히 채웁니다. 없음 - 이미지가 프레임 중앙에 원본 크기로 표시됩니다. 이미지가 프레임보다 작은 경우 여분의 공간에 투명하게 패딩이 추가됩니다. 이미지가 더 큰 경우에는 이미지가 잘립니다. 이미지를 확대하여 채우기 - 필요에 따라 이미지를 자르지 않고 프레임 크기에 맞게 이미지 크기를 조절하고 확대합니다.

고급 속성

고급 속성을 표시하려면 구성요소 속성 창의 고급 속성 옆에 있는 확장 아이콘 을 클릭합니다.

프레임 너비	갤러리 내 이미지 프레임의 너비(픽셀)입니다.
프레임 높이	갤러리 내 이미지 프레임의 높이(픽셀)입니다.
주변 프레임 회전	주변 프레임에 적용되는 회전 정도입니다.
주변 프레임 구분	프레임 사이의 간격입니다.
주변 세로 오프셋	주변 프레임이 표시되는 높이입니다.
주변 프레임 크기	주변 이미지의 상대적인 크기입니다.
이탈 URL	쉼표로 구분된 URL 목록으로 갤러리의 각 프레임에 해당합니다. 동적 데이터에 결합될 수 있습니다.
반사 표시(WebKit)	선택하는 경우 이미지의 반사가 표시됩니다. 반사는 WebKit 브라우저에서만 지원됩니다.
프레임을 벗어나면 미디어 일시중지	선택하면 프레임이 변경될 때마다 현재 프레임에서 재생 중인 오디오나 동영상을 일시중지하여 배경에서 원하지 않는 콘텐츠가 재생되지 않도록 합니다.
프레임에 들어오면 미디어 재개	선택하면 프레임이 변경될 때마다 향후 프레임에서 일시정지된 모든 오디오나 동영상이 다시 재생되어 배경에서 원하지 않는 콘텐츠가 재생되지 않도록 합니다.

이벤트 및 작업

회전 갤러리 구성요소에서 전송하는 이벤트

다음과 같은 회전 갤러리 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.

이벤트	설명
첫 번째 상호작용	사용자가 갤러리와 처음으로 상호작용할 때 전송됩니다.
모든 프레임을 확인함	갤러리의 모든 프레임이 1회 이상 표시되었을 때 전송됩니다.
이미지 로드됨	갤러리의 모든 프레임이 로드되었을 때 전송됩니다.
자동재생이 종료됨	자동재생 종료 시 전송됩니다.
표시된 프레임	새로운 각 프레임이 완전히 표시되었을 때 전송됩니다.
프레임 활성화됨	프레임 변경이 시작될 때 전송됩니다.
프레임이 자동재생됨	프레임에 자동재생이 활성화되었을 때 전송됩니다.
프레임 탭	프레임을 클릭했을 때 전송됩니다.
왼쪽 끝	스와이프 후 갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
오른쪽 끝	스와이프 후 갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.
추적 시작	마우스 커서 또는 터치 드래그가 시작되면 전송됩니다.
추적	구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다.
추적 종료	마우스 커서 또는 터치 드래그가 종료되면 전송됩니다.

이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 회전 갤러리 구성요소를 타겟으로 설정하세요.

회전 갤러리 구성요소에서 수행하는 이벤트

다른 이벤트에 대한 반응으로 다음과 같은 회전 갤러리 구성요소 작업이 트리거될 수 있습니다.

작업	구성 옵션
프레임으로 이동	색인 애니메이션 - 'none' 또는 'slide'
앞으로 이동	애니메이션 - 'none' 또는 'slide'
뒤로 이동	애니메이션 - 'none' 또는 'slide'
1회 회전	회전 시간 - 시간(밀리초) 방향 - 'forwards' 또는 'backwards'
회전 중지	없음

이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 회전 갤러리 구성요소를 수신자로 설정하세요.

이벤트 구성 방법 알아보기

미리보기

스테이지의 회전 갤러리에는 구성요소가 어떻게 표시될지 알 수 있게 해주는 시작 프레임만 표시됩니다. 완전히 렌더링된 구성요소가 작동하는 모습을 보려면 오른쪽 상단의 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 합니다.