AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
360° 갤러리 요소를 사용하면 여러 이미지 모음을 사용하여 개체 회전을 표시할 수 있습니다. 기본적으로 마지막 이미지가 첫 번째 이미지에 래핑되므로 사용자는 개체를 양쪽으로 원활하게 회전할 수 있습니다.
다음의 예에서는 7개의 소스 이미지가 사용되었습니다.
올바른 갤러리 선택하기
Google Web Designer에는 다음과 같은 네 가지 갤러리 구성요소가 있습니다.
- 360° 갤러리는 여러 면의 개체 이미지를 표시하며, 앞뒤로 스와이프하여 개체를 회전할 수 있습니다. 360° 갤러리에는 그룹 또는 탐색 요소가 표시되지 않습니다.
- 스와이프할 수 있는 갤러리는 단순하고 평면적이며, 이미지 또는 그룹을 세로 또는 가로로 스와이프할 수 있습니다.
- 회전 갤러리는 스와이프할 수 있는 갤러리와 비슷하지만 주변 이미지에 3D 느낌을 부여하여, 주변 이미지가 회전하는 디스플레이에 있는 것처럼 보입니다.
- 전환 갤러리는 이미지 간에 전환하면서 다양한 애니메이션 효과를 제공합니다.
프로젝트에서 360° 갤러리를 사용하는 방법:
-
구성요소 패널에 이어 갤러리 폴더를 엽니다.
-
360° 갤러리 구성요소를 스테이지로 드래그합니다.
-
속성 패널의 360° 갤러리 속성 섹션에서 구성요소의 이름을 지정합니다.
-
다음 방법 중 하나를 사용하여 이미지를 갤러리에 추가합니다.
- 속성 패널의 360° 갤러리 속성 섹션에서 이미지 입력란의 갤러리 이미지 선택 버튼을 클릭합니다. 이미지 선택 버튼을 클릭하여 이미지 파일을 찾거나 파일을 대화상자로 바로 드래그합니다.
- 속성 패널의 360° 갤러리 속성 섹션에서 이미지 URL을 쉼표로 구분하여 이미지 입력란에 추가합니다.
-
아니면 추가 속성을 조정합니다(아래 설명 참조).
갤러리에서 이미지를 재정렬하거나 삭제하는 방법:
- 속성 패널의 360° 갤러리 속성 섹션에서 갤러리 이미지 선택 버튼을 클릭합니다.
- 이미지를 새 위치로 드래그하여 재정렬하거나 마우스를 이미지로 가져간 후 삭제 버튼을 클릭하여 갤러리에서 이미지를 삭제합니다.
- 확인을 클릭합니다.
속성
속성 | 설명 |
---|---|
이름 | 구성요소의 이름입니다. |
이미지 | 갤러리에 표시할 쉼표로 구분된 이미지 URL입니다. 동적 데이터에 결합될 수 있습니다. |
자동재생 | 선택하면 갤러리의 각 이미지가 자동으로 차례대로 표시됩니다. |
래핑 | 선택하면 갤러리가 양쪽 끝(첫 번째 이미지와 마지막 이미지)에서 래핑됩니다. |
이벤트 및 작업
360° 갤러리 구성요소에서 전송한 이벤트다음과 같은 360° 갤러리 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
이벤트 | 설명 |
---|---|
첫 번째 상호작용 | 사용자가 갤러리와 처음으로 상호작용할 때 전송됩니다. |
모든 프레임을 확인함 | 갤러리의 모든 프레임이 1회 이상 표시되었을 때 전송됩니다. |
이미지 로드됨 | 갤러리의 모든 프레임이 로드되었을 때 전송됩니다. |
표시된 프레임 | 새로운 각 프레임이 완전히 표시되었을 때 전송됩니다. |
프레임 활성화됨 | 프레임 변경이 시작될 때 전송됩니다. |
프레임 탭 | 프레임을 클릭하면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 360° 갤러리 구성요소를 타겟으로 설정하세요.
다른 이벤트에 대한 반응으로 다음과 같은 360° 갤러리 구성요소 작업이 트리거될 수 있습니다.
작업 | 구성 옵션 |
---|---|
프레임으로 이동 |
|
1회 회전 |
|
앞으로 이동 | 없음 |
뒤로 이동 | 없음 |
이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 360° 갤러리 구성요소를 수신자로 설정하세요.
이벤트 구성 방법 알아보기
미리보기
스테이지의 360° 갤러리에는 구성요소가 어떻게 표시될지 알 수 있게 해주는 시작 프레임만 표시됩니다. 완전히 렌더링된 구성요소가 작동하는 모습을 보려면 오른쪽 상단의 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 합니다.