스와이프할 수 있는 갤러리 구성요소

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

스와이프할 수 있는 갤러리 구성요소를 사용하면 사용자가 앞뒤로 스와이프하여 다양한 이미지 모음 또는 다양한 그룹 모음을 표시할 수 있는 간단한 갤러리를 생성할 수 있습니다. 스와이프할 수 있는 갤러리는 동적 광고에서 사용할 수 있습니다.

올바른 갤러리 선택하기

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

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

스와이프할 수 있는 갤러리를 사용하는 방법:

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

2. '스와이프할 수 있는 갤러리 ' 구성요소를 스테이지로 드래그합니다.

3. '속성' 패널의 '스와이프할 수 있는 갤러리' 속성 섹션에서 구성요소의 이름을 지정합니다.

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

   • 이미지를 추가하려면 다음 방법 중 하나를 사용합니다.

     • 속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 이미지의 URL을 쉼표로 구분하여 이미지 입력란에 추가합니다.

     • 속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 갤러리 이미지 선택 버튼을 클릭합니다. 파일 선택 버튼을 클릭하여 이미지 파일을 찾거나 파일을 바로 대화상자로 드래그합니다.

   • 그룹을 갤러리에 추가하는 방법:

     • 속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 그룹 이름 목록을 쉼표로 구분하여 그룹 입력란에 추가합니다.

5. 원하는 경우 구성요소 속성을 조정합니다(아래 설명 참조).

스와이프할 수 있는 갤러리에서 그룹 사용하기

스와이프할 수 있는 갤러리는 이미지 또는 그룹 모음을 포함할 수 있습니다. 그룹을 사용하면 이미지가 아닌 애셋(동영상 등)이나 갤러리의 단일 프레임에 있는 여러 애셋(텍스트 자막이 포함된 이미지 등)을 사용할 수 있습니다.

동영상이나 다른 양방향 애셋을 사용하는 경우 '속성' 패널에서 '스와이프 사용 중지'를 선택합니다. 그래야 사용자가 동영상 컨트롤과 상호작용할 수 있습니다. 갤러리 탐색 구성요소를 사용하여 사용자가 갤러리 프레임 간에 이동하도록 할 수 있습니다.

이미지와 그룹을 조합하여 표시하는 갤러리를 생성하려면 사용하려는 이미지를 먼저 그룹으로 변환하세요.

그룹을 사용하여 갤러리에 여러 동적 요소를 표시할 수도 있습니다.

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

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

속성

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

고급 속성

고급 속성을 표시하려면 구성요소 속성 창에서 '고급 속성'의 확장 아이콘 을 클릭하세요.

고급 속성	설명
프레임 오프셋	이미지 사이의 거리입니다.
프레임 너비	갤러리 내 이미지 프레임의 너비(픽셀)입니다.
프레임 높이	갤러리 내 이미지 프레임의 높이(픽셀)입니다.
자동재생 시간	갤러리가 처음부터 마지막 프레임까지 재생되는 시간(초)입니다. 별도의 자동재생 단계 간격을 선택하지 않으면 이 시간은 각 이미지 간에 균등하게 분할됩니다.
자동재생 단계 간격	자동재생이 사용 설정된 경우 각 이미지가 표시되는 시간(밀리초)입니다. 총 자동재생 시간에 도달할 때까지 이미지가 이 시간으로 재생되며 필요한 경우 이미지가 여러 회에 걸쳐 순환게재됩니다.
이탈 URL	쉼표로 구분된 URL 목록으로 갤러리의 각 프레임에 해당합니다. 동적 데이터에 결합될 수 있습니다.
스와이프 사용 중지	체크박스를 통해 갤러리의 스와이프 내비게이션을 사용 중지할 수 있습니다. 이렇게 하면 사용자가 실수로 프레임을 변경하는 상호작용을 방지하고 프레임의 요소와 상호작용할 수 있습니다. 체크박스가 선택되어 있으면 '탐색 포함' 속성 또는 갤러리 탐색 구성요소를 사용하여 프레임을 변경할 수 있습니다.
프레임을 벗어나면 미디어 일시중지	이 속성을 선택하면 프레임이 변경되는 경우 현재 프레임에서 재생 중인 오디오나 동영상이 일시중지되어 배경에서 원하지 않는 콘텐츠가 재생되지 않습니다.
프레임에 들어오면 미디어 재개	이 속성을 선택하면 프레임이 활성화될 때마다 향후 프레임에서 일시중지된 오디오 나 동영상이 시작됩니다.

이벤트 및 작업

스와이프할 수 있는 갤러리 구성요소에서 전송하는 이벤트

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

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

이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 스와이프할 수 있는 갤러리 구성요소를 타겟으로 설정하세요.

스와이프할 수 있는 갤러리 구성요소에서 수행하는 작업

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

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

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

이벤트 구성 방법 알아보기

미리보기

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